lib-pixelbuild 0.2.1 → 0.2.3

package/dist/designSystem/tokens.js

@@ -0,0 +1,144 @@
+/**
+ * Design System tokens.
+ *
+ * Fontes de verdade para cores, tipografia, espaçamento, raio e sombra do site
+ * público. Cada token é exposto como uma variável CSS `--pb-*` e os componentes
+ * do `lib-pixelbuild` consomem via `var(--pb-*, <fallback>)`, de forma que um
+ * site sem design system configurado continua com aparência padrão.
+ */
+/**
+ * Valores padrão. Mantidos neutros e modernos para que um site sem
+ * personalização não tenha cara de "framework genérico".
+ */
+export const defaultTokens = {
+    colors: {
+        primary: '#F58220',
+        secondary: '#64748B',
+        success: '#16A34A',
+        danger: '#DC2626',
+        warning: '#F59E0B',
+        info: '#0EA5E9',
+        light: '#F8FAFC',
+        dark: '#0F172A',
+        background: '#FFFFFF',
+        surface: '#FFFFFF',
+        text: '#1F2937',
+        heading: '#111827',
+        muted: '#6B7280',
+        border: '#E5E7EB'
+    },
+    typography: {
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+        fontSizeBase: '16px',
+        fontWeightNormal: '400',
+        fontWeightBold: '700',
+        lineHeight: '1.6'
+    },
+    spacing: {
+        none: '0',
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        xxl: '48px'
+    },
+    radius: {
+        none: '0',
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        full: '9999px'
+    },
+    shadow: {
+        none: 'none',
+        sm: '0 1px 2px rgba(0,0,0,0.05)',
+        md: '0 4px 12px rgba(0,0,0,0.08)',
+        lg: '0 8px 24px rgba(0,0,0,0.12)'
+    },
+    gutter: '1.5rem'
+};
+function mergePartial(base, partial) {
+    if (!partial)
+        return base;
+    const result = Object.assign({}, base);
+    for (const key of Object.keys(partial)) {
+        const value = partial[key];
+        if (value === undefined)
+            continue;
+        const baseValue = base[key];
+        if (typeof baseValue === 'object' && baseValue !== null && typeof value === 'object' && value !== null) {
+            ;
+            result[key] = Object.assign(Object.assign({}, baseValue), value);
+        }
+        else {
+            ;
+            result[key] = value;
+        }
+    }
+    return result;
+}
+export function mergeTokens(base, partial) {
+    const merged = mergePartial(base, partial || {});
+    return merged;
+}
+/** Mapeia os tokens para pares `--pb-*` → valor. */
+export function tokenToCssVars(tokens) {
+    const { colors, typography, spacing, radius, shadow } = tokens;
+    return {
+        '--pb-color-primary': colors.primary,
+        '--pb-color-secondary': colors.secondary,
+        '--pb-color-success': colors.success,
+        '--pb-color-danger': colors.danger,
+        '--pb-color-warning': colors.warning,
+        '--pb-color-info': colors.info,
+        '--pb-color-light': colors.light,
+        '--pb-color-dark': colors.dark,
+        '--pb-color-background': colors.background,
+        '--pb-color-surface': colors.surface,
+        '--pb-color-text': colors.text,
+        '--pb-color-heading': colors.heading,
+        '--pb-color-muted': colors.muted,
+        '--pb-color-border': colors.border,
+        '--pb-font-family': typography.fontFamily,
+        '--pb-font-size-base': typography.fontSizeBase,
+        '--pb-font-weight-normal': typography.fontWeightNormal,
+        '--pb-font-weight-bold': typography.fontWeightBold,
+        '--pb-line-height': typography.lineHeight,
+        '--pb-space-none': spacing.none,
+        '--pb-space-xs': spacing.xs,
+        '--pb-space-sm': spacing.sm,
+        '--pb-space-md': spacing.md,
+        '--pb-space-lg': spacing.lg,
+        '--pb-space-xl': spacing.xl,
+        '--pb-space-xxl': spacing.xxl,
+        '--pb-radius-none': radius.none,
+        '--pb-radius-sm': radius.sm,
+        '--pb-radius-md': radius.md,
+        '--pb-radius-lg': radius.lg,
+        '--pb-radius-full': radius.full,
+        '--pb-shadow-none': shadow.none,
+        '--pb-shadow-sm': shadow.sm,
+        '--pb-shadow-md': shadow.md,
+        '--pb-shadow-lg': shadow.lg,
+        '--pb-gutter': tokens.gutter
+    };
+}
+/** Gera o bloco `:root { --pb-*: ... }` a partir dos tokens (com defaults). */
+export function buildTokenCss(tokens) {
+    const merged = mergeTokens(defaultTokens, tokens);
+    const vars = tokenToCssVars(merged);
+    const lines = Object.entries(vars)
+        .map(([key, value]) => `  ${key}: ${value};`)
+        .join('\n');
+    return `:root {\n${lines}\n}`;
+}
+/**
+ * Retorna o mapa de variáveis `--pb-*` (com defaults mesclados) para aplicação
+ * inline em um elemento raiz — permite que a troca de token reflita em tempo
+ * real no preview sem reinjetar o `<head>`.
+ */
+export function buildThemeVars(designSystem) {
+    const merged = mergeTokens(defaultTokens, designSystem);
+    return tokenToCssVars(merged);
+}

package/dist/elements/AlertElement.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { Alert } from 'react-bootstrap';
+import { PbAlert } from '../ui/PbAlert.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
@@ -16,8 +16,8 @@ export function AlertElement({ element, formId }) {
             hidden: getBoolean(properties, 'startHidden')
         });
         return () => unregisterElement(element.id);
-    }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
+    }, [element.id, properties.startHidden, registerElement, unregisterElement, resolvedFormId]);
     if (hidden)
         return null;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Alert, { variant: getString(properties, 'type', 'info'), style: element.styles, children: [_jsx(Alert.Heading, { children: getString(properties, 'title') }), _jsx("p", { className: "mb-0", children: getString(properties, 'message') })] }) }));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(PbAlert, { variant: getString(properties, 'type', 'info'), style: element.styles, title: getString(properties, 'title'), children: _jsx("p", { className: "pb-mb-0", children: getString(properties, 'message') }) }) }));
 }

package/dist/elements/ButtonElement.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { Button, Spinner } from 'react-bootstrap';
 import { ElementColWrapper } from './ElementColWrapper.js';
+import { PbButton } from '../ui/PbButton.js';
+import { PbSpinner } from '../ui/PbSpinner.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
+import { ButtonActionEnum } from '../constants/ButtonActionEnum.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
 export function ButtonElement({ element, formId }) {
     const properties = element.properties;
@@ -20,9 +22,9 @@ export function ButtonElement({ element, formId }) {
             hidden: getBoolean(properties, 'startHidden')
         });
         return () => unregisterElement(element.id);
-    }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
+    }, [element.id, properties.startHidden, registerElement, unregisterElement, resolvedFormId]);
     async function handleClick(event) {
-        var _a;
+        var _a, _b, _c;
         if (!properties.path) {
             event.preventDefault();
             const form = event.currentTarget instanceof HTMLButtonElement ? event.currentTarget.form : null;
@@ -35,11 +37,21 @@ export function ButtonElement({ element, formId }) {
             if (hasErrors)
                 return false;
             UseFormStore.getState().setElementState(element.id, { loading: true });
-            const actionId = getNumber(properties, 'actionId');
+            const actionId = (_a = getNumber(properties, 'actionId')) !== null && _a !== void 0 ? _a : (properties.type === 'submit' ? ButtonActionEnum.SendMail : undefined);
             if (actionId) {
-                await buttonActionFactory.build(actionId, formData);
+                const formConfig = resolvedFormId !== undefined ? (_b = UseFormStore.getState().forms[resolvedFormId]) === null || _b === void 0 ? void 0 : _b.email : undefined;
+                try {
+                    await buttonActionFactory.build(actionId, formData, {
+                        recipient: formConfig === null || formConfig === void 0 ? void 0 : formConfig.recipient,
+                        subject: formConfig === null || formConfig === void 0 ? void 0 : formConfig.subject,
+                        formId: resolvedFormId
+                    });
+                }
+                catch (error) {
+                    console.warn('Não foi possível enviar o formulário:', error);
+                }
             }
-            const loadingTime = (_a = getNumber(properties, 'loadingTime')) !== null && _a !== void 0 ? _a : 0;
+            const loadingTime = (_c = getNumber(properties, 'loadingTime')) !== null && _c !== void 0 ? _c : 0;
             setTimeout(() => {
                 if (getBoolean(properties, 'hideOnClick'))
                     hideElement(element.id);
@@ -58,5 +70,7 @@ export function ButtonElement({ element, formId }) {
     const buttonType = properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
         ? properties.type
         : undefined;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: buttonType, variant: getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary')), href: getString(properties, 'path'), target: properties.path ? '_blank' : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
+    const size = getString(properties, 'size');
+    const variant = getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary'));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(PbButton, { href: getString(properties, 'path') || undefined, target: properties.path ? getString(properties, 'target', '_self') : undefined, type: buttonType, variant: variant, size: size === 'sm' || size === 'lg' ? size : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(PbSpinner, { size: "sm" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
 }

package/dist/elements/ElementColWrapper.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Col } from 'react-bootstrap';
+import { PbCol } from '../ui/PbCol.js';
 export function ElementColWrapper({ element, children }) {
-    return (_jsx(Col, { xs: element.width.xs, sm: element.width.sm, md: element.width.md, lg: element.width.lg, xl: element.width.xl, style: element.styles, children: children }, element.id));
+    var _a;
+    const style = {};
+    if (element.fullBleed) {
+        style.paddingLeft = '0';
+        style.paddingRight = '0';
+    }
+    if ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.textAlign) {
+        style.textAlign = element.styles.textAlign;
+    }
+    return (_jsx(PbCol, { colId: element.id, width: element.width, offset: element.offset, style: style, "data-pb-element": element.id, children: children }));
 }

package/dist/elements/IconElement.js

@@ -3,13 +3,13 @@ import { Suspense, useMemo } from 'react';
 import { iconMap } from './IconMap.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
 function FallbackIcon({ name }) {
-    const Icon = iconMap[name] || iconMap.FaQuestionCircle;
+    const Icon = iconMap[name] || iconMap.question;
     return _jsx(Icon, { size: "1em", "aria-label": name || 'Icon' });
 }
 export function IconElement({ element }) {
-    var _a;
     const name = String(element.properties.name || '');
-    const iconSize = ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.fontSize) || '1.25rem';
-    const Icon = useMemo(() => iconMap[name] || iconMap.FaQuestionCircle, [name]);
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx("span", { style: { fontSize: iconSize, display: 'inline-flex' }, children: _jsx(Suspense, { fallback: _jsx(FallbackIcon, { name: name }), children: _jsx(Icon, { size: "1em", style: element.styles, "aria-label": name || 'Icon' }) }) }) }));
+    const styles = element.styles || {};
+    const iconSize = styles.fontSize || '1.25rem';
+    const Icon = useMemo(() => iconMap[name] || iconMap.question, [name]);
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx("span", { style: { fontSize: iconSize, display: 'inline-flex', color: styles.color }, children: _jsx(Suspense, { fallback: _jsx(FallbackIcon, { name: name }), children: _jsx(Icon, { size: "1em", color: styles.color, style: styles, "aria-label": name || 'Icon' }) }) }) }));
 }

package/dist/elements/IconMap.js

@@ -1,30 +1,103 @@
-import { FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock, FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink, FaMapMarkerAlt, FaPhone, FaQuestionCircle, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes, FaTwitter, FaUser, FaWhatsapp, FaYoutube } from 'react-icons/fa';
+import { FaArrowRight, FaArrowLeft, FaArrowUp, FaArrowDown, FaChevronRight, FaChevronLeft, FaChevronUp, FaChevronDown, FaLongArrowAltRight, FaLongArrowAltLeft, FaBars, FaTimes, FaCheck, FaPlus, FaMinus, FaSearch, FaHome, FaUser, FaUsers, FaCog, FaInfoCircle, FaQuestionCircle, FaExclamationTriangle, FaCheckCircle, FaTimesCircle, FaExternalLinkAlt, FaDownload, FaUpload, FaSync, FaLock, FaUnlock, FaEye, FaEyeSlash, FaBell, FaStar, FaHeart, FaList, FaTh, FaThLarge, FaFilter, FaPhone, FaEnvelope, FaEnvelopeOpen, FaComment, FaComments, FaQuoteLeft, FaQuoteRight, FaPaperPlane, FaFacebookF, FaInstagram, FaWhatsapp, FaYoutube, FaTwitter, FaLinkedinIn, FaPinterestP, FaShoppingCart, FaShoppingBag, FaCreditCard, FaMoneyBillWave, FaTag, FaTags, FaGift, FaTruck, FaMapMarkerAlt, FaMap, FaMapPin, FaGlobe, FaCompass, FaLocationArrow, FaClock, FaCalendar, FaCalendarAlt, FaHourglassHalf, FaImage, FaImages, FaCamera, FaVideo, FaFilm, FaMusic, FaHeadphones, FaPlay, FaBriefcase, FaBuilding, FaChartBar, FaChartLine, FaChartPie, FaRocket, FaLightbulb, FaTrophy, FaMedal, FaFlag, FaFile, FaFolder, FaLink, FaPencilAlt, FaTrashAlt, FaCopy, FaCloud, FaWifi, FaMobileAlt } from 'react-icons/fa';
 export const iconMap = {
-    FaArrowRight,
-    FaBars,
-    FaCalendar,
-    FaCheck,
-    FaChevronLeft,
-    FaChevronRight,
-    FaClock,
-    FaEnvelope,
-    FaFacebookF,
-    FaGlobe,
-    FaHeart,
-    FaHome,
-    FaInfoCircle,
-    FaInstagram,
-    FaLink,
-    FaMapMarkerAlt,
-    FaPhone,
-    FaQuestionCircle,
-    FaQuoteLeft,
-    FaSearch,
-    FaShoppingCart,
-    FaStar,
-    FaTimes,
-    FaTwitter,
-    FaUser,
-    FaWhatsapp,
-    FaYoutube
+    'arrow-right': FaArrowRight,
+    'arrow-left': FaArrowLeft,
+    'arrow-up': FaArrowUp,
+    'arrow-down': FaArrowDown,
+    'chevron-right': FaChevronRight,
+    'chevron-left': FaChevronLeft,
+    'chevron-up': FaChevronUp,
+    'chevron-down': FaChevronDown,
+    'long-arrow-right': FaLongArrowAltRight,
+    'long-arrow-left': FaLongArrowAltLeft,
+    bars: FaBars,
+    times: FaTimes,
+    check: FaCheck,
+    plus: FaPlus,
+    minus: FaMinus,
+    search: FaSearch,
+    home: FaHome,
+    user: FaUser,
+    users: FaUsers,
+    cog: FaCog,
+    info: FaInfoCircle,
+    question: FaQuestionCircle,
+    exclamation: FaExclamationTriangle,
+    'check-circle': FaCheckCircle,
+    'times-circle': FaTimesCircle,
+    'external-link': FaExternalLinkAlt,
+    download: FaDownload,
+    upload: FaUpload,
+    sync: FaSync,
+    lock: FaLock,
+    unlock: FaUnlock,
+    eye: FaEye,
+    'eye-slash': FaEyeSlash,
+    bell: FaBell,
+    star: FaStar,
+    heart: FaHeart,
+    list: FaList,
+    grid: FaTh,
+    'grid-large': FaThLarge,
+    filter: FaFilter,
+    phone: FaPhone,
+    envelope: FaEnvelope,
+    'envelope-open': FaEnvelopeOpen,
+    comment: FaComment,
+    comments: FaComments,
+    'quote-left': FaQuoteLeft,
+    'quote-right': FaQuoteRight,
+    'paper-plane': FaPaperPlane,
+    facebook: FaFacebookF,
+    instagram: FaInstagram,
+    whatsapp: FaWhatsapp,
+    youtube: FaYoutube,
+    twitter: FaTwitter,
+    linkedin: FaLinkedinIn,
+    pinterest: FaPinterestP,
+    'shopping-cart': FaShoppingCart,
+    'shopping-bag': FaShoppingBag,
+    'credit-card': FaCreditCard,
+    money: FaMoneyBillWave,
+    tag: FaTag,
+    tags: FaTags,
+    gift: FaGift,
+    truck: FaTruck,
+    'map-marker': FaMapMarkerAlt,
+    map: FaMap,
+    'map-pin': FaMapPin,
+    globe: FaGlobe,
+    compass: FaCompass,
+    'location-arrow': FaLocationArrow,
+    clock: FaClock,
+    calendar: FaCalendar,
+    'calendar-alt': FaCalendarAlt,
+    hourglass: FaHourglassHalf,
+    image: FaImage,
+    images: FaImages,
+    camera: FaCamera,
+    video: FaVideo,
+    film: FaFilm,
+    music: FaMusic,
+    headphones: FaHeadphones,
+    play: FaPlay,
+    briefcase: FaBriefcase,
+    building: FaBuilding,
+    'chart-bar': FaChartBar,
+    'chart-line': FaChartLine,
+    'chart-pie': FaChartPie,
+    rocket: FaRocket,
+    lightbulb: FaLightbulb,
+    trophy: FaTrophy,
+    medal: FaMedal,
+    flag: FaFlag,
+    file: FaFile,
+    folder: FaFolder,
+    link: FaLink,
+    pencil: FaPencilAlt,
+    trash: FaTrashAlt,
+    copy: FaCopy,
+    cloud: FaCloud,
+    wifi: FaWifi,
+    mobile: FaMobileAlt
 };

package/dist/elements/InputElement.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { Form } from 'react-bootstrap';
 import { IMaskInput } from 'react-imask';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
@@ -66,12 +65,14 @@ export function InputElement({ element, formId }) {
         }
         store.setElementState(element.id, { value: checked ? value : '' });
     };
+    const isCheck = element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio;
     const renderControl = () => {
+        const baseClass = error ? 'pb-form-control-invalid' : '';
         if (element.elementType === ElementTypeEnum.Textarea) {
-            return (_jsx("textarea", { defaultValue: getString(properties, 'value'), rows: getNumber(properties, 'rows') || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+            return (_jsx("textarea", { defaultValue: getString(properties, 'value'), rows: getNumber(properties, 'rows') || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `pb-form-textarea ${baseClass}`.trim(), style: element.styles }));
         }
         if (element.elementType === ElementTypeEnum.Select) {
-            return (_jsx("select", { defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-select${error ? ' is-invalid' : ''}`, style: element.styles, children: options.map((option, index) => {
+            return (_jsx("select", { defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `pb-form-select ${baseClass}`.trim(), style: element.styles, children: options.map((option, index) => {
                     var _a, _b, _c, _d;
                     const data = typeof option === 'object' && option !== null ? option : null;
                     const value = String((_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : option);
@@ -79,17 +80,17 @@ export function InputElement({ element, formId }) {
                     return (_jsx("option", { value: value, children: text }, `${value}-${index}`));
                 }) }));
         }
-        if (element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio) {
+        if (isCheck) {
             const value = getString(properties, 'value', 'on');
-            return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && (_jsx("label", { className: "form-check-label", htmlFor: controlId, children: label }))] }));
+            return (_jsxs("div", { className: "pb-form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `pb-form-check-input${error ? ' pb-form-check-invalid' : ''}`, style: element.styles }), label && (_jsx("label", { className: "pb-form-check-label", htmlFor: controlId, children: label }))] }));
         }
         if (element.elementType === ElementTypeEnum.File) {
-            return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));
+            return (_jsx("div", { className: "pb-alert pb-alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));
         }
         if (hasMask) {
-            return (_jsx(IMaskInput, { mask: getString(properties, 'mask'), defaultValue: getString(properties, 'value'), onAccept: handleAccept, onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+            return (_jsx(IMaskInput, { mask: getString(properties, 'mask'), defaultValue: getString(properties, 'value'), onAccept: handleAccept, onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `pb-form-control ${baseClass}`.trim(), style: element.styles }));
         }
-        return (_jsx("input", { type: getString(properties, 'type', 'text'), defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+        return (_jsx("input", { type: getString(properties, 'type', 'text'), defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `pb-form-control ${baseClass}`.trim(), style: element.styles }));
     };
-    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Form.Group, { className: "mb-3", controlId: controlId, children: [label && element.elementType !== ElementTypeEnum.Checkbox && element.elementType !== ElementTypeEnum.Radio && (_jsx(Form.Label, { children: label })), renderControl(), error && (_jsx("div", { className: "invalid-feedback", style: { display: 'block' }, children: errorMessage }))] }) }));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsxs("div", { className: "pb-form-group", id: controlId, children: [label && !isCheck && (_jsx("label", { className: "pb-form-label", htmlFor: controlId, children: label })), renderControl(), error && (_jsx("div", { className: "pb-invalid-feedback", role: "alert", children: errorMessage }))] }) }));
 }

package/dist/elements/TextElement.js

@@ -4,10 +4,14 @@ import { ElementColWrapper } from './ElementColWrapper.js';
 export function TextElement({ element }) {
     const properties = element.properties;
     const text = String(properties.text || properties.title || properties.message || '');
+    const isSimple = properties.editorType === 'simple';
     if (element.elementType === 'title') {
         const tag = String(properties.tag || 'h2');
         const TitleTag = tag;
-        return (_jsx(ElementColWrapper, { element: element, children: _jsx(TitleTag, { style: element.styles, children: text }) }));
+        return (_jsx(ElementColWrapper, { element: element, children: _jsx(TitleTag, { style: Object.assign({ margin: 0 }, element.styles), children: text }) }));
+    }
+    if (isSimple) {
+        return (_jsx(ElementColWrapper, { element: element, children: _jsx("div", { style: Object.assign({ whiteSpace: 'pre-wrap' }, element.styles), children: text }) }));
     }
     return (_jsx(ElementColWrapper, { element: element, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(text) }, style: element.styles }) }));
 }

package/dist/factories/ButtonActionFactory.d.ts

@@ -1,10 +1,9 @@
-import { type EmailServiceConfig } from '../services/EmailService.js';
+import { type EmailServiceConfig, type EmailSendOptions } from '../services/EmailService.js';
 import type { FormFieldsType } from '../types/FormFieldsType.js';
-import type { MailBodyType } from '../types/MailBodyType.js';
 declare class ButtonActionFactory {
     private emailService;
     configureEmail(config: EmailServiceConfig): void;
-    build(actionId: number, data: FormFieldsType[]): Promise<MailBodyType | boolean>;
+    build(actionId: number, data: FormFieldsType[], options?: EmailSendOptions): Promise<boolean>;
 }
 export declare const buttonActionFactory: ButtonActionFactory;
-export type { EmailServiceConfig } from '../services/EmailService.js';
+export type { EmailServiceConfig, EmailSendOptions } from '../services/EmailService.js';

package/dist/factories/ButtonActionFactory.js

@@ -7,13 +7,13 @@ class ButtonActionFactory {
     configureEmail(config) {
         this.emailService = new EmailService(config);
     }
-    async build(actionId, data) {
+    async build(actionId, data, options) {
         switch (actionId) {
             case ButtonActionEnum.SendMail: {
                 if (!this.emailService) {
                     throw new Error('EmailService not configured. Call configureEmail() before using SendMail action.');
                 }
-                return this.emailService.sendMail(data);
+                return this.emailService.sendMail(data, options);
             }
             default:
                 throw new Error('Invalid button action: ' + actionId);

package/dist/factories/ComponentFactory.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
+import type { ComponentDefaults } from '../types/WebsiteType.js';
 export declare class ComponentFactory {
-    build(component: ComponentType, editionMode?: boolean): React.ReactElement | null;
+    build(component: ComponentType, editionMode?: boolean, defaults?: ComponentDefaults): React.ReactElement | null;
 }

package/dist/factories/ComponentFactory.js

@@ -1,36 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComponentTypeEnum } from '../constants/ComponentEnum.js';
 import { TextComponent } from '../components/TextComponent.js';
+import { ImageComponent } from '../components/ImageComponent.js';
 import { ListComponent } from '../components/ListComponent.js';
-import { CarouselComponent } from '../components/CarouselComponent.js';
 import { FormComponent } from '../components/FormComponent.js';
 import { SliderComponent } from '../components/SliderComponent.js';
 import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
+import { ButtonsComponent } from '../components/ButtonsComponent.js';
+import { IconComponent } from '../components/IconComponent.js';
+/**
+ * Aplica os estilos padrão do design system (`componentDefaults`) antes dos
+ * estilos da instância — o override da instância prevalece.
+ */
+function applyDefaults(component, defaults) {
+    const typeDefaults = defaults === null || defaults === void 0 ? void 0 : defaults[component.componentType];
+    if (!typeDefaults || Object.keys(typeDefaults).length === 0)
+        return component;
+    return Object.assign(Object.assign({}, component), { styles: Object.assign(Object.assign({}, typeDefaults), component.styles) });
+}
 export class ComponentFactory {
-    build(component, editionMode = false) {
-        switch (component.componentType) {
+    build(component, editionMode = false, defaults) {
+        const resolved = applyDefaults(component, defaults);
+        switch (resolved.componentType) {
             case ComponentTypeEnum.Text:
             case ComponentTypeEnum.TextWithImage:
             case ComponentTypeEnum.HeroBanner:
-                return _jsx(TextComponent, { component: component }, component.id);
+                return _jsx(TextComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Image:
+                return _jsx(ImageComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.List:
-                return _jsx(ListComponent, { component: component }, component.id);
+                return _jsx(ListComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Slider:
             case ComponentTypeEnum.Gallery:
             case ComponentTypeEnum.Testimonials:
-                return _jsx(SliderComponent, { component: component, editionMode: editionMode }, component.id);
+                return _jsx(SliderComponent, { component: resolved, editionMode: editionMode }, resolved.id);
             case ComponentTypeEnum.Form:
-                return _jsx(FormComponent, { component: component }, component.id);
+                return _jsx(FormComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Card:
             case ComponentTypeEnum.Faq:
-                return _jsx(CardComponent, { component: component }, component.id);
-            case ComponentTypeEnum.Image:
-                return _jsx(CarouselComponent, { component: component }, component.id);
+                return _jsx(CardComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Map:
-                return _jsx(MapComponent, { component: component }, component.id);
+                return _jsx(MapComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Buttons:
+                return _jsx(ButtonsComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Icon:
+                return _jsx(IconComponent, { component: resolved }, resolved.id);
             default:
-                throw new Error('Invalid component type: ' + component.componentType);
+                throw new Error('Invalid component type: ' + resolved.componentType);
         }
     }
 }

package/dist/index.d.ts

@@ -1,8 +1,7 @@
 export type { RawWebsiteType } from './types/RawWebsiteType.js';
 export type { WebsiteType } from './types/WebsiteType.js';
 export type { PageType } from './types/PageType.js';
-export type { SectionType } from './types/SectionType.js';
-export type { SectionColumnType } from './types/SectionColumnType.js';
+export type { BlockType } from './types/BlockType.js';
 export type { ColumnWidthType } from './types/ColumnWidthType.js';
 export type { ComponentType } from './types/ComponentType.js';
 export type { ElementType } from './types/ElementType.js';
@@ -10,14 +9,30 @@ export type { PropertiesType } from './types/PropertiesType.js';
 export type { StylesType } from './types/StylesType.js';
 export { Header } from './layouts/Header.js';
 export { Footer } from './layouts/Footer.js';
-export { SiteLayout } from './layouts/SiteLayout.js';
+export { SiteLayout, type EmailApiConfig } 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 type { EmailServiceConfig } from './services/EmailService.js';
+export type { EmailServiceConfig, EmailSendOptions } from './services/EmailService.js';
+export type { EmailSettingsType } from './types/EmailSettingsType.js';
+export type { DesignTokens, DesignColors, DesignTypography, DesignSpacing, DesignRadius, DesignShadow, PartialDesignTokens, DeepPartial } from './designSystem/tokens.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';