lib-pixelbuild 0.4.1 → 0.4.3

package/dist/components/DividerComponent.js

@@ -28,6 +28,10 @@ const DividerComponent = memo(function DividerComponent({ component }) {
             marginLeft,
             marginRight
         };
-    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsx("div", { style: { display: 'flex', flexDirection: isVertical ? 'row' : 'column', minHeight: isVertical ? undefined : '1px' }, children: _jsx("div", { style: line, "aria-hidden": "true" }) }) }));
+    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsx("div", { style: {
+                display: 'flex',
+                flexDirection: isVertical ? 'row' : 'column',
+                minHeight: isVertical ? undefined : '1px'
+            }, children: _jsx("div", { style: line, "aria-hidden": "true" }) }) }));
 });
 export { DividerComponent };

package/dist/components/HeroComponent.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
-import { ComponentShell } from '../ui/PbComponentShell.js';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import { getString } from '../utils/propertyUtils.js';
@@ -17,6 +16,7 @@ const HeroComponent = memo(function HeroComponent({ component }) {
         : 0.5;
     const contentAlign = getString(properties, 'contentAlign', 'center');
     const contentVerticalAlign = getString(properties, 'contentVerticalAlign', 'center');
+    const contentPadding = getString(properties, 'contentPadding', '');
     const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
     const justifyContent = contentAlign === 'left' ? 'flex-start' : contentAlign === 'right' ? 'flex-end' : 'center';
     const alignItems = contentVerticalAlign === 'top' ? 'flex-start' : contentVerticalAlign === 'bottom' ? 'flex-end' : 'center';
@@ -30,6 +30,8 @@ const HeroComponent = memo(function HeroComponent({ component }) {
         alignItems: justifyContent,
         textAlign: contentAlign === 'left' || contentAlign === 'right' ? contentAlign : 'center'
     };
+    if (contentPadding)
+        contentStyle.padding = contentPadding;
     const media = useMemo(() => {
         if (mediaType === 'video' && mediaSrc) {
             return (_jsx("video", { autoPlay: true, muted: true, loop: true, playsInline: true, src: mediaSrc, poster: mediaPoster || undefined, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' } }));
@@ -46,6 +48,6 @@ const HeroComponent = memo(function HeroComponent({ component }) {
             backgroundColor: overlayColor,
             opacity: overlayOpacity
         } }));
-    return (_jsx(ComponentShell, { component: component, outer: "div", children: _jsxs("div", { style: { position: 'relative', overflow: 'hidden', minHeight }, children: [media, overlay, _jsx("div", { style: contentStyle, children: elements.map((element) => elementFactory.build(element)) })] }) }));
+    return (_jsx("div", { "data-pb-component": component.id, style: component.styles, children: _jsxs("div", { style: { position: 'relative', overflow: 'hidden', minHeight }, children: [media, overlay, _jsx("div", { style: contentStyle, children: elements.map((element) => elementFactory.build(element)) })] }) }));
 });
 export { HeroComponent };

package/dist/renderers/BlockRenderer.js

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

package/package.json

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