lib-pixelbuild 0.1.0 → 0.1.2

package/dist/builders/PageBuilder.d.ts

@@ -4,4 +4,4 @@ export declare function PageBuilder({ website, page, editionMode }: {
     readonly website: WebsiteType;
     readonly page: PageType;
     readonly editionMode: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/builders/PageBuilder.js

@@ -36,5 +36,5 @@ export function PageBuilder({ website, page, editionMode }) {
                     marginBottom: mergedStyles.marginBottom,
                     borderRadius: mergedStyles.borderRadius,
                     minHeight: page.sections.length === 0 ? '200px' : undefined,
-                }, children: [_jsx(SectionRenderer, { sections: page.sections }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhuma se\u00E7\u00E3o configurada. Use o editor de layout para adicionar conte\u00FAdo." }))] })] }));
+                }, children: [_jsx(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "Nenhuma se\u00E7\u00E3o configurada. Use o editor de layout para adicionar conte\u00FAdo." }))] })] }));
 }

package/dist/components/CardComponent.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
 export declare function CardComponent({ component }: {
     readonly component: ComponentType;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/CardComponent.js

@@ -2,11 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Row, Container } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+const elementFactory = new ElementFactory();
 export function CardComponent({ component }) {
-    const elementFactory = new ElementFactory();
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: component.elements
-                .sort((a, b) => a.sort - b.sort)
-                .map((element) => {
+    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderBySort(component.elements).map((element) => {
                 const e = elementFactory.build(element);
                 return React.cloneElement(e, { key: element.id });
             }) }) }));

package/dist/components/CarouselComponent.d.ts

@@ -1,4 +1,4 @@
 import type { ComponentType } from '../types/ComponentType.js';
 export declare function CarouselComponent({ component }: {
     readonly component: ComponentType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/CarouselComponent.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Row, Col, Carousel } from 'react-bootstrap';
+import { orderBySort } from '../utils/orderBySort.js';
 export function CarouselComponent({ component }) {
-    return (_jsx(Row, { children: _jsx(Col, { children: _jsx(Carousel, { indicators: false, className: "slider", children: component.elements
-                    .sort((a, b) => a.sort - b.sort)
-                    .map((element, index) => (_jsx(Carousel.Item, { children: _jsx("img", { src: String(element.properties.name || element.properties.src || ''), alt: String(element.properties.title || element.properties.alt || ''), style: { width: '100%', height: 'auto', objectFit: 'cover' } }) }, element.id || index))) }) }) }));
+    return (_jsx(Row, { children: _jsx(Col, { children: _jsx(Carousel, { indicators: false, className: "slider", children: orderBySort(component.elements).map((element, index) => (_jsx(Carousel.Item, { children: _jsx("img", { src: String(element.properties.name || element.properties.src || ''), alt: String(element.properties.title || element.properties.alt || ''), style: { width: '100%', height: 'auto', objectFit: 'cover' } }) }, element.id || index))) }) }) }));
 }

package/dist/components/FormComponent.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
 export declare function FormComponent({ component }: {
     readonly component: ComponentType;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/FormComponent.js

@@ -3,8 +3,9 @@ import React, { useEffect } from 'react';
 import { Form, Row } from 'react-bootstrap';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+const elementFactory = new ElementFactory();
 export function FormComponent({ component }) {
-    const elementFactory = new ElementFactory();
     const registerForm = UseFormStore((state) => state.registerForm);
     useEffect(() => {
         registerForm(component.id);
@@ -17,10 +18,8 @@ export function FormComponent({ component }) {
             console.error('Erro ao enviar o formulário:', error);
         }
     };
-    return (_jsx(Form, { noValidate: true, onSubmit: handleSubmit, style: { textAlign: 'left' }, children: _jsx(Row, { style: { padding: '50px' }, children: component.elements
-                .sort((a, b) => a.sort - b.sort)
-                .map((element) => {
-                const e = elementFactory.build(element);
+    return (_jsx(Form, { onSubmit: handleSubmit, children: _jsx(Row, { children: orderBySort(component.elements).map((element) => {
+                const e = elementFactory.build(element, component.id);
                 return React.cloneElement(e, { key: element.id });
             }) }) }));
 }

package/dist/components/ListComponent.d.ts

@@ -1,4 +1,4 @@
 import type { ComponentType } from '../types/ComponentType.js';
 export declare function ListComponent({ component }: {
     readonly component: ComponentType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/ListComponent.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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();
 export function ListComponent({ component }) {
-    const elementFactory = new ElementFactory();
-    const elements = component.elements.sort((a, b) => a.sort - b.sort);
+    const elements = orderBySort(component.elements);
     const items = [];
     for (let i = 0; i < elements.length; i++) {
         const current = elements[i];
@@ -19,5 +20,5 @@ export function ListComponent({ component }) {
             }
         }
     }
-    return (_jsx(Col, { style: component.styles, children: _jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, 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(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))) }) }));
 }

package/dist/components/LoadingComponent.d.ts

@@ -1 +1 @@
-export declare function LoadingComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingComponent(): import("react").JSX.Element;

package/dist/components/MapComponent.d.ts

@@ -1,4 +1,4 @@
 import type { ComponentType } from '../types/ComponentType.js';
 export declare function MapComponent({ component }: {
     readonly component: ComponentType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/MapComponent.js

@@ -5,7 +5,7 @@ export function MapComponent({ component }) {
     const src = lat && lng
         ? `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&output=embed`
         : null;
-    return (_jsx(Col, { style: component.styles, children: _jsx(Row, { children: _jsx(Col, { style: { padding: 0 }, 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: {
+    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',

package/dist/components/SliderComponent.d.ts

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

package/dist/components/SliderComponent.js

@@ -1,16 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Row, Col } from 'react-bootstrap';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { useKeenSlider } from 'keen-slider/react.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
 import 'keen-slider/keen-slider.min.css';
-export function SliderComponent({ component }) {
-    const elementFactory = new ElementFactory();
-    const [ref] = useKeenSlider({
-        loop: true,
+const elementFactory = new ElementFactory();
+function StaticSliderComponent({ component }) {
+    const firstSlide = orderBySort(component.elements)[0];
+    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, component.styles), children: firstSlide && elementFactory.build(firstSlide) }));
+}
+function InteractiveSliderComponent({ component }) {
+    const properties = component.properties;
+    const slides = orderBySort(component.elements);
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const [loaded, setLoaded] = useState(false);
+    const [ref, instanceRef] = useKeenSlider({
+        loop: slides.length > 1,
         mode: 'snap',
         slides: { perView: 1, spacing: 10 },
+        created() {
+            setLoaded(true);
+        },
+        slideChanged(slider) {
+            setCurrentSlide(slider.track.details.rel);
+        }
     });
-    return (_jsx(Col, { style: component.styles, children: _jsx(Row, { id: "element-row", children: _jsx(Col, { children: _jsx("div", { ref: ref, className: "keen-slider", children: component.elements
-                        .sort((a, b) => a.sort - b.sort)
-                        .map((element) => (_jsx("div", { className: "keen-slider__slide", children: elementFactory.build(element) }, element.id))) }) }) }) }));
+    useEffect(() => {
+        if (!properties.autoplay || slides.length < 2)
+            return;
+        const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
+        const timer = window.setInterval(() => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, interval);
+        return () => window.clearInterval(timer);
+    }, [instanceRef, properties.autoplay, properties.interval, slides.length]);
+    const showArrows = Boolean(properties.showArrows) && loaded && slides.length > 1;
+    const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
+    return (_jsxs("div", { style: Object.assign({ position: 'relative' }, component.styles), children: [_jsx("div", { ref: ref, className: "keen-slider", children: slides.map((element) => (_jsx("div", { className: "keen-slider__slide", children: elementFactory.build(element) }, element.id))) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, style: { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }, children: '<' }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, style: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: '>' })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 4 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(index); }, children: index + 1 }, element.id))) }))] }));
+}
+export function SliderComponent({ component, editionMode = false }) {
+    if (editionMode)
+        return _jsx(StaticSliderComponent, { component: component });
+    return _jsx(InteractiveSliderComponent, { component: component });
 }

package/dist/components/SocialIconsComponent.d.ts

@@ -1,4 +1,4 @@
 import type { SocialPropertiesType } from '../types/SocialPropertiesType.js';
 export declare function SocialIconsComponent({ social }: {
     readonly social: SocialPropertiesType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/TextComponent.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
 export declare function TextComponent({ component }: {
     readonly component: ComponentType;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/TextComponent.js

@@ -2,11 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Row, Container } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+const elementFactory = new ElementFactory();
 export function TextComponent({ component }) {
-    const elementFactory = new ElementFactory();
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: component.elements
-                .sort((a, b) => a.sort - b.sort)
-                .map((element) => {
+    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderBySort(component.elements).map((element) => {
                 const e = elementFactory.build(element);
                 return React.cloneElement(e, { key: element.id });
             }) }) }));

package/dist/elements/AlertElement.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType } from '../types/ElementType.js';
-export declare function AlertElement({ element }: {
+export declare function AlertElement({ element, formId }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+    readonly formId?: number;
+}): import("react").JSX.Element;

package/dist/elements/AlertElement.js

@@ -3,16 +3,19 @@ import { useEffect } from 'react';
 import { Alert } from 'react-bootstrap';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
-export function AlertElement({ element }) {
+export function AlertElement({ element, formId }) {
     const properties = element.properties;
+    const resolvedFormId = formId !== null && formId !== void 0 ? formId : properties.componentId;
     const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
     const registerElement = UseFormStore((state) => state.registerElement);
+    const unregisterElement = UseFormStore((state) => state.unregisterElement);
     useEffect(() => {
-        registerElement(element.id, element.properties.componentId, {
+        registerElement(element.id, resolvedFormId, {
             type: 'alert',
             hidden: Boolean(properties.startHidden)
         });
-    }, [element.id, properties.startHidden, registerElement]);
+        return () => unregisterElement(element.id);
+    }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
     if (hidden)
         return null;
     return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Alert, { hidden: hidden, variant: String(properties.type || 'info'), style: element.styles, children: [_jsx(Alert.Heading, { children: String(properties.title || '') }), _jsx("p", { className: "mb-0", children: String(properties.message || '') })] }) }));

package/dist/elements/ButtonElement.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType } from '../types/ElementType.js';
-export declare function ButtonElement({ element }: {
+export declare function ButtonElement({ element, formId }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+    readonly formId?: number;
+}): import("react").JSX.Element;

package/dist/elements/ButtonElement.js

@@ -4,26 +4,33 @@ import { Button, Spinner } from 'react-bootstrap';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ButtonActionFactory } from '../factories/ButtonActionFactory.js';
-export function ButtonElement({ element }) {
+export function ButtonElement({ element, formId }) {
     var _a;
     const properties = element.properties;
+    const resolvedFormId = formId !== null && formId !== void 0 ? formId : properties.componentId;
     const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
     const loading = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.loading; });
     const showElement = UseFormStore((state) => state.showElement);
     const hideElement = UseFormStore((state) => state.hideElement);
     const registerElement = UseFormStore((state) => state.registerElement);
+    const unregisterElement = UseFormStore((state) => state.unregisterElement);
     useEffect(() => {
-        registerElement(element.id, properties.componentId, {
+        registerElement(element.id, resolvedFormId, {
             type: 'button',
             hidden: Boolean(properties.startHidden)
         });
-    }, [element.id, properties.startHidden, registerElement]);
+        return () => unregisterElement(element.id);
+    }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
     async function handleClick(event) {
         var _a;
         if (!properties.path) {
             event.preventDefault();
-            UseFormStore.getState().validateAllFields(properties.componentId);
-            const formData = UseFormStore.getState().getElementsByForm(properties.componentId);
+            const form = event.currentTarget instanceof HTMLButtonElement ? event.currentTarget.form : null;
+            if (form && !form.reportValidity())
+                return false;
+            if (resolvedFormId !== undefined)
+                UseFormStore.getState().validateAllFields(resolvedFormId);
+            const formData = resolvedFormId === undefined ? [] : UseFormStore.getState().getElementsByForm(resolvedFormId);
             const hasErrors = formData.some((e) => e.error);
             if (hasErrors)
                 return false;
@@ -46,5 +53,7 @@ export function ButtonElement({ element }) {
     if (hidden)
         return null;
     return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
-                ? properties.type : undefined, variant: String(properties.type || 'primary'), href: String(properties.path || ''), target: properties.path ? '_blank' : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + (String((_a = properties.message) !== null && _a !== void 0 ? _a : ''))] })) : (String(properties.title || '')) }) }));
+                ? properties.type : undefined, variant: String(properties.variant || (properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
+                ? 'primary'
+                : properties.type || 'primary')), href: String(properties.path || ''), target: properties.path ? '_blank' : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + (String((_a = properties.message) !== null && _a !== void 0 ? _a : ''))] })) : (String(properties.text || properties.title || '')) }) }));
 }

package/dist/elements/ElementColWrapper.d.ts

@@ -3,4 +3,4 @@ import type { ElementType } from '../types/ElementType.js';
 export declare function ElementColWrapper({ element, children }: {
     readonly element: ElementType;
     readonly children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/elements/FileElement.d.ts

@@ -1,4 +1,4 @@
 import type { ElementType } from '../types/ElementType.js';
 export declare function FileElement({ element }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/elements/IconElement.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import type { ElementType } from '../types/ElementType.js';
 export declare function IconElement({ element }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/elements/IconElement.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense } from 'react';
+import { FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock, FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink, FaMapMarkerAlt, FaPhone, FaQuestionCircle, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes, FaTwitter, FaUser, FaWhatsapp, FaYoutube, } from 'react-icons/fa';
 import { ElementColWrapper } from './ElementColWrapper.js';
+const icons = {
+    FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock,
+    FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink,
+    FaMapMarkerAlt, FaPhone, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes,
+    FaTwitter, FaUser, FaWhatsapp, FaYoutube,
+};
 export function IconElement({ element }) {
     const name = String(element.properties.name || '');
-    const LazyIcon = React.lazy(() => import('react-icons/fa').then((module) => {
-        const Icon = module[name];
-        if (!Icon)
-            throw new Error(`Icon '${name}' not found in pack`);
-        return { default: Icon };
-    }));
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Suspense, { fallback: null, children: _jsx(LazyIcon, { size: 20, style: element.styles }) }) }));
+    const Icon = icons[name] || FaQuestionCircle;
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Icon, { size: 20, style: element.styles, "aria-label": name || 'Ícone' }) }));
 }

package/dist/elements/ImageElement.d.ts

@@ -1,4 +1,4 @@
 import type { ElementType } from '../types/ElementType.js';
 export declare function ImageElement({ element }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/elements/InputElement.d.ts

@@ -1,4 +1,5 @@
 import type { ElementType } from '../types/ElementType.js';
-export declare function InputElement({ element }: {
+export declare function InputElement({ element, formId }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+    readonly formId?: number;
+}): import("react").JSX.Element;

package/dist/elements/InputElement.js

@@ -1,24 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { Form } from 'react-bootstrap';
-import InputMask from 'react-input-mask';
+import { IMaskInput } from 'react-imask';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
-export function InputElement({ element }) {
+import { ElementTypeEnum } from '../constants/ElementEnum.js';
+export function InputElement({ element, formId }) {
     const properties = element.properties;
+    const resolvedFormId = formId !== null && formId !== void 0 ? formId : properties.componentId;
     const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
     const error = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.error; });
     const errorMessage = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.errorMessage; });
     const registerElement = UseFormStore((state) => state.registerElement);
+    const unregisterElement = UseFormStore((state) => state.unregisterElement);
     const validateFormData = UseFormStore((state) => state.validateFormData);
     useEffect(() => {
-        registerElement(element.id, properties.componentId, {
+        var _a, _b, _c;
+        registerElement(element.id, resolvedFormId, {
             name: String(properties.name || ''),
-            type: 'input',
-            inputValidateId: properties.inputValidateId
+            type: element.elementType,
+            value: properties.checked ? String((_a = properties.value) !== null && _a !== void 0 ? _a : 'on') : String((_b = properties.value) !== null && _b !== void 0 ? _b : ''),
+            inputValidateId: (_c = properties.inputValidateId) !== null && _c !== void 0 ? _c : null
         });
-    }, [element.id, properties.name, properties.inputValidateId, registerElement]);
+        return () => unregisterElement(element.id);
+    }, [
+        element.id,
+        element.elementType,
+        properties.name,
+        properties.value,
+        properties.checked,
+        properties.inputValidateId,
+        registerElement,
+        unregisterElement,
+        resolvedFormId
+    ]);
     if (hidden)
         return null;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Form.Group, { className: "mb-3", controlId: String(properties.name || ''), children: [_jsx(Form.Label, { children: String(properties.title || '') }), _jsx(Form.Control, { as: InputMask, mask: String(properties.mask || ''), onChange: (e) => UseFormStore.getState().setElementState(element.id, { value: e.target.value }), onBlur: (e) => validateFormData(properties.inputValidateId, element.id, e.target.value), required: Boolean(properties.required), name: String(properties.name || ''), placeholder: String(properties.placeholder || ''), isInvalid: !!error, style: element.styles }), _jsx(Form.Control.Feedback, { type: "invalid", children: errorMessage })] }) }));
+    const hasMask = element.elementType === ElementTypeEnum.Input && Boolean(properties.mask);
+    const label = String(properties.label || properties.title || '');
+    const name = String(properties.name || '');
+    const controlId = name || `element-${element.id}`;
+    const inputValidateId = properties.inputValidateId;
+    const options = Array.isArray(properties.options) ? properties.options : [];
+    const handleAccept = (value) => {
+        UseFormStore.getState().setElementState(element.id, { value });
+    };
+    const handleBlur = (e) => {
+        if (!inputValidateId)
+            return;
+        let value = e.target.value;
+        if (e.target instanceof HTMLInputElement && (e.target.type === 'checkbox' || e.target.type === 'radio')) {
+            value = e.target.checked ? e.target.value : '';
+        }
+        validateFormData(inputValidateId, element.id, value);
+    };
+    const setValue = (value) => UseFormStore.getState().setElementState(element.id, { value });
+    const setCheckedValue = (checked, value) => {
+        const store = UseFormStore.getState();
+        if (checked && element.elementType === ElementTypeEnum.Radio && name && resolvedFormId !== undefined) {
+            store.getElementsByForm(resolvedFormId)
+                .filter((field) => field.id !== element.id && field.type === ElementTypeEnum.Radio && field.name === name)
+                .forEach((field) => store.setElementState(field.id, { value: '' }));
+        }
+        store.setElementState(element.id, { value: checked ? value : '' });
+    };
+    const renderControl = () => {
+        var _a, _b, _c, _d, _e;
+        if (element.elementType === ElementTypeEnum.Textarea) {
+            return (_jsx("textarea", { defaultValue: String((_a = properties.value) !== null && _a !== void 0 ? _a : ''), rows: Number(properties.rows) || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: Boolean(properties.required), name: name, placeholder: String(properties.placeholder || ''), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+        }
+        if (element.elementType === ElementTypeEnum.Select) {
+            return (_jsx("select", { defaultValue: String((_b = properties.value) !== null && _b !== void 0 ? _b : ''), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: Boolean(properties.required), name: name, className: `form-select${error ? ' is-invalid' : ''}`, style: element.styles, children: options.map((option, index) => {
+                    var _a, _b, _c, _d;
+                    const data = typeof option === 'object' && option !== null ? option : null;
+                    const value = String((_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : option);
+                    const text = String((_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.label) !== null && _b !== void 0 ? _b : data === null || data === void 0 ? void 0 : data.text) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data.title) !== null && _d !== void 0 ? _d : value);
+                    return _jsx("option", { value: value, children: text }, `${value}-${index}`);
+                }) }));
+        }
+        if (element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio) {
+            const value = String((_c = properties.value) !== null && _c !== void 0 ? _c : 'on');
+            return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: Boolean(properties.checked), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: Boolean(properties.required), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && _jsx("label", { className: "form-check-label", htmlFor: controlId, children: label })] }));
+        }
+        if (element.elementType === ElementTypeEnum.File) {
+            return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "Upload de arquivos n\u00E3o dispon\u00EDvel neste formul\u00E1rio." }));
+        }
+        if (hasMask) {
+            return (_jsx(IMaskInput, { mask: String(properties.mask), defaultValue: String((_d = properties.value) !== null && _d !== void 0 ? _d : ''), onAccept: handleAccept, onBlur: handleBlur, required: Boolean(properties.required), name: name, placeholder: String(properties.placeholder || ''), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+        }
+        return (_jsx("input", { type: String(properties.type || 'text'), defaultValue: String((_e = properties.value) !== null && _e !== void 0 ? _e : ''), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: Boolean(properties.required), name: name, placeholder: String(properties.placeholder || ''), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+    };
+    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Form.Group, { className: "mb-3", controlId: controlId, children: [label && element.elementType !== ElementTypeEnum.Checkbox && element.elementType !== ElementTypeEnum.Radio && (_jsx(Form.Label, { children: label })), renderControl(), error && (_jsx("div", { className: "invalid-feedback", style: { display: 'block' }, children: errorMessage }))] }) }));
 }

package/dist/elements/LinkElement.d.ts

@@ -1,4 +1,4 @@
 import type { ElementType } from '../types/ElementType.js';
 export declare function LinkElement({ element }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/elements/TextElement.d.ts

@@ -1,4 +1,4 @@
 import type { ElementType } from '../types/ElementType.js';
 export declare function TextElement({ element }: {
     readonly element: ElementType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/factories/ComponentFactory.d.ts

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

package/dist/factories/ComponentFactory.js

@@ -8,7 +8,7 @@ import { SliderComponent } from '../components/SliderComponent.js';
 import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
 export class ComponentFactory {
-    build(component) {
+    build(component, editionMode = false) {
         switch (component.componentType) {
             case ComponentTypeEnum.Text:
             case ComponentTypeEnum.TextWithImage:
@@ -19,7 +19,7 @@ export class ComponentFactory {
             case ComponentTypeEnum.Slider:
             case ComponentTypeEnum.Gallery:
             case ComponentTypeEnum.Testimonials:
-                return _jsx(SliderComponent, { component: component }, component.id);
+                return _jsx(SliderComponent, { component: component, editionMode: editionMode }, component.id);
             case ComponentTypeEnum.Form:
                 return _jsx(FormComponent, { component: component }, component.id);
             case ComponentTypeEnum.Card:

package/dist/factories/ElementFactory.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ElementType } from '../types/ElementType.js';
 export declare class ElementFactory {
-    build(element: ElementType): React.ReactElement | null;
+    build(element: ElementType, formId?: number): React.ReactElement | null;
 }

package/dist/factories/ElementFactory.js

@@ -5,32 +5,30 @@ import { ImageElement } from '../elements/ImageElement.js';
 import { InputElement } from '../elements/InputElement.js';
 import { IconElement } from '../elements/IconElement.js';
 import { ButtonElement } from '../elements/ButtonElement.js';
-import { FileElement } from '../elements/FileElement.js';
 import { AlertElement } from '../elements/AlertElement.js';
 import { LinkElement } from '../elements/LinkElement.js';
 export class ElementFactory {
-    build(element) {
+    build(element, formId) {
         switch (element.elementType) {
             case ElementTypeEnum.Text:
-            case ElementTypeEnum.Textarea:
             case ElementTypeEnum.Title:
                 return _jsx(TextElement, { element: element }, element.id);
             case ElementTypeEnum.Image:
             case ElementTypeEnum.Video:
                 return _jsx(ImageElement, { element: element }, element.id);
             case ElementTypeEnum.Input:
+            case ElementTypeEnum.Textarea:
             case ElementTypeEnum.Select:
             case ElementTypeEnum.Checkbox:
             case ElementTypeEnum.Radio:
-                return _jsx(InputElement, { element: element }, element.id);
+            case ElementTypeEnum.File:
+                return _jsx(InputElement, { element: element, formId: formId }, element.id);
             case ElementTypeEnum.Icon:
                 return _jsx(IconElement, { element: element }, element.id);
             case ElementTypeEnum.Button:
-                return _jsx(ButtonElement, { element: element }, element.id);
-            case ElementTypeEnum.File:
-                return _jsx(FileElement, { element: element }, element.id);
+                return _jsx(ButtonElement, { element: element, formId: formId }, element.id);
             case ElementTypeEnum.Alert:
-                return _jsx(AlertElement, { element: element }, element.id);
+                return _jsx(AlertElement, { element: element, formId: formId }, element.id);
             case ElementTypeEnum.Link:
                 return _jsx(LinkElement, { element: element }, element.id);
             case ElementTypeEnum.Divider:

package/dist/layouts/Footer.d.ts

@@ -1,4 +1,4 @@
 import { WebsiteType } from '../types/WebsiteType.js';
 export declare function Footer({ website }: {
     readonly website: WebsiteType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/layouts/Footer.js

@@ -7,5 +7,5 @@ export function Footer({ website }) {
     const social = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.social;
     const footer = website.footer.properties;
     const styles = website.footer.styles;
-    return (_jsx(Container, { fluid: styles.fluid || undefined, style: { backgroundColor: styles.backgroundColor }, children: _jsxs(Row, { id: 'footer', style: styles, children: [_jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", style: { marginBottom: '30px' }, children: social && (_jsx(SocialIconsComponent, { social: social })) }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", style: { padding: '20px' }, dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", style: { padding: '20px' }, dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }), _jsxs(Col, { xs: 12, sm: 12, md: 12, lg: 12, children: [_jsx("hr", { className: "footer-divider" }), _jsxs("p", { className: "text-center mb-0", children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }));
+    return (_jsx(Container, { fluid: styles.fluid || undefined, style: { backgroundColor: styles.backgroundColor }, children: _jsxs(Row, { id: 'footer', style: styles, children: [_jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", style: { marginBottom: '30px' }, children: social && (_jsx(SocialIconsComponent, { social: social })) }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }), _jsxs(Col, { xs: 12, sm: 12, md: 12, lg: 12, children: [_jsx("hr", { className: "footer-divider" }), _jsxs("p", { className: "text-center mb-0", children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }));
 }

package/dist/layouts/Header.d.ts

@@ -1,4 +1,4 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
 export declare function Header({ website }: {
     readonly website: WebsiteType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/layouts/Header.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Container, Row, Col } from 'react-bootstrap';
 export function Header({ website }) {
     const headerProperties = website.header.properties;
     const headerStyles = website.header.styles;
     const domain = website.domain.replaceAll('.', '');
-    return (_jsx(Container, { fluid: headerStyles.fluid || undefined, style: { backgroundColor: headerStyles.backgroundColor }, children: _jsxs(Row, { id: "header", children: [_jsx(Col, { xs: 3, md: 3, lg: 3, style: Object.assign({ display: headerProperties.showLogo ? 'block' : 'none' }, headerStyles), children: _jsx("img", { src: `https://noisdev-website-images.s3.sa-east-1.amazonaws.com/${domain}/${website.logo}`, width: "200", className: "d-inline-block align-top", alt: "Logo", style: { textAlign: headerProperties.logoAlign } }) }), _jsx(Col, { lg: 2, children: "Social Icons" }), _jsx(Col, { lg: 3, children: "Email" }), _jsx(Col, { lg: 2, children: "Liga\u00E7\u00F5es" }), _jsx(Col, { lg: 2, children: "Localiza\u00E7\u00E3o" })] }) }));
+    return (_jsx(Container, { fluid: headerStyles.fluid || undefined, style: { backgroundColor: headerStyles.backgroundColor }, children: _jsx(Row, { id: "header", children: _jsx(Col, { xs: 3, md: 3, lg: 3, style: Object.assign({ display: headerProperties.showLogo ? 'block' : 'none' }, headerStyles), children: _jsx("img", { src: `https://noisdev-website-images.s3.sa-east-1.amazonaws.com/${domain}/${website.logo}`, width: "200", className: "d-inline-block align-top", alt: "Logo", style: { textAlign: headerProperties.logoAlign } }) }) }) }));
 }

package/dist/layouts/Menu.d.ts

@@ -2,4 +2,4 @@ import type { PageType } from '../types/PageType.js';
 export declare function Menu({ page, websitePages }: {
     readonly page?: PageType;
     readonly websitePages?: PageType[];
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/layouts/SiteLayout.d.ts

@@ -1,4 +1,4 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
 export declare function SiteLayout({ website }: {
     readonly website: WebsiteType;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/renderers/SectionRenderer.d.ts

@@ -1,4 +1,6 @@
+import React from 'react';
 import type { SectionType } from '../types/SectionType.js';
-export declare function SectionRenderer({ sections }: {
+export declare function SectionRenderer({ sections, editionMode }: {
     readonly sections: SectionType[];
-}): import("react/jsx-runtime").JSX.Element;
+    readonly editionMode?: boolean;
+}): React.JSX.Element;

package/dist/renderers/SectionRenderer.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { ComponentFactory } from '../factories/ComponentFactory.js';
+import { orderBySort } from '../utils/orderBySort.js';
+const componentFactory = new ComponentFactory();
 function colWidthValue(width, offset) {
     if (width === undefined && offset === undefined)
         return undefined;
@@ -10,30 +12,44 @@ function colWidthValue(width, offset) {
     }
     return width;
 }
-function renderSection(section) {
-    const content = (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map(renderColumn) }));
+function columnContent(column, editionMode) {
+    return (_jsxs(_Fragment, { children: [orderBySort(column.components.filter((component) => component.enabled)).map((component) => componentFactory.build(component, editionMode)), orderBySort(column.childSections).map((childSection) => (_jsx(React.Fragment, { children: renderSection(childSection, editionMode) }, childSection.id)))] }));
+}
+function gridClass(id) {
+    return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+}
+function renderGrid(section, editionMode) {
+    const grid = gridClass(section.id);
+    const columns = section.columns.filter((column) => column.components.some((component) => component.enabled) || column.childSections.length > 0);
+    const css = columns.map((column) => {
+        const properties = column.properties || {};
+        const row = Math.max(0, Number(properties.row) || 0);
+        const rowSpan = Math.max(1, Number(properties.rowSpan) || 1);
+        const xs = column.width.xs || 12;
+        const sm = column.width.sm || xs;
+        const md = column.width.md || sm;
+        const columnClass = gridClass(column.id);
+        return `.${grid} .${columnClass}{grid-column:span ${xs};grid-row:auto;min-width:0}@media (min-width:576px){.${grid} .${columnClass}{grid-column:span ${sm}}}@media (min-width:768px){.${grid} .${columnClass}{grid-column:span ${md};grid-row:${row + 1}/span ${rowSpan}}}`;
+    }).join('');
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}${css}` }), _jsx("div", { id: `section-${section.id}`, className: grid, style: section.sectionType === 'row' ? section.styles : undefined, children: columns.map((column) => (_jsx("div", { id: `column-${column.id}`, className: gridClass(column.id), style: column.styles, children: columnContent(column, editionMode) }, column.id))) })] }));
+}
+function renderSection(section, editionMode) {
+    const usesGrid = section.columns.some((column) => { var _a, _b; return ((_a = column.properties) === null || _a === void 0 ? void 0 : _a.row) !== undefined || Number((_b = column.properties) === null || _b === void 0 ? void 0 : _b.rowSpan) > 1; });
+    const content = usesGrid ? renderGrid(section, editionMode) : (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => renderColumn(column, editionMode)) }));
     if (section.sectionType === 'container-fluid') {
         return _jsx(Container, { fluid: true, style: section.styles, children: content });
     }
     if (section.sectionType === 'container') {
         return _jsx(Container, { style: section.styles, children: content });
     }
-    return content;
+    return _jsx(Container, { fluid: true, children: content });
 }
-function renderColumn(column) {
-    const componentFactory = new ComponentFactory();
-    return (_jsxs(Col, { id: `column-${column.id}`, xs: colWidthValue(column.width.xs, column.offset.xs), sm: colWidthValue(column.width.sm, column.offset.sm), md: colWidthValue(column.width.md, column.offset.md), lg: colWidthValue(column.width.lg, column.offset.lg), xl: colWidthValue(column.width.xl, column.offset.xl), style: column.styles, children: [column.components
-                .filter((c) => c.enabled)
-                .sort((a, b) => a.sort - b.sort)
-                .map((component) => componentFactory.build(component)), column.childSections
-                .sort((a, b) => a.sort - b.sort)
-                .map((childSection) => renderSection(childSection))] }, column.id));
+function renderColumn(column, editionMode) {
+    return (_jsx(Col, { id: `column-${column.id}`, xs: colWidthValue(column.width.xs, column.offset.xs), sm: colWidthValue(column.width.sm, column.offset.sm), md: colWidthValue(column.width.md, column.offset.md), lg: colWidthValue(column.width.lg, column.offset.lg), xl: colWidthValue(column.width.xl, column.offset.xl), style: column.styles, children: columnContent(column, editionMode) }, column.id));
 }
-export function SectionRenderer({ sections }) {
+export function SectionRenderer({ sections, editionMode = false }) {
     if (!sections || sections.length === 0) {
         return null;
     }
-    return (_jsx(_Fragment, { children: sections
-            .sort((a, b) => a.sort - b.sort)
-            .map((section) => (_jsx(React.Fragment, { children: renderSection(section) }, section.id))) }));
+    return (_jsx(_Fragment, { children: orderBySort(sections).map((section) => (_jsx(React.Fragment, { children: renderSection(section, editionMode) }, section.id))) }));
 }

package/dist/stores/UseFormStore.d.ts

@@ -20,6 +20,7 @@ export interface FormStoreState {
     elements: Record<string, FormElement>;
     registerForm: (formId: number) => void;
     registerElement: (elementId: number, formId?: number | null, initialState?: Partial<FormElement>) => void;
+    unregisterElement: (elementId: number) => void;
     validateFormData: (inputValidateId: number, elementId: number, value: string) => void;
     validateAllFields: (formId: number) => void;
     setElementState: (elementId: number, newState: Partial<FormElement>) => void;

package/dist/stores/UseFormStore.js

@@ -7,8 +7,33 @@ const UseFormStore = create((set, get) => ({
         forms: Object.assign(Object.assign({}, state.forms), { [formId]: state.forms[formId] || { elements: [] } })
     })),
     registerElement: (elementId, formId = null, initialState = {}) => set((state) => {
-        if (state.elements[elementId])
-            return {};
+        var _a, _b;
+        const existingElement = state.elements[elementId];
+        if (existingElement) {
+            const updatedElement = Object.assign(Object.assign(Object.assign({}, existingElement), initialState), { formId, value: (_b = (_a = existingElement.value) !== null && _a !== void 0 ? _a : initialState.value) !== null && _b !== void 0 ? _b : null });
+            if (existingElement.formId === formId) {
+                return {
+                    elements: Object.assign(Object.assign({}, state.elements), { [elementId]: updatedElement })
+                };
+            }
+            const newForms = Object.assign({}, state.forms);
+            if (existingElement.formId) {
+                const previousForm = state.forms[existingElement.formId];
+                if (previousForm) {
+                    newForms[existingElement.formId] = Object.assign(Object.assign({}, previousForm), { elements: previousForm.elements.filter((id) => id !== elementId.toString()) });
+                }
+            }
+            if (formId) {
+                const nextForm = state.forms[formId] || { elements: [] };
+                newForms[formId] = Object.assign(Object.assign({}, nextForm), { elements: nextForm.elements.includes(elementId.toString())
+                        ? nextForm.elements
+                        : [...nextForm.elements, elementId.toString()] });
+            }
+            return {
+                elements: Object.assign(Object.assign({}, state.elements), { [elementId]: updatedElement }),
+                forms: newForms
+            };
+        }
         const newElements = Object.assign(Object.assign({}, state.elements), { [elementId]: Object.assign({ id: elementId, name: null, type: null, formId, value: null, loading: false, hidden: false, error: false, errorMessage: null, inputValidateId: null }, initialState) });
         const newForms = Object.assign({}, state.forms);
         if (formId) {
@@ -24,6 +49,20 @@ const UseFormStore = create((set, get) => ({
             forms: newForms
         };
     }),
+    unregisterElement: (elementId) => set((state) => {
+        const element = state.elements[elementId];
+        if (!element)
+            return {};
+        const elements = Object.assign({}, state.elements);
+        delete elements[elementId];
+        const forms = Object.assign({}, state.forms);
+        if (element.formId) {
+            const form = forms[element.formId];
+            if (form)
+                forms[element.formId] = Object.assign(Object.assign({}, form), { elements: form.elements.filter((id) => id !== elementId.toString()) });
+        }
+        return { elements, forms };
+    }),
     validateFormData: (inputValidateId, elementId, value) => {
         const inputValidateFactory = new InputValidateFactory();
         const validation = inputValidateFactory.build(inputValidateId, value);

package/dist/utils/orderBySort.d.ts

@@ -0,0 +1,3 @@
+export declare function orderBySort<T extends {
+    readonly sort: number;
+}>(items: readonly T[]): T[];

package/dist/utils/orderBySort.js

@@ -0,0 +1,3 @@
+export function orderBySort(items) {
+    return [...items].sort((a, b) => a.sort - b.sort);
+}

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "engines": {
+    "node": "^24.18.0",
+    "npm": ">=10"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.d.js",
@@ -55,36 +59,48 @@
     "@types/react": "^18.3.3",
     "@types/react-bootstrap": "^1.0.1",
     "@types/react-dom": "^18.3.0",
-    "@types/react-input-mask": "^3.0.6",
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^8.35.0",
     "@typescript-eslint/parser": "^8.35.0",
     "bootstrap": "^5.3.7",
-    "eslint": "^9.31.0",
+    "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "prettier": "^3.6.2",
     "tsc-esm-fix": "^3.1.2",
+    "dompurify": "^3.2.6",
+    "keen-slider": "^6.8.6",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.10",
+    "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
+    "react-helmet-async": "^2.0.5",
+    "react-icons": "^5.3.0",
+    "react-imask": "^7.6.1",
+    "react-router-dom": "^6.28.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.1"
+    "typescript-eslint": "^8.34.1",
+    "zustand": "^5.0.5"
   },
   "peerDependencies": {
     "bootstrap": "^5.0.0",
     "dompurify": "^3.2.6",
+    "keen-slider": "^6.8.6",
     "react": "^18.0.0",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^18.0.0",
     "react-ga4": "^2.1.0",
     "react-helmet-async": "^2.0.5",
     "react-icons": "^5.3.0",
-    "react-input-mask": "^2.0.4",
     "react-router-dom": "^6.28.0 || ^7.0.0",
     "react-slick": "^0.30.3",
     "slick-carousel": "^1.8.1",
-    "zustand": "^5.0.5",
-    "keen-slider": "^6.8.6"
+    "react-imask": "^7.6.1",
+    "zustand": "^5.0.5"
   }
 }