@kontakto/email-template-editor 1.3.2 → 1.4.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import DOMPurify from 'dompurify';
 import { marked, Renderer } from 'marked';
-import React81, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, Fragment } from 'react';
+import React82, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, Fragment } from 'react';
 import { z } from 'zod';
 import { renderToStaticMarkup as renderToStaticMarkup$1 } from 'react-dom/server';
 import { createTheme, alpha, lighten, darken } from '@mui/material/styles';
 import { MenuItem, Stack, ThemeProvider, CssBaseline, useTheme, Drawer, Box, Tabs, Tab, Typography, CircularProgress, Divider as Divider$1, ToggleButtonGroup, ToggleButton, Tooltip, Snackbar, Button as Button$1, IconButton, Dialog, DialogTitle, DialogContent, TextField, DialogActions, InputLabel, FormControlLabel, Switch, Menu, Slider, ButtonBase, Paper, Fade } from '@mui/material';
 import { create } from 'zustand';
-import { MonitorOutlined, PhoneIphoneOutlined, EditOutlined, PreviewOutlined, CodeOutlined, DataObjectOutlined, Add, SaveOutlined, LastPageOutlined, AppRegistrationOutlined, ContentCopyOutlined, DeleteOutlined, FirstPageOutlined, MenuOutlined, FileDownloadOutlined, RoundedCornerOutlined, HeightOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, AspectRatioOutlined, AddOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, TextFieldsOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined, LibraryAddOutlined } from '@mui/icons-material';
+import { MonitorOutlined, PhoneIphoneOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, Add, SaveOutlined, LastPageOutlined, AppRegistrationOutlined, ContentCopyOutlined, DeleteOutlined, FirstPageOutlined, MenuOutlined, FileDownloadOutlined, RoundedCornerOutlined, HeightOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, AspectRatioOutlined, AddOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, TextFieldsOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, HorizontalRuleOutlined, Crop32Outlined, HtmlOutlined, ViewColumnOutlined, LibraryAddOutlined } from '@mui/icons-material';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
 import hljs from 'highlight.js';
 import jsonHighlighter from 'highlight.js/lib/languages/json';
@@ -159,7 +159,7 @@ function renderMarkdownString(str) {
 function EmailMarkdown(_a) {
   var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
   const data = useMemo(() => renderMarkdownString(markdown), [markdown]);
-  return /* @__PURE__ */ React81.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
+  return /* @__PURE__ */ React82.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
 }
 var FONT_FAMILY_SCHEMA = z.enum([
   "MODERN_SANS",
@@ -235,9 +235,9 @@ function Text({ style, props }) {
   };
   const text = (_f = props == null ? void 0 : props.text) != null ? _f : TextPropsDefaults.text;
   if (props == null ? void 0 : props.markdown) {
-    return /* @__PURE__ */ React81.createElement(EmailMarkdown, { style: wStyle, markdown: text });
+    return /* @__PURE__ */ React82.createElement(EmailMarkdown, { style: wStyle, markdown: text });
   }
-  return /* @__PURE__ */ React81.createElement("div", { style: wStyle }, text);
+  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, text);
 }
 var PADDING_SCHEMA2 = z.object({
   top: z.number(),
@@ -286,7 +286,7 @@ function Avatar({ style, props }) {
     textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
     padding: getPadding2(style == null ? void 0 : style.padding)
   };
-  return /* @__PURE__ */ React81.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React82.createElement(
     "img",
     {
       alt,
@@ -434,14 +434,14 @@ function Button({ style, props }) {
     padding: `${padding[0]}px ${padding[1]}px`,
     textDecoration: "none"
   };
-  return /* @__PURE__ */ React81.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React81.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React82.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React82.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
         __html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`
       }
     }
-  ), /* @__PURE__ */ React81.createElement("span", null, text), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement("span", null, text), /* @__PURE__ */ React82.createElement(
     "span",
     {
       dangerouslySetInnerHTML: {
@@ -490,7 +490,7 @@ function ColumnsContainer({ style, columns, props }) {
     contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
     fixedWidths: props == null ? void 0 : props.fixedWidths
   };
-  return /* @__PURE__ */ React81.createElement("div", { style: wStyle }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, /* @__PURE__ */ React82.createElement(
     "table",
     {
       align: "center",
@@ -499,7 +499,7 @@ function ColumnsContainer({ style, columns, props }) {
       border: 0,
       style: { tableLayout: "fixed", borderCollapse: "collapse" }
     },
-    /* @__PURE__ */ React81.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React81.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React81.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React81.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React81.createElement(TableCell, { index: 2, props: blockProps, columns })))
+    /* @__PURE__ */ React82.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React82.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React82.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React82.createElement(TableCell, { index: 2, props: blockProps, columns })))
   ));
 }
 function TableCell({ index, props, columns }) {
@@ -517,7 +517,7 @@ function TableCell({ index, props, columns }) {
     width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
   };
   const children = (_e = columns && columns[index]) != null ? _e : null;
-  return /* @__PURE__ */ React81.createElement("td", { style }, children);
+  return /* @__PURE__ */ React82.createElement("td", { style }, children);
 }
 function getPaddingBefore(index, { columnsGap, columnsCount }) {
   if (index === 0) {
@@ -579,9 +579,9 @@ function Container({ style, children }) {
     padding: getPadding5(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React81.createElement("div", { style: wStyle });
+    return /* @__PURE__ */ React82.createElement("div", { style: wStyle });
   }
-  return /* @__PURE__ */ React81.createElement("div", { style: wStyle }, children);
+  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, children);
 }
 var container_default = Container;
 var COLOR_SCHEMA5 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
@@ -615,7 +615,7 @@ function Divider({ style, props }) {
   };
   const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
   const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
-  return /* @__PURE__ */ React81.createElement("div", { style: st }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { style: st }, /* @__PURE__ */ React82.createElement(
     "hr",
     {
       style: {
@@ -705,11 +705,11 @@ function Heading({ props, style }) {
   };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React81.createElement("h1", { style: hStyle }, text);
+      return /* @__PURE__ */ React82.createElement("h1", { style: hStyle }, text);
     case "h2":
-      return /* @__PURE__ */ React81.createElement("h2", { style: hStyle }, text);
+      return /* @__PURE__ */ React82.createElement("h2", { style: hStyle }, text);
     case "h3":
-      return /* @__PURE__ */ React81.createElement("h3", { style: hStyle }, text);
+      return /* @__PURE__ */ React82.createElement("h3", { style: hStyle }, text);
   }
 }
 function getFontSize(level) {
@@ -791,9 +791,9 @@ function Html({ style, props }) {
     padding: getPadding8(style == null ? void 0 : style.padding)
   };
   if (!children) {
-    return /* @__PURE__ */ React81.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React82.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React81.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
+  return /* @__PURE__ */ React82.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
 }
 var html_default = Html;
 var PADDING_SCHEMA9 = z.object({
@@ -829,7 +829,7 @@ function Image({ style, props }) {
   const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
   const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
   const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
-  const imageElement = /* @__PURE__ */ React81.createElement(
+  const imageElement = /* @__PURE__ */ React82.createElement(
     "img",
     {
       alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
@@ -849,9 +849,9 @@ function Image({ style, props }) {
     }
   );
   if (!linkHref) {
-    return /* @__PURE__ */ React81.createElement("div", { style: sectionStyle }, imageElement);
+    return /* @__PURE__ */ React82.createElement("div", { style: sectionStyle }, imageElement);
   }
-  return /* @__PURE__ */ React81.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React81.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
+  return /* @__PURE__ */ React82.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React82.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
 }
 var image_default = Image;
 var SpacerPropsSchema = z.object({
@@ -868,13 +868,13 @@ function Spacer({ props }) {
   const style = {
     height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
   };
-  return /* @__PURE__ */ React81.createElement("div", { style });
+  return /* @__PURE__ */ React82.createElement("div", { style });
 }
 var spacer_default = Spacer;
 function buildBlockComponent(blocks) {
   return function BlockComponent({ type, data }) {
     const Component = blocks[type].Component;
-    return /* @__PURE__ */ React81.createElement(Component, __spreadValues({}, data));
+    return /* @__PURE__ */ React82.createElement(Component, __spreadValues({}, data));
   };
 }
 function buildBlockConfigurationSchema(blocks) {
@@ -911,9 +911,9 @@ function ColumnsContainerReader({ style, props }) {
   const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
   let cols = void 0;
   if (columns) {
-    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React81.createElement(ReaderBlock, { key: childId, id: childId })));
+    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React82.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React81.createElement(columns_container_default, { props: restProps, columns: cols, style });
+  return /* @__PURE__ */ React82.createElement(columns_container_default, { props: restProps, columns: cols, style });
 }
 var ContainerPropsSchema2 = z.object({
   style: ContainerPropsSchema.shape.style,
@@ -924,7 +924,7 @@ var ContainerPropsSchema2 = z.object({
 function ContainerReader({ style, props }) {
   var _a;
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React81.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React81.createElement(ReaderBlock, { key: childId, id: childId })));
+  return /* @__PURE__ */ React82.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React82.createElement(ReaderBlock, { key: childId, id: childId })));
 }
 var COLOR_SCHEMA8 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
 var FONT_FAMILY_SCHEMA5 = z.enum([
@@ -979,7 +979,7 @@ function getBorder2({ borderColor }) {
 function EmailLayoutReader(props) {
   var _a, _b, _c, _d, _e;
   const childrenIds = (_a = props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "div",
     {
       style: {
@@ -996,7 +996,7 @@ function EmailLayoutReader(props) {
         width: "100%"
       }
     },
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       "table",
       {
         align: "center",
@@ -1013,7 +1013,7 @@ function EmailLayoutReader(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React81.createElement("tbody", null, /* @__PURE__ */ React81.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React81.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React81.createElement(ReaderBlock, { key: childId, id: childId })))))
+      /* @__PURE__ */ React82.createElement("tbody", null, /* @__PURE__ */ React82.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React82.createElement(ReaderBlock, { key: childId, id: childId })))))
     )
   );
 }
@@ -1025,7 +1025,7 @@ function useReaderDocument() {
 }
 function ReaderBlock({ id }) {
   const document2 = useReaderDocument();
-  return document2[id] ? /* @__PURE__ */ React81.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
+  return document2[id] ? /* @__PURE__ */ React82.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
 }
 var READER_DICTIONARY = buildBlockConfigurationDictionary({
   ColumnsContainer: {
@@ -1078,15 +1078,149 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
 var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 function Reader({ document: document2, rootBlockId }) {
-  return /* @__PURE__ */ React81.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React81.createElement(ReaderBlock, { id: rootBlockId }));
+  return /* @__PURE__ */ React82.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React82.createElement(ReaderBlock, { id: rootBlockId }));
 }
 
 // src/email-builder/renderers/render-to-static-markup.tsx
 function renderToStaticMarkup(document2, { rootBlockId }) {
   return "<!DOCTYPE html>" + renderToStaticMarkup$1(
-    /* @__PURE__ */ React81.createElement("html", null, /* @__PURE__ */ React81.createElement("body", null, /* @__PURE__ */ React81.createElement(Reader, { document: document2, rootBlockId })))
+    /* @__PURE__ */ React82.createElement("html", null, /* @__PURE__ */ React82.createElement("body", null, /* @__PURE__ */ React82.createElement(Reader, { document: document2, rootBlockId })))
   );
 }
+
+// src/email-builder/renderers/render-to-text.ts
+function renderToText(document2, { rootBlockId }) {
+  const lines = [];
+  renderBlock(document2, rootBlockId, lines);
+  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+}
+function renderBlock(document2, blockId, lines) {
+  var _a;
+  const block = document2[blockId];
+  if (!block) return;
+  const { type, data } = block;
+  switch (type) {
+    case "EmailLayout":
+      renderChildren(document2, data == null ? void 0 : data.childrenIds, lines);
+      break;
+    case "Container":
+      renderChildren(document2, (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.childrenIds, lines);
+      break;
+    case "ColumnsContainer":
+      renderColumnsContainer(document2, data, lines);
+      break;
+    case "Text":
+      renderText(data, lines);
+      break;
+    case "Heading":
+      renderHeading(data, lines);
+      break;
+    case "Button":
+      renderButton(data, lines);
+      break;
+    case "Image":
+      renderImage(data, lines);
+      break;
+    case "Avatar":
+      renderAvatar(data, lines);
+      break;
+    case "Html":
+      renderHtml(data, lines);
+      break;
+    case "Divider":
+      lines.push("");
+      lines.push("---");
+      lines.push("");
+      break;
+    case "Spacer":
+      lines.push("");
+      break;
+  }
+}
+function renderChildren(document2, childrenIds, lines) {
+  if (!childrenIds) return;
+  for (const childId of childrenIds) {
+    renderBlock(document2, childId, lines);
+  }
+}
+function renderColumnsContainer(document2, data, lines) {
+  var _a, _b;
+  const columns = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.columns;
+  if (!columns) return;
+  for (const col of columns) {
+    if ((_b = col == null ? void 0 : col.childrenIds) == null ? void 0 : _b.length) {
+      renderChildren(document2, col.childrenIds, lines);
+    }
+  }
+}
+function renderText(data, lines) {
+  var _a, _b, _c;
+  const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
+  if (!text) return;
+  if ((_c = data == null ? void 0 : data.props) == null ? void 0 : _c.markdown) {
+    lines.push(text);
+  } else {
+    lines.push(text);
+  }
+  lines.push("");
+}
+function renderHeading(data, lines) {
+  var _a, _b, _c, _d;
+  const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
+  if (!text) return;
+  const level = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.level) != null ? _d : "h2";
+  const prefix = level === "h1" ? "# " : level === "h2" ? "## " : "### ";
+  lines.push(prefix + text);
+  lines.push("");
+}
+function renderButton(data, lines) {
+  var _a, _b, _c, _d;
+  const text = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.text) != null ? _b : "";
+  const url = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.url) != null ? _d : "";
+  if (text && url) {
+    lines.push(`${text}: ${url}`);
+  } else if (text) {
+    lines.push(text);
+  } else if (url) {
+    lines.push(url);
+  }
+  lines.push("");
+}
+function renderImage(data, lines) {
+  var _a, _b, _c, _d, _e, _f;
+  const alt = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.alt) != null ? _b : "";
+  const url = (_d = (_c = data == null ? void 0 : data.props) == null ? void 0 : _c.url) != null ? _d : "";
+  const linkHref = (_f = (_e = data == null ? void 0 : data.props) == null ? void 0 : _e.linkHref) != null ? _f : "";
+  if (alt && linkHref) {
+    lines.push(`[${alt}] ${linkHref}`);
+  } else if (alt) {
+    lines.push(`[${alt}]`);
+  } else if (url) {
+    lines.push(`[Image: ${url}]`);
+  }
+  lines.push("");
+}
+function renderAvatar(data, lines) {
+  var _a, _b;
+  const alt = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.alt) != null ? _b : "";
+  if (alt) {
+    lines.push(`[${alt}]`);
+    lines.push("");
+  }
+}
+function renderHtml(data, lines) {
+  var _a, _b;
+  const contents = (_b = (_a = data == null ? void 0 : data.props) == null ? void 0 : _a.contents) != null ? _b : "";
+  if (!contents) return;
+  const text = stripHtml(contents);
+  if (text) {
+    lines.push(text);
+    lines.push("");
+  }
+}
+function stripHtml(html2) {
+  return html2.replace(/<br\s*\/?>/gi, "\n").replace(/<\/(p|div|h[1-6]|li|tr|blockquote)>/gi, "\n").replace(/<hr\s*\/?>/gi, "\n---\n").replace(/<[^>]+>/g, "").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&nbsp;/g, " ").split("\n").map((line) => line.trim()).join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
 var BRAND_NAVY = "#212443";
 var BRAND_BLUE = "#0079CC";
 var BRAND_GREEN = "#1F8466";
@@ -1737,7 +1871,7 @@ var EmailEditorProvider = ({
     registerSaveListener,
     setCurrentTemplate
   }), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
-  return /* @__PURE__ */ React81.createElement(EmailEditorContext.Provider, { value }, children);
+  return /* @__PURE__ */ React82.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
   const context = useContext(EmailEditorContext);
@@ -1747,14 +1881,14 @@ var useEmailEditor = () => {
   return context;
 };
 function BaseSidebarPanel({ title, children }) {
-  return /* @__PURE__ */ React81.createElement(Box, { p: 2 }, /* @__PURE__ */ React81.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React81.createElement(Stack, { spacing: 5, mb: 3 }, children));
+  return /* @__PURE__ */ React82.createElement(Box, { p: 2 }, /* @__PURE__ */ React82.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React82.createElement(Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
   const [value, setValue] = useState(defaultValue);
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React81.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React81.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
     ToggleButtonGroup,
     {
       exclusive: true,
@@ -1774,7 +1908,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
 }
 function RawSliderInput(_a) {
   var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
-  return /* @__PURE__ */ React81.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React81.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React82.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React82.createElement(
     Slider,
     __spreadProps(__spreadValues({}, props), {
       value,
@@ -1785,14 +1919,14 @@ function RawSliderInput(_a) {
         setValue(value2);
       }
     })
-  ), /* @__PURE__ */ React81.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React81.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
+  ), /* @__PURE__ */ React82.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React82.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
 function SliderInput(_a) {
   var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
   const [value, setValue] = useState(defaultValue);
-  return /* @__PURE__ */ React81.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React81.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
     RawSliderInput,
     __spreadValues({
       value,
@@ -1809,7 +1943,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     TextField,
     {
       fullWidth: true,
@@ -1834,8 +1968,8 @@ var TILE_BUTTON = {
   height: 24
 };
 function Swatch({ paletteColors, value, onChange }) {
-  const renderButton = (colorValue) => {
-    return /* @__PURE__ */ React81.createElement(
+  const renderButton2 = (colorValue) => {
+    return /* @__PURE__ */ React82.createElement(
       Button$1,
       {
         key: colorValue,
@@ -1854,7 +1988,7 @@ function Swatch({ paletteColors, value, onChange }) {
       }
     );
   };
-  return /* @__PURE__ */ React81.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton(c)));
+  return /* @__PURE__ */ React82.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
@@ -1921,7 +2055,7 @@ var SX = {
   }
 };
 function Picker({ value, onChange }) {
-  return /* @__PURE__ */ React81.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React81.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React81.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React81.createElement(Box, { pt: 1 }, /* @__PURE__ */ React81.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
+  return /* @__PURE__ */ React82.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React82.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React82.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React82.createElement(Box, { pt: 1 }, /* @__PURE__ */ React82.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
@@ -1946,7 +2080,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
     if (typeof value !== "string" || value.trim().length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React81.createElement(
+    return /* @__PURE__ */ React82.createElement(
       ButtonBase,
       {
         onClick: () => {
@@ -1954,16 +2088,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
           onChange(null);
         }
       },
-      /* @__PURE__ */ React81.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      /* @__PURE__ */ React82.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
     );
   };
   const renderOpenButton = () => {
     if (value) {
-      return /* @__PURE__ */ React81.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
+      return /* @__PURE__ */ React82.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
     }
-    return /* @__PURE__ */ React81.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React81.createElement(AddOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React82.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React82.createElement(AddOutlined, { fontSize: "small" }));
   };
-  return /* @__PURE__ */ React81.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React81.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React81.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React82.createElement(
     Menu,
     {
       anchorEl,
@@ -1973,7 +2107,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
         sx: { height: "auto", padding: 0 }
       }
     },
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       Picker,
       {
         value: value || "",
@@ -1988,10 +2122,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
 function ColorInput2(props) {
-  return /* @__PURE__ */ React81.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
+  return /* @__PURE__ */ React82.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
 }
 function NullableColorInput(props) {
-  return /* @__PURE__ */ React81.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
+  return /* @__PURE__ */ React82.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
 }
 
 // src/editor/blocks/helpers/font-family.ts
@@ -2044,13 +2178,13 @@ var FONT_FAMILIES = [
 ];
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
-var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React81.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
+var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React82.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
 function NullableFontFamily({ label, onChange, defaultValue }) {
   const [value, setValue] = useState(defaultValue != null ? defaultValue : "inherit");
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "inherit");
   }, [defaultValue]);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     TextField,
     {
       select: true,
@@ -2063,7 +2197,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
         onChange(v === null ? null : v);
       }
     },
-    /* @__PURE__ */ React81.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
+    /* @__PURE__ */ React82.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
     OPTIONS
   );
 }
@@ -2076,10 +2210,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
     setValue(value2);
     onChange(value2);
   };
-  return /* @__PURE__ */ React81.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React81.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React81.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2094,7 +2228,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label,
@@ -2104,8 +2238,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
         onChange(fontWeight);
       }
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "normal" }, "Regular"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "bold" }, "Bold")
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "normal" }, "Regular"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "bold" }, "Bold")
   );
 }
 function PaddingInput({ label, defaultValue, onChange }) {
@@ -2127,10 +2261,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v);
   }
-  return /* @__PURE__ */ React81.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React81.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React81.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
       value: value.top,
       setValue: (num) => handleChange("top", num),
       units: "px",
@@ -2139,10 +2273,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React81.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
       value: value.bottom,
       setValue: (num) => handleChange("bottom", num),
       units: "px",
@@ -2151,10 +2285,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React81.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
       value: value.left,
       setValue: (num) => handleChange("left", num),
       units: "px",
@@ -2163,10 +2297,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React81.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
       value: value.right,
       setValue: (num) => handleChange("right", num),
       units: "px",
@@ -2182,7 +2316,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "left");
   }, [defaultValue]);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label,
@@ -2192,9 +2326,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
         onChange(value2);
       }
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React81.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React81.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React81.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React82.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React82.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React82.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
   );
 }
 
@@ -2207,14 +2341,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React81.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React81.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
     case "borderRadius":
-      return /* @__PURE__ */ React81.createElement(
+      return /* @__PURE__ */ React82.createElement(
         SliderInput,
         {
-          iconLabel: /* @__PURE__ */ React81.createElement(RoundedCornerOutlined, null),
+          iconLabel: /* @__PURE__ */ React82.createElement(RoundedCornerOutlined, null),
           units: "px",
           step: 4,
           marks: true,
@@ -2226,23 +2360,23 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
         }
       );
     case "color":
-      return /* @__PURE__ */ React81.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React81.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React81.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React81.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React81.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React81.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React82.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
   }
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
 function MultiStylePropertyPanel({ names, value, onChange }) {
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, names.map((name) => /* @__PURE__ */ React81.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, names.map((name) => /* @__PURE__ */ React82.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
@@ -2262,11 +2396,11 @@ function AvatarSidebarPanel({ data, setData }) {
   const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
   const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
   const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React82.createElement(
     SliderInput,
     {
       label: "Size",
-      iconLabel: /* @__PURE__ */ React81.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 3,
       min: 32,
@@ -2276,7 +2410,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Shape",
@@ -2285,10 +2419,10 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
       }
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Image URL",
@@ -2297,7 +2431,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Alt text",
@@ -2306,7 +2440,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["textAlign", "padding"],
@@ -2334,65 +2468,65 @@ function ButtonSidebarPanel({ data, setData }) {
   const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
   const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
   const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Text",
       defaultValue: text,
       onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Url",
       defaultValue: url,
       onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Width",
       defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
       onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "AUTO" }, "Auto")
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "AUTO" }, "Auto")
+  ), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Size",
       defaultValue: size,
       onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "x-small" }, "Xs"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "small" }, "Sm"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "medium" }, "Md"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "large" }, "Lg")
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "x-small" }, "Xs"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "small" }, "Sm"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "medium" }, "Md"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "large" }, "Lg")
+  ), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Style",
       defaultValue: buttonStyle,
       onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "pill" }, "Pill")
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "pill" }, "Pill")
+  ), /* @__PURE__ */ React82.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: buttonTextColor,
       onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     ColorInput2,
     {
       label: "Button color",
       defaultValue: buttonBackgroundColor,
       onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -2418,7 +2552,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
     const value = parseInt(ev.target.value);
     onChange(isNaN(value) ? null : value);
   };
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     TextField,
     {
       fullWidth: true,
@@ -2429,7 +2563,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
       placeholder: "auto",
       size: "small",
       InputProps: {
-        endAdornment: /* @__PURE__ */ React81.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
+        endAdornment: /* @__PURE__ */ React82.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
       }
     }
   );
@@ -2451,7 +2585,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
   };
   let column3 = null;
   {
-    column3 = /* @__PURE__ */ React81.createElement(
+    column3 = /* @__PURE__ */ React82.createElement(
       TextDimensionInput,
       {
         label: "Column 3",
@@ -2462,7 +2596,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ React81.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React82.createElement(
     TextDimensionInput,
     {
       label: "Column 1",
@@ -2471,7 +2605,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
         setIndexValue(0, v);
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     TextDimensionInput,
     {
       label: "Column 2",
@@ -2496,7 +2630,7 @@ function ColumnsContainerPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Number of columns",
@@ -2505,9 +2639,9 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
       }
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "2" }, "2"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "3" }, "3")
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "2" }, "2"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "3" }, "3")
+  ), /* @__PURE__ */ React82.createElement(
     ColumnWidthsInput,
     {
       defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
@@ -2515,11 +2649,11 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     SliderInput,
     {
       label: "Columns gap",
-      iconLabel: /* @__PURE__ */ React81.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       marks: true,
@@ -2528,7 +2662,7 @@ function ColumnsContainerPanel({ data, setData }) {
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
       onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
@@ -2537,10 +2671,10 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
       }
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React81.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React81.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React81.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React82.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React82.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React82.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2569,7 +2703,7 @@ function ContainerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
@@ -2592,18 +2726,18 @@ function DividerSidebarPanel({ data, setData }) {
   };
   const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
   const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React82.createElement(
     ColorInput2,
     {
       label: "Color",
       defaultValue: lineColor,
       onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React81.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 1,
       min: 1,
@@ -2611,7 +2745,7 @@ function DividerSidebarPanel({ data, setData }) {
       defaultValue: lineHeight,
       onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2656,31 +2790,31 @@ function EmailLayoutSidebarFields({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React82.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
       defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     ColorInput2,
     {
       label: "Canvas color",
       defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
       defaultValue: (_c = data.borderColor) != null ? _c : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     SliderInput,
     {
-      iconLabel: /* @__PURE__ */ React81.createElement(RoundedCornerOutlined, null),
+      iconLabel: /* @__PURE__ */ React82.createElement(RoundedCornerOutlined, null),
       units: "px",
       step: 4,
       marks: true,
@@ -2690,14 +2824,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
       defaultValue: (_d = data.borderRadius) != null ? _d : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     NullableFontFamily,
     {
       label: "Font family",
       defaultValue: "MODERN_SANS",
       onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     ColorInput2,
     {
       label: "Text color",
@@ -2718,7 +2852,7 @@ function HeadingSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Content",
@@ -2728,7 +2862,7 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Level",
@@ -2737,10 +2871,10 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
       }
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "h1" }, "H1"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "h2" }, "H2"),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "h3" }, "H3")
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "h1" }, "H1"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "h2" }, "H2"),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "h3" }, "H3")
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
@@ -2761,7 +2895,7 @@ function HtmlSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Content",
@@ -2769,7 +2903,7 @@ function HtmlSidebarPanel({ data, setData }) {
       defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
       onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
@@ -2790,7 +2924,7 @@ function ImageSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Source URL",
@@ -2800,14 +2934,14 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Alt text",
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
       onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Click through URL",
@@ -2817,31 +2951,31 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
       }
     }
-  ), /* @__PURE__ */ React81.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82.createElement(
     TextDimensionInput,
     {
       label: "Width",
       defaultValue: (_g = data.props) == null ? void 0 : _g.width,
       onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     TextDimensionInput,
     {
       label: "Height",
       defaultValue: (_h = data.props) == null ? void 0 : _h.height,
       onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
     }
-  )), /* @__PURE__ */ React81.createElement(
+  )), /* @__PURE__ */ React82.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
       defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
       onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
     },
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React81.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React81.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
-    /* @__PURE__ */ React81.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React81.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React82.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React82.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React82.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "textAlign", "padding"],
@@ -2862,11 +2996,11 @@ function SpacerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React82.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React81.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React82.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 4,
@@ -2881,11 +3015,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     FormControlLabel,
     {
       label,
-      control: /* @__PURE__ */ React81.createElement(
+      control: /* @__PURE__ */ React82.createElement(
         Switch,
         {
           checked: value,
@@ -2912,7 +3046,7 @@ function TextSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React82.createElement(
     TextInput,
     {
       label: "Content",
@@ -2920,14 +3054,14 @@ function TextSidebarPanel({ data, setData }) {
       defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
       onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     BooleanInput,
     {
       label: "Markdown",
       defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
       onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -2939,7 +3073,7 @@ function TextSidebarPanel({ data, setData }) {
 
 // src/app/inspector-drawer/configuration-panel/index.tsx
 function renderMessage(val) {
-  return /* @__PURE__ */ React81.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React81.createElement(Typography, { color: "text.secondary" }, val));
+  return /* @__PURE__ */ React82.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React82.createElement(Typography, { color: "text.secondary" }, val));
 }
 function ConfigurationPanel() {
   const document2 = useDocument();
@@ -2955,53 +3089,53 @@ function ConfigurationPanel() {
   const { data, type } = block;
   switch (type) {
     case "Avatar":
-      return /* @__PURE__ */ React81.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Button":
-      return /* @__PURE__ */ React81.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "ColumnsContainer":
-      return /* @__PURE__ */ React81.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Container":
-      return /* @__PURE__ */ React81.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Divider":
-      return /* @__PURE__ */ React81.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Heading":
-      return /* @__PURE__ */ React81.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Html":
-      return /* @__PURE__ */ React81.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Image":
-      return /* @__PURE__ */ React81.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "EmailLayout":
-      return /* @__PURE__ */ React81.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Spacer":
-      return /* @__PURE__ */ React81.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Text":
-      return /* @__PURE__ */ React81.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React82.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     default:
-      return /* @__PURE__ */ React81.createElement("pre", null, JSON.stringify(block, null, "  "));
+      return /* @__PURE__ */ React82.createElement("pre", null, JSON.stringify(block, null, "  "));
   }
 }
 function StylesPanel() {
   const block = useDocument().root;
   if (!block) {
-    return /* @__PURE__ */ React81.createElement("p", null, "Block not found");
+    return /* @__PURE__ */ React82.createElement("p", null, "Block not found");
   }
   const { data, type } = block;
   if (type !== "EmailLayout") {
     throw new Error('Expected "root" element to be of type EmailLayout');
   }
-  return /* @__PURE__ */ React81.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
+  return /* @__PURE__ */ React82.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
 }
 function TemplateDownloadButton() {
   const doc = useDocument();
   const href = useMemo(() => {
     return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, "  "))}`;
   }, [doc]);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React81.createElement(FileDownloadOutlined, null),
+      startIcon: /* @__PURE__ */ React82.createElement(FileDownloadOutlined, null),
       href,
       download: "emailTemplate.json",
       fullWidth: true
@@ -3033,9 +3167,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
     }
   };
   if (!currentTemplateId) {
-    return /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
+    return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
   }
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React81.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React82.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React82.createElement(
     Typography,
     {
       variant: "body2",
@@ -3048,29 +3182,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       }
     },
     "Save functionality is disabled. To enable saving, provide the necessary callback functions."
-  ), persistenceEnabled && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+  ), persistenceEnabled && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React81.createElement(ContentCopyOutlined, null),
+      startIcon: /* @__PURE__ */ React82.createElement(ContentCopyOutlined, null),
       onClick: handleCopyToSamples,
       fullWidth: true,
       disabled: !copyTemplate
     },
     "Save as Sample Template"
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "error",
-      startIcon: /* @__PURE__ */ React81.createElement(DeleteOutlined, null),
+      startIcon: /* @__PURE__ */ React82.createElement(DeleteOutlined, null),
       onClick: handleDelete,
       fullWidth: true,
       disabled: !deleteTemplate
     },
     "Delete Template"
-  )))), persistenceEnabled && /* @__PURE__ */ React81.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React81.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React81.createElement(TemplateDownloadButton, null))));
+  )))), persistenceEnabled && /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React82.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React82.createElement(TemplateDownloadButton, null))));
 }
 
 // src/app/inspector-drawer/index.tsx
@@ -3087,11 +3221,11 @@ function InspectorDrawer({
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {
       case "block-configuration":
-        return /* @__PURE__ */ React81.createElement(ConfigurationPanel, null);
+        return /* @__PURE__ */ React82.createElement(ConfigurationPanel, null);
       case "styles":
-        return /* @__PURE__ */ React81.createElement(StylesPanel, null);
+        return /* @__PURE__ */ React82.createElement(StylesPanel, null);
       case "template-settings":
-        return /* @__PURE__ */ React81.createElement(
+        return /* @__PURE__ */ React82.createElement(
           TemplatePanel,
           {
             deleteTemplate,
@@ -3100,7 +3234,7 @@ function InspectorDrawer({
         );
     }
   };
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -3122,8 +3256,8 @@ function InspectorDrawer({
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React81.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React81.createElement(Box, { px: 2 }, /* @__PURE__ */ React81.createElement(Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React81.createElement(Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React81.createElement(Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React81.createElement(Tab, { value: "template-settings", label: "Settings" })))),
-    /* @__PURE__ */ React81.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
+    /* @__PURE__ */ React82.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React82.createElement(Box, { px: 2 }, /* @__PURE__ */ React82.createElement(Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React82.createElement(Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React82.createElement(Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React82.createElement(Tab, { value: "template-settings", label: "Settings" })))),
+    /* @__PURE__ */ React82.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
   );
 }
 function SidebarButton({
@@ -3145,7 +3279,7 @@ function SidebarButton({
       console.error("Error loading template:", error);
     }
   });
-  return /* @__PURE__ */ React81.createElement(Button$1, { size: "small", onClick: handleClick, sx: sx2 }, children);
+  return /* @__PURE__ */ React82.createElement(Button$1, { size: "small", onClick: handleClick, sx: sx2 }, children);
 }
 
 // sample-templates/empty-email-message.ts
@@ -3234,7 +3368,7 @@ function SamplesDrawer({
   if (!enabled) {
     return null;
   }
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -3256,7 +3390,7 @@ function SamplesDrawer({
         width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       Stack,
       {
         spacing: 3,
@@ -3266,7 +3400,7 @@ function SamplesDrawer({
         justifyContent: "space-between",
         height: "100%"
       },
-      /* @__PURE__ */ React81.createElement(
+      /* @__PURE__ */ React82.createElement(
         Stack,
         {
           spacing: 2,
@@ -3277,8 +3411,8 @@ function SamplesDrawer({
             }
           }
         },
-        /* @__PURE__ */ React81.createElement(Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
-        loadTemplates && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+        /* @__PURE__ */ React82.createElement(Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
+        loadTemplates && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
           Typography,
           {
             variant: "subtitle2",
@@ -3286,7 +3420,7 @@ function SamplesDrawer({
             sx: { fontWeight: "bold", mt: 2 }
           },
           "Your Templates"
-        ), loadingTemplates ? /* @__PURE__ */ React81.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React81.createElement(CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React81.createElement(Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React81.createElement(
+        ), loadingTemplates ? /* @__PURE__ */ React82.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React82.createElement(CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React82.createElement(Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React82.createElement(
           Box,
           {
             key: template.id,
@@ -3301,7 +3435,7 @@ function SamplesDrawer({
               }
             }
           },
-          /* @__PURE__ */ React81.createElement(
+          /* @__PURE__ */ React82.createElement(
             SidebarButton,
             {
               templateId: template.id,
@@ -3310,15 +3444,15 @@ function SamplesDrawer({
             },
             template.name
           )
-        ))) : /* @__PURE__ */ React81.createElement(
+        ))) : /* @__PURE__ */ React82.createElement(
           Typography,
           {
             variant: "body2",
             sx: { color: "text.secondary", py: 1 }
           },
           "No saved templates"
-        ), /* @__PURE__ */ React81.createElement(Divider$1, null)),
-        /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+        ), /* @__PURE__ */ React82.createElement(Divider$1, null)),
+        /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
           Typography,
           {
             variant: "subtitle2",
@@ -3326,7 +3460,7 @@ function SamplesDrawer({
             sx: { fontWeight: "bold", mt: 1 }
           },
           "Sample Templates"
-        ), loadingSamples ? /* @__PURE__ */ React81.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React81.createElement(CircularProgress, { size: 24 })) : /* @__PURE__ */ React81.createElement(Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React81.createElement(
+        ), loadingSamples ? /* @__PURE__ */ React82.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React82.createElement(CircularProgress, { size: 24 })) : /* @__PURE__ */ React82.createElement(Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React82.createElement(
           SidebarButton,
           {
             key: sample.id,
@@ -3351,7 +3485,7 @@ var ICON_SX = {
   borderColor: "cadet.300"
 };
 function BlockTypeButton({ label, icon, onClick }) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Button$1,
     {
       sx: BUTTON_SX2,
@@ -3360,14 +3494,14 @@ function BlockTypeButton({ label, icon, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React81.createElement(Box, { sx: ICON_SX }, icon),
-    /* @__PURE__ */ React81.createElement(Typography, { variant: "body2" }, label)
+    /* @__PURE__ */ React82.createElement(Box, { sx: ICON_SX }, icon),
+    /* @__PURE__ */ React82.createElement(Typography, { variant: "body2" }, label)
   );
 }
 var BUTTONS = [
   {
     label: "Heading",
-    icon: /* @__PURE__ */ React81.createElement(HMobiledataOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(HMobiledataOutlined, null),
     block: () => ({
       type: "Heading",
       data: {
@@ -3380,7 +3514,7 @@ var BUTTONS = [
   },
   {
     label: "Text",
-    icon: /* @__PURE__ */ React81.createElement(NotesOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(NotesOutlined, null),
     block: () => ({
       type: "Text",
       data: {
@@ -3394,7 +3528,7 @@ var BUTTONS = [
   },
   {
     label: "Button",
-    icon: /* @__PURE__ */ React81.createElement(SmartButtonOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(SmartButtonOutlined, null),
     block: () => ({
       type: "Button",
       data: {
@@ -3408,7 +3542,7 @@ var BUTTONS = [
   },
   {
     label: "Image",
-    icon: /* @__PURE__ */ React81.createElement(ImageOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(ImageOutlined, null),
     block: () => ({
       type: "Image",
       data: {
@@ -3424,7 +3558,7 @@ var BUTTONS = [
   },
   {
     label: "Avatar",
-    icon: /* @__PURE__ */ React81.createElement(AccountCircleOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(AccountCircleOutlined, null),
     block: () => ({
       type: "Avatar",
       data: {
@@ -3438,7 +3572,7 @@ var BUTTONS = [
   },
   {
     label: "Divider",
-    icon: /* @__PURE__ */ React81.createElement(HorizontalRuleOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(HorizontalRuleOutlined, null),
     block: () => ({
       type: "Divider",
       data: {
@@ -3451,7 +3585,7 @@ var BUTTONS = [
   },
   {
     label: "Spacer",
-    icon: /* @__PURE__ */ React81.createElement(Crop32Outlined, null),
+    icon: /* @__PURE__ */ React82.createElement(Crop32Outlined, null),
     block: () => ({
       type: "Spacer",
       data: {}
@@ -3459,7 +3593,7 @@ var BUTTONS = [
   },
   {
     label: "Html",
-    icon: /* @__PURE__ */ React81.createElement(HtmlOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(HtmlOutlined, null),
     block: () => ({
       type: "Html",
       data: {
@@ -3474,7 +3608,7 @@ var BUTTONS = [
   },
   {
     label: "Columns",
-    icon: /* @__PURE__ */ React81.createElement(ViewColumnOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(ViewColumnOutlined, null),
     block: () => ({
       type: "ColumnsContainer",
       data: {
@@ -3489,7 +3623,7 @@ var BUTTONS = [
   },
   {
     label: "Container",
-    icon: /* @__PURE__ */ React81.createElement(LibraryAddOutlined, null),
+    icon: /* @__PURE__ */ React82.createElement(LibraryAddOutlined, null),
     block: () => ({
       type: "Container",
       data: {
@@ -3513,7 +3647,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
   if (anchorEl === null) {
     return null;
   }
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Menu,
     {
       open: true,
@@ -3522,7 +3656,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__PURE__ */ React81.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React81.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
+    /* @__PURE__ */ React82.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React82.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
   );
 }
 function DividerButton({ buttonElement, onClick }) {
@@ -3549,7 +3683,7 @@ function DividerButton({ buttonElement, onClick }) {
       window.removeEventListener("mousemove", listener);
     };
   }, [buttonElement, setVisible]);
-  return /* @__PURE__ */ React81.createElement(Fade, { in: visible }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Fade, { in: visible }, /* @__PURE__ */ React82.createElement(
     IconButton,
     {
       size: "small",
@@ -3572,11 +3706,11 @@ function DividerButton({ buttonElement, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React81.createElement(AddOutlined, { fontSize: "small" })
+    /* @__PURE__ */ React82.createElement(AddOutlined, { fontSize: "small" })
   ));
 }
 function PlaceholderButton({ onClick }) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     ButtonBase,
     {
       onClick: (ev) => {
@@ -3592,7 +3726,7 @@ function PlaceholderButton({ onClick }) {
         bgcolor: "rgba(0,0,0, 0.05)"
       }
     },
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       AddOutlined,
       {
         sx: {
@@ -3614,14 +3748,14 @@ function AddBlockButton({ onSelect, placeholder }) {
   const handleButtonClick = () => {
     setMenuAnchorEl(buttonElement);
   };
-  const renderButton = () => {
+  const renderButton2 = () => {
     if (placeholder) {
-      return /* @__PURE__ */ React81.createElement(PlaceholderButton, { onClick: handleButtonClick });
+      return /* @__PURE__ */ React82.createElement(PlaceholderButton, { onClick: handleButtonClick });
     } else {
-      return /* @__PURE__ */ React81.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
+      return /* @__PURE__ */ React82.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
     }
   };
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton()), /* @__PURE__ */ React81.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React82.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
 }
 
 // src/editor/blocks/helpers/editor-children-ids/index.tsx
@@ -3648,9 +3782,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
     });
   };
   if (!childrenIds || childrenIds.length === 0) {
-    return /* @__PURE__ */ React81.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+    return /* @__PURE__ */ React82.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
   }
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React81.createElement(Fragment, { key: childId }, /* @__PURE__ */ React81.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React81.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React81.createElement(AddBlockButton, { onSelect: appendBlock }));
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React82.createElement(Fragment, { key: childId }, /* @__PURE__ */ React82.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React82.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React82.createElement(AddBlockButton, { onSelect: appendBlock }));
 }
 
 // src/editor/blocks/columns-container/columns-container-editor.tsx
@@ -3677,15 +3811,15 @@ function ColumnsContainerEditor({ style, props }) {
     });
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     columns_container_default,
     {
       props: restProps,
       style,
       columns: [
-        /* @__PURE__ */ React81.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
-        /* @__PURE__ */ React81.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
-        /* @__PURE__ */ React81.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
+        /* @__PURE__ */ React82.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
+        /* @__PURE__ */ React82.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
+        /* @__PURE__ */ React82.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
       ]
     }
   );
@@ -3695,7 +3829,7 @@ function ContainerEditor({ style, props }) {
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React81.createElement(container_default, { style }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(container_default, { style }, /* @__PURE__ */ React82.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -3742,7 +3876,7 @@ function EmailLayoutEditor(props) {
   const childrenIds = (_a = props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "div",
     {
       onClick: () => {
@@ -3762,7 +3896,7 @@ function EmailLayoutEditor(props) {
         minHeight: "100%"
       }
     },
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       "table",
       {
         align: "center",
@@ -3785,7 +3919,7 @@ function EmailLayoutEditor(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React81.createElement("tbody", null, /* @__PURE__ */ React81.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React81.createElement("td", null, /* @__PURE__ */ React81.createElement(
+      /* @__PURE__ */ React82.createElement("tbody", null, /* @__PURE__ */ React82.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82.createElement("td", null, /* @__PURE__ */ React82.createElement(
         EditorChildrenIds,
         {
           childrenIds,
@@ -3929,7 +4063,7 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React81.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React81.createElement(Stack, null, /* @__PURE__ */ React81.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React81.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React81.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React81.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React81.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React81.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React81.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React81.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React81.createElement(DeleteOutlined, { fontSize: "small" })))));
+  return /* @__PURE__ */ React82.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React82.createElement(Stack, null, /* @__PURE__ */ React82.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React82.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React82.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React82.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React82.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React82.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React82.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React82.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React82.createElement(DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
@@ -3947,9 +4081,9 @@ function EditorBlockWrapper({ children }) {
     if (selectedBlockId !== blockId) {
       return null;
     }
-    return /* @__PURE__ */ React81.createElement(TuneMenu, { blockId });
+    return /* @__PURE__ */ React82.createElement(TuneMenu, { blockId });
   };
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Box,
     {
       sx: {
@@ -4096,7 +4230,7 @@ function HeadingEditor({ style, props }) {
     }
   };
   if (isSelected) {
-    return /* @__PURE__ */ React81.createElement(
+    return /* @__PURE__ */ React82.createElement(
       "textarea",
       {
         value: localText,
@@ -4111,11 +4245,11 @@ function HeadingEditor({ style, props }) {
   }
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React81.createElement("h1", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React82.createElement("h1", { style: hStyle }, textContent);
     case "h2":
-      return /* @__PURE__ */ React81.createElement("h2", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React82.createElement("h2", { style: hStyle }, textContent);
     case "h3":
-      return /* @__PURE__ */ React81.createElement("h3", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React82.createElement("h3", { style: hStyle }, textContent);
   }
 }
 function getFontFamily8(fontFamily) {
@@ -4231,7 +4365,7 @@ function TextEditor({ style, props }) {
     }
   };
   if (isSelected && !isMarkdown) {
-    return /* @__PURE__ */ React81.createElement(
+    return /* @__PURE__ */ React82.createElement(
       "textarea",
       {
         value: localText,
@@ -4245,36 +4379,36 @@ function TextEditor({ style, props }) {
     );
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React81.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React82.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
   }
-  return /* @__PURE__ */ React81.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx
 var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
     schema: AvatarPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(avatar_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(avatar_default, __spreadValues({}, props)))
   },
   Button: {
     schema: ButtonPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(button_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(button_default, __spreadValues({}, props)))
   },
   Container: {
     schema: container_props_schema_default,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(ContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(ContainerEditor, __spreadValues({}, props)))
   },
   ColumnsContainer: {
     schema: columns_container_props_schema_default2,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(HeadingEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(HeadingEditor, __spreadValues({}, props)))
   },
   Html: {
     schema: HtmlPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(html_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(html_default, __spreadValues({}, props)))
   },
   Image: {
     schema: ImagePropsSchema,
@@ -4285,24 +4419,24 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
           url: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image"
         })
       });
-      return /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(image_default, __spreadValues({}, props)));
+      return /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(image_default, __spreadValues({}, props)));
     }
   },
   Text: {
     schema: TextPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(TextEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(TextEditor, __spreadValues({}, props)))
   },
   EmailLayout: {
     schema: email_layout_props_schema_default,
-    Component: (p) => /* @__PURE__ */ React81.createElement(EmailLayoutEditor, __spreadValues({}, p))
+    Component: (p) => /* @__PURE__ */ React82.createElement(EmailLayoutEditor, __spreadValues({}, p))
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(spacer_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(spacer_default, __spreadValues({}, props)))
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React81.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React81.createElement(divider_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(divider_default, __spreadValues({}, props)))
   }
 });
 var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
@@ -4318,7 +4452,7 @@ function EditorBlock({ id }) {
   if (!block) {
     throw new Error("Could not find block");
   }
-  return /* @__PURE__ */ React81.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React81.createElement(EditorBlock2, __spreadValues({}, block)));
+  return /* @__PURE__ */ React82.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React82.createElement(EditorBlock2, __spreadValues({}, block)));
 }
 function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -4326,20 +4460,20 @@ function ToggleInspectorPanelButton() {
     toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
-    return /* @__PURE__ */ React81.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React81.createElement(LastPageOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React82.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React82.createElement(LastPageOutlined, { fontSize: "small" }));
   }
-  return /* @__PURE__ */ React81.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React81.createElement(AppRegistrationOutlined, { fontSize: "small" }));
+  return /* @__PURE__ */ React82.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React82.createElement(AppRegistrationOutlined, { fontSize: "small" }));
 }
 function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   if (samplesDrawerOpen) {
-    return /* @__PURE__ */ React81.createElement(FirstPageOutlined, { fontSize: "small" });
+    return /* @__PURE__ */ React82.createElement(FirstPageOutlined, { fontSize: "small" });
   }
-  return /* @__PURE__ */ React81.createElement(MenuOutlined, { fontSize: "small" });
+  return /* @__PURE__ */ React82.createElement(MenuOutlined, { fontSize: "small" });
 }
 function ToggleSamplesPanelButton() {
   const icon = useIcon();
-  return /* @__PURE__ */ React81.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
+  return /* @__PURE__ */ React82.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
 }
 function formatHtml(html2, spaces = 2) {
   try {
@@ -4401,7 +4535,7 @@ function HighlightedCodePanel({ type, value }) {
   if (code === null) {
     return null;
   }
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "pre",
     {
       style: {
@@ -4427,12 +4561,36 @@ function HighlightedCodePanel({ type, value }) {
 function HtmlPanel() {
   const document2 = useDocument();
   const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React81.createElement(HighlightedCodePanel, { type: "html", value: code });
+  return /* @__PURE__ */ React82.createElement(HighlightedCodePanel, { type: "html", value: code });
 }
 function JsonPanel() {
   const document2 = useDocument();
   const code = useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
-  return /* @__PURE__ */ React81.createElement(HighlightedCodePanel, { type: "json", value: code });
+  return /* @__PURE__ */ React82.createElement(HighlightedCodePanel, { type: "json", value: code });
+}
+function TextPanel() {
+  const document2 = useDocument();
+  const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
+  return /* @__PURE__ */ React82.createElement(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: 16,
+        overflowX: "auto",
+        whiteSpace: "pre-wrap",
+        fontSize: "13px",
+        fontFamily: "monospace",
+        lineHeight: "1.5"
+      },
+      onClick: (ev) => {
+        const s = window.getSelection();
+        if (s === null) return;
+        s.selectAllChildren(ev.currentTarget);
+      }
+    },
+    text
+  );
 }
 function MainTabsGroup() {
   const selectedMainTab = useSelectedMainTab();
@@ -4442,35 +4600,42 @@ function MainTabsGroup() {
       case "preview":
       case "editor":
       case "html":
+      case "text":
         setSelectedMainTab(v);
         return;
       default:
         setSelectedMainTab("editor");
     }
   };
-  return /* @__PURE__ */ React81.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React82.createElement(
     Tab,
     {
       value: "editor",
-      label: /* @__PURE__ */ React81.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React81.createElement(EditOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React82.createElement(EditOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Tab,
     {
       value: "preview",
-      label: /* @__PURE__ */ React81.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React81.createElement(PreviewOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React82.createElement(PreviewOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Tab,
     {
       value: "html",
-      label: /* @__PURE__ */ React81.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React81.createElement(CodeOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React82.createElement(CodeOutlined, { fontSize: "small" }))
+    }
+  ), /* @__PURE__ */ React82.createElement(
+    Tab,
+    {
+      value: "text",
+      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React82.createElement(SubjectOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Tab,
     {
       value: "json",
-      label: /* @__PURE__ */ React81.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React81.createElement(DataObjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React82.createElement(DataObjectOutlined, { fontSize: "small" }))
     }
   ));
 }
@@ -4492,7 +4657,7 @@ function SnackbarProvider({ children }) {
   const handleClose = () => {
     setMessage(null);
   };
-  return /* @__PURE__ */ React81.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React82.createElement(
     Snackbar,
     {
       anchorOrigin: { vertical: "top", horizontal: "center" },
@@ -4568,7 +4733,7 @@ function SaveTemplateDialog({
     setInternalError("");
     onClose();
   };
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Dialog,
     {
       open,
@@ -4576,8 +4741,8 @@ function SaveTemplateDialog({
       maxWidth: "sm",
       fullWidth: true
     },
-    /* @__PURE__ */ React81.createElement(DialogTitle, null, "Save Email Template"),
-    /* @__PURE__ */ React81.createElement(DialogContent, null, /* @__PURE__ */ React81.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(DialogTitle, null, "Save Email Template"),
+    /* @__PURE__ */ React82.createElement(DialogContent, null, /* @__PURE__ */ React82.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React82.createElement(
       TextField,
       {
         autoFocus: true,
@@ -4599,7 +4764,7 @@ function SaveTemplateDialog({
         disabled: isSubmitting
       }
     ))),
-    /* @__PURE__ */ React81.createElement(DialogActions, null, /* @__PURE__ */ React81.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(DialogActions, null, /* @__PURE__ */ React82.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React82.createElement(
       Button$1,
       {
         onClick: handleSave,
@@ -4654,7 +4819,7 @@ function SaveButton({ loadTemplates, saveAs }) {
       return false;
     }
   });
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
     IconButton,
     {
       onClick: handleSave,
@@ -4665,8 +4830,8 @@ function SaveButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React81.createElement(Tooltip, { title: "Save template" }, /* @__PURE__ */ React81.createElement(SaveOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(Tooltip, { title: "Save template" }, /* @__PURE__ */ React82.createElement(SaveOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React82.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -4736,7 +4901,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
     return false;
   });
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
     IconButton,
     {
       onClick: handleNewTemplate,
@@ -4747,8 +4912,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React81.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React81.createElement(Add, { fontSize: "small" }))
-  ), /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React82.createElement(Add, { fontSize: "small" }))
+  ), /* @__PURE__ */ React82.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -4795,17 +4960,19 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
   const renderMainPanel = () => {
     switch (selectedMainTab) {
       case "editor":
-        return /* @__PURE__ */ React81.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React81.createElement(EditorBlock, { id: "root" }));
+        return /* @__PURE__ */ React82.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React82.createElement(EditorBlock, { id: "root" }));
       case "preview":
-        return /* @__PURE__ */ React81.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React81.createElement(Reader, { document: document2, rootBlockId: "root" }));
+        return /* @__PURE__ */ React82.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React82.createElement(Reader, { document: document2, rootBlockId: "root" }));
       case "html":
-        return /* @__PURE__ */ React81.createElement(HtmlPanel, null);
+        return /* @__PURE__ */ React82.createElement(HtmlPanel, null);
+      case "text":
+        return /* @__PURE__ */ React82.createElement(TextPanel, null);
       case "json":
-        return /* @__PURE__ */ React81.createElement(JsonPanel, null);
+        return /* @__PURE__ */ React82.createElement(JsonPanel, null);
     }
   };
   const showSaveButtons = persistenceEnabled;
-  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
     Stack,
     {
       sx: {
@@ -4822,10 +4989,10 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
       justifyContent: "space-between",
       alignItems: "center"
     },
-    /* @__PURE__ */ React81.createElement(ToggleSamplesPanelButton, null),
-    /* @__PURE__ */ React81.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React81.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React81.createElement(MainTabsGroup, null)), /* @__PURE__ */ React81.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React81.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React81.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React81.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React81.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React81.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React81.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React81.createElement(PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React81.createElement(React81.Fragment, null, /* @__PURE__ */ React81.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React81.createElement(SaveButton, { loadTemplates, saveAs })))),
-    /* @__PURE__ */ React81.createElement(ToggleInspectorPanelButton, null)
-  ), /* @__PURE__ */ React81.createElement(Box, { sx: {
+    /* @__PURE__ */ React82.createElement(ToggleSamplesPanelButton, null),
+    /* @__PURE__ */ React82.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82.createElement(MainTabsGroup, null)), /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React82.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React82.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React82.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React82.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React82.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React82.createElement(PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React82.createElement(SaveButton, { loadTemplates, saveAs })))),
+    /* @__PURE__ */ React82.createElement(ToggleInspectorPanelButton, null)
+  ), /* @__PURE__ */ React82.createElement(Box, { sx: {
     paddingBottom: "50px",
     minWidth: 370
   } }, renderMainPanel()));
@@ -4907,7 +5074,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       return getDocument();
     }
   }));
-  return /* @__PURE__ */ React81.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React82.createElement(
     InspectorDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -4915,7 +5082,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       deleteTemplate,
       copyTemplate
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     SamplesDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -4927,7 +5094,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       currentTemplateId,
       deleteTemplate
     }
-  ), /* @__PURE__ */ React81.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Stack,
     {
       sx: {
@@ -4936,7 +5103,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
         transition: [marginLeftTransition, marginRightTransition].join(", ")
       }
     },
-    /* @__PURE__ */ React81.createElement(TemplatePanel2, { loadTemplates, saveAs })
+    /* @__PURE__ */ React82.createElement(TemplatePanel2, { loadTemplates, saveAs })
   ));
 });
 var EmailEditor = forwardRef((props, ref) => {
@@ -4964,16 +5131,14 @@ var EmailEditor = forwardRef((props, ref) => {
     [initialTemplateProp]
   );
   const prevTemplateRef = useRef(void 0);
-  useEffect(() => {
-    if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
-      prevTemplateRef.current = resolvedTemplate;
-      resetDocument(resolvedTemplate);
-    }
-  }, [resolvedTemplate]);
+  if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
+    prevTemplateRef.current = resolvedTemplate;
+    resetDocument(resolvedTemplate);
+  }
   useEffect(() => {
     setPersistenceEnabled(persistenceEnabled);
   }, [persistenceEnabled]);
-  return /* @__PURE__ */ React81.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React81.createElement(CssBaseline, null), /* @__PURE__ */ React81.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React81.createElement(SnackbarProvider, null, /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React82.createElement(CssBaseline, null), /* @__PURE__ */ React82.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React82.createElement(SnackbarProvider, null, /* @__PURE__ */ React82.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -4982,7 +5147,7 @@ var EmailEditor = forwardRef((props, ref) => {
       onSave,
       onChange
     },
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       EmailEditorInternal,
       {
         ref,
@@ -5004,6 +5169,6 @@ var EmailEditor = forwardRef((props, ref) => {
 EmailEditor.displayName = "EmailEditor";
 EmailEditorInternal.displayName = "EmailEditorInternal";
 
-export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, htmlToEditorConfig, renderToStaticMarkup, theme_default as theme, useEmailEditor };
+export { avatar_default as Avatar, AvatarProps, AvatarPropsDefaults, AvatarPropsSchema, BlockConfiguration, button_default as Button, ButtonProps, ButtonPropsDefaults, ButtonPropsSchema, columns_container_default as ColumnsContainer, ColumnsContainerProps, ColumnsContainerPropsSchema, ColumnsContainerReader, container_default as Container, ContainerProps, ContainerPropsSchema, ContainerReader, divider_default as Divider, DividerProps, DividerPropsDefaults, DividerPropsSchema, DocumentBlocksDictionary, EmailEditor, EmailEditorProvider, EmailLayoutPropsSchema, EmailLayoutReader, EmailMarkdown, heading_default as Heading, HeadingProps, HeadingPropsDefaults, HeadingPropsSchema, html_default as Html, HtmlProps, HtmlPropsSchema, image_default as Image, ImageProps, ImagePropsSchema, Reader, ReaderBlock, ReaderBlockSchema, ReaderDocumentSchema, spacer_default as Spacer, SpacerProps, SpacerPropsDefaults, SpacerPropsSchema, Text, TextProps, TextPropsDefaults, TextPropsSchema, buildBlockComponent, buildBlockConfigurationDictionary, buildBlockConfigurationSchema, htmlToEditorConfig, renderToStaticMarkup, renderToText, theme_default as theme, useEmailEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map