lib-pixelbuild 0.2.1 → 0.2.3

package/dist/ui/PbButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Botão próprio do design system. Substitui o `Button` do react-bootstrap,
+ * mantendo o comportamento de link (`href`) e botão de formulário.
+ */
+export function PbButton({ as, href, target, rel, type, variant = 'primary', size, disabled, onClick, className, style, children }) {
+    const isAnchor = Boolean(href) || as === 'a';
+    const classes = [
+        'pb-button',
+        variant ? `pb-button-${variant}` : 'pb-button-primary',
+        size ? `pb-button-${size}` : '',
+        className || ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    if (isAnchor) {
+        return (_jsx("a", { href: href, target: target, rel: rel || 'noopener noreferrer', className: classes, style: style, onClick: onClick, children: children }));
+    }
+    return (_jsx("button", { type: type || 'button', disabled: disabled, className: classes, style: style, onClick: onClick, children: children }));
+}

package/dist/ui/PbCol.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, ReactNode } from 'react';
+import type { ColumnWidthType } from '../types/ColumnWidthType.js';
+/**
+ * Célula do grid de 12 colunas. Responde por breakpoint gerando um `<style>`
+ * próprio quando `width`/`offset` variam entre dispositivos.
+ */
+export declare function PbCol({ colId, width, offset, style, className, children, ...rest }: {
+    readonly colId?: number | string;
+    readonly width?: ColumnWidthType;
+    readonly offset?: ColumnWidthType;
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    readonly children?: ReactNode;
+} & Record<string, unknown>): import("react").JSX.Element;

package/dist/ui/PbCol.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const BREAKPOINTS = [
+    { key: 'sm', min: 576 },
+    { key: 'md', min: 768 },
+    { key: 'lg', min: 992 },
+    { key: 'xl', min: 1200 }
+];
+function gridColumn(span, offset) {
+    const start = offset && offset > 0 ? offset + 1 : undefined;
+    return start ? `${start} / span ${span}` : `span ${span}`;
+}
+/**
+ * Célula do grid de 12 colunas. Responde por breakpoint gerando um `<style>`
+ * próprio quando `width`/`offset` variam entre dispositivos.
+ */
+export function PbCol(_a) {
+    var { colId, width, offset, style, className, children } = _a, rest = __rest(_a, ["colId", "width", "offset", "style", "className", "children"]);
+    const w = width || {};
+    const off = offset || {};
+    const base = w.xs || 12;
+    const cls = `pb-col pb-col-${colId !== null && colId !== void 0 ? colId : 'static'}`;
+    const inline = Object.assign({ gridColumn: gridColumn(base, off.xs), minWidth: 0 }, style);
+    const rules = [];
+    for (const bp of BREAKPOINTS) {
+        const span = w[bp.key];
+        const offSpan = off[bp.key];
+        if (span || offSpan) {
+            rules.push(`@media (min-width:${bp.min}px){.${cls}{grid-column:${gridColumn(span || base, offSpan)}}}`);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [rules.length > 0 && _jsx("style", { children: rules.join('') }), _jsx("div", Object.assign({ className: `${cls} ${className || ''}`.trim(), style: inline }, rest, { children: children }))] }));
+}

package/dist/ui/PbContainer.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare function PbContainer({ fluid, style, className, children, ...rest }: {
+    readonly fluid?: boolean;
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    readonly children?: ReactNode;
+} & Record<string, unknown>): import("react").JSX.Element;

package/dist/ui/PbContainer.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PbContainer(_a) {
+    var { fluid, style, className, children } = _a, rest = __rest(_a, ["fluid", "style", "className", "children"]);
+    const classes = ['pb-container', fluid ? 'pb-container-fluid' : '', className || ''].filter(Boolean).join(' ');
+    return (_jsx("div", Object.assign({ className: classes, style: style }, rest, { children: children })));
+}

package/dist/ui/PbRow.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare function PbRow({ id, style, className, children, ...rest }: {
+    readonly id?: string;
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    readonly children?: ReactNode;
+} & Record<string, unknown>): import("react").JSX.Element;

package/dist/ui/PbRow.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PbRow(_a) {
+    var { id, style, className, children } = _a, rest = __rest(_a, ["id", "style", "className", "children"]);
+    const classes = ['pb-row', className || ''].filter(Boolean).join(' ');
+    return (_jsx("div", Object.assign({ id: id, className: classes, style: style }, rest, { children: children })));
+}

package/dist/ui/PbSpinner.d.ts

@@ -0,0 +1,3 @@
+export declare function PbSpinner({ size }: {
+    readonly size?: 'sm';
+}): import("react").JSX.Element;

package/dist/ui/PbSpinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PbSpinner({ size }) {
+    const classes = ['pb-spinner', size === 'sm' ? 'pb-spinner-sm' : ''].filter(Boolean).join(' ');
+    return _jsx("span", { className: classes, "aria-hidden": "true" });
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+export { PbContainer } from './PbContainer.js';
+export { PbRow } from './PbRow.js';
+export { PbCol } from './PbCol.js';
+export { PbButton } from './PbButton.js';
+export { PbSpinner } from './PbSpinner.js';
+export { PbAlert } from './PbAlert.js';

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+export { PbContainer } from './PbContainer.js';
+export { PbRow } from './PbRow.js';
+export { PbCol } from './PbCol.js';
+export { PbButton } from './PbButton.js';
+export { PbSpinner } from './PbSpinner.js';
+export { PbAlert } from './PbAlert.js';

package/dist/utils/emailTemplate.d.ts

@@ -0,0 +1,7 @@
+export interface EmailTemplateRow {
+    label: string;
+    value: string;
+}
+declare function escapeHtml(value: unknown): string;
+export declare function buildFormEmailHtml(title: string, rows: EmailTemplateRow[]): string;
+export { escapeHtml };

package/dist/utils/emailTemplate.js

@@ -0,0 +1,66 @@
+function escapeHtml(value) {
+    return String(value !== null && value !== void 0 ? value : '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function buildFormEmailHtml(title, rows) {
+    const safeTitle = escapeHtml(title);
+    const rowsHtml = rows
+        .filter((row) => String(row.value).trim() !== '')
+        .map((row) => `
+          <tr>
+            <td style="padding:12px 0;border-bottom:1px solid #e5e7eb;font-size:13px;color:#6b7280;width:40%;vertical-align:top;">${escapeHtml(row.label)}</td>
+            <td style="padding:12px 0;border-bottom:1px solid #e5e7eb;font-size:14px;color:#172033;vertical-align:top;white-space:pre-wrap;word-break:break-word;">${escapeHtml(row.value)}</td>
+          </tr>`)
+        .join('');
+    return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${safeTitle}</title>
+</head>
+<body style="margin:0;padding:0;background-color:#eef2f7;font-family:Arial,Helvetica,sans-serif;color:#172033;">
+  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#eef2f7;margin:0;padding:24px 0;width:100%;">
+    <tr>
+      <td align="center">
+        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;width:100%;margin:0 auto;">
+          <tr>
+            <td style="padding:0 16px;">
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#111933;border-radius:20px 20px 0 0;width:100%;">
+                <tr>
+                  <td align="center" style="padding:32px 24px 24px 24px;">
+                    <div style="font-size:12px;line-height:12px;letter-spacing:1.6px;text-transform:uppercase;color:#98a2c3;margin-bottom:12px;">PixelBuild</div>
+                    <div style="font-size:24px;line-height:30px;font-weight:700;color:#ffffff;">${safeTitle}</div>
+                  </td>
+                </tr>
+              </table>
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;border-radius:0 0 20px 20px;width:100%;">
+                <tr>
+                  <td style="padding:16px 32px 32px 32px;">
+                    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
+                      ${rowsHtml || '<tr><td style="padding:12px 0;font-size:14px;color:#6b7280;">Nenhuma informação enviada.</td></tr>'}
+                    </table>
+                  </td>
+                </tr>
+              </table>
+              <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;">
+                <tr>
+                  <td align="center" style="padding:20px 24px 0 24px;font-size:12px;line-height:18px;color:#8a94a6;text-align:center;">
+                    Este e-mail foi enviado automaticamente pelo formulário do site.
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+export { escapeHtml };

package/dist/utils/fonts.d.ts

@@ -0,0 +1,2 @@
+export declare function buildFontFamily(fontFamily?: string): string | undefined;
+export declare function buildGoogleFontsHref(fontFamily?: string): string | undefined;

package/dist/utils/fonts.js

@@ -0,0 +1,10 @@
+export function buildFontFamily(fontFamily) {
+    if (!fontFamily)
+        return undefined;
+    return `"${fontFamily}", sans-serif`;
+}
+export function buildGoogleFontsHref(fontFamily) {
+    if (!fontFamily)
+        return undefined;
+    return `https://fonts.googleapis.com/css2?family=${fontFamily.replaceAll(' ', '+')}&display=swap`;
+}

package/dist/utils/imageCustomization.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from '../types/ComponentType.js';
+import type { ElementType } from '../types/ElementType.js';
+export declare function resolveImageElement(component: ComponentType, element: ElementType): ElementType;

package/dist/utils/imageCustomization.js

@@ -0,0 +1,9 @@
+export function resolveImageElement(component, element) {
+    if (element.elementType !== 'image' && element.elementType !== 'video') {
+        return element;
+    }
+    const properties = component.properties || {};
+    const useShared = properties.imageCustomization !== 'separate';
+    const imageStyles = useShared ? properties.imageStyles || {} : element.styles;
+    return Object.assign(Object.assign({}, element), { styles: Object.assign({ width: '100%' }, imageStyles) });
+}

package/dist/utils/responsiveProperties.d.ts

@@ -0,0 +1,2 @@
+export declare function resolveResponsiveProperties(properties: Record<string, unknown>, breakpoint: string): Record<string, unknown>;
+export declare function breakpointFromWidth(width: number): string;

package/dist/utils/responsiveProperties.js

@@ -0,0 +1,28 @@
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl'];
+export function resolveResponsiveProperties(properties, breakpoint) {
+    const responsive = properties === null || properties === void 0 ? void 0 : properties.responsive;
+    const resolved = Object.assign({}, properties);
+    delete resolved.responsive;
+    if (!responsive)
+        return resolved;
+    const idx = BREAKPOINT_ORDER.indexOf(breakpoint);
+    if (idx < 0)
+        return resolved;
+    for (let i = 0; i <= idx; i++) {
+        const overrides = responsive[BREAKPOINT_ORDER[i]];
+        if (overrides)
+            Object.assign(resolved, overrides);
+    }
+    return resolved;
+}
+export function breakpointFromWidth(width) {
+    if (width >= 1200)
+        return 'xl';
+    if (width >= 992)
+        return 'lg';
+    if (width >= 768)
+        return 'md';
+    if (width >= 576)
+        return 'sm';
+    return 'xs';
+}

package/dist/utils/responsiveStyles.d.ts

@@ -0,0 +1,6 @@
+import type { BlockType } from '../types/BlockType.js';
+import type { StylesType } from '../types/StylesType.js';
+declare const BREAKPOINT_MIN_WIDTHS: Record<string, number>;
+export declare function buildResponsiveCssForStyles(selector: string, styles: StylesType | undefined): string;
+export declare function buildResponsiveCss(blocks: BlockType[]): string;
+export { BREAKPOINT_MIN_WIDTHS };

package/dist/utils/responsiveStyles.js

@@ -0,0 +1,73 @@
+const BREAKPOINT_MIN_WIDTHS = {
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200
+};
+const SKIP_KEYS = new Set([
+    'responsive',
+    'customCss',
+    'fluid',
+    'backgroundGradientColorStart',
+    'backgroundGradientColorEnd'
+]);
+function kebabCase(key) {
+    return key.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+function cssValue(key, value) {
+    if (value === undefined || value === null || value === '')
+        return null;
+    const stringValue = String(value);
+    if (key === 'backgroundImage')
+        return `url(${stringValue})`;
+    return stringValue;
+}
+function declarationFor(key, value) {
+    const css = cssValue(key, value);
+    if (!css)
+        return null;
+    return `${kebabCase(key)}:${css}!important`;
+}
+function styleDeclarations(styles) {
+    if (!styles)
+        return '';
+    const declarations = [];
+    for (const [key, value] of Object.entries(styles)) {
+        if (SKIP_KEYS.has(key))
+            continue;
+        const declaration = declarationFor(key, value);
+        if (declaration)
+            declarations.push(declaration);
+    }
+    return declarations.join(';');
+}
+function buildRules(selector, responsive) {
+    if (!responsive)
+        return [];
+    const rules = [];
+    for (const [breakpoint, minWidth] of Object.entries(BREAKPOINT_MIN_WIDTHS)) {
+        const declarations = styleDeclarations(responsive[breakpoint]);
+        if (!declarations)
+            continue;
+        rules.push(`@media (min-width:${minWidth}px){${selector}{${declarations}}}`);
+    }
+    return rules;
+}
+export function buildResponsiveCssForStyles(selector, styles) {
+    return buildRules(selector, styles === null || styles === void 0 ? void 0 : styles.responsive).join('');
+}
+export function buildResponsiveCss(blocks) {
+    var _a, _b, _c;
+    const rules = [];
+    for (const block of blocks) {
+        rules.push(...buildRules(`[data-pb-block="${block.id}"]`, (_a = block.styles) === null || _a === void 0 ? void 0 : _a.responsive));
+        for (const component of block.components) {
+            rules.push(...buildRules(`[data-pb-component="${component.id}"]`, (_b = component.styles) === null || _b === void 0 ? void 0 : _b.responsive));
+            for (const element of component.elements) {
+                rules.push(...buildRules(`[data-pb-element="${element.id}"]`, (_c = element.styles) === null || _c === void 0 ? void 0 : _c.responsive));
+            }
+        }
+    }
+    return rules.join('');
+}
+export { BREAKPOINT_MIN_WIDTHS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "engines": {
     "node": "^24.0.0",
     "npm": ">=10"
@@ -66,12 +66,10 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.0.13",
     "@types/react": "^18.3.3",
-    "@types/react-bootstrap": "^1.0.1",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.35.0",
     "@typescript-eslint/parser": "^8.35.0",
     "@vitejs/plugin-react": "^6.0.4",
-    "bootstrap": "^5.3.7",
     "dompurify": "^3.2.6",
     "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
@@ -80,10 +78,8 @@
     "husky": "^9.1.7",
     "jsdom": "^30.0.0",
     "lint-staged": "^15.5.2",
-    "keen-slider": "^6.8.6",
     "prettier": "^3.6.2",
     "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",
@@ -103,11 +99,8 @@
     ]
   },
   "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",

package/dist/components/CarouselComponent.js

@@ -1,6 +0,0 @@
-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: 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/layouts/Menu.d.ts

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

package/dist/layouts/Menu.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Navbar, Nav, Container } from 'react-bootstrap';
-export function Menu({ page, websitePages }) {
-    if (!websitePages || websitePages.length === 0) {
-        return null;
-    }
-    const menuPages = websitePages
-        .filter((p) => p.menu === true)
-        .sort((a, b) => a.menuOrder - b.menuOrder);
-    if (menuPages.length === 0) {
-        return null;
-    }
-    const currentPath = (page === null || page === void 0 ? void 0 : page.path) || '';
-    const isActive = (path) => {
-        if (!currentPath)
-            return false;
-        if (path === '/')
-            return currentPath === '/' || currentPath === '';
-        return currentPath === path || currentPath.startsWith(path + '/');
-    };
-    return (_jsx(Navbar, { expand: "lg", className: "py-3", children: _jsxs(Container, { children: [_jsx(Navbar.Toggle, { "aria-controls": "basic-navbar-nav", className: "menu" }), _jsx(Navbar.Collapse, { id: "basic-navbar-nav", children: _jsx(Nav, { className: "me-auto", children: menuPages.map((p) => {
-                            const active = isActive(p.path);
-                            return (_jsx(Nav.Link, { href: p.path, style: {
-                                    color: active ? '#c0ad5b' : '#a4a4a4',
-                                    fontSize: '0.9rem',
-                                    letterSpacing: '0.05em',
-                                    textTransform: 'uppercase',
-                                    margin: '0 12px',
-                                    paddingBottom: '4px',
-                                    borderBottom: active ? '2px solid #c0ad5b' : '2px solid transparent',
-                                    transition: 'color 0.3s, border-color 0.3s',
-                                }, children: p.title }, p.id));
-                        }) }) })] }) }));
-}

package/dist/renderers/SectionRenderer.d.ts

@@ -1,6 +0,0 @@
-import type { SectionType } from '../types/SectionType.js';
-declare const SectionRenderer: import("react").NamedExoticComponent<{
-    readonly sections: SectionType[];
-    readonly editionMode?: boolean;
-}>;
-export { SectionRenderer };

package/dist/renderers/SectionRenderer.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } 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;
-    if (offset !== undefined) {
-        return { span: width !== null && width !== void 0 ? width : 12, offset };
-    }
-    return width;
-}
-const ColumnContent = memo(function ColumnContent({ column, editionMode }) {
-    const components = useMemo(() => orderBySort(column.components.filter((c) => c.enabled)), [column.components]);
-    const childSections = useMemo(() => orderBySort(column.childSections), [column.childSections]);
-    return (_jsxs(_Fragment, { children: [components.map((component) => componentFactory.build(component, editionMode)), childSections.map((childSection) => (_jsx(SectionContent, { section: childSection, editionMode: editionMode }, childSection.id)))] }));
-});
-function gridClass(id) {
-    return `pixelbuild-grid-${String(id).replace(/[^a-zA-Z0-9_-]/g, '_')}`;
-}
-const GridRenderer = memo(function GridRenderer({ section, editionMode }) {
-    const grid = gridClass(section.id);
-    const columns = useMemo(() => section.columns.filter((col) => col.components.some((c) => c.enabled) || col.childSections.length > 0), [section.columns]);
-    const css = useMemo(() => {
-        const rules = 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('');
-        })
-            .join('');
-        return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}${rules}`;
-    }, [grid, columns]);
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: 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: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id))) })] }));
-});
-const SectionContent = memo(function SectionContent({ section, editionMode }) {
-    const usesGrid = useMemo(() => 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; }), [section.columns]);
-    const content = useMemo(() => {
-        if (usesGrid) {
-            return _jsx(GridRenderer, { section: section, editionMode: editionMode });
-        }
-        return (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => (_jsx(ColumnRenderer, { column: column, editionMode: editionMode }, column.id))) }));
-    }, [usesGrid, section, 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 _jsx(Container, { fluid: true, children: content });
-});
-const ColumnRenderer = memo(function ColumnRenderer({ 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: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id));
-});
-const SectionRenderer = memo(function SectionRenderer({ sections, editionMode = false }) {
-    const sorted = useMemo(() => orderBySort(sections || []), [sections]);
-    if (sorted.length === 0) {
-        return null;
-    }
-    return (_jsx(_Fragment, { children: sorted.map((section) => (_jsx(SectionContent, { section: section, editionMode: editionMode }, section.id))) }));
-});
-export { SectionRenderer };

package/dist/types/SectionType.d.ts

@@ -1,10 +0,0 @@
-import type { StylesType } from './StylesType.js';
-import type { SectionColumnType } from './SectionColumnType.js';
-export interface SectionType {
-    id: number;
-    sectionType: 'container' | 'container-fluid' | 'row';
-    sort: number;
-    properties: Record<string, unknown>;
-    styles: StylesType;
-    columns: SectionColumnType[];
-}