@delmaredigital/payload-puck 0.6.16 → 0.6.18

package/dist/components/email/EmailText/EmailText.editor.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { createRichTextField } from '../../../fields/richtext/index.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+const defaultProps = {
+    content: '<p>Enter your text here...</p>',
+    fontSize: '16px',
+    color: {
+        hex: '#333333'
+    },
+    alignment: 'left',
+    lineHeight: '1.5'
+};
+export const EmailTextEditorConfig = {
+    label: 'Text',
+    fields: {
+        content: createRichTextField({
+            label: 'Content',
+            contentEditable: true
+        }),
+        fontSize: {
+            type: 'select',
+            label: 'Font Size',
+            options: [
+                {
+                    label: 'Small (14px)',
+                    value: '14px'
+                },
+                {
+                    label: 'Normal (16px)',
+                    value: '16px'
+                },
+                {
+                    label: 'Large (18px)',
+                    value: '18px'
+                },
+                {
+                    label: 'Extra Large (20px)',
+                    value: '20px'
+                }
+            ]
+        },
+        color: createColorPickerField({
+            label: 'Text Color'
+        }),
+        alignment: {
+            type: 'radio',
+            label: 'Alignment',
+            options: [
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Center',
+                    value: 'center'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ]
+        },
+        lineHeight: {
+            type: 'select',
+            label: 'Line Height',
+            options: [
+                {
+                    label: 'Tight (1.2)',
+                    value: '1.2'
+                },
+                {
+                    label: 'Normal (1.5)',
+                    value: '1.5'
+                },
+                {
+                    label: 'Relaxed (1.8)',
+                    value: '1.8'
+                },
+                {
+                    label: 'Loose (2.0)',
+                    value: '2.0'
+                }
+            ]
+        }
+    },
+    defaultProps,
+    render: ({ content, fontSize, color, alignment, lineHeight })=>{
+        const textColor = colorValueToEmailCSS(color) ?? '#333333';
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                fontSize,
+                color: textColor,
+                textAlign: alignment,
+                lineHeight
+            },
+            children: content
+        });
+    }
+};

package/dist/components/email/EmailText/EmailText.server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { EmailTextProps } from './EmailText.types.js';
+export declare const EmailTextConfig: ComponentConfig<EmailTextProps>;

package/dist/components/email/EmailText/EmailText.server.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+import { tiptapHtmlToEmailHtml } from '../utils.js';
+const defaultProps = {
+    content: '<p>Enter your text here...</p>',
+    fontSize: '16px',
+    color: {
+        hex: '#333333'
+    },
+    alignment: 'left',
+    lineHeight: '1.5'
+};
+export const EmailTextConfig = {
+    label: 'Text',
+    defaultProps,
+    render: ({ content, fontSize, color, alignment, lineHeight })=>{
+        const textColor = colorValueToEmailCSS(color) ?? '#333333';
+        const htmlContent = typeof content === 'string' ? tiptapHtmlToEmailHtml(content, {
+            fontSize,
+            color: textColor,
+            lineHeight
+        }) : '';
+        return /*#__PURE__*/ _jsx("div", {
+            style: {
+                fontSize,
+                color: textColor,
+                textAlign: alignment,
+                lineHeight
+            },
+            dangerouslySetInnerHTML: {
+                __html: htmlContent
+            }
+        });
+    }
+};

package/dist/components/email/EmailText/EmailText.types.d.ts

@@ -0,0 +1,8 @@
+import type { ColorValue } from '../../../fields/shared.js';
+export interface EmailTextProps {
+    content: React.ReactNode;
+    fontSize: string;
+    color: ColorValue | null;
+    alignment: 'left' | 'center' | 'right';
+    lineHeight: string;
+}

package/dist/components/email/EmailText/EmailText.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/email/EmailWrapper/EmailWrapper.editor.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '@puckeditor/core';
+export declare const EmailWrapperEditorConfig: ComponentConfig;

package/dist/components/email/EmailWrapper/EmailWrapper.editor.js

@@ -0,0 +1,21 @@
+import { EmailWrapperConfig } from './EmailWrapper.server.js';
+import { createColorPickerField } from '../../../fields/ColorPickerField.js';
+export const EmailWrapperEditorConfig = {
+    ...EmailWrapperConfig,
+    fields: {
+        ...EmailWrapperConfig.fields,
+        backgroundColor: createColorPickerField({
+            label: 'Background Color'
+        }),
+        backgroundImage: {
+            type: 'text',
+            label: 'Background Image URL'
+        },
+        maxWidth: {
+            type: 'number',
+            label: 'Max Width (px)',
+            min: 200,
+            max: 900
+        }
+    }
+};

package/dist/components/email/EmailWrapper/EmailWrapper.server.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '@puckeditor/core';
+export declare const EmailWrapperConfig: ComponentConfig;

package/dist/components/email/EmailWrapper/EmailWrapper.server.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TABLE_ATTRS, FULL_WIDTH_TABLE_STYLE, vmlBackgroundOpen, vmlBackgroundClose } from '../utils.js';
+import { colorValueToEmailCSS } from '../../../fields/shared.js';
+const defaultProps = {
+    content: [],
+    backgroundColor: {
+        hex: '#ffffff'
+    },
+    backgroundImage: '',
+    maxWidth: 600
+};
+export const EmailWrapperConfig = {
+    label: 'Wrapper',
+    fields: {
+        content: {
+            type: 'slot'
+        }
+    },
+    defaultProps,
+    render: ({ content: Content, backgroundColor, backgroundImage, maxWidth })=>{
+        const bgColor = colorValueToEmailCSS(backgroundColor) ?? '#ffffff';
+        const ContentSlot = Content;
+        const tdStyle = {
+            backgroundColor: bgColor
+        };
+        if (backgroundImage) {
+            tdStyle.backgroundImage = `url(${backgroundImage})`;
+            tdStyle.backgroundSize = 'cover';
+            tdStyle.backgroundPosition = 'center';
+        }
+        // VML markup is generated internally by vmlBackgroundOpen/Close utilities
+        // for Outlook email client compatibility - no user input is used
+        return /*#__PURE__*/ _jsx("table", {
+            ...TABLE_ATTRS,
+            style: FULL_WIDTH_TABLE_STYLE,
+            children: /*#__PURE__*/ _jsx("tbody", {
+                children: /*#__PURE__*/ _jsx("tr", {
+                    children: /*#__PURE__*/ _jsxs("td", {
+                        style: tdStyle,
+                        children: [
+                            backgroundImage && /*#__PURE__*/ _jsx("div", {
+                                dangerouslySetInnerHTML: {
+                                    __html: vmlBackgroundOpen({
+                                        width: maxWidth ?? 600,
+                                        src: backgroundImage
+                                    })
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(ContentSlot, {}),
+                            backgroundImage && /*#__PURE__*/ _jsx("div", {
+                                dangerouslySetInnerHTML: {
+                                    __html: vmlBackgroundClose()
+                                }
+                            })
+                        ]
+                    })
+                })
+            })
+        });
+    }
+};

package/dist/components/email/EmailWrapper/EmailWrapper.types.d.ts

@@ -0,0 +1,7 @@
+import type { ColorValue } from '../../../fields/shared.js';
+export interface EmailWrapperProps {
+    content: unknown;
+    backgroundColor: ColorValue | null;
+    backgroundImage: string;
+    maxWidth: number;
+}

package/dist/components/email/EmailWrapper/EmailWrapper.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/email/exports.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Individual email component config exports
+ *
+ * Cherry-pick email components for custom configs.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   EmailSectionEditorConfig,
+ *   EmailTextEditorConfig,
+ * } from '@delmaredigital/payload-puck/email/components'
+ * ```
+ */
+export { EmailWrapperEditorConfig } from './EmailWrapper/EmailWrapper.editor.js';
+export { EmailSectionEditorConfig } from './EmailSection/EmailSection.editor.js';
+export { EmailColumnsEditorConfig } from './EmailColumns/EmailColumns.editor.js';
+export { EmailTextEditorConfig } from './EmailText/EmailText.editor.js';
+export { EmailHeadingEditorConfig } from './EmailHeading/EmailHeading.editor.js';
+export { EmailImageEditorConfig } from './EmailImage/EmailImage.editor.js';
+export { EmailButtonEditorConfig } from './EmailButton/EmailButton.editor.js';
+export { EmailSpacerEditorConfig } from './EmailSpacer/EmailSpacer.editor.js';
+export { EmailDividerEditorConfig } from './EmailDivider/EmailDivider.editor.js';
+export { EmailHeaderEditorConfig } from './EmailHeader/EmailHeader.editor.js';
+export { EmailFooterEditorConfig } from './EmailFooter/EmailFooter.editor.js';
+export { EmailSocialEditorConfig } from './EmailSocial/EmailSocial.editor.js';
+export { EmailWrapperConfig } from './EmailWrapper/EmailWrapper.server.js';
+export { EmailSectionConfig } from './EmailSection/EmailSection.server.js';
+export { EmailColumnsConfig } from './EmailColumns/EmailColumns.server.js';
+export { EmailTextConfig } from './EmailText/EmailText.server.js';
+export { EmailHeadingConfig } from './EmailHeading/EmailHeading.server.js';
+export { EmailImageConfig } from './EmailImage/EmailImage.server.js';
+export { EmailButtonConfig } from './EmailButton/EmailButton.server.js';
+export { EmailSpacerConfig } from './EmailSpacer/EmailSpacer.server.js';
+export { EmailDividerConfig } from './EmailDivider/EmailDivider.server.js';
+export { EmailHeaderConfig } from './EmailHeader/EmailHeader.server.js';
+export { EmailFooterConfig } from './EmailFooter/EmailFooter.server.js';
+export { EmailSocialConfig } from './EmailSocial/EmailSocial.server.js';
+export type { EmailWrapperProps } from './EmailWrapper/EmailWrapper.types.js';
+export type { EmailSectionProps } from './EmailSection/EmailSection.types.js';
+export type { EmailColumnsProps } from './EmailColumns/EmailColumns.types.js';
+export type { EmailTextProps } from './EmailText/EmailText.types.js';
+export type { EmailHeadingProps } from './EmailHeading/EmailHeading.types.js';
+export type { EmailImageProps } from './EmailImage/EmailImage.types.js';
+export type { EmailButtonProps } from './EmailButton/EmailButton.types.js';
+export type { EmailSpacerProps } from './EmailSpacer/EmailSpacer.types.js';
+export type { EmailDividerProps } from './EmailDivider/EmailDivider.types.js';
+export type { EmailHeaderProps } from './EmailHeader/EmailHeader.types.js';
+export type { EmailFooterProps } from './EmailFooter/EmailFooter.types.js';
+export type { EmailSocialProps, SocialPlatform, SocialLink } from './EmailSocial/EmailSocial.types.js';

package/dist/components/email/exports.js

@@ -0,0 +1,50 @@
+/**
+ * Individual email component config exports
+ *
+ * Cherry-pick email components for custom configs.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   EmailSectionEditorConfig,
+ *   EmailTextEditorConfig,
+ * } from '@delmaredigital/payload-puck/email/components'
+ * ```
+ */ // =============================================================================
+// Editor Component Configs (for Puck Editor)
+// =============================================================================
+// Layout
+export { EmailWrapperEditorConfig } from './EmailWrapper/EmailWrapper.editor.js';
+export { EmailSectionEditorConfig } from './EmailSection/EmailSection.editor.js';
+export { EmailColumnsEditorConfig } from './EmailColumns/EmailColumns.editor.js';
+// Content
+export { EmailTextEditorConfig } from './EmailText/EmailText.editor.js';
+export { EmailHeadingEditorConfig } from './EmailHeading/EmailHeading.editor.js';
+export { EmailImageEditorConfig } from './EmailImage/EmailImage.editor.js';
+export { EmailButtonEditorConfig } from './EmailButton/EmailButton.editor.js';
+// Utility
+export { EmailSpacerEditorConfig } from './EmailSpacer/EmailSpacer.editor.js';
+export { EmailDividerEditorConfig } from './EmailDivider/EmailDivider.editor.js';
+// Prebuilt
+export { EmailHeaderEditorConfig } from './EmailHeader/EmailHeader.editor.js';
+export { EmailFooterEditorConfig } from './EmailFooter/EmailFooter.editor.js';
+export { EmailSocialEditorConfig } from './EmailSocial/EmailSocial.editor.js';
+// =============================================================================
+// Server Component Configs (for EmailRenderer / renderToEmailHtml)
+// =============================================================================
+// Layout
+export { EmailWrapperConfig } from './EmailWrapper/EmailWrapper.server.js';
+export { EmailSectionConfig } from './EmailSection/EmailSection.server.js';
+export { EmailColumnsConfig } from './EmailColumns/EmailColumns.server.js';
+// Content
+export { EmailTextConfig } from './EmailText/EmailText.server.js';
+export { EmailHeadingConfig } from './EmailHeading/EmailHeading.server.js';
+export { EmailImageConfig } from './EmailImage/EmailImage.server.js';
+export { EmailButtonConfig } from './EmailButton/EmailButton.server.js';
+// Utility
+export { EmailSpacerConfig } from './EmailSpacer/EmailSpacer.server.js';
+export { EmailDividerConfig } from './EmailDivider/EmailDivider.server.js';
+// Prebuilt
+export { EmailHeaderConfig } from './EmailHeader/EmailHeader.server.js';
+export { EmailFooterConfig } from './EmailFooter/EmailFooter.server.js';
+export { EmailSocialConfig } from './EmailSocial/EmailSocial.server.js';

package/dist/components/email/utils.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Shared email rendering utilities
+ *
+ * Helpers for building email-safe HTML with table-based layouts.
+ * All email components use these to ensure consistent rendering.
+ */
+import type React from 'react';
+/** Standard table attributes for email-safe presentation tables */
+export declare const TABLE_ATTRS: {
+    readonly role: "presentation";
+    readonly cellPadding: "0";
+    readonly cellSpacing: "0";
+    readonly border: 0;
+};
+/** Full-width table style (100% width, no borders) */
+export declare const FULL_WIDTH_TABLE_STYLE: React.CSSProperties;
+/** Centered content table (max-width with auto margins) */
+export declare function centeredTableStyle(maxWidth: number): React.CSSProperties;
+type EmailAlignment = 'left' | 'center' | 'right';
+/** Maps alignment to table `align` attribute value */
+export declare function emailAlign(alignment: EmailAlignment | null | undefined): 'left' | 'center' | 'right';
+/** Maps alignment to margin style for block centering */
+export declare function alignmentToMargin(alignment: EmailAlignment | null | undefined): React.CSSProperties;
+export declare const WEB_SAFE_FONTS: readonly [{
+    readonly label: "Arial";
+    readonly value: "Arial, Helvetica, sans-serif";
+}, {
+    readonly label: "Helvetica";
+    readonly value: "Helvetica, Arial, sans-serif";
+}, {
+    readonly label: "Georgia";
+    readonly value: "Georgia, Times, serif";
+}, {
+    readonly label: "Times New Roman";
+    readonly value: "'Times New Roman', Times, serif";
+}, {
+    readonly label: "Courier New";
+    readonly value: "'Courier New', Courier, monospace";
+}, {
+    readonly label: "Verdana";
+    readonly value: "Verdana, Geneva, sans-serif";
+}, {
+    readonly label: "Tahoma";
+    readonly value: "Tahoma, Geneva, sans-serif";
+}, {
+    readonly label: "Trebuchet MS";
+    readonly value: "'Trebuchet MS', Helvetica, sans-serif";
+}];
+export type WebSafeFont = (typeof WEB_SAFE_FONTS)[number]['value'];
+/**
+ * Converts TipTap-generated HTML to email-safe inline-styled HTML.
+ *
+ * TipTap outputs semantic HTML with classes. Email clients need:
+ * - Inline styles instead of classes
+ * - No CSS that email clients strip (position, display:flex, etc.)
+ * - Block elements with explicit margins
+ */
+export declare function tiptapHtmlToEmailHtml(html: string, options?: {
+    fontSize?: string;
+    color?: string;
+    lineHeight?: string;
+    fontFamily?: string;
+}): string;
+/**
+ * Generates VML markup for background images in Outlook.
+ * Wrap around your content in a conditional comment.
+ */
+export declare function vmlBackgroundOpen(options: {
+    width: number;
+    height?: number;
+    src: string;
+}): string;
+export declare function vmlBackgroundClose(): string;
+export {};

package/dist/components/email/utils.js

@@ -0,0 +1,137 @@
+/**
+ * Shared email rendering utilities
+ *
+ * Helpers for building email-safe HTML with table-based layouts.
+ * All email components use these to ensure consistent rendering.
+ */ // =============================================================================
+// Table Helper Props
+// =============================================================================
+/** Standard table attributes for email-safe presentation tables */ export const TABLE_ATTRS = {
+    role: 'presentation',
+    cellPadding: '0',
+    cellSpacing: '0',
+    border: 0
+};
+/** Full-width table style (100% width, no borders) */ export const FULL_WIDTH_TABLE_STYLE = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    borderSpacing: 0
+};
+/** Centered content table (max-width with auto margins) */ export function centeredTableStyle(maxWidth) {
+    return {
+        width: '100%',
+        maxWidth: `${maxWidth}px`,
+        margin: '0 auto',
+        borderCollapse: 'collapse',
+        borderSpacing: 0
+    };
+}
+/** Maps alignment to table `align` attribute value */ export function emailAlign(alignment) {
+    return alignment ?? 'left';
+}
+/** Maps alignment to margin style for block centering */ export function alignmentToMargin(alignment) {
+    switch(alignment){
+        case 'center':
+            return {
+                marginLeft: 'auto',
+                marginRight: 'auto'
+            };
+        case 'right':
+            return {
+                marginLeft: 'auto',
+                marginRight: 0
+            };
+        default:
+            return {
+                marginLeft: 0,
+                marginRight: 'auto'
+            };
+    }
+}
+// =============================================================================
+// Font Stacks (web-safe only)
+// =============================================================================
+export const WEB_SAFE_FONTS = [
+    {
+        label: 'Arial',
+        value: 'Arial, Helvetica, sans-serif'
+    },
+    {
+        label: 'Helvetica',
+        value: 'Helvetica, Arial, sans-serif'
+    },
+    {
+        label: 'Georgia',
+        value: 'Georgia, Times, serif'
+    },
+    {
+        label: 'Times New Roman',
+        value: "'Times New Roman', Times, serif"
+    },
+    {
+        label: 'Courier New',
+        value: "'Courier New', Courier, monospace"
+    },
+    {
+        label: 'Verdana',
+        value: 'Verdana, Geneva, sans-serif'
+    },
+    {
+        label: 'Tahoma',
+        value: 'Tahoma, Geneva, sans-serif'
+    },
+    {
+        label: 'Trebuchet MS',
+        value: "'Trebuchet MS', Helvetica, sans-serif"
+    }
+];
+// =============================================================================
+// TipTap HTML to Email-Safe HTML
+// =============================================================================
+/**
+ * Converts TipTap-generated HTML to email-safe inline-styled HTML.
+ *
+ * TipTap outputs semantic HTML with classes. Email clients need:
+ * - Inline styles instead of classes
+ * - No CSS that email clients strip (position, display:flex, etc.)
+ * - Block elements with explicit margins
+ */ export function tiptapHtmlToEmailHtml(html, options) {
+    if (!html) return '';
+    const baseStyle = [
+        options?.fontSize ? `font-size:${options.fontSize}` : 'font-size:16px',
+        options?.color ? `color:${options.color}` : 'color:#333333',
+        options?.lineHeight ? `line-height:${options.lineHeight}` : 'line-height:1.5',
+        options?.fontFamily ? `font-family:${options.fontFamily}` : '',
+        'margin:0',
+        'padding:0'
+    ].filter(Boolean).join(';');
+    // First strip existing style and class attributes (TipTap may add them)
+    // so we don't end up with duplicate attributes
+    const cleaned = html.replace(/\s+style="[^"]*"/g, '').replace(/\s+class="[^"]*"/g, '');
+    const result = cleaned// Paragraphs
+    .replace(/<p>/g, `<p style="${baseStyle};margin-bottom:1em">`).replace(/<p\s/g, `<p style="${baseStyle};margin-bottom:1em" `)// Headings
+    .replace(/<h1>/g, `<h1 style="${baseStyle};font-size:32px;font-weight:bold;margin-bottom:0.5em">`).replace(/<h2>/g, `<h2 style="${baseStyle};font-size:24px;font-weight:bold;margin-bottom:0.5em">`).replace(/<h3>/g, `<h3 style="${baseStyle};font-size:20px;font-weight:bold;margin-bottom:0.5em">`)// Lists
+    .replace(/<ul>/g, `<ul style="margin:0 0 1em 0;padding-left:20px;${baseStyle}">`).replace(/<ol>/g, `<ol style="margin:0 0 1em 0;padding-left:20px;${baseStyle}">`).replace(/<li>/g, '<li style="margin-bottom:0.25em">')// Links
+    .replace(/<a /g, '<a style="color:#007bff;text-decoration:underline" ')// Blockquotes
+    .replace(/<blockquote>/g, `<blockquote style="margin:0 0 1em 0;padding:10px 20px;border-left:4px solid #dddddd;${baseStyle}">`);
+    return result;
+}
+// =============================================================================
+// VML Background Image (Outlook)
+// =============================================================================
+/**
+ * Generates VML markup for background images in Outlook.
+ * Wrap around your content in a conditional comment.
+ */ export function vmlBackgroundOpen(options) {
+    return `<!--[if gte mso 9]>
+<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:${options.width}px${options.height ? `;height:${options.height}px` : ''}">
+<v:fill type="frame" src="${options.src}" />
+<v:textbox inset="0,0,0,0">
+<![endif]-->`;
+}
+export function vmlBackgroundClose() {
+    return `<!--[if gte mso 9]>
+</v:textbox>
+</v:rect>
+<![endif]-->`;
+}

package/dist/config/config.email.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Email Puck configuration - Server-safe
+ *
+ * All components render to table-based, inline-styled HTML
+ * compatible with email clients. No Tailwind, no CSS classes.
+ *
+ * Use with EmailRenderer or renderToEmailHtml().
+ */
+import type { ComponentConfig } from '@puckeditor/core';
+import type { ReactNode } from 'react';
+export declare const emailBaseConfig: {
+    root: {
+        fields: {
+            subject: {
+                type: "text";
+                label: string;
+            };
+            previewText: {
+                type: "textarea";
+                label: string;
+            };
+            maxWidth: {
+                type: "number";
+                label: string;
+            };
+        };
+        defaultProps: {
+            subject: string;
+            previewText: string;
+            backgroundColor: string;
+            fontFamily: string;
+            maxWidth: number;
+        };
+        render: ({ children }: {
+            children: ReactNode;
+        }) => import("react").JSX.Element;
+    };
+    categories: {
+        layout: {
+            title: string;
+            components: string[];
+            defaultExpanded: true;
+        };
+        content: {
+            title: string;
+            components: string[];
+        };
+        utility: {
+            title: string;
+            components: string[];
+        };
+        prebuilt: {
+            title: string;
+            components: string[];
+        };
+    };
+    components: {
+        EmailWrapper: ComponentConfig<any>;
+        EmailSection: ComponentConfig<any>;
+        EmailColumns: ComponentConfig<any>;
+        EmailText: ComponentConfig<any>;
+        EmailHeading: ComponentConfig<any>;
+        EmailImage: ComponentConfig<any>;
+        EmailButton: ComponentConfig<any>;
+        EmailSpacer: ComponentConfig<any>;
+        EmailDivider: ComponentConfig<any>;
+        EmailHeader: ComponentConfig<any>;
+        EmailFooter: ComponentConfig<any>;
+        EmailSocial: ComponentConfig<any>;
+    };
+};