lib-pixelbuild 0.2.1 → 0.2.3

package/dist/index.js

@@ -2,11 +2,25 @@ export { Header } from './layouts/Header.js';
 export { Footer } from './layouts/Footer.js';
 export { SiteLayout } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
-export { SectionRenderer } from './renderers/SectionRenderer.js';
+export { BlockRenderer } from './renderers/BlockRenderer.js';
+export { IconComponent } from './components/IconComponent.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
+export { iconMap } from './elements/IconMap.js';
 export { ComponentTypeEnum } from './constants/ComponentEnum.js';
 export { ElementTypeEnum } from './constants/ElementEnum.js';
+export { ButtonActionEnum } from './constants/ButtonActionEnum.js';
 export { analyticsService } from './services/AnalyticsService.js';
 export { buttonActionFactory } from './factories/ButtonActionFactory.js';
+export { defaultTokens, mergeTokens, tokenToCssVars, buildTokenCss, buildThemeVars } from './designSystem/tokens.js';
+export { baseCss } from './designSystem/baseCss.js';
+export { buildSiteCss } from './designSystem/buildSiteCss.js';
+export { themeVarsStyle } from './designSystem/themeVars.js';
+export { ThemeStyle } from './designSystem/theme.js';
+export { PbContainer } from './ui/PbContainer.js';
+export { PbRow } from './ui/PbRow.js';
+export { PbCol } from './ui/PbCol.js';
+export { PbButton } from './ui/PbButton.js';
+export { PbSpinner } from './ui/PbSpinner.js';
+export { PbAlert } from './ui/PbAlert.js';

package/dist/layouts/Footer.js

@@ -1,11 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DOMPurify from 'dompurify';
-import { Container, Row, Col } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
+import { PbCol } from '../ui/PbCol.js';
 import { SocialIconsComponent } from '../components/SocialIconsComponent.js';
 export function Footer({ website }) {
     var _a;
     const social = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.social;
     const footer = website.footer.properties;
     const styles = website.footer.styles;
-    return (_jsx(Container, { fluid: styles.fluid || undefined, style: { backgroundColor: styles.backgroundColor }, children: _jsxs(Row, { id: 'footer', style: styles, children: [_jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", style: { marginBottom: '30px' }, children: social && (_jsx(SocialIconsComponent, { social: social })) }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }), _jsxs(Col, { xs: 12, sm: 12, md: 12, lg: 12, children: [_jsx("hr", { className: "footer-divider" }), _jsxs("p", { className: "text-center mb-0", children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }));
+    const fluid = styles.fluid || undefined;
+    const baseStyle = Object.assign({}, styles);
+    delete baseStyle.fluid;
+    delete baseStyle.responsive;
+    const textStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    };
+    return (_jsx(PbContainer, { fluid: fluid || undefined, children: _jsx("footer", { id: "footer", className: "pb-footer", style: { backgroundColor: styles.backgroundColor }, children: _jsxs(PbRow, { children: [_jsx(PbCol, { width: { xs: 12 }, style: { marginBottom: '30px' }, children: social && _jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: textStyle, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }) }), _jsx(PbCol, { width: { xs: 12 }, style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }) }), _jsxs(PbCol, { width: { xs: 12 }, children: [_jsx("hr", { className: "pb-footer-divider" }), _jsxs("p", { className: "pb-text-center pb-mb-0", style: baseStyle, children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }) }));
 }

package/dist/layouts/Header.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Container, Navbar, Nav } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
 export function Header({ website, imageBaseUrl }) {
     const headerProperties = website.header.properties;
     const headerStyles = website.header.styles;
-    const domain = (website.domain || '').replaceAll('.', '');
     const location = useLocation();
+    const [menuOpen, setMenuOpen] = useState(false);
     const menuPages = useMemo(() => (website.pages || []).filter((p) => p.menu === true).sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);
     const isActive = useCallback((path) => {
         const currentPath = location.pathname;
@@ -15,20 +15,47 @@ export function Header({ website, imageBaseUrl }) {
         return currentPath === path || currentPath.startsWith(path + '/');
     }, [location.pathname]);
     const showMenu = headerProperties.showMenu !== false && menuPages.length > 0;
-    const logoUrl = useMemo(() => imageBaseUrl
-        ? `${imageBaseUrl.replace(/\/+$/, '')}/${domain}/${website.logo}`
-        : `https://noisdev-website-images.s3.sa-east-1.amazonaws.com/${domain}/${website.logo}`, [imageBaseUrl, domain, website.logo]);
-    return (_jsx(Navbar, { expand: "lg", collapseOnSelect: true, className: "py-3", style: { backgroundColor: headerStyles.backgroundColor || undefined, width: '100%' }, children: _jsxs(Container, { fluid: headerStyles.fluid || undefined, children: [headerProperties.showLogo && (_jsx(Navbar.Brand, { style: { marginRight: showMenu ? 'auto' : 0, padding: 0 }, children: _jsx("img", { src: logoUrl, width: "200", className: "d-inline-block align-top", alt: "Logo" }) })), showMenu && (_jsxs(_Fragment, { children: [_jsx(Navbar.Toggle, { "aria-controls": "header-navbar-nav" }), _jsx(Navbar.Collapse, { id: "header-navbar-nav", children: _jsx(Nav, { className: `mx-auto ${headerProperties.showLogo ? '' : 'w-100 justify-content-center'}`, children: menuPages.map((p) => {
+    const logoUrl = useMemo(() => (imageBaseUrl && website.logo ? `${imageBaseUrl.replace(/\/+$/, '')}/${website.logo}` : undefined), [imageBaseUrl, website.logo]);
+    const logoAlign = headerProperties.logoAlign || 'center';
+    const menuLinkColor = headerStyles.menuLinkColor || headerStyles.color || undefined;
+    const menuActiveLinkColor = headerStyles.menuActiveLinkColor || headerStyles.menuLinkColor || headerStyles.color || undefined;
+    const textAlign = headerStyles.textAlign || 'left';
+    const brandStyle = { padding: 0 };
+    if (showMenu) {
+        if (logoAlign === 'right')
+            brandStyle.marginLeft = 'auto';
+        else if (logoAlign === 'center') {
+            brandStyle.marginRight = 'auto';
+            brandStyle.marginLeft = 'auto';
+        }
+        else {
+            brandStyle.marginRight = 'auto';
+        }
+    }
+    else if (logoAlign === 'center') {
+        brandStyle.margin = '0 auto';
+    }
+    else if (logoAlign === 'right') {
+        brandStyle.marginLeft = 'auto';
+    }
+    const innerStyle = { textAlign };
+    if (textAlign === 'center')
+        innerStyle.justifyContent = 'center';
+    else if (textAlign === 'right')
+        innerStyle.justifyContent = 'flex-end';
+    const closeMenu = useCallback(() => setMenuOpen(false), []);
+    return (_jsx("header", { className: "pb-header", style: {
+            backgroundColor: headerStyles.backgroundColor || undefined,
+            color: headerStyles.color || undefined
+        }, children: _jsx(PbContainer, { fluid: headerStyles.fluid || undefined, children: _jsxs("div", { className: "pb-header-inner", style: innerStyle, children: [headerProperties.showLogo && logoUrl && (_jsx("a", { className: "pb-brand", href: "/", style: brandStyle, "aria-label": "P\u00E1gina inicial", children: _jsx("img", { src: logoUrl, width: Number(headerProperties.logoWidth) || 200, alt: "Logo" }) })), showMenu && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "pb-nav-toggle", "aria-label": menuOpen ? 'Fechar menu' : 'Abrir menu', "aria-expanded": menuOpen, onClick: () => setMenuOpen((open) => !open), children: "\u2630" }), _jsx("nav", { className: `pb-nav${menuOpen ? ' pb-nav-open' : ''}`, "aria-label": "Menu principal", children: menuPages.map((p) => {
                                     const active = isActive(p.path);
-                                    return (_jsx(Nav.Link, { href: p.path, style: {
-                                            color: active ? '#c0ad5b' : '#a4a4a4',
-                                            fontSize: '0.9rem',
-                                            letterSpacing: '0.05em',
-                                            textTransform: 'uppercase',
+                                    return (_jsx("a", { href: p.path, onClick: closeMenu, className: `pb-nav-link${active ? ' pb-nav-link-active' : ''}`, style: {
+                                            color: active ? menuActiveLinkColor : menuLinkColor,
+                                            fontSize: headerStyles.menuFontSize || undefined,
+                                            letterSpacing: headerStyles.menuLetterSpacing || undefined,
+                                            textTransform: headerStyles.menuTextTransform || undefined,
                                             margin: '0 12px',
-                                            paddingBottom: '4px',
-                                            borderBottom: active ? '2px solid #c0ad5b' : '2px solid transparent',
-                                            transition: 'color 0.3s, border-color 0.3s'
+                                            paddingBottom: '4px'
                                         }, children: p.title }, p.id));
-                                }) }) })] }))] }) }));
+                                }) })] }))] }) }) }));
 }

package/dist/layouts/SiteLayout.d.ts

@@ -1,5 +1,12 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
-export declare function SiteLayout({ website, imageBaseUrl }: {
+export interface EmailApiConfig {
+    apiUrl?: string;
+    authToken?: string;
+    sender?: string;
+    senderName?: string;
+}
+export declare function SiteLayout({ website, imageBaseUrl, emailApi }: {
     readonly website: WebsiteType;
     readonly imageBaseUrl?: string;
+    readonly emailApi?: EmailApiConfig;
 }): import("react").JSX.Element;

package/dist/layouts/SiteLayout.js

@@ -1,7 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 import { Header } from './Header.js';
 import { Footer } from './Footer.js';
-export function SiteLayout({ website, imageBaseUrl }) {
-    return (_jsxs("div", { id: "site-layout", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] }));
+import { ThemeStyle } from '../designSystem/theme.js';
+import { buildFontFamily, buildGoogleFontsHref } from '../utils/fonts.js';
+import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
+export function SiteLayout({ website, imageBaseUrl, emailApi }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const fontFamily = buildFontFamily((_a = website.styles) === null || _a === void 0 ? void 0 : _a.fontFamily);
+    const fontHref = buildGoogleFontsHref((_b = website.styles) === null || _b === void 0 ? void 0 : _b.fontFamily);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!(emailApi === null || emailApi === void 0 ? void 0 : emailApi.apiUrl) || !emailApi.authToken)
+            return;
+        buttonActionFactory.configureEmail({
+            apiUrl: emailApi.apiUrl,
+            authToken: emailApi.authToken,
+            websiteId: website.id,
+            sender: emailApi.sender || 'contato@pixelbuild.com.br',
+            senderName: emailApi.senderName || website.name,
+            defaultRecipient: (_b = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.email) === null || _b === void 0 ? void 0 : _b.recipient,
+            defaultRecipientName: (_d = (_c = website.properties) === null || _c === void 0 ? void 0 : _c.email) === null || _d === void 0 ? void 0 : _d.recipientName,
+            defaultSubject: (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.subject
+        });
+    }, [
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.apiUrl,
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.authToken,
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.sender,
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.senderName,
+        website.id,
+        website.name,
+        (_d = (_c = website.properties) === null || _c === void 0 ? void 0 : _c.email) === null || _d === void 0 ? void 0 : _d.recipient,
+        (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.recipientName,
+        (_h = (_g = website.properties) === null || _g === void 0 ? void 0 : _g.email) === null || _h === void 0 ? void 0 : _h.subject
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(ThemeStyle, { designSystem: website.designSystem }), fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", className: "pb-root", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
 }

package/dist/renderers/BlockRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { BlockType } from '../types/BlockType.js';
+import type { ComponentDefaults } from '../types/WebsiteType.js';
+declare const BlockRenderer: import("react").NamedExoticComponent<{
+    readonly blocks: BlockType[];
+    readonly editionMode?: boolean;
+    readonly componentDefaults?: ComponentDefaults;
+}>;
+export { BlockRenderer };

package/dist/renderers/BlockRenderer.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { PbContainer } from '../ui/PbContainer.js';
+import { ComponentFactory } from '../factories/ComponentFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+import { buildResponsiveCss } from '../utils/responsiveStyles.js';
+const componentFactory = new ComponentFactory();
+function gridClass(id) {
+    return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+}
+const BlockGrid = memo(function BlockGrid({ block, editionMode, componentDefaults }) {
+    const grid = gridClass(block.id);
+    const components = orderBySort(block.components);
+    const css = useMemo(() => {
+        const rules = components
+            .map((component) => {
+            var _a, _b, _c;
+            const properties = component.properties || {};
+            const row = Math.max(0, Number(properties.row) || 0);
+            const rowSpan = Math.max(1, Number(properties.rowSpan) || 1);
+            const xs = ((_a = component.width) === null || _a === void 0 ? void 0 : _a.xs) || 12;
+            const sm = ((_b = component.width) === null || _b === void 0 ? void 0 : _b.sm) || xs;
+            const md = ((_c = component.width) === null || _c === void 0 ? void 0 : _c.md) || sm;
+            const cls = gridClass(component.id);
+            return [
+                `.${grid} .${cls}{grid-column:span ${xs};grid-row:auto;min-width:0}`,
+                `@media (min-width:576px){.${grid} .${cls}{grid-column:span ${sm}}}`,
+                `@media (min-width:768px){.${grid} .${cls}{grid-column:span ${md};grid-row:${row + 1}/span ${rowSpan}}}`
+            ].join('');
+        })
+            .join('');
+        return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pb-gutter,1rem)}${rules}`;
+    }, [grid, components]);
+    if (editionMode && components.length === 0) {
+        return (_jsxs("div", { "data-pixelbuild-empty-block": block.id, style: {
+                minHeight: 80,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                border: '1.5px dashed #c4d0dc',
+                color: '#94a3b8',
+                fontSize: 13,
+                cursor: 'pointer',
+                textAlign: 'center',
+                borderRadius: 8
+            }, children: [_jsx("span", { style: { fontSize: 18, lineHeight: 1 }, children: "+" }), "Adicionar componente"] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: css }), _jsx("div", { className: grid, children: components.map((component) => (_jsx("div", { className: gridClass(component.id), children: componentFactory.build(component, editionMode, componentDefaults) }, component.id))) })] }));
+});
+const BlockContent = memo(function BlockContent({ block, editionMode, componentDefaults }) {
+    const content = useMemo(() => _jsx(BlockGrid, { block: block, editionMode: editionMode, componentDefaults: componentDefaults }), [block, editionMode, componentDefaults]);
+    if (block.sectionType === 'container-fluid') {
+        return (_jsx(PbContainer, { fluid: true, "data-pb-block": block.id, style: block.styles, children: content }));
+    }
+    if (block.sectionType === 'container') {
+        return (_jsx(PbContainer, { "data-pb-block": block.id, style: block.styles, children: content }));
+    }
+    return _jsx(PbContainer, { fluid: true, children: content });
+});
+const BlockRenderer = memo(function BlockRenderer({ blocks, editionMode = false, componentDefaults }) {
+    const sorted = useMemo(() => orderBySort(blocks || []), [blocks]);
+    if (sorted.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: buildResponsiveCss(sorted) }), sorted.map((block) => (_jsx(BlockContent, { block: block, editionMode: editionMode, componentDefaults: componentDefaults }, block.id)))] }));
+});
+export { BlockRenderer };

package/dist/services/EmailService.d.ts

@@ -3,15 +3,24 @@ import type { MailBodyType } from '../types/MailBodyType.js';
 export interface EmailServiceConfig {
     apiUrl: string;
     authToken: string;
-    senderName: string;
+    websiteId: number | string;
     sender: string;
-    recipientName: string;
-    recipient: string;
+    senderName?: string;
+    defaultRecipient?: string;
+    defaultRecipientName?: string;
+    defaultSubject?: string;
+}
+export interface EmailSendOptions {
+    recipient?: string;
+    recipientName?: string;
+    subject?: string;
+    formId?: number | string;
+    websiteName?: string;
 }
 declare class EmailService {
     private readonly config;
     constructor(config: EmailServiceConfig);
-    sendMail(params: FormFieldsType[]): Promise<boolean>;
-    createBody(params: FormFieldsType[]): MailBodyType;
+    sendMail(params: FormFieldsType[], options?: EmailSendOptions): Promise<boolean>;
+    createBody(params: FormFieldsType[], options?: EmailSendOptions): MailBodyType;
 }
 export { EmailService };

package/dist/services/EmailService.js

@@ -1,14 +1,18 @@
+import { buildFormEmailHtml } from '../utils/emailTemplate.js';
+const DEFAULT_SUBJECT = 'Mensagem enviada pelo formulário do site';
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 class EmailService {
     constructor(config) {
         this.config = config;
     }
-    async sendMail(params) {
-        const body = this.createBody(params);
+    async sendMail(params, options = {}) {
+        const body = this.createBody(params, options);
         const response = await fetch(`${this.config.apiUrl}/send-mail`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                Authorization: `Bearer ${this.config.authToken}`
+                Authorization: `Bearer ${this.config.authToken}`,
+                'X-Website-Id': String(this.config.websiteId)
             },
             body: JSON.stringify(body)
         });
@@ -17,29 +21,22 @@ class EmailService {
         }
         return true;
     }
-    createBody(params) {
-        var _a, _b, _c, _d, _e, _f;
-        const firstName = params.find((e) => e.name === 'firstNameInput');
-        const lastName = params.find((e) => e.name === 'lastNameInput');
-        const birthDate = params.find((e) => e.name === 'birthDateField');
-        const document = params.find((e) => e.name === 'documentField');
-        const email = params.find((e) => e.name === 'emailField');
-        const phone = params.find((e) => e.name === 'phoneField');
+    createBody(params, options = {}) {
+        var _a;
+        const rows = params
+            .filter((field) => { var _a; return field.name && String((_a = field.value) !== null && _a !== void 0 ? _a : '').trim() !== ''; })
+            .map((field) => { var _a; return ({ label: field.name, value: String((_a = field.value) !== null && _a !== void 0 ? _a : '') }); });
+        const emailField = params.find((field) => { var _a; return /email/i.test(field.name) || EMAIL_REGEX.test(String((_a = field.value) !== null && _a !== void 0 ? _a : '')); });
+        const subject = options.subject || this.config.defaultSubject || DEFAULT_SUBJECT;
         return {
-            senderName: this.config.senderName,
+            senderName: this.config.senderName || options.websiteName || 'PixelBuild',
             sender: this.config.sender,
-            recipientName: this.config.recipientName,
-            recipient: this.config.recipient,
-            title: 'Mensagem enviada pelo formulário do site',
-            message: [
-                `Nome: ${(_a = firstName === null || firstName === void 0 ? void 0 : firstName.value) !== null && _a !== void 0 ? _a : ''} ${(_b = lastName === null || lastName === void 0 ? void 0 : lastName.value) !== null && _b !== void 0 ? _b : ''}`,
-                `Data de Nascimento: ${(_c = birthDate === null || birthDate === void 0 ? void 0 : birthDate.value) !== null && _c !== void 0 ? _c : ''}`,
-                `CPF: ${(_d = document === null || document === void 0 ? void 0 : document.value) !== null && _d !== void 0 ? _d : ''}`,
-                `E-mail: ${(_e = email === null || email === void 0 ? void 0 : email.value) !== null && _e !== void 0 ? _e : ''}`,
-                `Celular: ${(_f = phone === null || phone === void 0 ? void 0 : phone.value) !== null && _f !== void 0 ? _f : ''}`
-            ]
-                .filter(Boolean)
-                .join('\n')
+            recipientName: options.recipientName || this.config.defaultRecipientName || 'Site',
+            recipient: options.recipient || this.config.defaultRecipient || '',
+            title: subject,
+            message: buildFormEmailHtml(subject, rows),
+            isHtml: true,
+            lead: Object.assign(Object.assign({ formId: (_a = options.formId) !== null && _a !== void 0 ? _a : null }, Object.fromEntries(rows.map((row) => [row.label, row.value]))), (emailField ? { email: emailField.value } : {}))
         };
     }
 }

package/dist/stores/UseFormStore.d.ts

@@ -11,14 +11,19 @@ export interface FormElement {
     inputValidateId: number | null;
     [key: string]: string | number | boolean | null;
 }
+export interface FormEmailConfig {
+    recipient?: string;
+    subject?: string;
+}
 export interface FormEntry {
     elements: string[];
-    [key: string]: string[] | null;
+    email?: FormEmailConfig;
+    [key: string]: string[] | FormEmailConfig | null | undefined;
 }
 export interface FormStoreState {
     forms: Record<string, FormEntry>;
     elements: Record<string, FormElement>;
-    registerForm: (formId: number) => void;
+    registerForm: (formId: number, emailConfig?: FormEmailConfig) => void;
     registerElement: (elementId: number, formId?: number | null, initialState?: Partial<FormElement>) => void;
     unregisterElement: (elementId: number) => void;
     validateFormData: (inputValidateId: number, elementId: number, value: string) => void;

package/dist/stores/UseFormStore.js

@@ -3,9 +3,14 @@ import { InputValidateFactory } from '../factories/InputValidateFactory.js';
 const UseFormStore = create((set, get) => ({
     forms: {},
     elements: {},
-    registerForm: (formId) => set((state) => ({
-        forms: Object.assign(Object.assign({}, state.forms), { [formId]: state.forms[formId] || { elements: [] } })
-    })),
+    registerForm: (formId, emailConfig) => set((state) => {
+        const existing = state.forms[formId];
+        const nextForm = existing
+            ? Object.assign(Object.assign({}, existing), (emailConfig ? { email: emailConfig } : {})) : Object.assign({ elements: [] }, (emailConfig ? { email: emailConfig } : {}));
+        return {
+            forms: Object.assign(Object.assign({}, state.forms), { [formId]: nextForm })
+        };
+    }),
     registerElement: (elementId, formId = null, initialState = {}) => set((state) => {
         var _a, _b;
         const existingElement = state.elements[elementId];

package/dist/types/{SectionColumnType.d.ts → BlockType.d.ts}

@@ -1,14 +1,10 @@
 import type { StylesType } from './StylesType.js';
-import type { ColumnWidthType } from './ColumnWidthType.js';
 import type { ComponentType } from './ComponentType.js';
-import type { SectionType } from './SectionType.js';
-export interface SectionColumnType {
+export interface BlockType {
     id: number;
-    width: ColumnWidthType;
-    offset: ColumnWidthType;
+    sectionType: 'container' | 'container-fluid';
     sort: number;
     properties: Record<string, unknown>;
     styles: StylesType;
     components: ComponentType[];
-    childSections: SectionType[];
 }

package/dist/types/ComponentType.d.ts

@@ -1,5 +1,6 @@
 import type { StylesType } from './StylesType.js';
 import type { ElementType } from './ElementType.js';
+import type { ColumnWidthType } from './ColumnWidthType.js';
 export interface ComponentType {
     id: number;
     componentType: string;
@@ -7,5 +8,7 @@ export interface ComponentType {
     enabled: boolean;
     properties: Record<string, unknown>;
     styles: StylesType;
+    width: ColumnWidthType;
+    offset: ColumnWidthType;
     elements: ElementType[];
 }

package/dist/types/ElementType.d.ts

@@ -8,4 +8,5 @@ export interface ElementType {
     styles: StylesType;
     width: ColumnWidthType;
     offset: ColumnWidthType;
+    fullBleed?: boolean;
 }

package/dist/types/EmailSettingsType.d.ts

@@ -0,0 +1,5 @@
+export interface EmailSettingsType {
+    recipient?: string;
+    recipientName?: string;
+    subject?: string;
+}

package/dist/types/HeaderPropertiesType.d.ts

@@ -1,5 +1,6 @@
 export interface HeaderPropertiesType {
     logoAlign: 'left' | 'right' | 'center';
+    logoWidth?: string | number;
     showLogo: boolean;
     showMenu: boolean;
 }

package/dist/types/MailBodyType.d.ts

@@ -5,4 +5,6 @@ export interface MailBodyType {
     recipient: string;
     title: string;
     message: string;
+    isHtml?: boolean;
+    lead?: Record<string, unknown>;
 }

package/dist/types/PageType.d.ts

@@ -1,5 +1,5 @@
 import type { StylesType } from './StylesType.js';
-import type { SectionType } from './SectionType.js';
+import type { BlockType } from './BlockType.js';
 export interface PageType {
     id: number;
     websiteId: number;
@@ -13,5 +13,5 @@ export interface PageType {
     menuType: 'link' | 'dropdown';
     properties: Record<string, unknown>;
     styles: StylesType;
-    sections: SectionType[];
+    blocks: BlockType[];
 }

package/dist/types/SocialPropertiesType.d.ts

@@ -1,11 +1,3 @@
-export interface SocialPropertiesType {
-    instagram: {
-        path: string;
-    };
-    facebook: {
-        path: string;
-    };
-    linktree: {
-        path: string;
-    };
-}
+export type SocialPropertiesType = Record<string, {
+    path?: string;
+} | undefined>;

package/dist/types/StylesType.d.ts

@@ -2,7 +2,12 @@ export type Float = 'left' | 'right' | 'none' | 'inline-start' | 'inline-end';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
 export type ObjectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ResponsiveStylesType = {
+    [key in BreakpointKey]?: Partial<Omit<StylesType, 'responsive'>>;
+};
 export interface StylesType {
+    responsive?: ResponsiveStylesType;
     alignItems?: string;
     backgroundColor?: string;
     backgroundGradientColorStart?: string;
@@ -18,6 +23,7 @@ export interface StylesType {
     display?: string;
     float?: Float;
     fluid?: boolean;
+    fontFamily?: string;
     fontSize?: string;
     fontWeight?: FontWeight;
     height?: string;
@@ -25,6 +31,12 @@ export interface StylesType {
     marginLeft?: string;
     marginRight?: string;
     marginBottom?: string;
+    menuLinkColor?: string;
+    menuActiveLinkColor?: string;
+    menuFontSize?: string;
+    menuLetterSpacing?: string;
+    menuTextTransform?: string;
+    socialIconColor?: string;
     objectFit?: ObjectFit;
     paddingTop?: string;
     paddingLeft?: string;

package/dist/types/WebsitePropertiesType.d.ts

@@ -1,5 +1,7 @@
 import type { SocialPropertiesType } from './SocialPropertiesType.js';
+import type { EmailSettingsType } from './EmailSettingsType.js';
 export interface WebsitePropertiesType {
     loadingMessage: string;
     social: SocialPropertiesType;
+    email?: EmailSettingsType;
 }

package/dist/types/WebsiteType.d.ts

@@ -3,6 +3,9 @@ import type { StylesType } from './StylesType.js';
 import type { HeaderType } from './HeaderType.js';
 import type { FooterType } from './FooterType.js';
 import type { WebsitePropertiesType } from './WebsitePropertiesType.js';
+import type { PartialDesignTokens } from '../designSystem/tokens.js';
+/** Estilos padrão por tipo de componente (ex.: todos os botões, títulos...). */
+export type ComponentDefaults = Record<string, Partial<StylesType>>;
 export interface WebsiteType {
     id: number;
     name: string;
@@ -13,7 +16,10 @@ export interface WebsiteType {
     footer: FooterType;
     properties: WebsitePropertiesType;
     styles: StylesType;
+    designSystem?: PartialDesignTokens;
+    componentDefaults?: ComponentDefaults;
     enabled: boolean;
+    maintenance?: boolean;
     publishedAt: string | null;
     createdAt: string;
     updatedAt: string;

package/dist/ui/PbAlert.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Alerta próprio do design system. Substitui o `Alert` do react-bootstrap.
+ */
+export declare function PbAlert({ variant, title, style, children }: {
+    readonly variant?: string;
+    readonly title?: ReactNode;
+    readonly style?: CSSProperties;
+    readonly children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/ui/PbAlert.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Alerta próprio do design system. Substitui o `Alert` do react-bootstrap.
+ */
+export function PbAlert({ variant = 'info', title, style, children }) {
+    const classes = ['pb-alert', variant ? `pb-alert-${variant}` : 'pb-alert-info'].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: classes, role: "alert", style: style, children: [title && _jsx("div", { className: "pb-alert-title", children: title }), children] }));
+}

package/dist/ui/PbButton.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+export type PbButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'outline-primary' | 'outline-secondary' | 'link';
+/**
+ * Botão próprio do design system. Substitui o `Button` do react-bootstrap,
+ * mantendo o comportamento de link (`href`) e botão de formulário.
+ */
+export declare function PbButton({ as, href, target, rel, type, variant, size, disabled, onClick, className, style, children }: {
+    readonly as?: string;
+    readonly href?: string;
+    readonly target?: string;
+    readonly rel?: string;
+    readonly type?: 'button' | 'submit' | 'reset';
+    readonly variant?: string;
+    readonly size?: 'sm' | 'lg';
+    readonly disabled?: boolean;
+    readonly onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly children?: ReactNode;
+}): import("react").JSX.Element;