lib-pixelbuild 0.2.2 → 0.2.3

package/dist/builders/PageBuilder.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, memo, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { SectionRenderer } from '../renderers/SectionRenderer.js';
+import { BlockRenderer } from '../renderers/BlockRenderer.js';
 import { buildResponsiveCssForStyles } from '../utils/responsiveStyles.js';
 import { buildFontFamily } from '../utils/fonts.js';
 function mergeStyles(websiteStyles, pageStyles) {
@@ -21,32 +21,45 @@ function toCssValue(val) {
     return undefined;
 }
 const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
+    var _a, _b, _c, _d;
     const mergedStyles = useMemo(() => mergeStyles(website.styles, page.styles), [website.styles, page.styles]);
-    const pageStyle = useMemo(() => ({
-        backgroundColor: toCssValue(mergedStyles.backgroundColor),
-        color: toCssValue(mergedStyles.color),
-        backgroundImage: mergedStyles.backgroundGradientColorStart
-            ? `linear-gradient(${mergedStyles.backgroundGradientColorStart}, ${mergedStyles.backgroundGradientColorEnd}), url(${mergedStyles.backgroundImage})`
-            : mergedStyles.backgroundImage
-                ? `url(${mergedStyles.backgroundImage})`
-                : undefined,
-        backgroundSize: toCssValue(mergedStyles.backgroundSize),
-        backgroundPosition: toCssValue(mergedStyles.backgroundPosition),
-        width: toCssValue(mergedStyles.width),
-        height: toCssValue(mergedStyles.height),
-        fontFamily: buildFontFamily(mergedStyles.fontFamily),
-        fontSize: toCssValue(mergedStyles.fontSize),
-        fontWeight: toCssValue(mergedStyles.fontWeight),
-        textAlign: mergedStyles.textAlign,
-        paddingTop: toCssValue(mergedStyles.paddingTop),
-        paddingBottom: toCssValue(mergedStyles.paddingBottom),
-        paddingLeft: toCssValue(mergedStyles.paddingLeft),
-        paddingRight: toCssValue(mergedStyles.paddingRight),
-        marginTop: toCssValue(mergedStyles.marginTop),
-        marginBottom: toCssValue(mergedStyles.marginBottom),
-        borderRadius: toCssValue(mergedStyles.borderRadius),
-        minHeight: '100vh'
-    }), [mergedStyles]);
-    return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), 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(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "No sections configured. Use the layout editor to add content." }))] })] }));
+    const designSystem = website.designSystem;
+    const pageStyle = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return ({
+            backgroundColor: (_b = toCssValue((_a = designSystem === null || designSystem === void 0 ? void 0 : designSystem.colors) === null || _a === void 0 ? void 0 : _a.background)) !== null && _b !== void 0 ? _b : toCssValue(mergedStyles.backgroundColor),
+            color: (_d = toCssValue((_c = designSystem === null || designSystem === void 0 ? void 0 : designSystem.colors) === null || _c === void 0 ? void 0 : _c.text)) !== null && _d !== void 0 ? _d : toCssValue(mergedStyles.color),
+            backgroundImage: mergedStyles.backgroundGradientColorStart
+                ? `linear-gradient(${mergedStyles.backgroundGradientColorStart}, ${mergedStyles.backgroundGradientColorEnd}), url(${mergedStyles.backgroundImage})`
+                : mergedStyles.backgroundImage
+                    ? `url(${mergedStyles.backgroundImage})`
+                    : undefined,
+            backgroundSize: toCssValue(mergedStyles.backgroundSize),
+            backgroundPosition: toCssValue(mergedStyles.backgroundPosition),
+            width: toCssValue(mergedStyles.width),
+            height: toCssValue(mergedStyles.height),
+            fontFamily: toCssValue((_e = designSystem === null || designSystem === void 0 ? void 0 : designSystem.typography) === null || _e === void 0 ? void 0 : _e.fontFamily)
+                ? buildFontFamily(designSystem.typography.fontFamily)
+                : buildFontFamily(mergedStyles.fontFamily),
+            fontSize: (_g = toCssValue((_f = designSystem === null || designSystem === void 0 ? void 0 : designSystem.typography) === null || _f === void 0 ? void 0 : _f.fontSizeBase)) !== null && _g !== void 0 ? _g : toCssValue(mergedStyles.fontSize),
+            fontWeight: toCssValue(mergedStyles.fontWeight),
+            textAlign: mergedStyles.textAlign,
+            paddingTop: toCssValue(mergedStyles.paddingTop),
+            paddingBottom: toCssValue(mergedStyles.paddingBottom),
+            paddingLeft: toCssValue(mergedStyles.paddingLeft),
+            paddingRight: toCssValue(mergedStyles.paddingRight),
+            marginTop: toCssValue(mergedStyles.marginTop),
+            marginBottom: toCssValue(mergedStyles.marginBottom),
+            borderRadius: toCssValue(mergedStyles.borderRadius),
+            minHeight: '100vh'
+        });
+    }, [
+        (_a = designSystem === null || designSystem === void 0 ? void 0 : designSystem.colors) === null || _a === void 0 ? void 0 : _a.background,
+        (_b = designSystem === null || designSystem === void 0 ? void 0 : designSystem.colors) === null || _b === void 0 ? void 0 : _b.text,
+        (_c = designSystem === null || designSystem === void 0 ? void 0 : designSystem.typography) === null || _c === void 0 ? void 0 : _c.fontFamily,
+        (_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: website.properties.loadingMessage }), 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." }))] })] }));
 });
 export { PageBuilder };

package/dist/components/ButtonsComponent.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Button, Container } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbButton } from '../ui/PbButton.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
 const ALIGN_JUSTIFY = {
     left: 'flex-start',
     center: 'center',
-    right: 'flex-end',
+    right: 'flex-end'
 };
 const ButtonsComponent = memo(function ButtonsComponent({ component }) {
     var _a, _b;
@@ -20,13 +21,13 @@ const ButtonsComponent = memo(function ButtonsComponent({ component }) {
         display: 'flex',
         flexDirection: isColumn ? 'column' : 'row',
         flexWrap: 'wrap',
-        gap: `${gap}px`,
+        gap: `${gap}px`
     };
     if (isColumn)
         containerStyle.alignItems = align;
     else
         containerStyle.justifyContent = align;
-    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx("div", { style: containerStyle, children: elements.map((element) => {
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx("div", { style: containerStyle, children: elements.map((element) => {
                 const props = element.properties || {};
                 const href = getString(props, 'path') || getString(props, 'href');
                 const text = getString(props, 'text') || getString(props, 'title');
@@ -38,7 +39,7 @@ const ButtonsComponent = memo(function ButtonsComponent({ component }) {
                     else
                         style.flex = '1 1 0%';
                 }
-                return (_jsx(Button, { "data-pb-element": element.id, as: href ? 'a' : 'button', variant: getString(props, 'variant', 'primary'), size: size === 'sm' || size === 'lg' ? size : undefined, href: href || undefined, target: href ? getString(props, 'target', '_self') : undefined, rel: href ? 'noopener noreferrer' : undefined, style: style, children: text }, element.id));
+                return (_jsx(PbButton, { "data-pb-element": element.id, href: href || undefined, variant: getString(props, 'variant', 'primary'), size: size === 'sm' || size === 'lg' ? size : undefined, target: href ? getString(props, 'target', '_self') : undefined, style: style, children: text }, element.id));
             }) }) }));
 });
 export { ButtonsComponent };

package/dist/components/CardComponent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Row, Container } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
@@ -44,7 +45,8 @@ const CardComponent = memo(function CardComponent({ component }) {
         cardTitleColor: properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
         cardTitleSize: properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
         cardTextColor: properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
-        cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize
+        cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
+        cardElementGap: properties === null || properties === void 0 ? void 0 : properties.cardElementGap
     }), [
         properties === null || properties === void 0 ? void 0 : properties.cardElement1,
         properties === null || properties === void 0 ? void 0 : properties.cardElement2,
@@ -55,7 +57,8 @@ const CardComponent = memo(function CardComponent({ component }) {
         properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
         properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
         properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
-        properties === null || properties === void 0 ? void 0 : properties.cardTextSize
+        properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
+        properties === null || properties === void 0 ? void 0 : properties.cardElementGap
     ]);
     const orderedElements = useMemo(() => {
         const cardOrder = [
@@ -79,18 +82,21 @@ const CardComponent = memo(function CardComponent({ component }) {
     ]);
     const elements = useMemo(() => orderedElements.map((el) => applyCardStyles(el, cardProps)), [orderedElements, cardProps]);
     const layout = String((properties === null || properties === void 0 ? void 0 : properties.cardLayout) || 'stacked');
+    const rawGap = cardProps.cardElementGap;
+    const elementGap = rawGap === '' || rawGap == null ? '0' : String(rawGap);
+    const rowGapStyle = { gap: elementGap };
     if (layout === 'icon-left' || layout === 'icon-right') {
         const icon = elements.find((element) => element.elementType === 'icon');
         const others = elements.filter((element) => element !== icon);
         const iconBox = icon ? _jsx("div", { style: { flex: '0 0 auto' }, children: elementFactory.build(stripWidth(icon)) }) : null;
-        const contentBox = _jsx("div", { style: { flex: '1 1 220px', minWidth: 0 }, children: others.map((element) => elementFactory.build(stripWidth(element))) });
-        return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }, children: [layout === 'icon-left' ? iconBox : contentBox, layout === 'icon-left' ? contentBox : iconBox] }) }));
+        const contentBox = (_jsx("div", { style: { flex: '1 1 220px', minWidth: 0 }, children: others.map((element) => elementFactory.build(stripWidth(element))) }));
+        return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: elementGap, flexWrap: 'wrap' }, children: [layout === 'icon-left' ? iconBox : contentBox, layout === 'icon-left' ? contentBox : iconBox] }) }));
     }
     if (layout === 'icon-top') {
         const icon = elements.find((element) => element.elementType === 'icon');
         const others = elements.filter((element) => element !== icon);
-        return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { textAlign: 'center' }, children: [icon && _jsx("div", { style: { display: 'inline-block' }, children: elementFactory.build(centerStyles(icon)) }), _jsx("div", { children: others.map((element) => elementFactory.build(centerStyles(element))) })] }) }));
+        return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: elementGap }, children: [icon && _jsx("div", { style: { display: 'inline-block' }, children: elementFactory.build(centerStyles(icon)) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: elementGap }, children: others.map((element) => elementFactory.build(centerStyles(element))) })] }) }));
     }
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(PbContainer, { style: component.styles, children: _jsx(PbRow, { id: "element-row", style: rowGapStyle, children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { CardComponent };

package/dist/components/FormComponent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useMemo } from 'react';
-import { Form, Row, Container } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -18,6 +19,6 @@ const FormComponent = memo(function FormComponent({ component }) {
     const handleSubmit = (event) => {
         event.preventDefault();
     };
-    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx(Form, { onSubmit: handleSubmit, children: _jsx(Row, { children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsx(PbRow, { children: elements.map((element) => elementFactory.build(element, component.id)) }) }) }));
 });
 export { FormComponent };

package/dist/components/IconComponent.d.ts

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

package/dist/components/IconComponent.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
+import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+const elementFactory = new ElementFactory();
+const IconComponent = memo(function IconComponent({ component }) {
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", style: { justifyContent: 'center' }, children: elements.map((element) => elementFactory.build(element)) }) }));
+});
+export { IconComponent };

package/dist/components/ImageComponent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Row, Container } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { resolveImageElement } from '../utils/imageCustomization.js';
@@ -10,8 +11,8 @@ const ImageComponent = memo(function ImageComponent({ component }) {
     const fullBleed = getBoolean(component.properties, 'fullBleed', false);
     const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
     if (fullBleed) {
-        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, component.styles), { width: 'calc(100% + var(--bs-gutter-x, 1.5rem))', marginLeft: 'calc(var(--bs-gutter-x, 1.5rem) * -0.5)', marginRight: 'calc(var(--bs-gutter-x, 1.5rem) * -0.5)' }), children: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
+        return (_jsx("div", { "data-pb-component": component.id, style: Object.assign(Object.assign({}, component.styles), { width: 'calc(100% + var(--pb-gutter, 1.5rem))', marginLeft: 'calc(var(--pb-gutter, 1.5rem) * -0.5)', marginRight: 'calc(var(--pb-gutter, 1.5rem) * -0.5)' }), children: elements.map((element) => elementFactory.build(Object.assign(Object.assign({}, element), { fullBleed: true }))) }));
     }
-    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { ImageComponent };

package/dist/components/ListComponent.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Col } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { ElementTypeEnum } from '../constants/ElementEnum.js';
 import { orderBySort } from '../utils/orderBySort.js';
@@ -28,6 +27,6 @@ const ListComponent = memo(function ListComponent({ component }) {
         }
         return result;
     }, [elements]);
-    return (_jsx(Col, { "data-pb-component": component.id, style: component.styles, children: _jsx("ul", { style: { listStyle: 'none' }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: itemAlign, marginBottom: itemGap }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: itemFontSize }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
+    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: _jsx("ul", { style: { listStyle: 'none', paddingLeft: 0 }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: itemAlign, marginBottom: itemGap }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: itemFontSize }, children: text ? elementFactory.build(text) : null })] }, id))) }) }));
 });
 export { ListComponent };

package/dist/components/LoadingComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, Spinner } from 'react-bootstrap';
+import { PbSpinner } from '../ui/PbSpinner.js';
 export function LoadingComponent() {
-    return (_jsxs(Container, { className: "d-flex flex-column align-items-center justify-content-center", style: { minHeight: '100vh' }, children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { animation: "border" }) }), _jsx("p", { className: "mt-3", children: "LOADING" })] }));
+    return (_jsxs("div", { className: "pb-loading", children: [_jsx("output", { "aria-busy": "true", children: _jsx(PbSpinner, {}) }), _jsx("p", { className: "pb-mb-0", children: "LOADING" })] }));
 }

package/dist/components/MapComponent.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Row, Col } from 'react-bootstrap';
 const COORDS_PATTERN = /^-?\d+(\.\d+)?$/;
 function isValidCoord(value) {
     if (typeof value !== 'string')
@@ -19,14 +18,14 @@ export function MapComponent({ component }) {
         }
         return `https://maps.google.com/maps?q=${encodeURIComponent(`${latStr},${lngStr}`)}&z=${zoom}&output=embed`;
     }, [lat, lng, zoom]);
-    return (_jsx(Col, { "data-pb-component": component.id, style: component.styles, children: _jsx(Row, { children: _jsx(Col, { children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
-                        width: '100%',
-                        height,
-                        backgroundColor: placeholderBackgroundColor,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        borderRadius: '4px',
-                        color: placeholderTextColor
-                    }, children: "Map not configured" })) }) }) }));
+    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: src ? (_jsx("iframe", { title: "Localiza\u00E7\u00E3o", src: src, width: "100%", height: height, style: { border: 0, borderRadius: '4px' }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) : (_jsx("div", { style: {
+                width: '100%',
+                height,
+                backgroundColor: placeholderBackgroundColor,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '4px',
+                color: placeholderTextColor
+            }, children: "Map not configured" })) }));
 }

package/dist/components/SliderComponent.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function SliderComponent({ component, editionMode, }: {
+export declare function SliderComponent({ component, editionMode }: {
     readonly component: ComponentType;
     readonly editionMode?: boolean;
 }): import("react").JSX.Element;

package/dist/components/SliderComponent.js

@@ -26,7 +26,7 @@ function resolveChromeColors(properties) {
         dotBackground: String(properties.dotBackground || 'rgba(0,0,0,0.15)'),
         dotActiveColor: String(properties.dotActiveColor || '#fff'),
         dotColor: String(properties.dotColor || '#666'),
-        dotSize: Number(properties.dotSize) || 28,
+        dotSize: Number(properties.dotSize) || 28
     };
 }
 const ARROW_BASE_STYLE = {
@@ -43,12 +43,12 @@ const ARROW_BASE_STYLE = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    transition: 'background 0.2s',
+    transition: 'background 0.2s'
 };
-function ArrowButton({ side, size, background, color, onClick, }) {
+function ArrowButton({ side, size, background, color, onClick }) {
     return (_jsx("button", { type: "button", "aria-label": side === 'left' ? 'Slide anterior' : 'Próximo slide', onClick: onClick, style: Object.assign(Object.assign({}, ARROW_BASE_STYLE), { [side]: 8, width: size, height: size, background, color }), children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: side === 'left' ? 'M8.5 1L1.5 8L8.5 15' : 'M1.5 1L8.5 8L1.5 15', stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 }
-function Dots({ count, current, size, activeBackground, background, activeColor, color, onGoTo, }) {
+function Dots({ count, current, size, activeBackground, background, activeColor, color, onGoTo }) {
     return (_jsx("div", { "aria-label": "Navega\u00E7\u00E3o do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: Array.from({ length: count }).map((_, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": current === index ? 'true' : undefined, onClick: () => onGoTo(index), style: {
                 width: size,
                 height: size,
@@ -63,7 +63,7 @@ function Dots({ count, current, size, activeBackground, background, activeColor,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                transition: 'all 0.2s',
+                transition: 'all 0.2s'
             }, children: index + 1 }, index))) }));
 }
 function useSliderWidth(ref) {
@@ -80,7 +80,7 @@ function useSliderWidth(ref) {
     }, [ref]);
     return width;
 }
-export function SliderComponent({ component, editionMode = false, }) {
+export function SliderComponent({ component, editionMode = false }) {
     const properties = component.properties || {};
     const slides = orderBySort(component.elements);
     const n = slides.length;
@@ -99,9 +99,7 @@ export function SliderComponent({ component, editionMode = false, }) {
     const [animate, setAnimate] = useState(false);
     const [dragging, setDragging] = useState(false);
     const dragRef = useRef(null);
-    const currentIndex = loop
-        ? ((Math.round(index) % n) + n) % n
-        : Math.min(Math.max(0, Math.round(index)), maxIndex);
+    const currentIndex = loop ? ((Math.round(index) % n) + n) % n : Math.min(Math.max(0, Math.round(index)), maxIndex);
     useEffect(() => {
         if (editionMode || !resolved.autoplay || n <= 1)
             return;
@@ -186,6 +184,6 @@ export function SliderComponent({ component, editionMode = false, }) {
                         transition: animate && !dragging ? 'transform 0.3s ease' : 'none',
                         cursor: dragging ? 'grabbing' : n > 1 ? 'grab' : 'default',
                         touchAction: 'pan-y',
-                        userSelect: 'none',
+                        userSelect: 'none'
                     }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onTransitionEnd: handleTransitionEnd, children: trackSlides.map((element, i) => (_jsx("div", { style: { width: slideWidth, flexShrink: 0, overflow: 'hidden' }, children: buildSlide(element, fixedHeight, sharedImageStyles, useSharedImages) }, `${element.id}-${i}`))) }) }), showArrows && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, { side: "left", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index - 1) }), _jsx(ArrowButton, { side: "right", size: chrome.arrowSize, background: chrome.arrowBackground, color: chrome.arrowColor, onClick: () => goTo(index + 1) })] })), showDots && (_jsx(Dots, { count: n, current: currentIndex, size: chrome.dotSize, activeBackground: chrome.dotActiveBackground, background: chrome.dotBackground, activeColor: chrome.dotActiveColor, color: chrome.dotColor, onGoTo: goToDot }))] }));
 }

package/dist/components/SocialIconsComponent.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Row, Col } from 'react-bootstrap';
-import { FaFacebookF, FaInstagram, FaTiktok, FaWhatsapp, FaYoutube, FaXTwitter, FaLinkedin, FaThreads, FaLink, } from 'react-icons/fa6';
+import { FaFacebookF, FaInstagram, FaTiktok, FaWhatsapp, FaYoutube, FaXTwitter, FaLinkedin, FaThreads, FaLink } from 'react-icons/fa6';
 const SOCIAL_ICONS = {
     facebook: FaFacebookF,
     instagram: FaInstagram,
@@ -12,7 +11,7 @@ const SOCIAL_ICONS = {
     linkedin: FaLinkedin,
     threads: FaThreads,
     linktree: FaLink,
-    kwai: FaLink,
+    kwai: FaLink
 };
 export function SocialIconsComponent({ social, color }) {
     const entries = Object.entries(social || {})
@@ -20,5 +19,5 @@ export function SocialIconsComponent({ social, color }) {
         .map(([id, value]) => ({ id, url: (value === null || value === void 0 ? void 0 : value.path) || '', Icon: SOCIAL_ICONS[id] || FaLink }));
     if (entries.length === 0)
         return null;
-    return (_jsx(Row, { children: entries.map(({ id, url, Icon }) => (_jsx(Col, { className: "text-center social-icons", style: { color }, children: _jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", "aria-label": id, children: _jsx(Icon, {}) }) }, id))) }));
+    return (_jsx("div", { className: "pb-social-icons", style: { color }, children: entries.map(({ id, url, Icon }) => (_jsx("a", { className: "pb-social-icon", href: url, target: "_blank", rel: "noopener noreferrer", "aria-label": id, children: _jsx(Icon, {}) }, id))) }));
 }

package/dist/components/TextComponent.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { Row, Container } from 'react-bootstrap';
+import { PbContainer } from '../ui/PbContainer.js';
+import { PbRow } from '../ui/PbRow.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { resolveImageElement } from '../utils/imageCustomization.js';
 const elementFactory = new ElementFactory();
 const TextComponent = memo(function TextComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
-    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+    return (_jsx(PbContainer, { "data-pb-component": component.id, style: component.styles, children: _jsx(PbRow, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { TextComponent };

package/dist/constants/ComponentEnum.d.ts

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

package/dist/constants/ComponentEnum.js

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

package/dist/designSystem/baseCss.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CSS base do site público (sem Bootstrap).
+ *
+ * Classes utilitárias e de componentes usadas pelo `lib-pixelbuild`. Todos os
+ * 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 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, 1.5rem);\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: space-between;\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}\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}\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";