@kontakto/email-template-editor 1.4.0 → 1.5.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import DOMPurify from 'dompurify';
 import { marked, Renderer } from 'marked';
-import React82, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, useContext, useState, useCallback, Fragment } from 'react';
+import React72, { 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, 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 { MonitorOutlined, PhoneIphoneOutlined, EditOutlined, PreviewOutlined, CodeOutlined, SubjectOutlined, DataObjectOutlined, Add, SaveOutlined, LastPageOutlined, AppRegistrationOutlined, ContentCopyOutlined, DeleteOutlined, FirstPageOutlined, MenuOutlined, FileDownloadOutlined, RoundedCornerOutlined, AspectRatioOutlined, HeightOutlined, VerticalAlignTopOutlined, VerticalAlignCenterOutlined, VerticalAlignBottomOutlined, SpaceBarOutlined, AddOutlined, CloseOutlined, AlignVerticalTopOutlined, AlignVerticalBottomOutlined, AlignHorizontalLeftOutlined, AlignHorizontalRightOutlined, FormatAlignLeftOutlined, FormatAlignCenterOutlined, FormatAlignRightOutlined, TextFieldsOutlined, ArrowUpwardOutlined, ArrowDownwardOutlined, HMobiledataOutlined, NotesOutlined, SmartButtonOutlined, ImageOutlined, AccountCircleOutlined, ContactMailOutlined, BusinessOutlined, 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__ */ React82.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
+  return /* @__PURE__ */ React72.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__ */ React82.createElement(EmailMarkdown, { style: wStyle, markdown: text });
+    return /* @__PURE__ */ React72.createElement(EmailMarkdown, { style: wStyle, markdown: text });
   }
-  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, text);
+  return /* @__PURE__ */ React72.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__ */ React82.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72.createElement(
     "img",
     {
       alt,
@@ -434,14 +434,14 @@ function Button({ style, props }) {
     padding: `${padding[0]}px ${padding[1]}px`,
     textDecoration: "none"
   };
-  return /* @__PURE__ */ React82.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React82.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React72.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__ */ React82.createElement("span", null, text), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement("span", null, text), /* @__PURE__ */ React72.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__ */ React82.createElement("div", { style: wStyle }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { style: wStyle }, /* @__PURE__ */ React72.createElement(
     "table",
     {
       align: "center",
@@ -499,7 +499,7 @@ function ColumnsContainer({ style, columns, props }) {
       border: 0,
       style: { tableLayout: "fixed", borderCollapse: "collapse" }
     },
-    /* @__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 })))
+    /* @__PURE__ */ React72.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React72.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React72.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__ */ React82.createElement("td", { style }, children);
+  return /* @__PURE__ */ React72.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__ */ React82.createElement("div", { style: wStyle });
+    return /* @__PURE__ */ React72.createElement("div", { style: wStyle });
   }
-  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, children);
+  return /* @__PURE__ */ React72.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__ */ React82.createElement("div", { style: st }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { style: st }, /* @__PURE__ */ React72.createElement(
     "hr",
     {
       style: {
@@ -705,11 +705,11 @@ function Heading({ props, style }) {
   };
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React82.createElement("h1", { style: hStyle }, text);
+      return /* @__PURE__ */ React72.createElement("h1", { style: hStyle }, text);
     case "h2":
-      return /* @__PURE__ */ React82.createElement("h2", { style: hStyle }, text);
+      return /* @__PURE__ */ React72.createElement("h2", { style: hStyle }, text);
     case "h3":
-      return /* @__PURE__ */ React82.createElement("h3", { style: hStyle }, text);
+      return /* @__PURE__ */ React72.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__ */ React82.createElement("div", { style: cssStyle });
+    return /* @__PURE__ */ React72.createElement("div", { style: cssStyle });
   }
-  return /* @__PURE__ */ React82.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
+  return /* @__PURE__ */ React72.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__ */ React82.createElement(
+  const imageElement = /* @__PURE__ */ React72.createElement(
     "img",
     {
       alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
@@ -849,11 +849,187 @@ function Image({ style, props }) {
     }
   );
   if (!linkHref) {
-    return /* @__PURE__ */ React82.createElement("div", { style: sectionStyle }, imageElement);
+    return /* @__PURE__ */ React72.createElement("div", { style: sectionStyle }, imageElement);
   }
-  return /* @__PURE__ */ React82.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React82.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
+  return /* @__PURE__ */ React72.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
 }
 var image_default = Image;
+var FONT_FAMILY_SCHEMA5 = z.enum([
+  "MODERN_SANS",
+  "BOOK_SANS",
+  "ORGANIC_SANS",
+  "GEOMETRIC_SANS",
+  "HEAVY_SANS",
+  "ROUNDED_SANS",
+  "MODERN_SERIF",
+  "BOOK_SERIF",
+  "MONOSPACE"
+]).nullable().optional();
+function getFontFamily5(fontFamily) {
+  switch (fontFamily) {
+    case "MODERN_SANS":
+      return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
+    case "BOOK_SANS":
+      return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
+    case "ORGANIC_SANS":
+      return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
+    case "GEOMETRIC_SANS":
+      return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
+    case "HEAVY_SANS":
+      return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
+    case "ROUNDED_SANS":
+      return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
+    case "MODERN_SERIF":
+      return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
+    case "BOOK_SERIF":
+      return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
+    case "MONOSPACE":
+      return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
+  }
+  return void 0;
+}
+var COLOR_SCHEMA8 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
+var PADDING_SCHEMA10 = z.object({
+  top: z.number(),
+  bottom: z.number(),
+  right: z.number(),
+  left: z.number()
+}).optional().nullable();
+var getPadding10 = (padding) => padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : void 0;
+var SignaturePropsSchema = z.object({
+  style: z.object({
+    backgroundColor: COLOR_SCHEMA8,
+    fontFamily: FONT_FAMILY_SCHEMA5,
+    padding: PADDING_SCHEMA10
+  }).optional().nullable(),
+  props: z.object({
+    greeting: z.string().optional().nullable(),
+    name: z.string().optional().nullable(),
+    title: z.string().optional().nullable(),
+    company: z.string().optional().nullable(),
+    address: z.string().optional().nullable(),
+    email: z.string().optional().nullable(),
+    phone: z.string().optional().nullable(),
+    website: z.string().optional().nullable(),
+    imageUrl: z.string().optional().nullable(),
+    imageSize: z.number().optional().nullable(),
+    imageShape: z.enum(["circle", "square", "rounded"]).optional().nullable(),
+    layout: z.enum(["horizontal", "vertical"]).optional().nullable(),
+    nameColor: COLOR_SCHEMA8,
+    textColor: COLOR_SCHEMA8,
+    linkColor: COLOR_SCHEMA8
+  }).optional().nullable()
+});
+var SignatureProps = SignaturePropsSchema;
+var SignaturePropsDefaults = {
+  greeting: "",
+  name: "",
+  title: "",
+  company: "",
+  address: "",
+  email: "",
+  phone: "",
+  website: "",
+  imageUrl: "",
+  imageSize: 64,
+  imageShape: "circle",
+  layout: "horizontal",
+  nameColor: "#262626",
+  textColor: "#666666",
+  linkColor: "#0079CC"
+};
+function getImageBorderRadius(shape, size) {
+  switch (shape) {
+    case "circle":
+      return size;
+    case "rounded":
+      return size * 0.125;
+    case "square":
+    default:
+      return void 0;
+  }
+}
+function Signature({ style, props }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const greeting = (_a = props == null ? void 0 : props.greeting) != null ? _a : SignaturePropsDefaults.greeting;
+  const name = (_b = props == null ? void 0 : props.name) != null ? _b : SignaturePropsDefaults.name;
+  const title = (_c = props == null ? void 0 : props.title) != null ? _c : SignaturePropsDefaults.title;
+  const company = (_d = props == null ? void 0 : props.company) != null ? _d : SignaturePropsDefaults.company;
+  const address = (_e = props == null ? void 0 : props.address) != null ? _e : SignaturePropsDefaults.address;
+  const email = (_f = props == null ? void 0 : props.email) != null ? _f : SignaturePropsDefaults.email;
+  const phone = (_g = props == null ? void 0 : props.phone) != null ? _g : SignaturePropsDefaults.phone;
+  const website = (_h = props == null ? void 0 : props.website) != null ? _h : SignaturePropsDefaults.website;
+  const imageUrl = (_i = props == null ? void 0 : props.imageUrl) != null ? _i : SignaturePropsDefaults.imageUrl;
+  const imageSize = (_j = props == null ? void 0 : props.imageSize) != null ? _j : SignaturePropsDefaults.imageSize;
+  const imageShape = (_k = props == null ? void 0 : props.imageShape) != null ? _k : SignaturePropsDefaults.imageShape;
+  const layout = (_l = props == null ? void 0 : props.layout) != null ? _l : SignaturePropsDefaults.layout;
+  const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
+  const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
+  const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
+  const wrapperStyle = {
+    backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
+    fontFamily: getFontFamily5(style == null ? void 0 : style.fontFamily),
+    padding: getPadding10(style == null ? void 0 : style.padding)
+  };
+  const greetingStyle = {
+    fontSize: 14,
+    color: textColor,
+    margin: 0,
+    marginBottom: 8,
+    lineHeight: "1.4",
+    fontStyle: "italic"
+  };
+  const nameStyle = {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: nameColor,
+    margin: 0,
+    lineHeight: "1.4"
+  };
+  const detailStyle = {
+    fontSize: 14,
+    color: textColor,
+    margin: 0,
+    lineHeight: "1.4"
+  };
+  const linkStyle = {
+    fontSize: 14,
+    color: linkColor,
+    textDecoration: "none"
+  };
+  const imageElement = imageUrl ? /* @__PURE__ */ React72.createElement(
+    "img",
+    {
+      src: imageUrl,
+      alt: name || company,
+      width: imageSize,
+      height: imageSize,
+      style: {
+        width: imageSize,
+        height: imageSize,
+        objectFit: "cover",
+        borderRadius: getImageBorderRadius(imageShape, imageSize),
+        display: "block",
+        outline: "none",
+        border: "none"
+      }
+    }
+  ) : null;
+  const contactParts = [];
+  if (email) contactParts.push(/* @__PURE__ */ React72.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
+  if (phone) contactParts.push(/* @__PURE__ */ React72.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
+  if (website) {
+    const href = website.startsWith("http") ? website : `https://${website}`;
+    contactParts.push(/* @__PURE__ */ React72.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
+  }
+  const textContent = /* @__PURE__ */ React72.createElement("div", null, name && /* @__PURE__ */ React72.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React72.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React72.createElement(React72.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React72.createElement("span", { style: detailStyle }, " \xB7 "), part))));
+  const greetingElement = greeting ? /* @__PURE__ */ React72.createElement("p", { style: greetingStyle }, greeting) : null;
+  if (layout === "vertical") {
+    return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+  }
+  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", null, imageElement && /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+}
+var signature_default = Signature;
 var SpacerPropsSchema = z.object({
   props: z.object({
     height: z.number().gte(0).optional().nullish()
@@ -868,13 +1044,13 @@ function Spacer({ props }) {
   const style = {
     height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
   };
-  return /* @__PURE__ */ React82.createElement("div", { style });
+  return /* @__PURE__ */ React72.createElement("div", { style });
 }
 var spacer_default = Spacer;
 function buildBlockComponent(blocks) {
   return function BlockComponent({ type, data }) {
     const Component = blocks[type].Component;
-    return /* @__PURE__ */ React82.createElement(Component, __spreadValues({}, data));
+    return /* @__PURE__ */ React72.createElement(Component, __spreadValues({}, data));
   };
 }
 function buildBlockConfigurationSchema(blocks) {
@@ -911,9 +1087,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__ */ React82.createElement(ReaderBlock, { key: childId, id: childId })));
+    cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React72.createElement(ReaderBlock, { key: childId, id: childId })));
   }
-  return /* @__PURE__ */ React82.createElement(columns_container_default, { props: restProps, columns: cols, style });
+  return /* @__PURE__ */ React72.createElement(columns_container_default, { props: restProps, columns: cols, style });
 }
 var ContainerPropsSchema2 = z.object({
   style: ContainerPropsSchema.shape.style,
@@ -924,10 +1100,10 @@ var ContainerPropsSchema2 = z.object({
 function ContainerReader({ style, props }) {
   var _a;
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React82.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React82.createElement(ReaderBlock, { key: childId, id: childId })));
+  return /* @__PURE__ */ React72.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React72.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([
+var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
+var FONT_FAMILY_SCHEMA6 = z.enum([
   "MODERN_SANS",
   "BOOK_SANS",
   "ORGANIC_SANS",
@@ -939,15 +1115,15 @@ var FONT_FAMILY_SCHEMA5 = z.enum([
   "MONOSPACE"
 ]).nullable().optional();
 var EmailLayoutPropsSchema = z.object({
-  backdropColor: COLOR_SCHEMA8,
-  borderColor: COLOR_SCHEMA8,
+  backdropColor: COLOR_SCHEMA9,
+  borderColor: COLOR_SCHEMA9,
   borderRadius: z.number().optional().nullable(),
-  canvasColor: COLOR_SCHEMA8,
-  textColor: COLOR_SCHEMA8,
-  fontFamily: FONT_FAMILY_SCHEMA5,
+  canvasColor: COLOR_SCHEMA9,
+  textColor: COLOR_SCHEMA9,
+  fontFamily: FONT_FAMILY_SCHEMA6,
   childrenIds: z.array(z.string()).optional().nullable()
 });
-function getFontFamily5(fontFamily) {
+function getFontFamily6(fontFamily) {
   const f = fontFamily != null ? fontFamily : "MODERN_SANS";
   switch (f) {
     case "MODERN_SANS":
@@ -979,13 +1155,13 @@ function getBorder2({ borderColor }) {
 function EmailLayoutReader(props) {
   var _a, _b, _c, _d, _e;
   const childrenIds = (_a = props.childrenIds) != null ? _a : [];
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "div",
     {
       style: {
         backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
         color: (_c = props.textColor) != null ? _c : "#262626",
-        fontFamily: getFontFamily5(props.fontFamily),
+        fontFamily: getFontFamily6(props.fontFamily),
         fontSize: "16px",
         fontWeight: "400",
         letterSpacing: "0.15008px",
@@ -996,7 +1172,7 @@ function EmailLayoutReader(props) {
         width: "100%"
       }
     },
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(
       "table",
       {
         align: "center",
@@ -1013,7 +1189,7 @@ function EmailLayoutReader(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__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 })))))
+      /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React72.createElement(ReaderBlock, { key: childId, id: childId })))))
     )
   );
 }
@@ -1025,7 +1201,7 @@ function useReaderDocument() {
 }
 function ReaderBlock({ id }) {
   const document2 = useReaderDocument();
-  return document2[id] ? /* @__PURE__ */ React82.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
+  return document2[id] ? /* @__PURE__ */ React72.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
 }
 var READER_DICTIONARY = buildBlockConfigurationDictionary({
   ColumnsContainer: {
@@ -1072,19 +1248,23 @@ var READER_DICTIONARY = buildBlockConfigurationDictionary({
   Text: {
     schema: TextPropsSchema,
     Component: Text
+  },
+  Signature: {
+    schema: SignaturePropsSchema,
+    Component: signature_default
   }
 });
 var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 var ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
 var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 function Reader({ document: document2, rootBlockId }) {
-  return /* @__PURE__ */ React82.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React82.createElement(ReaderBlock, { id: rootBlockId }));
+  return /* @__PURE__ */ React72.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React72.createElement(ReaderBlock, { id: rootBlockId }));
 }
 
 // src/email-builder/renderers/render-to-static-markup.tsx
 function renderToStaticMarkup(document2, { rootBlockId }) {
   return "<!DOCTYPE html>" + renderToStaticMarkup$1(
-    /* @__PURE__ */ React82.createElement("html", null, /* @__PURE__ */ React82.createElement("body", null, /* @__PURE__ */ React82.createElement(Reader, { document: document2, rootBlockId })))
+    /* @__PURE__ */ React72.createElement("html", null, /* @__PURE__ */ React72.createElement("body", null, /* @__PURE__ */ React72.createElement(Reader, { document: document2, rootBlockId })))
   );
 }
 
@@ -1871,7 +2051,7 @@ var EmailEditorProvider = ({
     registerSaveListener,
     setCurrentTemplate
   }), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
-  return /* @__PURE__ */ React82.createElement(EmailEditorContext.Provider, { value }, children);
+  return /* @__PURE__ */ React72.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
   const context = useContext(EmailEditorContext);
@@ -1881,14 +2061,14 @@ var useEmailEditor = () => {
   return context;
 };
 function BaseSidebarPanel({ title, 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));
+  return /* @__PURE__ */ React72.createElement(Box, { p: 2 }, /* @__PURE__ */ React72.createElement(Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React72.createElement(Stack, { spacing: 5, mb: 3 }, children));
 }
 function RadioGroupInput({ label, children, defaultValue, onChange }) {
   const [value, setValue] = useState(defaultValue);
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React82.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
     ToggleButtonGroup,
     {
       exclusive: true,
@@ -1908,7 +2088,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__ */ 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(
+  return /* @__PURE__ */ React72.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React72.createElement(Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React72.createElement(
     Slider,
     __spreadProps(__spreadValues({}, props), {
       value,
@@ -1919,14 +2099,14 @@ function RawSliderInput(_a) {
         setValue(value2);
       }
     })
-  ), /* @__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)));
+  ), /* @__PURE__ */ React72.createElement(Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React72.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__ */ React82.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
     RawSliderInput,
     __spreadValues({
       value,
@@ -1943,7 +2123,7 @@ function TextInput({ helperText, label, placeholder, rows, InputProps: InputProp
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     TextField,
     {
       fullWidth: true,
@@ -1969,7 +2149,7 @@ var TILE_BUTTON = {
 };
 function Swatch({ paletteColors, value, onChange }) {
   const renderButton2 = (colorValue) => {
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React72.createElement(
       Button$1,
       {
         key: colorValue,
@@ -1988,7 +2168,7 @@ function Swatch({ paletteColors, value, onChange }) {
       }
     );
   };
-  return /* @__PURE__ */ React82.createElement(Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
+  return /* @__PURE__ */ React72.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
@@ -2055,7 +2235,7 @@ var SX = {
   }
 };
 function Picker({ 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 })));
+  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React72.createElement(HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React72.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React72.createElement(Box, { pt: 1 }, /* @__PURE__ */ React72.createElement(HexColorInput, { prefixed: true, color: value, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
@@ -2080,7 +2260,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
     if (typeof value !== "string" || value.trim().length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React72.createElement(
       ButtonBase,
       {
         onClick: () => {
@@ -2088,16 +2268,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
           onChange(null);
         }
       },
-      /* @__PURE__ */ React82.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
+      /* @__PURE__ */ React72.createElement(CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
     );
   };
   const renderOpenButton = () => {
     if (value) {
-      return /* @__PURE__ */ React82.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
+      return /* @__PURE__ */ React72.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
     }
-    return /* @__PURE__ */ React82.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React82.createElement(AddOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React72.createElement(ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React72.createElement(AddOutlined, { fontSize: "small" }));
   };
-  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(
+  return /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React72.createElement(
     Menu,
     {
       anchorEl,
@@ -2107,7 +2287,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
         sx: { height: "auto", padding: 0 }
       }
     },
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(
       Picker,
       {
         value: value || "",
@@ -2122,10 +2302,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__ */ React82.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
+  return /* @__PURE__ */ React72.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
 }
 function NullableColorInput(props) {
-  return /* @__PURE__ */ React82.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
+  return /* @__PURE__ */ React72.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
 }
 
 // src/editor/blocks/helpers/font-family.ts
@@ -2178,13 +2358,13 @@ var FONT_FAMILIES = [
 ];
 
 // src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
-var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React82.createElement(MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
+var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React72.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__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     TextField,
     {
       select: true,
@@ -2197,7 +2377,7 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
         onChange(v === null ? null : v);
       }
     },
-    /* @__PURE__ */ React82.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
+    /* @__PURE__ */ React72.createElement(MenuItem, { value: "inherit" }, "Match email settings"),
     OPTIONS
   );
 }
@@ -2210,10 +2390,10 @@ function FontSizeInput({ label, defaultValue, onChange }) {
     setValue(value2);
     onChange(value2);
   };
-  return /* @__PURE__ */ React82.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React82.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(TextFieldsOutlined, { sx: { fontSize: 16 } }),
       value,
       setValue: handleChange,
       units: "px",
@@ -2228,7 +2408,7 @@ function FontWeightInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label,
@@ -2238,8 +2418,8 @@ function FontWeightInput({ label, defaultValue, onChange }) {
         onChange(fontWeight);
       }
     },
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "normal" }, "Regular"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "bold" }, "Bold")
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "normal" }, "Regular"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "bold" }, "Bold")
   );
 }
 function PaddingInput({ label, defaultValue, onChange }) {
@@ -2261,10 +2441,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
     setValue(v);
     onChange(v);
   }
-  return /* @__PURE__ */ React82.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React82.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React72.createElement(InputLabel, { shrink: true }, label), /* @__PURE__ */ React72.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React82.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
       value: value.top,
       setValue: (num) => handleChange("top", num),
       units: "px",
@@ -2273,10 +2453,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React82.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
       value: value.bottom,
       setValue: (num) => handleChange("bottom", num),
       units: "px",
@@ -2285,10 +2465,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React82.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
       value: value.left,
       setValue: (num) => handleChange("left", num),
       units: "px",
@@ -2297,10 +2477,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
       max: 80,
       marks: true
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     RawSliderInput,
     {
-      iconLabel: /* @__PURE__ */ React82.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
       value: value.right,
       setValue: (num) => handleChange("right", num),
       units: "px",
@@ -2316,7 +2496,7 @@ function TextAlignInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue != null ? defaultValue : "left");
   }, [defaultValue]);
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label,
@@ -2326,9 +2506,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
         onChange(value2);
       }
     },
-    /* @__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" }))
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "left" }, /* @__PURE__ */ React72.createElement(FormatAlignLeftOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "center" }, /* @__PURE__ */ React72.createElement(FormatAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "right" }, /* @__PURE__ */ React72.createElement(FormatAlignRightOutlined, { fontSize: "small" }))
   );
 }
 
@@ -2341,14 +2521,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
   };
   switch (name) {
     case "backgroundColor":
-      return /* @__PURE__ */ React82.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
     case "borderColor":
-      return /* @__PURE__ */ React82.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
     case "borderRadius":
-      return /* @__PURE__ */ React82.createElement(
+      return /* @__PURE__ */ React72.createElement(
         SliderInput,
         {
-          iconLabel: /* @__PURE__ */ React82.createElement(RoundedCornerOutlined, null),
+          iconLabel: /* @__PURE__ */ React72.createElement(RoundedCornerOutlined, null),
           units: "px",
           step: 4,
           marks: true,
@@ -2360,23 +2540,23 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
         }
       );
     case "color":
-      return /* @__PURE__ */ React82.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
     case "fontFamily":
-      return /* @__PURE__ */ React82.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
     case "fontSize":
-      return /* @__PURE__ */ React82.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
     case "fontWeight":
-      return /* @__PURE__ */ React82.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
     case "textAlign":
-      return /* @__PURE__ */ React82.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
     case "padding":
-      return /* @__PURE__ */ React82.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
+      return /* @__PURE__ */ React72.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__ */ React82.createElement(React82.Fragment, null, names.map((name) => /* @__PURE__ */ React82.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, names.map((name) => /* @__PURE__ */ React72.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
 }
 
 // src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
@@ -2396,11 +2576,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__ */ React82.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React72.createElement(
     SliderInput,
     {
       label: "Size",
-      iconLabel: /* @__PURE__ */ React82.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 3,
       min: 32,
@@ -2410,7 +2590,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label: "Shape",
@@ -2419,10 +2599,10 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
       }
     },
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "circle" }, "Circle"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "square" }, "Square"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "rounded" }, "Rounded")
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Image URL",
@@ -2431,7 +2611,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Alt text",
@@ -2440,7 +2620,7 @@ function AvatarSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["textAlign", "padding"],
@@ -2468,65 +2648,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__ */ React82.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Text",
       defaultValue: text,
       onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Url",
       defaultValue: url,
       onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.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__ */ React82.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "AUTO" }, "Auto")
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "FULL_WIDTH" }, "Full"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "AUTO" }, "Auto")
+  ), /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label: "Size",
       defaultValue: size,
       onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
     },
-    /* @__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(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "x-small" }, "Xs"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "small" }, "Sm"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "medium" }, "Md"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "large" }, "Lg")
+  ), /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label: "Style",
       defaultValue: buttonStyle,
       onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
     },
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "pill" }, "Pill")
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rectangle" }, "Rectangle"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rounded" }, "Rounded"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "pill" }, "Pill")
+  ), /* @__PURE__ */ React72.createElement(
     ColorInput2,
     {
       label: "Text color",
       defaultValue: buttonTextColor,
       onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     ColorInput2,
     {
       label: "Button color",
       defaultValue: buttonBackgroundColor,
       onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -2552,7 +2732,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
     const value = parseInt(ev.target.value);
     onChange(isNaN(value) ? null : value);
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     TextField,
     {
       fullWidth: true,
@@ -2563,7 +2743,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
       placeholder: "auto",
       size: "small",
       InputProps: {
-        endAdornment: /* @__PURE__ */ React82.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
+        endAdornment: /* @__PURE__ */ React72.createElement(Typography, { variant: "body2", color: "text.secondary" }, "px")
       }
     }
   );
@@ -2585,7 +2765,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
   };
   let column3 = null;
   {
-    column3 = /* @__PURE__ */ React82.createElement(
+    column3 = /* @__PURE__ */ React72.createElement(
       TextDimensionInput,
       {
         label: "Column 3",
@@ -2596,7 +2776,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
       }
     );
   }
-  return /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React72.createElement(
     TextDimensionInput,
     {
       label: "Column 1",
@@ -2605,7 +2785,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
         setIndexValue(0, v);
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     TextDimensionInput,
     {
       label: "Column 2",
@@ -2630,7 +2810,7 @@ function ColumnsContainerPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label: "Number of columns",
@@ -2639,9 +2819,9 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
       }
     },
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "2" }, "2"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "3" }, "3")
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "2" }, "2"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "3" }, "3")
+  ), /* @__PURE__ */ React72.createElement(
     ColumnWidthsInput,
     {
       defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
@@ -2649,11 +2829,11 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     SliderInput,
     {
       label: "Columns gap",
-      iconLabel: /* @__PURE__ */ React82.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(SpaceBarOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       marks: true,
@@ -2662,7 +2842,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__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label: "Alignment",
@@ -2671,10 +2851,10 @@ function ColumnsContainerPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
       }
     },
-    /* @__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(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React72.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React72.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2703,7 +2883,7 @@ function ContainerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
@@ -2726,18 +2906,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__ */ React82.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React72.createElement(
     ColorInput2,
     {
       label: "Color",
       defaultValue: lineColor,
       onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React82.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 1,
       min: 1,
@@ -2745,7 +2925,7 @@ function DividerSidebarPanel({ data, setData }) {
       defaultValue: lineHeight,
       onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "padding"],
@@ -2754,8 +2934,8 @@ function DividerSidebarPanel({ data, setData }) {
     }
   ));
 }
-var COLOR_SCHEMA9 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
-var FONT_FAMILY_SCHEMA6 = z.enum([
+var COLOR_SCHEMA10 = z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
+var FONT_FAMILY_SCHEMA7 = z.enum([
   "MODERN_SANS",
   "BOOK_SANS",
   "ORGANIC_SANS",
@@ -2767,12 +2947,12 @@ var FONT_FAMILY_SCHEMA6 = z.enum([
   "MONOSPACE"
 ]).nullable().optional();
 var EmailLayoutPropsSchema2 = z.object({
-  backdropColor: COLOR_SCHEMA9,
-  borderColor: COLOR_SCHEMA9,
+  backdropColor: COLOR_SCHEMA10,
+  borderColor: COLOR_SCHEMA10,
   borderRadius: z.number().optional().nullable(),
-  canvasColor: COLOR_SCHEMA9,
-  textColor: COLOR_SCHEMA9,
-  fontFamily: FONT_FAMILY_SCHEMA6,
+  canvasColor: COLOR_SCHEMA10,
+  textColor: COLOR_SCHEMA10,
+  fontFamily: FONT_FAMILY_SCHEMA7,
   childrenIds: z.array(z.string()).optional().nullable()
 });
 var email_layout_props_schema_default = EmailLayoutPropsSchema2;
@@ -2790,31 +2970,31 @@ function EmailLayoutSidebarFields({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React72.createElement(
     ColorInput2,
     {
       label: "Backdrop color",
       defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
       onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     ColorInput2,
     {
       label: "Canvas color",
       defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
       onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     NullableColorInput,
     {
       label: "Canvas border color",
       defaultValue: (_c = data.borderColor) != null ? _c : null,
       onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     SliderInput,
     {
-      iconLabel: /* @__PURE__ */ React82.createElement(RoundedCornerOutlined, null),
+      iconLabel: /* @__PURE__ */ React72.createElement(RoundedCornerOutlined, null),
       units: "px",
       step: 4,
       marks: true,
@@ -2824,14 +3004,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
       defaultValue: (_d = data.borderRadius) != null ? _d : 0,
       onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     NullableFontFamily,
     {
       label: "Font family",
       defaultValue: "MODERN_SANS",
       onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     ColorInput2,
     {
       label: "Text color",
@@ -2852,7 +3032,7 @@ function HeadingSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Content",
@@ -2862,7 +3042,7 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     RadioGroupInput,
     {
       label: "Level",
@@ -2871,10 +3051,10 @@ function HeadingSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
       }
     },
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "h1" }, "H1"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "h2" }, "H2"),
-    /* @__PURE__ */ React82.createElement(ToggleButton, { value: "h3" }, "H3")
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "h1" }, "H1"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "h2" }, "H2"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "h3" }, "H3")
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
@@ -2895,7 +3075,7 @@ function HtmlSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Content",
@@ -2903,7 +3083,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__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
@@ -2924,7 +3104,7 @@ function ImageSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Source URL",
@@ -2934,14 +3114,14 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.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__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Click through URL",
@@ -2951,31 +3131,31 @@ function ImageSidebarPanel({ data, setData }) {
         updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
       }
     }
-  ), /* @__PURE__ */ React82.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72.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__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.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__ */ React82.createElement(
+  )), /* @__PURE__ */ React72.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__ */ 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(
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "top" }, /* @__PURE__ */ React72.createElement(VerticalAlignTopOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "middle" }, /* @__PURE__ */ React72.createElement(VerticalAlignCenterOutlined, { fontSize: "small" })),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72.createElement(VerticalAlignBottomOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["backgroundColor", "textAlign", "padding"],
@@ -2984,6 +3164,157 @@ function ImageSidebarPanel({ data, setData }) {
     }
   ));
 }
+function SignatureSidebarPanel({ data, setData }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
+  const [, setErrors] = useState(null);
+  const updateData = (d) => {
+    const res = SignaturePropsSchema.safeParse(d);
+    if (res.success) {
+      setData(res.data);
+      setErrors(null);
+    } else {
+      setErrors(res.error);
+    }
+  };
+  const greeting = (_b = (_a = data.props) == null ? void 0 : _a.greeting) != null ? _b : SignaturePropsDefaults.greeting;
+  const name = (_d = (_c = data.props) == null ? void 0 : _c.name) != null ? _d : SignaturePropsDefaults.name;
+  const title = (_f = (_e = data.props) == null ? void 0 : _e.title) != null ? _f : SignaturePropsDefaults.title;
+  const company = (_h = (_g = data.props) == null ? void 0 : _g.company) != null ? _h : SignaturePropsDefaults.company;
+  const address = (_j = (_i = data.props) == null ? void 0 : _i.address) != null ? _j : SignaturePropsDefaults.address;
+  const email = (_l = (_k = data.props) == null ? void 0 : _k.email) != null ? _l : SignaturePropsDefaults.email;
+  const phone = (_n = (_m = data.props) == null ? void 0 : _m.phone) != null ? _n : SignaturePropsDefaults.phone;
+  const website = (_p = (_o = data.props) == null ? void 0 : _o.website) != null ? _p : SignaturePropsDefaults.website;
+  const imageUrl = (_r = (_q = data.props) == null ? void 0 : _q.imageUrl) != null ? _r : SignaturePropsDefaults.imageUrl;
+  const imageSize = (_t = (_s = data.props) == null ? void 0 : _s.imageSize) != null ? _t : SignaturePropsDefaults.imageSize;
+  const imageShape = (_v = (_u = data.props) == null ? void 0 : _u.imageShape) != null ? _v : SignaturePropsDefaults.imageShape;
+  const layout = (_x = (_w = data.props) == null ? void 0 : _w.layout) != null ? _x : SignaturePropsDefaults.layout;
+  const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
+  const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
+  const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Greeting",
+      defaultValue: greeting,
+      onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Name",
+      defaultValue: name,
+      onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Title",
+      defaultValue: title,
+      onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Company",
+      defaultValue: company,
+      onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Address",
+      defaultValue: address,
+      onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Email",
+      defaultValue: email,
+      onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Phone",
+      defaultValue: phone,
+      onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Website",
+      defaultValue: website,
+      onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    TextInput,
+    {
+      label: "Image URL",
+      defaultValue: imageUrl,
+      onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    SliderInput,
+    {
+      label: "Image size",
+      iconLabel: /* @__PURE__ */ React72.createElement(AspectRatioOutlined, { sx: { color: "text.secondary" } }),
+      units: "px",
+      step: 4,
+      min: 32,
+      max: 128,
+      defaultValue: imageSize,
+      onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    RadioGroupInput,
+    {
+      label: "Image shape",
+      defaultValue: imageShape,
+      onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
+    },
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "circle" }, "Circle"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "square" }, "Square"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "rounded" }, "Rounded")
+  ), /* @__PURE__ */ React72.createElement(
+    RadioGroupInput,
+    {
+      label: "Layout",
+      defaultValue: layout,
+      onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
+    },
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "horizontal" }, "Horizontal"),
+    /* @__PURE__ */ React72.createElement(ToggleButton, { value: "vertical" }, "Vertical")
+  ), /* @__PURE__ */ React72.createElement(
+    ColorInput2,
+    {
+      label: "Name color",
+      defaultValue: nameColor,
+      onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    ColorInput2,
+    {
+      label: "Text color",
+      defaultValue: textColor,
+      onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    ColorInput2,
+    {
+      label: "Link color",
+      defaultValue: linkColor,
+      onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    MultiStylePropertyPanel,
+    {
+      names: ["backgroundColor", "fontFamily", "padding"],
+      value: data.style,
+      onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
+    }
+  ));
+}
 function SpacerSidebarPanel({ data, setData }) {
   var _a, _b;
   const [, setErrors] = useState(null);
@@ -2996,11 +3327,11 @@ function SpacerSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React72.createElement(
     SliderInput,
     {
       label: "Height",
-      iconLabel: /* @__PURE__ */ React82.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
+      iconLabel: /* @__PURE__ */ React72.createElement(HeightOutlined, { sx: { color: "text.secondary" } }),
       units: "px",
       step: 4,
       min: 4,
@@ -3015,11 +3346,11 @@ function BooleanInput({ label, defaultValue, onChange }) {
   useEffect(() => {
     setValue(defaultValue);
   }, [defaultValue]);
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     FormControlLabel,
     {
       label,
-      control: /* @__PURE__ */ React82.createElement(
+      control: /* @__PURE__ */ React72.createElement(
         Switch,
         {
           checked: value,
@@ -3046,7 +3377,7 @@ function TextSidebarPanel({ data, setData }) {
       setErrors(res.error);
     }
   };
-  return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React72.createElement(
     TextInput,
     {
       label: "Content",
@@ -3054,14 +3385,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__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.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__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     MultiStylePropertyPanel,
     {
       names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
@@ -3073,7 +3404,7 @@ function TextSidebarPanel({ data, setData }) {
 
 // src/app/inspector-drawer/configuration-panel/index.tsx
 function renderMessage(val) {
-  return /* @__PURE__ */ React82.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React82.createElement(Typography, { color: "text.secondary" }, val));
+  return /* @__PURE__ */ React72.createElement(Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React72.createElement(Typography, { color: "text.secondary" }, val));
 }
 function ConfigurationPanel() {
   const document2 = useDocument();
@@ -3089,53 +3420,55 @@ function ConfigurationPanel() {
   const { data, type } = block;
   switch (type) {
     case "Avatar":
-      return /* @__PURE__ */ React82.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Button":
-      return /* @__PURE__ */ React82.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "ColumnsContainer":
-      return /* @__PURE__ */ React82.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Container":
-      return /* @__PURE__ */ React82.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Divider":
-      return /* @__PURE__ */ React82.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Heading":
-      return /* @__PURE__ */ React82.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Html":
-      return /* @__PURE__ */ React82.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Image":
-      return /* @__PURE__ */ React82.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "EmailLayout":
-      return /* @__PURE__ */ React82.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Spacer":
-      return /* @__PURE__ */ React82.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+    case "Signature":
+      return /* @__PURE__ */ React72.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     case "Text":
-      return /* @__PURE__ */ React82.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
+      return /* @__PURE__ */ React72.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
     default:
-      return /* @__PURE__ */ React82.createElement("pre", null, JSON.stringify(block, null, "  "));
+      return /* @__PURE__ */ React72.createElement("pre", null, JSON.stringify(block, null, "  "));
   }
 }
 function StylesPanel() {
   const block = useDocument().root;
   if (!block) {
-    return /* @__PURE__ */ React82.createElement("p", null, "Block not found");
+    return /* @__PURE__ */ React72.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__ */ React82.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
+  return /* @__PURE__ */ React72.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__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React82.createElement(FileDownloadOutlined, null),
+      startIcon: /* @__PURE__ */ React72.createElement(FileDownloadOutlined, null),
       href,
       download: "emailTemplate.json",
       fullWidth: true
@@ -3167,9 +3500,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
     }
   };
   if (!currentTemplateId) {
-    return /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
+    return /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
   }
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React82.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React72.createElement(Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React72.createElement(
     Typography,
     {
       variant: "body2",
@@ -3182,29 +3515,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
       }
     },
     "Save functionality is disabled. To enable saving, provide the necessary callback functions."
-  ), persistenceEnabled && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+  ), persistenceEnabled && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "primary",
-      startIcon: /* @__PURE__ */ React82.createElement(ContentCopyOutlined, null),
+      startIcon: /* @__PURE__ */ React72.createElement(ContentCopyOutlined, null),
       onClick: handleCopyToSamples,
       fullWidth: true,
       disabled: !copyTemplate
     },
     "Save as Sample Template"
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     Button$1,
     {
       variant: "outlined",
       color: "error",
-      startIcon: /* @__PURE__ */ React82.createElement(DeleteOutlined, null),
+      startIcon: /* @__PURE__ */ React72.createElement(DeleteOutlined, null),
       onClick: handleDelete,
       fullWidth: true,
       disabled: !deleteTemplate
     },
     "Delete Template"
-  )))), persistenceEnabled && /* @__PURE__ */ React82.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React82.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React82.createElement(TemplateDownloadButton, null))));
+  )))), persistenceEnabled && /* @__PURE__ */ React72.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React72.createElement(Stack, { spacing: 2 }, /* @__PURE__ */ React72.createElement(TemplateDownloadButton, null))));
 }
 
 // src/app/inspector-drawer/index.tsx
@@ -3221,11 +3554,11 @@ function InspectorDrawer({
   const renderCurrentSidebarPanel = () => {
     switch (selectedSidebarTab) {
       case "block-configuration":
-        return /* @__PURE__ */ React82.createElement(ConfigurationPanel, null);
+        return /* @__PURE__ */ React72.createElement(ConfigurationPanel, null);
       case "styles":
-        return /* @__PURE__ */ React82.createElement(StylesPanel, null);
+        return /* @__PURE__ */ React72.createElement(StylesPanel, null);
       case "template-settings":
-        return /* @__PURE__ */ React82.createElement(
+        return /* @__PURE__ */ React72.createElement(
           TemplatePanel,
           {
             deleteTemplate,
@@ -3234,7 +3567,7 @@ function InspectorDrawer({
         );
     }
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -3256,8 +3589,8 @@ function InspectorDrawer({
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
       }
     },
-    /* @__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())
+    /* @__PURE__ */ React72.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React72.createElement(Box, { px: 2 }, /* @__PURE__ */ React72.createElement(Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React72.createElement(Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React72.createElement(Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React72.createElement(Tab, { value: "template-settings", label: "Settings" })))),
+    /* @__PURE__ */ React72.createElement(Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
   );
 }
 function SidebarButton({
@@ -3279,7 +3612,7 @@ function SidebarButton({
       console.error("Error loading template:", error);
     }
   });
-  return /* @__PURE__ */ React82.createElement(Button$1, { size: "small", onClick: handleClick, sx: sx2 }, children);
+  return /* @__PURE__ */ React72.createElement(Button$1, { size: "small", onClick: handleClick, sx: sx2 }, children);
 }
 
 // sample-templates/empty-email-message.ts
@@ -3368,7 +3701,7 @@ function SamplesDrawer({
   if (!enabled) {
     return null;
   }
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     Drawer,
     {
       variant: "persistent",
@@ -3390,7 +3723,7 @@ function SamplesDrawer({
         width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
       }
     },
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(
       Stack,
       {
         spacing: 3,
@@ -3400,7 +3733,7 @@ function SamplesDrawer({
         justifyContent: "space-between",
         height: "100%"
       },
-      /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React72.createElement(
         Stack,
         {
           spacing: 2,
@@ -3411,8 +3744,8 @@ function SamplesDrawer({
             }
           }
         },
-        /* @__PURE__ */ React82.createElement(Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
-        loadTemplates && /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+        /* @__PURE__ */ React72.createElement(Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
+        loadTemplates && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
           Typography,
           {
             variant: "subtitle2",
@@ -3420,7 +3753,7 @@ function SamplesDrawer({
             sx: { fontWeight: "bold", mt: 2 }
           },
           "Your Templates"
-        ), 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(
+        ), loadingTemplates ? /* @__PURE__ */ React72.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72.createElement(CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React72.createElement(
           Box,
           {
             key: template.id,
@@ -3435,7 +3768,7 @@ function SamplesDrawer({
               }
             }
           },
-          /* @__PURE__ */ React82.createElement(
+          /* @__PURE__ */ React72.createElement(
             SidebarButton,
             {
               templateId: template.id,
@@ -3444,15 +3777,15 @@ function SamplesDrawer({
             },
             template.name
           )
-        ))) : /* @__PURE__ */ React82.createElement(
+        ))) : /* @__PURE__ */ React72.createElement(
           Typography,
           {
             variant: "body2",
             sx: { color: "text.secondary", py: 1 }
           },
           "No saved templates"
-        ), /* @__PURE__ */ React82.createElement(Divider$1, null)),
-        /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+        ), /* @__PURE__ */ React72.createElement(Divider$1, null)),
+        /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
           Typography,
           {
             variant: "subtitle2",
@@ -3460,7 +3793,7 @@ function SamplesDrawer({
             sx: { fontWeight: "bold", mt: 1 }
           },
           "Sample Templates"
-        ), 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(
+        ), loadingSamples ? /* @__PURE__ */ React72.createElement(Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72.createElement(CircularProgress, { size: 24 })) : /* @__PURE__ */ React72.createElement(Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React72.createElement(
           SidebarButton,
           {
             key: sample.id,
@@ -3485,7 +3818,7 @@ var ICON_SX = {
   borderColor: "cadet.300"
 };
 function BlockTypeButton({ label, icon, onClick }) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Button$1,
     {
       sx: BUTTON_SX2,
@@ -3494,14 +3827,14 @@ function BlockTypeButton({ label, icon, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React82.createElement(Box, { sx: ICON_SX }, icon),
-    /* @__PURE__ */ React82.createElement(Typography, { variant: "body2" }, label)
+    /* @__PURE__ */ React72.createElement(Box, { sx: ICON_SX }, icon),
+    /* @__PURE__ */ React72.createElement(Typography, { variant: "body2" }, label)
   );
 }
 var BUTTONS = [
   {
     label: "Heading",
-    icon: /* @__PURE__ */ React82.createElement(HMobiledataOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(HMobiledataOutlined, null),
     block: () => ({
       type: "Heading",
       data: {
@@ -3514,7 +3847,7 @@ var BUTTONS = [
   },
   {
     label: "Text",
-    icon: /* @__PURE__ */ React82.createElement(NotesOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(NotesOutlined, null),
     block: () => ({
       type: "Text",
       data: {
@@ -3528,7 +3861,7 @@ var BUTTONS = [
   },
   {
     label: "Button",
-    icon: /* @__PURE__ */ React82.createElement(SmartButtonOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(SmartButtonOutlined, null),
     block: () => ({
       type: "Button",
       data: {
@@ -3542,7 +3875,7 @@ var BUTTONS = [
   },
   {
     label: "Image",
-    icon: /* @__PURE__ */ React82.createElement(ImageOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(ImageOutlined, null),
     block: () => ({
       type: "Image",
       data: {
@@ -3558,7 +3891,7 @@ var BUTTONS = [
   },
   {
     label: "Avatar",
-    icon: /* @__PURE__ */ React82.createElement(AccountCircleOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(AccountCircleOutlined, null),
     block: () => ({
       type: "Avatar",
       data: {
@@ -3570,9 +3903,51 @@ var BUTTONS = [
       }
     })
   },
+  {
+    label: "Personal Signature",
+    icon: /* @__PURE__ */ React72.createElement(ContactMailOutlined, null),
+    block: () => ({
+      type: "Signature",
+      data: {
+        props: {
+          greeting: "Best regards,",
+          name: "John Doe",
+          title: "Software Engineer",
+          company: "Acme Inc.",
+          email: "john@example.com",
+          phone: "+1 234 567 890",
+          imageUrl: "https://ui-avatars.com/api/?name=John+Doe&size=128",
+          imageSize: 64,
+          imageShape: "circle",
+          layout: "horizontal"
+        },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  },
+  {
+    label: "Company Signature",
+    icon: /* @__PURE__ */ React72.createElement(BusinessOutlined, null),
+    block: () => ({
+      type: "Signature",
+      data: {
+        props: {
+          company: "Acme Inc.",
+          address: "123 Main Street, City, Country",
+          email: "support@example.com",
+          website: "www.example.com",
+          imageUrl: "https://placehold.co/128x128/EEE/999?text=Logo",
+          imageSize: 48,
+          imageShape: "rounded",
+          layout: "horizontal"
+        },
+        style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
+      }
+    })
+  },
   {
     label: "Divider",
-    icon: /* @__PURE__ */ React82.createElement(HorizontalRuleOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(HorizontalRuleOutlined, null),
     block: () => ({
       type: "Divider",
       data: {
@@ -3585,7 +3960,7 @@ var BUTTONS = [
   },
   {
     label: "Spacer",
-    icon: /* @__PURE__ */ React82.createElement(Crop32Outlined, null),
+    icon: /* @__PURE__ */ React72.createElement(Crop32Outlined, null),
     block: () => ({
       type: "Spacer",
       data: {}
@@ -3593,7 +3968,7 @@ var BUTTONS = [
   },
   {
     label: "Html",
-    icon: /* @__PURE__ */ React82.createElement(HtmlOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(HtmlOutlined, null),
     block: () => ({
       type: "Html",
       data: {
@@ -3608,7 +3983,7 @@ var BUTTONS = [
   },
   {
     label: "Columns",
-    icon: /* @__PURE__ */ React82.createElement(ViewColumnOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(ViewColumnOutlined, null),
     block: () => ({
       type: "ColumnsContainer",
       data: {
@@ -3623,7 +3998,7 @@ var BUTTONS = [
   },
   {
     label: "Container",
-    icon: /* @__PURE__ */ React82.createElement(LibraryAddOutlined, null),
+    icon: /* @__PURE__ */ React72.createElement(LibraryAddOutlined, null),
     block: () => ({
       type: "Container",
       data: {
@@ -3647,7 +4022,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
   if (anchorEl === null) {
     return null;
   }
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Menu,
     {
       open: true,
@@ -3656,7 +4031,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" }
     },
-    /* @__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()) })))
+    /* @__PURE__ */ React72.createElement(Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React72.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
   );
 }
 function DividerButton({ buttonElement, onClick }) {
@@ -3683,7 +4058,7 @@ function DividerButton({ buttonElement, onClick }) {
       window.removeEventListener("mousemove", listener);
     };
   }, [buttonElement, setVisible]);
-  return /* @__PURE__ */ React82.createElement(Fade, { in: visible }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Fade, { in: visible }, /* @__PURE__ */ React72.createElement(
     IconButton,
     {
       size: "small",
@@ -3706,11 +4081,11 @@ function DividerButton({ buttonElement, onClick }) {
         onClick();
       }
     },
-    /* @__PURE__ */ React82.createElement(AddOutlined, { fontSize: "small" })
+    /* @__PURE__ */ React72.createElement(AddOutlined, { fontSize: "small" })
   ));
 }
 function PlaceholderButton({ onClick }) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     ButtonBase,
     {
       onClick: (ev) => {
@@ -3726,7 +4101,7 @@ function PlaceholderButton({ onClick }) {
         bgcolor: "rgba(0,0,0, 0.05)"
       }
     },
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(
       AddOutlined,
       {
         sx: {
@@ -3750,12 +4125,12 @@ function AddBlockButton({ onSelect, placeholder }) {
   };
   const renderButton2 = () => {
     if (placeholder) {
-      return /* @__PURE__ */ React82.createElement(PlaceholderButton, { onClick: handleButtonClick });
+      return /* @__PURE__ */ React72.createElement(PlaceholderButton, { onClick: handleButtonClick });
     } else {
-      return /* @__PURE__ */ React82.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
+      return /* @__PURE__ */ React72.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
     }
   };
-  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 }));
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React72.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
 }
 
 // src/editor/blocks/helpers/editor-children-ids/index.tsx
@@ -3782,9 +4157,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
     });
   };
   if (!childrenIds || childrenIds.length === 0) {
-    return /* @__PURE__ */ React82.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
+    return /* @__PURE__ */ React72.createElement(AddBlockButton, { placeholder: true, 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 }));
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React72.createElement(Fragment, { key: childId }, /* @__PURE__ */ React72.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React72.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React72.createElement(AddBlockButton, { onSelect: appendBlock }));
 }
 
 // src/editor/blocks/columns-container/columns-container-editor.tsx
@@ -3811,15 +4186,15 @@ function ColumnsContainerEditor({ style, props }) {
     });
     setSelectedBlockId(blockId);
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     columns_container_default,
     {
       props: restProps,
       style,
       columns: [
-        /* @__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) })
+        /* @__PURE__ */ React72.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
+        /* @__PURE__ */ React72.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
+        /* @__PURE__ */ React72.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
       ]
     }
   );
@@ -3829,7 +4204,7 @@ function ContainerEditor({ style, props }) {
   const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React82.createElement(container_default, { style }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(container_default, { style }, /* @__PURE__ */ React72.createElement(
     EditorChildrenIds,
     {
       childrenIds,
@@ -3848,7 +4223,65 @@ function ContainerEditor({ style, props }) {
     }
   ));
 }
-function getFontFamily6(fontFamily) {
+function generateId2() {
+  return `block-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+}
+function rekeyBlocks(blocks, rootBlockId) {
+  var _a, _b, _c;
+  const idMap = {};
+  for (const oldId of Object.keys(blocks)) {
+    idMap[oldId] = generateId2();
+  }
+  const remapIds = (ids) => ids == null ? void 0 : ids.map((id) => {
+    var _a2;
+    return (_a2 = idMap[id]) != null ? _a2 : id;
+  });
+  const newBlocks = {};
+  for (const [oldId, block] of Object.entries(blocks)) {
+    const b = block;
+    const newId = idMap[oldId];
+    if (b.type === "Container") {
+      newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
+        data: __spreadProps(__spreadValues({}, b.data), {
+          props: __spreadProps(__spreadValues({}, b.data.props), { childrenIds: remapIds((_a = b.data.props) == null ? void 0 : _a.childrenIds) })
+        })
+      });
+    } else if (b.type === "ColumnsContainer") {
+      newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
+        data: __spreadProps(__spreadValues({}, b.data), {
+          props: __spreadProps(__spreadValues({}, b.data.props), {
+            columns: (_c = (_b = b.data.props) == null ? void 0 : _b.columns) == null ? void 0 : _c.map((c) => __spreadProps(__spreadValues({}, c), {
+              childrenIds: remapIds(c.childrenIds)
+            }))
+          })
+        })
+      });
+    } else {
+      newBlocks[newId] = b;
+    }
+  }
+  return { blocks: newBlocks, newRootId: idMap[rootBlockId] };
+}
+function collectBlock(blockId, document2) {
+  var _a, _b, _c, _d, _e;
+  const block = document2[blockId];
+  if (!block) return {};
+  const result = { [blockId]: block };
+  if (block.type === "Container") {
+    for (const childId of (_b = (_a = block.data.props) == null ? void 0 : _a.childrenIds) != null ? _b : []) {
+      Object.assign(result, collectBlock(childId, document2));
+    }
+  }
+  if (block.type === "ColumnsContainer") {
+    for (const col of (_d = (_c = block.data.props) == null ? void 0 : _c.columns) != null ? _d : []) {
+      for (const childId of (_e = col.childrenIds) != null ? _e : []) {
+        Object.assign(result, collectBlock(childId, document2));
+      }
+    }
+  }
+  return result;
+}
+function getFontFamily7(fontFamily) {
   const f = fontFamily != null ? fontFamily : "MODERN_SANS";
   switch (f) {
     case "MODERN_SANS":
@@ -3876,7 +4309,93 @@ function EmailLayoutEditor(props) {
   const childrenIds = (_a = props.childrenIds) != null ? _a : [];
   const document2 = useDocument();
   const currentBlockId = useCurrentBlockId();
-  return /* @__PURE__ */ React82.createElement(
+  const selectedBlockId = useSelectedBlockId();
+  const handleDelete = useCallback((e) => {
+    var _a2, _b2, _c2;
+    if (e.key !== "Delete" && e.key !== "Backspace") return;
+    if (!selectedBlockId) return;
+    const target = e.target;
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+      return;
+    }
+    e.preventDefault();
+    const filterChildrenIds = (ids) => ids == null ? void 0 : ids.filter((id) => id !== selectedBlockId);
+    const nDocument = __spreadValues({}, document2);
+    for (const [id, b] of Object.entries(nDocument)) {
+      const block = b;
+      if (id === selectedBlockId) continue;
+      switch (block.type) {
+        case "EmailLayout":
+          nDocument[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { childrenIds: filterChildrenIds(block.data.childrenIds) }) });
+          break;
+        case "Container":
+          nDocument[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { childrenIds: filterChildrenIds((_a2 = block.data.props) == null ? void 0 : _a2.childrenIds) }) }) });
+          break;
+        case "ColumnsContainer":
+          nDocument[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { columns: (_c2 = (_b2 = block.data.props) == null ? void 0 : _b2.columns) == null ? void 0 : _c2.map((c) => __spreadProps(__spreadValues({}, c), { childrenIds: filterChildrenIds(c.childrenIds) })) }) }) });
+          break;
+        default:
+          nDocument[id] = block;
+      }
+    }
+    delete nDocument[selectedBlockId];
+    resetDocument(nDocument);
+  }, [selectedBlockId, document2]);
+  const handleCopy = useCallback((e) => {
+    if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
+    if (!selectedBlockId) return;
+    const target = e.target;
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+      return;
+    }
+    const blocks = collectBlock(selectedBlockId, document2);
+    if (Object.keys(blocks).length === 0) return;
+    e.preventDefault();
+    const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
+    navigator.clipboard.writeText(payload);
+  }, [selectedBlockId, document2]);
+  const handlePaste = useCallback((e) => __async(null, null, function* () {
+    var _a2;
+    const target = e.target;
+    if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+      return;
+    }
+    const text = (_a2 = e.clipboardData) == null ? void 0 : _a2.getData("text/plain");
+    if (!text) return;
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch (e2) {
+      return;
+    }
+    if (!(parsed == null ? void 0 : parsed.__emailEditorBlocks) || !parsed.rootBlockId || !parsed.blocks) return;
+    e.preventDefault();
+    const { blocks: newBlocks, newRootId } = rekeyBlocks(parsed.blocks, parsed.rootBlockId);
+    const doc = __spreadValues({}, document2);
+    Object.assign(doc, newBlocks);
+    const currentChildrenIds = [...childrenIds || []];
+    const insertIndex = selectedBlockId ? currentChildrenIds.indexOf(selectedBlockId) + 1 : currentChildrenIds.length;
+    currentChildrenIds.splice(insertIndex, 0, newRootId);
+    doc[currentBlockId] = {
+      type: "EmailLayout",
+      data: __spreadProps(__spreadValues({}, document2[currentBlockId].data), {
+        childrenIds: currentChildrenIds
+      })
+    };
+    resetDocument(doc);
+    setSelectedBlockId(newRootId);
+  }), [document2, childrenIds, selectedBlockId, currentBlockId]);
+  useEffect(() => {
+    window.addEventListener("keydown", handleDelete);
+    window.addEventListener("keydown", handleCopy);
+    window.addEventListener("paste", handlePaste);
+    return () => {
+      window.removeEventListener("keydown", handleDelete);
+      window.removeEventListener("keydown", handleCopy);
+      window.removeEventListener("paste", handlePaste);
+    };
+  }, [handleDelete, handleCopy, handlePaste]);
+  return /* @__PURE__ */ React72.createElement(
     "div",
     {
       onClick: () => {
@@ -3885,7 +4404,7 @@ function EmailLayoutEditor(props) {
       style: {
         backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
         color: (_c = props.textColor) != null ? _c : "#262626",
-        fontFamily: getFontFamily6(props.fontFamily),
+        fontFamily: getFontFamily7(props.fontFamily),
         fontSize: "16px",
         fontWeight: "400",
         letterSpacing: "0.15008px",
@@ -3896,7 +4415,7 @@ function EmailLayoutEditor(props) {
         minHeight: "100%"
       }
     },
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(
       "table",
       {
         align: "center",
@@ -3919,7 +4438,7 @@ function EmailLayoutEditor(props) {
         cellPadding: "0",
         border: 0
       },
-      /* @__PURE__ */ React82.createElement("tbody", null, /* @__PURE__ */ React82.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React82.createElement("td", null, /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72.createElement("td", null, /* @__PURE__ */ React72.createElement(
         EditorChildrenIds,
         {
           childrenIds,
@@ -3949,6 +4468,33 @@ var sx = {
   paddingY: 1,
   zIndex: "fab"
 };
+function collectBlock2(blockId, document2) {
+  var _a, _b, _c, _d, _e, _f;
+  const block = document2[blockId];
+  if (!block) return {};
+  const result = { [blockId]: block };
+  if (block.type === "Container") {
+    const childrenIds = (_b = (_a = block.data.props) == null ? void 0 : _a.childrenIds) != null ? _b : [];
+    for (const childId of childrenIds) {
+      Object.assign(result, collectBlock2(childId, document2));
+    }
+  }
+  if (block.type === "ColumnsContainer") {
+    const columns = (_d = (_c = block.data.props) == null ? void 0 : _c.columns) != null ? _d : [];
+    for (const col of columns) {
+      for (const childId of (_e = col.childrenIds) != null ? _e : []) {
+        Object.assign(result, collectBlock2(childId, document2));
+      }
+    }
+  }
+  if (block.type === "EmailLayout") {
+    const childrenIds = (_f = block.data.childrenIds) != null ? _f : [];
+    for (const childId of childrenIds) {
+      Object.assign(result, collectBlock2(childId, document2));
+    }
+  }
+  return result;
+}
 function TuneMenu({ blockId }) {
   const document2 = useDocument();
   const handleDeleteClick = () => {
@@ -4002,6 +4548,11 @@ function TuneMenu({ blockId }) {
     delete nDocument[blockId];
     resetDocument(nDocument);
   };
+  const handleCopyClick = () => {
+    const blocks = collectBlock2(blockId, document2);
+    const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: blockId, blocks });
+    navigator.clipboard.writeText(payload);
+  };
   const handleMoveClick = (direction) => {
     var _a, _b, _c;
     const moveChildrenIds = (ids) => {
@@ -4063,7 +4614,7 @@ function TuneMenu({ blockId }) {
     resetDocument(nDocument);
     setSelectedBlockId(blockId);
   };
-  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" })))));
+  return /* @__PURE__ */ React72.createElement(Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React72.createElement(Stack, null, /* @__PURE__ */ React72.createElement(Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72.createElement(DeleteOutlined, { fontSize: "small" })))));
 }
 
 // src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
@@ -4081,9 +4632,9 @@ function EditorBlockWrapper({ children }) {
     if (selectedBlockId !== blockId) {
       return null;
     }
-    return /* @__PURE__ */ React82.createElement(TuneMenu, { blockId });
+    return /* @__PURE__ */ React72.createElement(TuneMenu, { blockId });
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Box,
     {
       sx: {
@@ -4102,14 +4653,131 @@ function EditorBlockWrapper({ children }) {
       onClick: (ev) => {
         setSelectedBlockId(blockId);
         ev.stopPropagation();
-        ev.preventDefault();
       }
     },
     renderMenu(),
     children
   );
 }
-function getFontFamily7(fontFamily) {
+function getFontFamily8(fontFamily) {
+  switch (fontFamily) {
+    case "MODERN_SANS":
+      return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
+    case "BOOK_SANS":
+      return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
+    case "ORGANIC_SANS":
+      return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
+    case "GEOMETRIC_SANS":
+      return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
+    case "HEAVY_SANS":
+      return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
+    case "ROUNDED_SANS":
+      return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
+    case "MODERN_SERIF":
+      return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
+    case "BOOK_SERIF":
+      return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
+    case "MONOSPACE":
+      return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
+  }
+  return void 0;
+}
+var getPadding11 = (padding) => padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : void 0;
+function getRoundedCorners2(props) {
+  var _a;
+  const buttonStyle = (_a = props == null ? void 0 : props.buttonStyle) != null ? _a : ButtonPropsDefaults.buttonStyle;
+  switch (buttonStyle) {
+    case "rectangle":
+      return void 0;
+    case "pill":
+      return 64;
+    case "rounded":
+    default:
+      return 4;
+  }
+}
+function getButtonSizePadding2(props) {
+  var _a;
+  const size = (_a = props == null ? void 0 : props.size) != null ? _a : ButtonPropsDefaults.size;
+  switch (size) {
+    case "x-small":
+      return [4, 8];
+    case "small":
+      return [8, 12];
+    case "large":
+      return [16, 32];
+    case "medium":
+    default:
+      return [12, 20];
+  }
+}
+function ButtonEditor({ style, props }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const blockId = useCurrentBlockId();
+  const selectedBlockId = useSelectedBlockId();
+  const isSelected = selectedBlockId === blockId;
+  const text = (_a = props == null ? void 0 : props.text) != null ? _a : ButtonPropsDefaults.text;
+  const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
+  const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
+  const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
+  const [localText, setLocalText] = useState(text);
+  useEffect(() => {
+    setLocalText(text);
+  }, [text]);
+  const padding = getButtonSizePadding2(props);
+  const wrapperStyle = {
+    backgroundColor: (_e = style == null ? void 0 : style.backgroundColor) != null ? _e : void 0,
+    textAlign: (_f = style == null ? void 0 : style.textAlign) != null ? _f : void 0,
+    padding: getPadding11(style == null ? void 0 : style.padding)
+  };
+  const linkStyle = {
+    color: buttonTextColor,
+    fontSize: (_g = style == null ? void 0 : style.fontSize) != null ? _g : 16,
+    fontFamily: getFontFamily8(style == null ? void 0 : style.fontFamily),
+    fontWeight: (_h = style == null ? void 0 : style.fontWeight) != null ? _h : "bold",
+    backgroundColor: buttonBackgroundColor,
+    borderRadius: getRoundedCorners2(props),
+    display: fullWidth ? "block" : "inline-block",
+    padding: `${padding[0]}px ${padding[1]}px`,
+    textDecoration: "none"
+  };
+  const handleTextChange = (e) => {
+    const newText = e.target.value;
+    setLocalText(newText);
+    setDocument({
+      [blockId]: {
+        type: "Button",
+        data: {
+          style,
+          props: __spreadProps(__spreadValues({}, props), {
+            text: newText
+          })
+        }
+      }
+    });
+  };
+  if (isSelected) {
+    const inputStyle = __spreadProps(__spreadValues({}, linkStyle), {
+      border: "none",
+      outline: "none",
+      cursor: "text",
+      width: fullWidth ? "100%" : void 0,
+      textAlign: "center"
+    });
+    return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72.createElement(
+      "input",
+      {
+        type: "text",
+        value: localText,
+        onChange: handleTextChange,
+        style: inputStyle,
+        onClick: (e) => e.stopPropagation()
+      }
+    ));
+  }
+  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, /* @__PURE__ */ React72.createElement("span", null, text)));
+}
+function getFontFamily9(fontFamily) {
   switch (fontFamily) {
     case "MODERN_SANS":
       return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
@@ -4136,7 +4804,7 @@ function getFontFamily7(fontFamily) {
   }
   return void 0;
 }
-function getPadding10(padding) {
+function getPadding12(padding) {
   if (!padding) return void 0;
   if (typeof padding === "object" && !Array.isArray(padding) && "top" in padding && "right" in padding && "bottom" in padding && "left" in padding) {
     return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
@@ -4180,11 +4848,11 @@ function HeadingEditor({ style, props }) {
   const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
   const [localText, setLocalText] = useState(textContent);
   const rootBlock = document2.root;
-  const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily7(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
+  const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
   useEffect(() => {
     setLocalText(textContent);
   }, [textContent]);
-  const fontFamily = getFontFamily7(style == null ? void 0 : style.fontFamily) || rootFontFamily;
+  const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
   const hStyle = {
     color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
     backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
@@ -4193,7 +4861,7 @@ function HeadingEditor({ style, props }) {
     margin: 0,
     fontFamily,
     fontSize: getFontSize2(level),
-    padding: getPadding10(style == null ? void 0 : style.padding),
+    padding: getPadding12(style == null ? void 0 : style.padding),
     width: "100%",
     minHeight: "1em"
   };
@@ -4230,7 +4898,7 @@ function HeadingEditor({ style, props }) {
     }
   };
   if (isSelected) {
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React72.createElement(
       "textarea",
       {
         value: localText,
@@ -4245,14 +4913,310 @@ function HeadingEditor({ style, props }) {
   }
   switch (level) {
     case "h1":
-      return /* @__PURE__ */ React82.createElement("h1", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React72.createElement("h1", { style: hStyle }, textContent);
     case "h2":
-      return /* @__PURE__ */ React82.createElement("h2", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React72.createElement("h2", { style: hStyle }, textContent);
     case "h3":
-      return /* @__PURE__ */ React82.createElement("h3", { style: hStyle }, textContent);
+      return /* @__PURE__ */ React72.createElement("h3", { style: hStyle }, textContent);
   }
 }
-function getFontFamily8(fontFamily) {
+function HtmlEditor({ style, props }) {
+  var _a, _b, _c, _d, _e, _f;
+  const blockId = useCurrentBlockId();
+  const selectedBlockId = useSelectedBlockId();
+  const isSelected = selectedBlockId === blockId;
+  const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
+  const [localContents, setLocalContents] = useState(contents);
+  useEffect(() => {
+    setLocalContents(contents);
+  }, [contents]);
+  const cssStyle = {
+    color: (_b = style == null ? void 0 : style.color) != null ? _b : void 0,
+    backgroundColor: (_c = style == null ? void 0 : style.backgroundColor) != null ? _c : void 0,
+    fontSize: (_d = style == null ? void 0 : style.fontSize) != null ? _d : void 0,
+    textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
+    padding: (style == null ? void 0 : style.padding) ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px` : void 0
+  };
+  const handleChange = (e) => {
+    const newContents = e.target.value;
+    setLocalContents(newContents);
+    setDocument({
+      [blockId]: {
+        type: "Html",
+        data: {
+          style,
+          props: __spreadProps(__spreadValues({}, props), {
+            contents: newContents
+          })
+        }
+      }
+    });
+  };
+  const adjustTextareaHeight = (element) => {
+    if (element) {
+      element.style.height = "auto";
+      element.style.height = `${element.scrollHeight}px`;
+    }
+  };
+  if (isSelected) {
+    const textareaStyle = __spreadProps(__spreadValues({}, cssStyle), {
+      fontFamily: '"Nimbus Mono PS", "Courier New", monospace',
+      fontSize: 13,
+      color: (_f = cssStyle.color) != null ? _f : "#333",
+      border: "none",
+      outline: "none",
+      resize: "none",
+      overflow: "hidden",
+      width: "100%",
+      display: "block",
+      margin: 0,
+      backgroundColor: "transparent"
+    });
+    return /* @__PURE__ */ React72.createElement("div", { style: cssStyle }, /* @__PURE__ */ React72.createElement(
+      "textarea",
+      {
+        value: localContents,
+        onChange: handleChange,
+        style: textareaStyle,
+        rows: 3,
+        onInput: (e) => adjustTextareaHeight(e.target),
+        ref: (el) => el && adjustTextareaHeight(el),
+        onClick: (e) => e.stopPropagation()
+      }
+    ));
+  }
+  if (!contents) {
+    return /* @__PURE__ */ React72.createElement("div", { style: cssStyle });
+  }
+  return /* @__PURE__ */ React72.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
+}
+function getImageBorderRadius2(shape, size) {
+  switch (shape) {
+    case "circle":
+      return size;
+    case "rounded":
+      return size * 0.125;
+    case "square":
+    default:
+      return void 0;
+  }
+}
+function SignatureEditor({ style, props }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const blockId = useCurrentBlockId();
+  const selectedBlockId = useSelectedBlockId();
+  const isSelected = selectedBlockId === blockId;
+  const greeting = (_a = props == null ? void 0 : props.greeting) != null ? _a : SignaturePropsDefaults.greeting;
+  const name = (_b = props == null ? void 0 : props.name) != null ? _b : SignaturePropsDefaults.name;
+  const title = (_c = props == null ? void 0 : props.title) != null ? _c : SignaturePropsDefaults.title;
+  const company = (_d = props == null ? void 0 : props.company) != null ? _d : SignaturePropsDefaults.company;
+  const address = (_e = props == null ? void 0 : props.address) != null ? _e : SignaturePropsDefaults.address;
+  const email = (_f = props == null ? void 0 : props.email) != null ? _f : SignaturePropsDefaults.email;
+  const phone = (_g = props == null ? void 0 : props.phone) != null ? _g : SignaturePropsDefaults.phone;
+  const website = (_h = props == null ? void 0 : props.website) != null ? _h : SignaturePropsDefaults.website;
+  const imageUrl = (_i = props == null ? void 0 : props.imageUrl) != null ? _i : SignaturePropsDefaults.imageUrl;
+  const imageSize = (_j = props == null ? void 0 : props.imageSize) != null ? _j : SignaturePropsDefaults.imageSize;
+  const imageShape = (_k = props == null ? void 0 : props.imageShape) != null ? _k : SignaturePropsDefaults.imageShape;
+  const layout = (_l = props == null ? void 0 : props.layout) != null ? _l : SignaturePropsDefaults.layout;
+  const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
+  const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
+  const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
+  const [localGreeting, setLocalGreeting] = useState(greeting);
+  const [localName, setLocalName] = useState(name);
+  const [localTitle, setLocalTitle] = useState(title);
+  const [localCompany, setLocalCompany] = useState(company);
+  const [localAddress, setLocalAddress] = useState(address);
+  const [localEmail, setLocalEmail] = useState(email);
+  const [localPhone, setLocalPhone] = useState(phone);
+  const [localWebsite, setLocalWebsite] = useState(website);
+  useEffect(() => {
+    setLocalGreeting(greeting);
+  }, [greeting]);
+  useEffect(() => {
+    setLocalName(name);
+  }, [name]);
+  useEffect(() => {
+    setLocalTitle(title);
+  }, [title]);
+  useEffect(() => {
+    setLocalCompany(company);
+  }, [company]);
+  useEffect(() => {
+    setLocalAddress(address);
+  }, [address]);
+  useEffect(() => {
+    setLocalEmail(email);
+  }, [email]);
+  useEffect(() => {
+    setLocalPhone(phone);
+  }, [phone]);
+  useEffect(() => {
+    setLocalWebsite(website);
+  }, [website]);
+  const updateProps = (updates) => {
+    setDocument({
+      [blockId]: {
+        type: "Signature",
+        data: {
+          style,
+          props: __spreadValues(__spreadValues({}, props), updates)
+        }
+      }
+    });
+  };
+  const greetingStyle = {
+    fontSize: 14,
+    color: textColor,
+    margin: 0,
+    marginBottom: 8,
+    lineHeight: "1.4",
+    fontStyle: "italic"
+  };
+  const nameStyle = {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: nameColor,
+    margin: 0,
+    lineHeight: "1.4"
+  };
+  const detailStyle = {
+    fontSize: 14,
+    color: textColor,
+    margin: 0,
+    lineHeight: "1.4"
+  };
+  const linkStyle = {
+    fontSize: 14,
+    color: linkColor,
+    textDecoration: "none"
+  };
+  const inputBase = {
+    border: "none",
+    outline: "none",
+    backgroundColor: "transparent",
+    width: "100%",
+    padding: 0,
+    margin: 0,
+    fontFamily: "inherit"
+  };
+  const wrapperStyle = {
+    backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
+    padding: (style == null ? void 0 : style.padding) ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px` : void 0
+  };
+  const imageElement = imageUrl ? /* @__PURE__ */ React72.createElement(
+    "img",
+    {
+      src: imageUrl,
+      alt: name || company,
+      width: imageSize,
+      height: imageSize,
+      style: {
+        width: imageSize,
+        height: imageSize,
+        objectFit: "cover",
+        borderRadius: getImageBorderRadius2(imageShape, imageSize),
+        display: "block",
+        outline: "none",
+        border: "none"
+      }
+    }
+  ) : null;
+  const greetingElement = isSelected ? /* @__PURE__ */ React72.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localGreeting,
+      onChange: (e) => {
+        setLocalGreeting(e.target.value);
+        updateProps({ greeting: e.target.value });
+      },
+      placeholder: "Greeting (e.g. Best regards,)",
+      style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
+    }
+  )) : greeting ? /* @__PURE__ */ React72.createElement("p", { style: greetingStyle }, greeting) : null;
+  const textContent = isSelected ? /* @__PURE__ */ React72.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localName,
+      onChange: (e) => {
+        setLocalName(e.target.value);
+        updateProps({ name: e.target.value });
+      },
+      placeholder: "Name",
+      style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localTitle,
+      onChange: (e) => {
+        setLocalTitle(e.target.value);
+        updateProps({ title: e.target.value });
+      },
+      placeholder: "Title",
+      style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localCompany,
+      onChange: (e) => {
+        setLocalCompany(e.target.value);
+        updateProps({ company: e.target.value });
+      },
+      placeholder: "Company",
+      style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localAddress,
+      onChange: (e) => {
+        setLocalAddress(e.target.value);
+        updateProps({ address: e.target.value });
+      },
+      placeholder: "Address",
+      style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localEmail,
+      onChange: (e) => {
+        setLocalEmail(e.target.value);
+        updateProps({ email: e.target.value });
+      },
+      placeholder: "Email",
+      style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localPhone,
+      onChange: (e) => {
+        setLocalPhone(e.target.value);
+        updateProps({ phone: e.target.value });
+      },
+      placeholder: "Phone",
+      style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
+    }
+  ), /* @__PURE__ */ React72.createElement(
+    "input",
+    {
+      value: localWebsite,
+      onChange: (e) => {
+        setLocalWebsite(e.target.value);
+        updateProps({ website: e.target.value });
+      },
+      placeholder: "Website",
+      style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
+    }
+  )) : /* @__PURE__ */ React72.createElement("div", null, name && /* @__PURE__ */ React72.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React72.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React72.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React72.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React72.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React72.createElement("p", { style: detailStyle }, "Click to edit signature"));
+  if (layout === "vertical") {
+    return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
+  }
+  return /* @__PURE__ */ React72.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72.createElement("tbody", null, /* @__PURE__ */ React72.createElement("tr", null, imageElement && /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
+}
+function getFontFamily10(fontFamily) {
   switch (fontFamily) {
     case "MODERN_SANS":
       return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
@@ -4279,7 +5243,7 @@ function getFontFamily8(fontFamily) {
   }
   return void 0;
 }
-function getPadding11(padding) {
+function getPadding13(padding) {
   if (!padding) return void 0;
   if (typeof padding === "object" && !Array.isArray(padding) && "top" in padding && "right" in padding && "bottom" in padding && "left" in padding) {
     return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
@@ -4313,11 +5277,11 @@ function TextEditor({ style, props }) {
   const [localText, setLocalText] = useState(textContent);
   const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
   const rootBlock = document2.root;
-  const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily8(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
+  const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
   useEffect(() => {
     setLocalText(textContent);
   }, [textContent]);
-  const fontFamily = getFontFamily8(style == null ? void 0 : style.fontFamily) || rootFontFamily;
+  const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
   const wStyle = {
     color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
     backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
@@ -4325,7 +5289,7 @@ function TextEditor({ style, props }) {
     fontFamily,
     fontWeight: (_f = style == null ? void 0 : style.fontWeight) != null ? _f : void 0,
     textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
-    padding: getPadding11(style == null ? void 0 : style.padding),
+    padding: getPadding13(style == null ? void 0 : style.padding),
     width: "100%",
     minHeight: "1em"
   };
@@ -4365,7 +5329,7 @@ function TextEditor({ style, props }) {
     }
   };
   if (isSelected && !isMarkdown) {
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React72.createElement(
       "textarea",
       {
         value: localText,
@@ -4379,36 +5343,36 @@ function TextEditor({ style, props }) {
     );
   }
   if (isMarkdown) {
-    return /* @__PURE__ */ React82.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
+    return /* @__PURE__ */ React72.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
   }
-  return /* @__PURE__ */ React82.createElement("div", { style: wStyle }, textContent);
+  return /* @__PURE__ */ React72.createElement("div", { style: wStyle }, textContent);
 }
 
 // src/editor/core.tsx
 var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
     schema: AvatarPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(avatar_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(avatar_default, __spreadValues({}, props)))
   },
   Button: {
     schema: ButtonPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(button_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(ButtonEditor, __spreadValues({}, props)))
   },
   Container: {
     schema: container_props_schema_default,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(ContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(ContainerEditor, __spreadValues({}, props)))
   },
   ColumnsContainer: {
     schema: columns_container_props_schema_default2,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
   },
   Heading: {
     schema: HeadingPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(HeadingEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(HeadingEditor, __spreadValues({}, props)))
   },
   Html: {
     schema: HtmlPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(html_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(HtmlEditor, __spreadValues({}, props)))
   },
   Image: {
     schema: ImagePropsSchema,
@@ -4416,27 +5380,32 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
       var _a, _b;
       const props = __spreadProps(__spreadValues({}, data), {
         props: __spreadProps(__spreadValues({}, data.props), {
-          url: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image"
+          url: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image",
+          linkHref: null
         })
       });
-      return /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(image_default, __spreadValues({}, props)));
+      return /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(image_default, __spreadValues({}, props)));
     }
   },
   Text: {
     schema: TextPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(TextEditor, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(TextEditor, __spreadValues({}, props)))
   },
   EmailLayout: {
     schema: email_layout_props_schema_default,
-    Component: (p) => /* @__PURE__ */ React82.createElement(EmailLayoutEditor, __spreadValues({}, p))
+    Component: (p) => /* @__PURE__ */ React72.createElement(EmailLayoutEditor, __spreadValues({}, p))
   },
   Spacer: {
     schema: SpacerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(spacer_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(spacer_default, __spreadValues({}, props)))
   },
   Divider: {
     schema: DividerPropsSchema,
-    Component: (props) => /* @__PURE__ */ React82.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React82.createElement(divider_default, __spreadValues({}, props)))
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(divider_default, __spreadValues({}, props)))
+  },
+  Signature: {
+    schema: SignaturePropsSchema,
+    Component: (props) => /* @__PURE__ */ React72.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72.createElement(SignatureEditor, __spreadValues({}, props)))
   }
 });
 var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
@@ -4452,7 +5421,7 @@ function EditorBlock({ id }) {
   if (!block) {
     throw new Error("Could not find block");
   }
-  return /* @__PURE__ */ React82.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React82.createElement(EditorBlock2, __spreadValues({}, block)));
+  return /* @__PURE__ */ React72.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React72.createElement(EditorBlock2, __spreadValues({}, block)));
 }
 function ToggleInspectorPanelButton() {
   const inspectorDrawerOpen = useInspectorDrawerOpen();
@@ -4460,20 +5429,20 @@ function ToggleInspectorPanelButton() {
     toggleInspectorDrawerOpen();
   };
   if (inspectorDrawerOpen) {
-    return /* @__PURE__ */ React82.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React82.createElement(LastPageOutlined, { fontSize: "small" }));
+    return /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React72.createElement(LastPageOutlined, { fontSize: "small" }));
   }
-  return /* @__PURE__ */ React82.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React82.createElement(AppRegistrationOutlined, { fontSize: "small" }));
+  return /* @__PURE__ */ React72.createElement(IconButton, { onClick: handleClick }, /* @__PURE__ */ React72.createElement(AppRegistrationOutlined, { fontSize: "small" }));
 }
 function useIcon() {
   const samplesDrawerOpen = useSamplesDrawerOpen();
   if (samplesDrawerOpen) {
-    return /* @__PURE__ */ React82.createElement(FirstPageOutlined, { fontSize: "small" });
+    return /* @__PURE__ */ React72.createElement(FirstPageOutlined, { fontSize: "small" });
   }
-  return /* @__PURE__ */ React82.createElement(MenuOutlined, { fontSize: "small" });
+  return /* @__PURE__ */ React72.createElement(MenuOutlined, { fontSize: "small" });
 }
 function ToggleSamplesPanelButton() {
   const icon = useIcon();
-  return /* @__PURE__ */ React82.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
+  return /* @__PURE__ */ React72.createElement(IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
 }
 function formatHtml(html2, spaces = 2) {
   try {
@@ -4535,7 +5504,7 @@ function HighlightedCodePanel({ type, value }) {
   if (code === null) {
     return null;
   }
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "pre",
     {
       style: {
@@ -4561,17 +5530,17 @@ function HighlightedCodePanel({ type, value }) {
 function HtmlPanel() {
   const document2 = useDocument();
   const code = useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React82.createElement(HighlightedCodePanel, { type: "html", value: code });
+  return /* @__PURE__ */ React72.createElement(HighlightedCodePanel, { type: "html", value: code });
 }
 function JsonPanel() {
   const document2 = useDocument();
   const code = useMemo(() => JSON.stringify(document2, null, "  "), [document2]);
-  return /* @__PURE__ */ React82.createElement(HighlightedCodePanel, { type: "json", value: code });
+  return /* @__PURE__ */ React72.createElement(HighlightedCodePanel, { type: "json", value: code });
 }
 function TextPanel() {
   const document2 = useDocument();
   const text = useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "pre",
     {
       style: {
@@ -4607,35 +5576,35 @@ function MainTabsGroup() {
         setSelectedMainTab("editor");
     }
   };
-  return /* @__PURE__ */ React82.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React72.createElement(
     Tab,
     {
       value: "editor",
-      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React82.createElement(EditOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "Edit" }, /* @__PURE__ */ React72.createElement(EditOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     Tab,
     {
       value: "preview",
-      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React82.createElement(PreviewOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "Preview" }, /* @__PURE__ */ React72.createElement(PreviewOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     Tab,
     {
       value: "html",
-      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React82.createElement(CodeOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "HTML output" }, /* @__PURE__ */ React72.createElement(CodeOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     Tab,
     {
       value: "text",
-      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React82.createElement(SubjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React72.createElement(SubjectOutlined, { fontSize: "small" }))
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     Tab,
     {
       value: "json",
-      label: /* @__PURE__ */ React82.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React82.createElement(DataObjectOutlined, { fontSize: "small" }))
+      label: /* @__PURE__ */ React72.createElement(Tooltip, { title: "JSON output" }, /* @__PURE__ */ React72.createElement(DataObjectOutlined, { fontSize: "small" }))
     }
   ));
 }
@@ -4657,7 +5626,7 @@ function SnackbarProvider({ children }) {
   const handleClose = () => {
     setMessage(null);
   };
-  return /* @__PURE__ */ React82.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React72.createElement(
     Snackbar,
     {
       anchorOrigin: { vertical: "top", horizontal: "center" },
@@ -4733,7 +5702,7 @@ function SaveTemplateDialog({
     setInternalError("");
     onClose();
   };
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(
     Dialog,
     {
       open,
@@ -4741,8 +5710,8 @@ function SaveTemplateDialog({
       maxWidth: "sm",
       fullWidth: true
     },
-    /* @__PURE__ */ React82.createElement(DialogTitle, null, "Save Email Template"),
-    /* @__PURE__ */ React82.createElement(DialogContent, null, /* @__PURE__ */ React82.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(DialogTitle, null, "Save Email Template"),
+    /* @__PURE__ */ React72.createElement(DialogContent, null, /* @__PURE__ */ React72.createElement(Box, { sx: { pt: 1 } }, /* @__PURE__ */ React72.createElement(
       TextField,
       {
         autoFocus: true,
@@ -4764,7 +5733,7 @@ function SaveTemplateDialog({
         disabled: isSubmitting
       }
     ))),
-    /* @__PURE__ */ React82.createElement(DialogActions, null, /* @__PURE__ */ React82.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(DialogActions, null, /* @__PURE__ */ React72.createElement(Button$1, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React72.createElement(
       Button$1,
       {
         onClick: handleSave,
@@ -4819,7 +5788,7 @@ function SaveButton({ loadTemplates, saveAs }) {
       return false;
     }
   });
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     IconButton,
     {
       onClick: handleSave,
@@ -4830,8 +5799,8 @@ function SaveButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React82.createElement(Tooltip, { title: "Save template" }, /* @__PURE__ */ React82.createElement(SaveOutlined, { fontSize: "small" }))
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(Tooltip, { title: "Save template" }, /* @__PURE__ */ React72.createElement(SaveOutlined, { fontSize: "small" }))
+  ), /* @__PURE__ */ React72.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -4901,7 +5870,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
     }
     return false;
   });
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     IconButton,
     {
       onClick: handleNewTemplate,
@@ -4912,8 +5881,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
         }
       }
     },
-    /* @__PURE__ */ React82.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React82.createElement(Add, { fontSize: "small" }))
-  ), /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(Tooltip, { title: "New template" }, /* @__PURE__ */ React72.createElement(Add, { fontSize: "small" }))
+  ), /* @__PURE__ */ React72.createElement(
     SaveTemplateDialog,
     {
       open: saveDialogOpen,
@@ -4930,7 +5899,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
 }
 
 // src/app/email-canvas/index.tsx
-function TemplatePanel2({ loadTemplates, saveAs }) {
+function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
   const document2 = useDocument();
   const selectedMainTab = useSelectedMainTab();
   const selectedScreenSize = useSelectedScreenSize();
@@ -4960,19 +5929,19 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
   const renderMainPanel = () => {
     switch (selectedMainTab) {
       case "editor":
-        return /* @__PURE__ */ React82.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React82.createElement(EditorBlock, { id: "root" }));
+        return /* @__PURE__ */ React72.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React72.createElement(EditorBlock, { id: "root" }));
       case "preview":
-        return /* @__PURE__ */ React82.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React82.createElement(Reader, { document: document2, rootBlockId: "root" }));
+        return /* @__PURE__ */ React72.createElement(Box, { sx: mainBoxSx }, /* @__PURE__ */ React72.createElement(Reader, { document: document2, rootBlockId: "root" }));
       case "html":
-        return /* @__PURE__ */ React82.createElement(HtmlPanel, null);
+        return /* @__PURE__ */ React72.createElement(HtmlPanel, null);
       case "text":
-        return /* @__PURE__ */ React82.createElement(TextPanel, null);
+        return /* @__PURE__ */ React72.createElement(TextPanel, null);
       case "json":
-        return /* @__PURE__ */ React82.createElement(JsonPanel, null);
+        return /* @__PURE__ */ React72.createElement(JsonPanel, null);
     }
   };
   const showSaveButtons = persistenceEnabled;
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     Stack,
     {
       sx: {
@@ -4989,10 +5958,10 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
       justifyContent: "space-between",
       alignItems: "center"
     },
-    /* @__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: {
+    samplesDrawerEnabled && /* @__PURE__ */ React72.createElement(ToggleSamplesPanelButton, null),
+    /* @__PURE__ */ React72.createElement(Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72.createElement(MainTabsGroup, null)), /* @__PURE__ */ React72.createElement(Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72.createElement(ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React72.createElement(ToggleButton, { value: "desktop" }, /* @__PURE__ */ React72.createElement(Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React72.createElement(MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72.createElement(ToggleButton, { value: "mobile" }, /* @__PURE__ */ React72.createElement(Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React72.createElement(PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React72.createElement(SaveButton, { loadTemplates, saveAs })))),
+    /* @__PURE__ */ React72.createElement(ToggleInspectorPanelButton, null)
+  ), /* @__PURE__ */ React72.createElement(Box, { sx: {
     paddingBottom: "50px",
     minWidth: 370
   } }, renderMainPanel()));
@@ -5074,7 +6043,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       return getDocument();
     }
   }));
-  return /* @__PURE__ */ React82.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React72.createElement(Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React72.createElement(
     InspectorDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -5082,7 +6051,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       deleteTemplate,
       copyTemplate
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     SamplesDrawer,
     {
       enterDuration: drawerEnterDuration,
@@ -5094,7 +6063,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
       currentTemplateId,
       deleteTemplate
     }
-  ), /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     Stack,
     {
       sx: {
@@ -5103,7 +6072,7 @@ var EmailEditorInternal = forwardRef((props, ref) => {
         transition: [marginLeftTransition, marginRightTransition].join(", ")
       }
     },
-    /* @__PURE__ */ React82.createElement(TemplatePanel2, { loadTemplates, saveAs })
+    /* @__PURE__ */ React72.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
   ));
 });
 var EmailEditor = forwardRef((props, ref) => {
@@ -5138,7 +6107,7 @@ var EmailEditor = forwardRef((props, ref) => {
   useEffect(() => {
     setPersistenceEnabled(persistenceEnabled);
   }, [persistenceEnabled]);
-  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(
+  return /* @__PURE__ */ React72.createElement(ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React72.createElement(CssBaseline, null), /* @__PURE__ */ React72.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React72.createElement(SnackbarProvider, null, /* @__PURE__ */ React72.createElement(
     EmailEditorProvider,
     {
       initialTemplate: resolvedTemplate,
@@ -5147,7 +6116,7 @@ var EmailEditor = forwardRef((props, ref) => {
       onSave,
       onChange
     },
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React72.createElement(
       EmailEditorInternal,
       {
         ref,
@@ -5169,6 +6138,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, renderToText, 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, signature_default as Signature, SignatureProps, SignaturePropsDefaults, SignaturePropsSchema, 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