lib-pixelbuild 0.4.0 → 0.4.2

package/dist/builders/PageBuilder.js

@@ -3,6 +3,7 @@ import { Suspense, memo, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { BlockRenderer } from '../renderers/BlockRenderer.js';
 import { buildResponsiveCssForStyles } from '../utils/responsiveStyles.js';
+import { collectCustomCss } from '../utils/customCss.js';
 import { buildFontFamily } from '../utils/fonts.js';
 function mergeStyles(websiteStyles, pageStyles) {
     const merged = Object.assign({}, (websiteStyles || {}));
@@ -60,6 +61,6 @@ const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
         (_d = designSystem === null || designSystem === void 0 ? void 0 : designSystem.typography) === null || _d === void 0 ? void 0 : _d.fontSizeBase,
         mergedStyles
     ]);
-    return (_jsxs(Suspense, { fallback: _jsx("div", { children: ((_e = website.properties) === null || _e === void 0 ? void 0 : _e.loadingMessage) || 'Carregando...' }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx(BlockRenderer, { blocks: page.blocks, editionMode: editionMode, componentDefaults: website.componentDefaults }), (page.blocks || []).length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhum conte\u00FAdo adicionado." }))] })] }));
+    return (_jsxs(Suspense, { fallback: _jsx("div", { children: ((_e = website.properties) === null || _e === void 0 ? void 0 : _e.loadingMessage) || 'Carregando...' }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, "data-pb-page": true, children: [_jsx("style", { children: buildResponsiveCssForStyles('[data-pb-page]', page.styles) }), _jsx("style", { children: collectCustomCss(website, page) }), _jsx(BlockRenderer, { blocks: page.blocks, editionMode: editionMode, componentDefaults: website.componentDefaults }), (page.blocks || []).length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhum conte\u00FAdo adicionado." }))] })] }));
 });
 export { PageBuilder };

package/dist/components/DividerComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from '../types/ComponentType.js';
+declare const DividerComponent: import("react").NamedExoticComponent<{
+    readonly component: ComponentType;
+}>;
+export { DividerComponent };

package/dist/components/DividerComponent.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
+import { getString } from '../utils/propertyUtils.js';
+const DividerComponent = memo(function DividerComponent({ component }) {
+    const properties = component.properties || {};
+    const orientation = getString(properties, 'orientation', 'horizontal');
+    const thickness = getString(properties, 'thickness', '1px');
+    const color = getString(properties, 'color', '#e5e7eb');
+    const lineStyle = getString(properties, 'lineStyle', 'solid');
+    const length = getString(properties, 'length', '100%');
+    const align = getString(properties, 'align', 'center');
+    const isVertical = orientation === 'vertical';
+    const marginLeft = align === 'left' ? '0' : align === 'right' ? 'auto' : 'auto';
+    const marginRight = align === 'right' ? '0' : align === 'left' ? 'auto' : 'auto';
+    const line = isVertical
+        ? {
+            width: 0,
+            height: length,
+            borderLeft: `${thickness} ${lineStyle} ${color}`,
+            marginLeft,
+            marginRight
+        }
+        : {
+            width: length,
+            height: 0,
+            borderTop: `${thickness} ${lineStyle} ${color}`,
+            marginLeft,
+            marginRight
+        };
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: isVertical ? 'row' : 'column',
+                minHeight: isVertical ? undefined : '1px'
+            }, children: _jsx("div", { style: line, "aria-hidden": "true" }) }) }));
+});
+export { DividerComponent };

package/dist/components/HeroComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from '../types/ComponentType.js';
+declare const HeroComponent: import("react").NamedExoticComponent<{
+    readonly component: ComponentType;
+}>;
+export { HeroComponent };

package/dist/components/HeroComponent.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { ComponentShell } from '../ui/PbComponentShell.js';
+import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+import { getString } from '../utils/propertyUtils.js';
+const elementFactory = new ElementFactory();
+const HeroComponent = memo(function HeroComponent({ component }) {
+    const properties = component.properties || {};
+    const mediaType = getString(properties, 'mediaType', 'none');
+    const mediaSrc = getString(properties, 'mediaSrc', '');
+    const mediaPoster = getString(properties, 'mediaPoster', '');
+    const minHeight = getString(properties, 'minHeight', '600px');
+    const overlayColor = getString(properties, 'overlayColor', '#000000');
+    const overlayOpacity = properties.overlayOpacity !== undefined && properties.overlayOpacity !== ''
+        ? Number(properties.overlayOpacity)
+        : 0.5;
+    const contentAlign = getString(properties, 'contentAlign', 'center');
+    const contentVerticalAlign = getString(properties, 'contentVerticalAlign', 'center');
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const justifyContent = contentAlign === 'left' ? 'flex-start' : contentAlign === 'right' ? 'flex-end' : 'center';
+    const alignItems = contentVerticalAlign === 'top' ? 'flex-start' : contentVerticalAlign === 'bottom' ? 'flex-end' : 'center';
+    const contentStyle = {
+        position: 'relative',
+        zIndex: 2,
+        minHeight,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: alignItems,
+        alignItems: justifyContent,
+        textAlign: contentAlign === 'left' || contentAlign === 'right' ? contentAlign : 'center'
+    };
+    const media = useMemo(() => {
+        if (mediaType === 'video' && mediaSrc) {
+            return (_jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, src: mediaSrc, poster: mediaPoster || undefined, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }));
+        }
+        if (mediaType === 'image' && mediaSrc) {
+            return (_jsx("img", { src: mediaSrc, alt: "", style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }));
+        }
+        return null;
+    }, [mediaType, mediaSrc, mediaPoster]);
+    const overlay = (_jsx("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            zIndex: 1,
+            backgroundColor: overlayColor,
+            opacity: overlayOpacity
+        } }));
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsxs("div", { style: { position: 'relative', overflow: 'hidden', minHeight }, children: [media, overlay, _jsx("div", { style: contentStyle, children: elements.map((element) => elementFactory.build(element)) })] }) }));
+});
+export { HeroComponent };

package/dist/components/SliderComponent.js

@@ -179,6 +179,19 @@ export function SliderComponent({ component, editionMode = false }) {
     const useSharedImages = resolved.imageCustomization !== 'separate';
     const sharedImageStyles = resolved.imageStyles || {};
     const { containerStyle, bodyStyle } = useMemo(() => getComponentShellStyles(component), [component]);
+    if (resolved.mode === 'marquee') {
+        const animName = `pb-marquee-${String(component.id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+        const marqueeDuration = Number(resolved.marqueeDuration) > 0 ? Number(resolved.marqueeDuration) : 20;
+        const marqueeSlides = [...slides, ...slides];
+        const keyframes = `@keyframes ${animName}{from{transform:translateX(0)}to{transform:translateX(calc(-50% - ${spacing / 2}px))}}`;
+        return (_jsxs(_Fragment, { children: [_jsx("style", { children: keyframes }), _jsx("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(containerStyle)), children: _jsx("div", { style: bodyStyle, children: _jsx("div", { style: { overflow: 'hidden' }, children: _jsx("div", { style: {
+                                    display: 'flex',
+                                    columnGap: spacing,
+                                    width: 'max-content',
+                                    animation: `${animName} ${marqueeDuration}s linear infinite`,
+                                    userSelect: 'none'
+                                }, children: marqueeSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }) }) })] }));
+    }
     return (_jsx("div", { ref: containerRef, "data-pb-component": component.id, style: Object.assign({ position: 'relative' }, cleanComponentStyles(containerStyle)), children: _jsxs("div", { style: bodyStyle, children: [_jsx("div", { style: Object.assign({ overflow: 'hidden' }, (fixedHeight ? { height: fixedHeight } : {})), children: _jsx("div", { style: {
                             display: 'flex',
                             columnGap: spacing,

package/dist/components/VideoComponent.js

@@ -131,5 +131,5 @@ export function VideoComponent({ component }) {
                 marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)'
             }, children: content }));
     }
-    return _jsx(ComponentShell, { component: component, outer: "div", children: content });
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: content }));
 }

package/dist/constants/ComponentEnum.d.ts

@@ -15,5 +15,6 @@ export declare const ComponentTypeEnum: {
     readonly List: "list";
     readonly Buttons: "buttons";
     readonly Icon: "icon";
+    readonly Divider: "divider";
 };
 export type ComponentTypeSlug = (typeof ComponentTypeEnum)[keyof typeof ComponentTypeEnum];

package/dist/constants/ComponentEnum.js

@@ -14,5 +14,6 @@ export const ComponentTypeEnum = {
     Map: 'map',
     List: 'list',
     Buttons: 'buttons',
-    Icon: 'icon'
+    Icon: 'icon',
+    Divider: 'divider'
 };

package/dist/designSystem/baseCss.d.ts

@@ -5,4 +5,4 @@
  * valores de destaque usam `var(--pb-*)` com fallback, então o design system
  * (Etapa 1) sobrescreve os tokens sem tocar nestes estilos.
  */
-export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n  box-sizing: border-box;\n}\n.pb-root {\n  margin: 0;\n  font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n  font-size: var(--pb-font-size-base, 16px);\n  line-height: var(--pb-line-height, 1.6);\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-background, #ffffff);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n  margin: 0 0 0.5em;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--pb-color-heading, #111827);\n}\n.pb-root p {\n  margin: 0;\n}\n.pb-root img {\n  max-width: 100%;\n  height: auto;\n}\n.pb-root a {\n  color: var(--pb-color-primary, #f58220);\n  text-decoration: none;\n}\n.pb-root a:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n  max-width: none !important;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n  .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n  .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n  .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n  .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n  .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--pb-gutter, 0);\n}\n.pb-col {\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--pb-radius-md, 8px);\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.pb-button-primary {\n  background-color: var(--pb-color-primary, #f58220);\n  border-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n  background-color: var(--pb-color-secondary, #64748b);\n  border-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-success {\n  background-color: var(--pb-color-success, #16a34a);\n  border-color: var(--pb-color-success, #16a34a);\n  color: #ffffff;\n}\n.pb-button-danger {\n  background-color: var(--pb-color-danger, #dc2626);\n  border-color: var(--pb-color-danger, #dc2626);\n  color: #ffffff;\n}\n.pb-button-warning {\n  background-color: var(--pb-color-warning, #f59e0b);\n  border-color: var(--pb-color-warning, #f59e0b);\n  color: #1f2937;\n}\n.pb-button-info {\n  background-color: var(--pb-color-info, #0ea5e9);\n  border-color: var(--pb-color-info, #0ea5e9);\n  color: #ffffff;\n}\n.pb-button-light {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n  background-color: var(--pb-color-dark, #0f172a);\n  border-color: var(--pb-color-dark, #0f172a);\n  color: #ffffff;\n}\n.pb-button-outline-primary {\n  background-color: transparent;\n  border-color: var(--pb-color-primary, #f58220);\n  color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n  background-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-outline-secondary {\n  background-color: transparent;\n  border-color: var(--pb-color-secondary, #64748b);\n  color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n  background-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-link {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--pb-color-primary, #f58220);\n  padding-inline: 0.5em;\n}\n.pb-button-sm {\n  padding: 0.375em 0.875em;\n  font-size: 0.875rem;\n  border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n  padding: 0.625em 1.5em;\n  font-size: 1.125rem;\n  border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 0.2em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: pb-spin 0.75s linear infinite;\n  vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n  width: 1rem;\n  height: 1rem;\n  border-width: 0.18em;\n}\n@keyframes pb-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n  padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n  border: 1px solid;\n  border-radius: var(--pb-radius-md, 8px);\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n  font-weight: var(--pb-font-weight-bold, 700);\n  margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n  background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n  background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n  background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n  background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n  display: block;\n  width: 100%;\n  padding: 0.5em 0.75em;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-surface, #ffffff);\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n  outline: none;\n  border-color: var(--pb-color-primary, #f58220);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n  border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n  display: block;\n  margin-top: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n  width: 1.1em;\n  height: 1.1em;\n  accent-color: var(--pb-color-primary, #f58220);\n  flex-shrink: 0;\n}\n.pb-form-check-label {\n  font-weight: normal;\n  margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n  width: 100%;\n}\n.pb-header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--pb-space-md, 16px);\n  flex-wrap: wrap;\n  padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  flex-shrink: 0;\n}\n.pb-brand img {\n  max-height: 56px;\n  width: auto;\n}\n.pb-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.pb-nav-link {\n  display: inline-block;\n  padding: 0.5rem 0.75rem;\n  color: inherit;\n  text-decoration: none;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n  text-decoration: none;\n  opacity: 0.85;\n}\n.pb-nav-link-active {\n  border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n  display: none;\n  padding: 0.375rem 0.625rem;\n  font-size: 1.25rem;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  cursor: pointer;\n  color: inherit;\n}\n@media (max-width: 991.98px) {\n  .pb-nav-toggle { display: inline-flex; align-items: center; }\n  .pb-nav { display: none; }\n  .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n  width: 100%;\n  padding-block: var(--pb-space-xl, 32px);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n  border: none;\n  border-top: 1px solid var(--pb-color-border, #e5e7eb);\n  margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  flex-wrap: wrap;\n}\n.pb-social-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n}\n.pb-social-icon:hover {\n  text-decoration: none;\n  opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";
+export declare const baseCss = "\n/* \u2500\u2500\u2500 Reset e tipografia base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {\n  box-sizing: border-box;\n}\n.pb-root {\n  margin: 0;\n  font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);\n  font-size: var(--pb-font-size-base, 16px);\n  line-height: var(--pb-line-height, 1.6);\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-background, #ffffff);\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {\n  margin: 0 0 0.5em;\n  font-family: var(--pb-font-heading, var(--pb-font-family, 'Inter', system-ui, sans-serif));\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--pb-color-heading, #111827);\n}\n.pb-root p {\n  margin: 0;\n}\n.pb-root img {\n  max-width: 100%;\n  height: auto;\n}\n.pb-root a {\n  color: var(--pb-color-primary, #f58220);\n  text-decoration: none;\n}\n.pb-root a:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500\u2500 Layout: container / grade \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-container {\n  width: 100%;\n  margin-inline: auto;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n.pb-container-fluid {\n  max-width: none !important;\n  padding-inline: var(--pb-gutter, 1.5rem);\n}\n@media (min-width: 576px) {\n  .pb-container { max-width: 540px; }\n}\n@media (min-width: 768px) {\n  .pb-container { max-width: 720px; }\n}\n@media (min-width: 992px) {\n  .pb-container { max-width: 960px; }\n}\n@media (min-width: 1200px) {\n  .pb-container { max-width: 1140px; }\n}\n@media (min-width: 1400px) {\n  .pb-container { max-width: 1320px; }\n}\n\n.pb-row {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--pb-gutter, 0);\n}\n.pb-col {\n  min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Bot\u00F5es \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--pb-radius-md, 8px);\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n}\n.pb-button:hover { text-decoration: none; }\n.pb-button:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.pb-button-primary {\n  background-color: var(--pb-color-primary, #f58220);\n  border-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-primary:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);\n}\n.pb-button-secondary {\n  background-color: var(--pb-color-secondary, #64748b);\n  border-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-success {\n  background-color: var(--pb-color-success, #16a34a);\n  border-color: var(--pb-color-success, #16a34a);\n  color: #ffffff;\n}\n.pb-button-danger {\n  background-color: var(--pb-color-danger, #dc2626);\n  border-color: var(--pb-color-danger, #dc2626);\n  color: #ffffff;\n}\n.pb-button-warning {\n  background-color: var(--pb-color-warning, #f59e0b);\n  border-color: var(--pb-color-warning, #f59e0b);\n  color: #1f2937;\n}\n.pb-button-info {\n  background-color: var(--pb-color-info, #0ea5e9);\n  border-color: var(--pb-color-info, #0ea5e9);\n  color: #ffffff;\n}\n.pb-button-light {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-button-dark {\n  background-color: var(--pb-color-dark, #0f172a);\n  border-color: var(--pb-color-dark, #0f172a);\n  color: #ffffff;\n}\n.pb-button-outline-primary {\n  background-color: transparent;\n  border-color: var(--pb-color-primary, #f58220);\n  color: var(--pb-color-primary, #f58220);\n}\n.pb-button-outline-primary:hover:not(:disabled) {\n  background-color: var(--pb-color-primary, #f58220);\n  color: #ffffff;\n}\n.pb-button-outline-secondary {\n  background-color: transparent;\n  border-color: var(--pb-color-secondary, #64748b);\n  color: var(--pb-color-secondary, #64748b);\n}\n.pb-button-outline-secondary:hover:not(:disabled) {\n  background-color: var(--pb-color-secondary, #64748b);\n  color: #ffffff;\n}\n.pb-button-link {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--pb-color-primary, #f58220);\n  padding-inline: 0.5em;\n}\n.pb-button-sm {\n  padding: 0.375em 0.875em;\n  font-size: 0.875rem;\n  border-radius: var(--pb-radius-sm, 4px);\n}\n.pb-button-lg {\n  padding: 0.625em 1.5em;\n  font-size: 1.125rem;\n  border-radius: var(--pb-radius-lg, 12px);\n}\n\n/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-spinner {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: 0.2em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: pb-spin 0.75s linear infinite;\n  vertical-align: -0.25em;\n}\n.pb-spinner-sm {\n  width: 1rem;\n  height: 1rem;\n  border-width: 0.18em;\n}\n@keyframes pb-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500\u2500 Alertas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-alert {\n  padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);\n  border: 1px solid;\n  border-radius: var(--pb-radius-md, 8px);\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-alert-title {\n  font-weight: var(--pb-font-weight-bold, 700);\n  margin-bottom: 0.25em;\n}\n.pb-alert-primary {\n  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-info {\n  background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-success {\n  background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-warning {\n  background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-danger {\n  background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);\n  border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-alert-secondary {\n  background-color: var(--pb-color-light, #f8fafc);\n  border-color: var(--pb-color-border, #e5e7eb);\n  color: var(--pb-color-text, #1f2937);\n}\n\n/* \u2500\u2500\u2500 Formul\u00E1rios \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-form-group {\n  margin-bottom: var(--pb-space-md, 16px);\n}\n.pb-form-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-weight: var(--pb-font-weight-bold, 700);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-form-control,\n.pb-form-select,\n.pb-form-textarea {\n  display: block;\n  width: 100%;\n  padding: 0.5em 0.75em;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  color: var(--pb-color-text, #1f2937);\n  background-color: var(--pb-color-surface, #ffffff);\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.pb-form-control:focus,\n.pb-form-select:focus,\n.pb-form-textarea:focus {\n  outline: none;\n  border-color: var(--pb-color-primary, #f58220);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);\n}\n.pb-form-control-invalid,\n.pb-form-select-invalid,\n.pb-form-textarea-invalid {\n  border-color: var(--pb-color-danger, #dc2626);\n}\n.pb-invalid-feedback {\n  display: block;\n  margin-top: 0.375rem;\n  font-size: 0.875rem;\n  color: var(--pb-color-danger, #dc2626);\n}\n.pb-form-check {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.pb-form-check-input {\n  width: 1.1em;\n  height: 1.1em;\n  accent-color: var(--pb-color-primary, #f58220);\n  flex-shrink: 0;\n}\n.pb-form-check-label {\n  font-weight: normal;\n  margin-bottom: 0;\n}\n\n/* \u2500\u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-header {\n  width: 100%;\n}\n.pb-header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--pb-space-md, 16px);\n  flex-wrap: wrap;\n  padding-block: var(--pb-space-sm, 8px);\n}\n.pb-brand {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n  flex-shrink: 0;\n}\n.pb-brand img {\n  max-height: 56px;\n  width: auto;\n}\n.pb-nav {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n.pb-nav-link {\n  display: inline-block;\n  padding: 0.5rem 0.75rem;\n  color: inherit;\n  text-decoration: none;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: color 0.2s ease, border-color 0.2s ease;\n}\n.pb-nav-link:hover {\n  text-decoration: none;\n  opacity: 0.85;\n}\n.pb-nav-link-active {\n  border-bottom-color: currentColor;\n}\n.pb-nav-toggle {\n  display: none;\n  padding: 0.375rem 0.625rem;\n  font-size: 1.25rem;\n  line-height: 1;\n  background: transparent;\n  border: 1px solid var(--pb-color-border, #e5e7eb);\n  border-radius: var(--pb-radius-sm, 4px);\n  cursor: pointer;\n  color: inherit;\n}\n@media (max-width: 991.98px) {\n  .pb-nav-toggle { display: inline-flex; align-items: center; }\n  .pb-nav { display: none; }\n  .pb-nav-open { display: flex; flex-direction: column; width: 100%; }\n}\n\n/* \u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-footer {\n  width: 100%;\n  padding-block: var(--pb-space-xl, 32px);\n  color: var(--pb-color-text, #1f2937);\n}\n.pb-footer-divider {\n  border: none;\n  border-top: 1px solid var(--pb-color-border, #e5e7eb);\n  margin: var(--pb-space-lg, 24px) 0;\n}\n.pb-social-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  flex-wrap: wrap;\n}\n.pb-social-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n  color: inherit;\n  text-decoration: none;\n}\n.pb-social-icon:hover {\n  text-decoration: none;\n  opacity: 0.8;\n}\n\n/* \u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-loading {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pb-space-sm, 8px);\n  font-weight: 600;\n  letter-spacing: 0.08em;\n}\n\n/* \u2500\u2500\u2500 Utilit\u00E1rios de alinhamento \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pb-text-center { text-align: center; }\n.pb-mb-0 { margin-bottom: 0; }\n";

package/dist/designSystem/baseCss.js

@@ -22,6 +22,7 @@ export const baseCss = `
 }
 .pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {
   margin: 0 0 0.5em;
+  font-family: var(--pb-font-heading, var(--pb-font-family, 'Inter', system-ui, sans-serif));
   font-weight: var(--pb-font-weight-bold, 700);
   line-height: 1.2;
   color: var(--pb-color-heading, #111827);

package/dist/designSystem/tokens.d.ts

@@ -24,6 +24,7 @@ export interface DesignColors {
 }
 export interface DesignTypography {
     fontFamily: string;
+    headingFontFamily: string;
     fontSizeBase: string;
     fontWeightNormal: string;
     fontWeightBold: string;

package/dist/designSystem/tokens.js

@@ -29,6 +29,7 @@ export const defaultTokens = {
     },
     typography: {
         fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+        headingFontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
         fontSizeBase: '16px',
         fontWeightNormal: '400',
         fontWeightBold: '700',
@@ -101,6 +102,7 @@ export function tokenToCssVars(tokens) {
         '--pb-color-muted': colors.muted,
         '--pb-color-border': colors.border,
         '--pb-font-family': typography.fontFamily,
+        '--pb-font-heading': typography.headingFontFamily,
         '--pb-font-size-base': typography.fontSizeBase,
         '--pb-font-weight-normal': typography.fontWeightNormal,
         '--pb-font-weight-bold': typography.fontWeightBold,

package/dist/factories/ComponentFactory.js

@@ -10,6 +10,8 @@ import { MapComponent } from '../components/MapComponent.js';
 import { ButtonsComponent } from '../components/ButtonsComponent.js';
 import { IconComponent } from '../components/IconComponent.js';
 import { VideoComponent } from '../components/VideoComponent.js';
+import { HeroComponent } from '../components/HeroComponent.js';
+import { DividerComponent } from '../components/DividerComponent.js';
 /**
  * Aplica os estilos padrão do design system (`componentDefaults`) antes dos
  * estilos da instância — o override da instância prevalece.
@@ -26,8 +28,11 @@ export class ComponentFactory {
         switch (resolved.componentType) {
             case ComponentTypeEnum.Text:
             case ComponentTypeEnum.TextWithImage:
-            case ComponentTypeEnum.HeroBanner:
                 return _jsx(TextComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.HeroBanner:
+                return _jsx(HeroComponent, { component: resolved }, resolved.id);
+            case ComponentTypeEnum.Divider:
+                return _jsx(DividerComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.Image:
                 return _jsx(ImageComponent, { component: resolved }, resolved.id);
             case ComponentTypeEnum.List:

package/dist/renderers/BlockRenderer.js

@@ -9,8 +9,11 @@ function gridClass(id) {
     return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
 }
 const BlockGrid = memo(function BlockGrid({ block, editionMode, componentDefaults }) {
+    var _a;
     const grid = gridClass(block.id);
     const components = orderBySort(block.components);
+    const gap = (_a = block.properties) === null || _a === void 0 ? void 0 : _a.gap;
+    const gapValue = gap === '' || gap === undefined || gap === null ? '0' : String(gap);
     const css = useMemo(() => {
         const rules = components
             .map((component) => {
@@ -29,8 +32,8 @@ const BlockGrid = memo(function BlockGrid({ block, editionMode, componentDefault
             ].join('');
         })
             .join('');
-        return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0}${rules}`;
-    }, [grid, components]);
+        return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:${gapValue}}${rules}`;
+    }, [grid, components, gapValue]);
     if (editionMode && components.length === 0) {
         return (_jsxs("div", { "data-pixelbuild-empty-block": block.id, style: {
                 minHeight: 80,

package/dist/utils/customCss.d.ts

@@ -0,0 +1,8 @@
+import type { PageType } from '../types/PageType.js';
+import type { WebsiteType } from '../types/WebsiteType.js';
+/**
+ * Coleta o `customCss` declarado em qualquer nível (site, página, bloco,
+ * componente e elemento) e devolve um único bloco de CSS. É renderizado como
+ * `<style>` global, permitindo hover, pseudo-elementos, animações etc.
+ */
+export declare function collectCustomCss(website?: WebsiteType, page?: PageType): string;

package/dist/utils/customCss.js

@@ -0,0 +1,27 @@
+function extract(styles) {
+    if (!styles || typeof styles !== 'object')
+        return '';
+    const css = styles.customCss;
+    return typeof css === 'string' && css.trim() ? css.trim() : '';
+}
+/**
+ * Coleta o `customCss` declarado em qualquer nível (site, página, bloco,
+ * componente e elemento) e devolve um único bloco de CSS. É renderizado como
+ * `<style>` global, permitindo hover, pseudo-elementos, animações etc.
+ */
+export function collectCustomCss(website, page) {
+    var _a, _b, _c;
+    const parts = [];
+    parts.push(extract(website === null || website === void 0 ? void 0 : website.styles));
+    parts.push(extract(page === null || page === void 0 ? void 0 : page.styles));
+    for (const block of (_a = page === null || page === void 0 ? void 0 : page.blocks) !== null && _a !== void 0 ? _a : []) {
+        parts.push(extract(block.styles));
+        for (const component of (_b = block.components) !== null && _b !== void 0 ? _b : []) {
+            parts.push(extract(component.styles));
+            for (const element of (_c = component.elements) !== null && _c !== void 0 ? _c : []) {
+                parts.push(extract(element.styles));
+            }
+        }
+    }
+    return parts.filter(Boolean).join('\n');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "engines": {
     "node": "^24.0.0",
     "npm": ">=10"