@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/components/layout/Section.server.js

@@ -1,6 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Section Component - Server-safe Puck Configuration
+ *
+ * Full-width section with two-layer architecture:
+ * - Section layer (outer): Full-bleed background, border, padding, margin
+ * - Content layer (inner): Constrained content area with max-width, background, border, padding
+ *
+ * This is a server-safe version with minimal fields (only slot for content).
+ * For the full editor version with fields, use Section.tsx
+ *
+ * Responsive Controls:
+ * - contentDimensions: Different max-width/min-height at different breakpoints
+ * - sectionPadding: Different section padding at different breakpoints
+ * - contentPadding: Different content padding at different breakpoints
+ * - sectionMargin: Different margins at different breakpoints
+ * - visibility: Show/hide at different breakpoints
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -13,13 +29,17 @@ const DEFAULT_SECTION_PADDING = {
     bottom: 48,
     left: 0,
     unit: 'px',
-    linked: false,
+    linked: false
 };
 // Default content dimensions - 1200px max-width centered
 const DEFAULT_CONTENT_DIMENSIONS = {
     mode: 'contained',
     alignment: 'center',
-    maxWidth: { value: 1200, unit: 'px', enabled: true },
+    maxWidth: {
+        value: 1200,
+        unit: 'px',
+        enabled: true
+    }
 };
 // Default content padding with standard horizontal spacing
 const DEFAULT_CONTENT_PADDING = {
@@ -28,7 +48,7 @@ const DEFAULT_CONTENT_PADDING = {
     bottom: 0,
     left: 16,
     unit: 'px',
-    linked: false,
+    linked: false
 };
 const defaultProps = {
     id: '',
@@ -37,24 +57,32 @@ const defaultProps = {
     // Section layer defaults - padding gives sections proper spacing
     sectionBackground: null,
     sectionBorder: null,
-    sectionPadding: { xs: DEFAULT_SECTION_PADDING },
+    sectionPadding: {
+        xs: DEFAULT_SECTION_PADDING
+    },
     sectionMargin: null,
     // Content layer defaults - 1200px max-width so two-layer design is immediately visible
-    contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },
+    contentDimensions: {
+        xs: DEFAULT_CONTENT_DIMENSIONS
+    },
     contentBackground: null,
     contentBorder: null,
-    contentPadding: { xs: DEFAULT_CONTENT_PADDING },
+    contentPadding: {
+        xs: DEFAULT_CONTENT_PADDING
+    },
     // Other
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const SectionConfig = {
     label: 'Section',
     fields: {
-        content: { type: 'slot' },
+        content: {
+            type: 'slot'
+        }
     },
     defaultProps,
-    render: ({ id, content: Content, semanticElement = 'section', sectionBackground, sectionBorder, sectionPadding, sectionMargin, contentDimensions, contentBackground, contentBorder, contentPadding, animation, visibility, }) => {
+    render: ({ id, content: Content, semanticElement = 'section', sectionBackground, sectionBorder, sectionPadding, sectionMargin, contentDimensions, contentBackground, contentBorder, contentPadding, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting (server-safe)
@@ -66,7 +94,7 @@ export const SectionConfig = {
         // === Section layer styles (outer, full-width) ===
         const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground);
         const sectionStyles = {
-            ...sectionBackgroundStyles,
+            ...sectionBackgroundStyles
         };
         // Section border
         const sectionBorderStyles = borderValueToCSS(sectionBorder);
@@ -74,13 +102,17 @@ export const SectionConfig = {
             Object.assign(sectionStyles, sectionBorderStyles);
         }
         // Section padding with responsive support
-        const sectionPaddingResult = responsiveValueToCSS(sectionPadding, (v) => ({ padding: paddingValueToCSS(v) }), sectionClass);
+        const sectionPaddingResult = responsiveValueToCSS(sectionPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), sectionClass);
         Object.assign(sectionStyles, sectionPaddingResult.baseStyles);
         if (sectionPaddingResult.mediaQueryCSS) {
             mediaQueries.push(sectionPaddingResult.mediaQueryCSS);
         }
         // Section margin with responsive support
-        const sectionMarginResult = responsiveValueToCSS(sectionMargin, (v) => ({ margin: marginValueToCSS(v) }), sectionClass);
+        const sectionMarginResult = responsiveValueToCSS(sectionMargin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), sectionClass);
         Object.assign(sectionStyles, sectionMarginResult.baseStyles);
         if (sectionMarginResult.mediaQueryCSS) {
             mediaQueries.push(sectionMarginResult.mediaQueryCSS);
@@ -93,7 +125,7 @@ export const SectionConfig = {
         // === Content layer styles (inner, constrained) ===
         const contentBackgroundStyles = backgroundValueToCSS(contentBackground);
         const contentStyles = {
-            ...contentBackgroundStyles,
+            ...contentBackgroundStyles
         };
         // Content dimensions with responsive support
         const contentDimensionsResult = responsiveValueToCSS(contentDimensions, dimensionsValueToCSS, contentClass);
@@ -102,15 +134,13 @@ export const SectionConfig = {
             mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
         }
         // Check if minHeight is set - if so, we need flex layout to make slot expand
-        const hasMinHeight = (() => {
-            if (!contentDimensions)
-                return false;
+        const hasMinHeight = (()=>{
+            if (!contentDimensions) return false;
             // Check if it's a responsive value
             if (typeof contentDimensions === 'object' && 'xs' in contentDimensions) {
                 const responsiveDims = contentDimensions;
-                return Object.values(responsiveDims).some((v) => {
-                    if (!v || typeof v !== 'object')
-                        return false;
+                return Object.values(responsiveDims).some((v)=>{
+                    if (!v || typeof v !== 'object') return false;
                     const dim = v;
                     return dim.minHeight?.enabled && dim.minHeight?.value > 0;
                 });
@@ -130,7 +160,9 @@ export const SectionConfig = {
             Object.assign(contentStyles, contentBorderStyles);
         }
         // Content padding with responsive support
-        const contentPaddingResult = responsiveValueToCSS(contentPadding, (v) => ({ padding: paddingValueToCSS(v) }), contentClass);
+        const contentPaddingResult = responsiveValueToCSS(contentPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), contentClass);
         Object.assign(contentStyles, contentPaddingResult.baseStyles);
         if (contentPaddingResult.mediaQueryCSS) {
             mediaQueries.push(contentPaddingResult.mediaQueryCSS);
@@ -144,13 +176,43 @@ export const SectionConfig = {
         // Type assertion for Puck slot content
         const ContentSlot = Content;
         // When minHeight is set, wrap Content to ensure slot expands
-        const renderContent = () => {
+        const renderContent = ()=>{
             if (hasMinHeight) {
-                return (_jsx("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: _jsx(ContentSlot, { style: { flex: 1 } }) }));
+                return /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0
+                    },
+                    children: /*#__PURE__*/ _jsx(ContentSlot, {
+                        style: {
+                            flex: 1
+                        }
+                    })
+                });
             }
-            return _jsx(ContentSlot, {});
+            return /*#__PURE__*/ _jsx(ContentSlot, {});
         };
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx(Wrapper, { id: id || undefined, className: sectionClasses, style: sectionStyles, children: hasContentStyles ? (_jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() })) : (_jsx(ContentSlot, { className: contentClasses })) })] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsx(Wrapper, {
+                    id: id || undefined,
+                    className: sectionClasses,
+                    style: sectionStyles,
+                    children: hasContentStyles ? /*#__PURE__*/ _jsx("div", {
+                        className: contentClasses,
+                        style: contentStyles,
+                        children: renderContent()
+                    }) : /*#__PURE__*/ _jsx(ContentSlot, {
+                        className: contentClasses
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Section.server.js.map

package/dist/components/layout/Spacer.d.ts

@@ -8,11 +8,10 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type VisibilityValue } from '../../fields/shared';
+import { type VisibilityValue } from '../../fields/shared.js';
 export interface SpacerProps {
     size: string;
     direction: 'vertical' | 'horizontal' | 'both';
     visibility: VisibilityValue | null;
 }
 export declare const SpacerConfig: ComponentConfig;
-//# sourceMappingURL=Spacer.d.ts.map

package/dist/components/layout/Spacer.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Spacer Component - Puck Configuration
  *
@@ -7,21 +7,47 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * Responsive Controls:
  * - visibility: Show/hide at different breakpoints
- */
-import { useId } from 'react';
-import { cn, visibilityValueToCSS } from '../../fields/shared';
-import { createResetField } from '../../fields/ResetField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+ */ import { useId } from 'react';
+import { cn, visibilityValueToCSS } from '../../fields/shared.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
 const spacingOptions = [
-    { label: '8px', value: '8px' },
-    { label: '16px', value: '16px' },
-    { label: '24px', value: '24px' },
-    { label: '32px', value: '32px' },
-    { label: '48px', value: '48px' },
-    { label: '64px', value: '64px' },
-    { label: '80px', value: '80px' },
-    { label: '96px', value: '96px' },
-    { label: '128px', value: '128px' },
+    {
+        label: '8px',
+        value: '8px'
+    },
+    {
+        label: '16px',
+        value: '16px'
+    },
+    {
+        label: '24px',
+        value: '24px'
+    },
+    {
+        label: '32px',
+        value: '32px'
+    },
+    {
+        label: '48px',
+        value: '48px'
+    },
+    {
+        label: '64px',
+        value: '64px'
+    },
+    {
+        label: '80px',
+        value: '80px'
+    },
+    {
+        label: '96px',
+        value: '96px'
+    },
+    {
+        label: '128px',
+        value: '128px'
+    }
 ];
 // Tailwind height classes for predefined spacing options
 const heightMap = {
@@ -33,7 +59,7 @@ const heightMap = {
     '64px': 'h-16',
     '80px': 'h-20',
     '96px': 'h-24',
-    '128px': 'h-32',
+    '128px': 'h-32'
 };
 // Tailwind width classes for predefined spacing options
 const widthMap = {
@@ -45,43 +71,56 @@ const widthMap = {
     '64px': 'w-16',
     '80px': 'w-20',
     '96px': 'w-24',
-    '128px': 'w-32',
+    '128px': 'w-32'
 };
 const defaultProps = {
     size: '24px',
     direction: 'vertical',
-    visibility: null,
+    visibility: null
 };
 export const SpacerConfig = {
     label: 'Spacer',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         size: {
             type: 'select',
             label: 'Size',
-            options: spacingOptions,
+            options: spacingOptions
         },
         direction: {
             type: 'radio',
             label: 'Direction',
             options: [
-                { label: 'Vertical', value: 'vertical' },
-                { label: 'Horizontal', value: 'horizontal' },
-                { label: 'Both', value: 'both' },
-            ],
-        },
+                {
+                    label: 'Vertical',
+                    value: 'vertical'
+                },
+                {
+                    label: 'Horizontal',
+                    value: 'horizontal'
+                },
+                {
+                    label: 'Both',
+                    value: 'both'
+                }
+            ]
+        }
     },
     defaultProps,
-    render: ({ size, direction, visibility }) => {
+    render: ({ size, direction, visibility })=>{
         // Generate unique ID for CSS targeting
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const uniqueId = useId().replace(/:/g, '');
         const wrapperClass = `puck-spacer-${uniqueId}`;
         // Visibility media queries
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-        const getClasses = () => {
+        const getClasses = ()=>{
             const heightClass = heightMap[size] || 'h-6';
             const widthClass = widthMap[size] || 'w-6';
             if (direction === 'vertical') {
@@ -93,7 +132,16 @@ export const SpacerConfig = {
             // both
             return `block ${heightClass} ${widthClass}`;
         };
-        return (_jsxs(_Fragment, { children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: cn(getClasses(), wrapperClass), "aria-hidden": "true" })] }));
-    },
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                    children: visibilityCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: cn(getClasses(), wrapperClass),
+                    "aria-hidden": "true"
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Spacer.js.map

package/dist/components/layout/Spacer.server.d.ts

@@ -11,11 +11,10 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type VisibilityValue } from '../../fields/shared';
+import { type VisibilityValue } from '../../fields/shared.js';
 export interface SpacerProps {
     size: string;
     direction: 'vertical' | 'horizontal' | 'both';
     visibility: VisibilityValue | null;
 }
 export declare const SpacerConfig: ComponentConfig<SpacerProps>;
-//# sourceMappingURL=Spacer.server.d.ts.map

package/dist/components/layout/Spacer.server.js

@@ -1,5 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, visibilityValueToCSS } from '../../fields/shared';
+/**
+ * Spacer Component - Server-safe Puck Configuration
+ *
+ * Simple spacing component for adding vertical or horizontal space.
+ * Uses Tailwind classes for layout and sizing from predefined options.
+ *
+ * This is a server-safe version with NO fields property.
+ * For the full editor version with fields, use Spacer.tsx
+ *
+ * Responsive Controls:
+ * - visibility: Show/hide at different breakpoints
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn, visibilityValueToCSS } from '../../fields/shared.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -15,7 +26,7 @@ const heightMap = {
     '64px': 'h-16',
     '80px': 'h-20',
     '96px': 'h-24',
-    '128px': 'h-32',
+    '128px': 'h-32'
 };
 // Tailwind width classes for predefined spacing options
 const widthMap = {
@@ -27,23 +38,23 @@ const widthMap = {
     '64px': 'w-16',
     '80px': 'w-20',
     '96px': 'w-24',
-    '128px': 'w-32',
+    '128px': 'w-32'
 };
 const defaultProps = {
     size: '24px',
     direction: 'vertical',
-    visibility: null,
+    visibility: null
 };
 export const SpacerConfig = {
     label: 'Spacer',
     defaultProps,
-    render: ({ size, direction, visibility }) => {
+    render: ({ size, direction, visibility })=>{
         // Generate unique ID for CSS targeting (server-safe)
         const uniqueId = generateUniqueId();
         const wrapperClass = `puck-spacer-${uniqueId}`;
         // Visibility media queries
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
-        const getClasses = () => {
+        const getClasses = ()=>{
             const heightClass = heightMap[size] || 'h-6';
             const widthClass = widthMap[size] || 'w-6';
             if (direction === 'vertical') {
@@ -55,7 +66,16 @@ export const SpacerConfig = {
             // both
             return `block ${heightClass} ${widthClass}`;
         };
-        return (_jsxs(_Fragment, { children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: cn(getClasses(), wrapperClass), "aria-hidden": "true" })] }));
-    },
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                    children: visibilityCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: cn(getClasses(), wrapperClass),
+                    "aria-hidden": "true"
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Spacer.server.js.map

package/dist/components/layout/Template.d.ts

@@ -16,7 +16,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type DimensionsValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type DimensionsValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export interface TemplateProps {
     /** Slot for nested components */
     content: unknown;
@@ -32,4 +32,3 @@ export interface TemplateProps {
     visibility: VisibilityValue | null;
 }
 export declare const TemplateConfig: ComponentConfig;
-//# sourceMappingURL=Template.d.ts.map

package/dist/components/layout/Template.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Template Component - Puck Configuration
  *
@@ -15,16 +15,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * - customPadding: Different padding at different breakpoints
  * - margin: Different margins at different breakpoints
  * - visibility: Show/hide at different breakpoints
- */
-import { useId } from 'react';
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { createResetField } from '../../fields/ResetField';
-import { createTemplateField } from '../../fields/TemplateField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createMarginField } from '../../fields/MarginField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createResponsiveField } from '../../fields/ResponsiveField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+ */ import { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createTemplateField } from '../../fields/TemplateField.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createResponsiveField } from '../../fields/ResponsiveField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
 // Default values for responsive fields
 const DEFAULT_PADDING = {
     top: 0,
@@ -32,12 +31,16 @@ const DEFAULT_PADDING = {
     bottom: 0,
     left: 0,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 const DEFAULT_DIMENSIONS = {
     mode: 'full',
     alignment: 'center',
-    maxWidth: { value: 100, unit: '%', enabled: true },
+    maxWidth: {
+        value: 100,
+        unit: '%',
+        enabled: true
+    }
 };
 // =============================================================================
 // Default Props
@@ -48,7 +51,7 @@ const defaultProps = {
     dimensions: null,
     customPadding: null,
     margin: null,
-    visibility: null,
+    visibility: null
 };
 // =============================================================================
 // Component Configuration
@@ -56,33 +59,39 @@ const defaultProps = {
 export const TemplateConfig = {
     label: 'Template',
     fields: {
-        _reset: createResetField({ defaultProps }),
-        templateId: createTemplateField({ label: 'Template' }),
+        _reset: createResetField({
+            defaultProps
+        }),
+        templateId: createTemplateField({
+            label: 'Template'
+        }),
         content: {
-            type: 'slot',
+            type: 'slot'
         },
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         // Responsive dimensions
         dimensions: createResponsiveField({
             label: 'Dimensions (Responsive)',
-            innerField: (config) => createDimensionsField(config),
-            defaultValue: DEFAULT_DIMENSIONS,
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS
         }),
         // Spacing (grouped at bottom) - Responsive
         margin: createResponsiveField({
             label: 'Margin (Responsive)',
-            innerField: (config) => createMarginField(config),
-            defaultValue: DEFAULT_PADDING,
+            innerField: (config)=>createMarginField(config),
+            defaultValue: DEFAULT_PADDING
         }),
         customPadding: createResponsiveField({
             label: 'Padding (Responsive)',
-            innerField: (config) => createPaddingField(config),
-            defaultValue: DEFAULT_PADDING,
-        }),
+            innerField: (config)=>createPaddingField(config),
+            defaultValue: DEFAULT_PADDING
+        })
     },
     defaultProps,
-    render: ({ content: Content, dimensions, customPadding, margin, visibility }) => {
+    render: ({ content: Content, dimensions, customPadding, margin, visibility })=>{
         // Generate unique IDs for CSS targeting
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const uniqueId = useId().replace(/:/g, '');
@@ -93,13 +102,17 @@ export const TemplateConfig = {
         // Build wrapper styles
         const wrapperStyles = {};
         // Add padding with responsive support
-        const paddingResult = responsiveValueToCSS(customPadding, (v) => ({ padding: paddingValueToCSS(v) }), wrapperClass);
+        const paddingResult = responsiveValueToCSS(customPadding, (v)=>({
+                padding: paddingValueToCSS(v)
+            }), wrapperClass);
         Object.assign(wrapperStyles, paddingResult.baseStyles);
         if (paddingResult.mediaQueryCSS) {
             mediaQueries.push(paddingResult.mediaQueryCSS);
         }
         // Add margin with responsive support
-        const marginResult = responsiveValueToCSS(margin, (v) => ({ margin: marginValueToCSS(v) }), wrapperClass);
+        const marginResult = responsiveValueToCSS(margin, (v)=>({
+                margin: marginValueToCSS(v)
+            }), wrapperClass);
         Object.assign(wrapperStyles, marginResult.baseStyles);
         if (marginResult.mediaQueryCSS) {
             mediaQueries.push(marginResult.mediaQueryCSS);
@@ -118,7 +131,20 @@ export const TemplateConfig = {
         const allMediaQueryCSS = mediaQueries.join('\n');
         // Content is a slot component that Puck provides
         // It renders all the nested components within this template
-        return (_jsxs(_Fragment, { children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx("div", { className: cn('template-wrapper', wrapperClass), style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : undefined, children: _jsx(Content, { className: contentClass, style: dimensionsResult.baseStyles }) })] }));
-    },
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: cn('template-wrapper', wrapperClass),
+                    style: Object.keys(wrapperStyles).length > 0 ? wrapperStyles : undefined,
+                    children: /*#__PURE__*/ _jsx(Content, {
+                        className: contentClass,
+                        style: dimensionsResult.baseStyles
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Template.js.map

package/dist/components/layout/Template.server.d.ts

@@ -13,7 +13,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type DimensionsValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type DimensionsValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export interface TemplateProps {
     /** Slot for nested components */
     content: unknown;
@@ -29,4 +29,3 @@ export interface TemplateProps {
     visibility: VisibilityValue | null;
 }
 export declare const TemplateServerConfig: ComponentConfig;
-//# sourceMappingURL=Template.server.d.ts.map