lib-pixelbuild 0.2.1 → 0.2.3

package/dist/builders/PageBuilder.js

@@ -1,7 +1,9 @@
 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) {
     const merged = Object.assign({}, websiteStyles);
     for (const key of Object.keys(pageStyles)) {
@@ -19,31 +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),
-        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: page.sections.length === 0 ? '200px' : undefined
-    }), [mergedStyles, page.sections.length]);
-    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, children: [_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.d.ts

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

package/dist/components/ButtonsComponent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+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'
+};
+const ButtonsComponent = memo(function ButtonsComponent({ component }) {
+    var _a, _b;
+    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const properties = component.properties || {};
+    const isColumn = getString(properties, 'layout', 'row') === 'column';
+    const gap = (_a = getNumber(properties, 'gap', 12)) !== null && _a !== void 0 ? _a : 12;
+    const fullWidth = getBoolean(properties, 'fullWidth', false);
+    const align = (_b = ALIGN_JUSTIFY[getString(properties, 'align', 'left')]) !== null && _b !== void 0 ? _b : 'flex-start';
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: isColumn ? 'column' : 'row',
+        flexWrap: 'wrap',
+        gap: `${gap}px`
+    };
+    if (isColumn)
+        containerStyle.alignItems = align;
+    else
+        containerStyle.justifyContent = align;
+    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');
+                const size = getString(props, 'size');
+                const style = Object.assign({}, element.styles);
+                if (fullWidth) {
+                    if (isColumn)
+                        style.width = '100%';
+                    else
+                        style.flex = '1 1 0%';
+                }
+                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 } from "react/jsx-runtime";
+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();
@@ -24,7 +25,13 @@ function applyCardStyles(element, props) {
         if (props.cardTextSize)
             overrides.fontSize = props.cardTextSize;
     }
-    return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides) });
+    return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides), fullBleed: element.elementType === 'image' ? true : element.fullBleed });
+}
+function stripWidth(element) {
+    return Object.assign(Object.assign({}, element), { width: {} });
+}
+function centerStyles(element) {
+    return Object.assign(Object.assign({}, element), { width: {}, styles: Object.assign(Object.assign({}, element.styles), { textAlign: 'center' }) });
 }
 const CardComponent = memo(function CardComponent({ component }) {
     const { properties } = component;
@@ -38,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,
@@ -49,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 = [
@@ -72,6 +81,22 @@ const CardComponent = memo(function CardComponent({ component }) {
         component.elements
     ]);
     const elements = useMemo(() => orderedElements.map((el) => applyCardStyles(el, cardProps)), [orderedElements, cardProps]);
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+    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(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(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(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,19 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useMemo } from 'react';
-import { Form, Row } 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';
 const elementFactory = new ElementFactory();
 const FormComponent = memo(function FormComponent({ component }) {
     const registerForm = UseFormStore((state) => state.registerForm);
+    const properties = component.properties;
     useEffect(() => {
-        registerForm(component.id);
-    }, [registerForm, component.id]);
+        registerForm(component.id, {
+            recipient: typeof properties.recipient === 'string' ? properties.recipient : undefined,
+            subject: typeof properties.subject === 'string' ? properties.subject : undefined
+        });
+    }, [registerForm, component.id, properties.recipient, properties.subject]);
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
     const handleSubmit = (event) => {
         event.preventDefault();
     };
-    return (_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/{CarouselComponent.d.ts → IconComponent.d.ts}

@@ -1,4 +1,5 @@
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function CarouselComponent({ component }: {
+declare const IconComponent: import("react").NamedExoticComponent<{
     readonly component: ComponentType;
-}): import("react").JSX.Element;
+}>;
+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.d.ts

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

package/dist/components/ImageComponent.js

@@ -0,0 +1,18 @@
+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';
+import { resolveImageElement } from '../utils/imageCustomization.js';
+import { getBoolean } from '../utils/propertyUtils.js';
+const elementFactory = new ElementFactory();
+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(--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(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,12 +1,15 @@
 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';
 const elementFactory = new ElementFactory();
 const ListComponent = memo(function ListComponent({ component }) {
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
+    const properties = component.properties || {};
+    const itemFontSize = String(properties.itemFontSize || '22px');
+    const itemGap = String(properties.itemGap || '8px');
+    const itemAlign = String(properties.itemAlign || 'center');
     const items = useMemo(() => {
         const result = [];
         for (let i = 0; i < elements.length; i++) {
@@ -24,6 +27,6 @@ const ListComponent = memo(function ListComponent({ component }) {
         }
         return result;
     }, [elements]);
-    return (_jsx(Col, { style: component.styles, children: _jsx("ul", { style: { listStyle: 'none' }, children: items.map(({ icon, text, id }) => (_jsxs("li", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '8px' }, children: [_jsx("span", { children: elementFactory.build(icon) }), _jsx("span", { style: { fontSize: '22px' }, 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')
@@ -8,7 +7,7 @@ function isValidCoord(value) {
     return COORDS_PATTERN.test(value.trim()) && Math.abs(Number(value)) <= 180;
 }
 export function MapComponent({ component }) {
-    const { lat, lng, zoom = 15, height = '400px' } = component.properties;
+    const { lat, lng, zoom = 15, height = '400px', placeholderBackgroundColor = '#e0e0e0', placeholderTextColor = '#666' } = component.properties;
     const src = useMemo(() => {
         if (!lat || !lng)
             return null;
@@ -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, { 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: '#e0e0e0',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        borderRadius: '4px',
-                        color: '#666'
-                    }, 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,4 @@
 import type { ComponentType } from '../types/ComponentType.js';
-import 'keen-slider/keen-slider.min.css';
 export declare function SliderComponent({ component, editionMode }: {
     readonly component: ComponentType;
     readonly editionMode?: boolean;