@delmaredigital/payload-puck 0.6.12 → 0.6.14

package/dist/components/layout/Flex.js

@@ -14,31 +14,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - 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, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, justifyContentMap, alignItemsMap, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createBorderField } from '../../fields/BorderField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createResetField } from '../../fields/ResetField';
-import { createMarginField } from '../../fields/MarginField';
-import { createBackgroundField } from '../../fields/BackgroundField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createResponsiveField } from '../../fields/ResponsiveField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
-import { createJustifyContentField, createAlignItemsField, } from '../../fields/FlexAlignmentField';
+ */ import { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, justifyContentMap, alignItemsMap } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createBorderField } from '../../fields/BorderField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createBackgroundField } from '../../fields/BackgroundField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createResponsiveField } from '../../fields/ResponsiveField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
+import { createJustifyContentField, createAlignItemsField } from '../../fields/FlexAlignmentField.js';
 // Tailwind class mappings for flex properties
 const flexDirectionMap = {
     row: 'flex-row',
     column: 'flex-col',
     'row-reverse': 'flex-row-reverse',
-    'column-reverse': 'flex-col-reverse',
+    'column-reverse': 'flex-col-reverse'
 };
 const flexWrapMap = {
     wrap: 'flex-wrap',
     nowrap: 'flex-nowrap',
-    'wrap-reverse': 'flex-wrap-reverse',
+    'wrap-reverse': 'flex-wrap-reverse'
 };
 // Default values for responsive fields
 const DEFAULT_PADDING = {
@@ -47,12 +46,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
+    }
 };
 const defaultProps = {
     content: [],
@@ -68,79 +71,125 @@ const defaultProps = {
     dimensions: null,
     border: null,
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const FlexConfig = {
     label: 'Flex',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         content: {
             type: 'slot',
-            disallow: ['Section'],
+            disallow: [
+                'Section'
+            ]
         },
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         // Semantic element selection
         semanticElement: {
             type: 'select',
             label: 'HTML Element',
             options: [
-                { label: 'Div', value: 'div' },
-                { label: 'Nav', value: 'nav' },
-                { label: 'Unordered List', value: 'ul' },
-                { label: 'Ordered List', value: 'ol' },
-                { label: 'Aside', value: 'aside' },
-                { label: 'Section', value: 'section' },
-            ],
+                {
+                    label: 'Div',
+                    value: 'div'
+                },
+                {
+                    label: 'Nav',
+                    value: 'nav'
+                },
+                {
+                    label: 'Unordered List',
+                    value: 'ul'
+                },
+                {
+                    label: 'Ordered List',
+                    value: 'ol'
+                },
+                {
+                    label: 'Aside',
+                    value: 'aside'
+                },
+                {
+                    label: 'Section',
+                    value: 'section'
+                }
+            ]
         },
         direction: {
             type: 'radio',
             label: 'Direction',
             options: [
-                { label: 'Row', value: 'row' },
-                { label: 'Column', value: 'column' },
-            ],
+                {
+                    label: 'Row',
+                    value: 'row'
+                },
+                {
+                    label: 'Column',
+                    value: 'column'
+                }
+            ]
         },
-        justifyContent: createJustifyContentField({ label: 'Justify Content' }),
-        alignItems: createAlignItemsField({ label: 'Align Items' }),
+        justifyContent: createJustifyContentField({
+            label: 'Justify Content'
+        }),
+        alignItems: createAlignItemsField({
+            label: 'Align Items'
+        }),
         gap: {
             type: 'number',
             label: 'Gap (px)',
-            min: 0,
+            min: 0
         },
         wrap: {
             type: 'radio',
             label: 'Wrap',
             options: [
-                { label: 'Yes', value: 'wrap' },
-                { label: 'No', value: 'nowrap' },
-            ],
+                {
+                    label: 'Yes',
+                    value: 'wrap'
+                },
+                {
+                    label: 'No',
+                    value: 'nowrap'
+                }
+            ]
         },
         // Background
-        background: createBackgroundField({ label: 'Background' }),
+        background: createBackgroundField({
+            label: 'Background'
+        }),
         // Advanced custom options
-        border: createBorderField({ label: 'Border' }),
+        border: createBorderField({
+            label: 'Border'
+        }),
         // Responsive dimensions
         dimensions: createResponsiveField({
             label: 'Dimensions (Responsive)',
-            innerField: (config) => createDimensionsField(config),
-            defaultValue: DEFAULT_DIMENSIONS,
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
         }),
-        animation: createAnimationField({ label: 'Animation' }),
         // 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, semanticElement = 'div', direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility, }) => {
+    render: ({ content: Content, semanticElement = 'div', direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting
@@ -154,10 +203,12 @@ export const FlexConfig = {
         const backgroundStyles = backgroundValueToCSS(background);
         // Build wrapper styles
         const wrapperStyles = {
-            ...backgroundStyles,
+            ...backgroundStyles
         };
         // 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);
@@ -168,7 +219,9 @@ export const FlexConfig = {
             Object.assign(wrapperStyles, borderStyles);
         }
         // Apply 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);
@@ -186,14 +239,28 @@ export const FlexConfig = {
         // Dynamic styles that need inline (user-controlled values)
         const contentStyles = {
             gap,
-            ...dimensionsResult.baseStyles,
+            ...dimensionsResult.baseStyles
         };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
         // Combine all media queries
         const allMediaQueryCSS = mediaQueries.join('\n');
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx(Wrapper, { className: wrapperClass, style: wrapperStyles, children: _jsx(Content, { className: contentClasses, style: contentStyles }) })] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsx(Wrapper, {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: /*#__PURE__*/ _jsx(Content, {
+                        className: contentClasses,
+                        style: contentStyles
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Flex.js.map

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

@@ -14,7 +14,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
 export type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch';
 export type FlexSemanticElement = 'div' | 'nav' | 'ul' | 'ol' | 'aside' | 'section';
@@ -35,4 +35,3 @@ export interface FlexProps {
     visibility: VisibilityValue | null;
 }
 export declare const FlexConfig: ComponentConfig;
-//# sourceMappingURL=Flex.server.d.ts.map

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

@@ -1,6 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, justifyContentMap, alignItemsMap, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Flex Component - Server-safe Puck Configuration
+ *
+ * Flexbox layout following official Puck demo patterns.
+ * Uses Tailwind classes for layout, inline styles for dynamic user values.
+ *
+ * This is a server-safe version with NO fields property (only slot for content).
+ * For the full editor version with fields, use Flex.tsx
+ *
+ * Responsive Controls:
+ * - dimensions: Different dimensions at different breakpoints
+ * - customPadding: Different padding at different breakpoints
+ * - margin: 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, justifyContentMap, alignItemsMap } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -11,12 +25,12 @@ const flexDirectionMap = {
     row: 'flex-row',
     column: 'flex-col',
     'row-reverse': 'flex-row-reverse',
-    'column-reverse': 'flex-col-reverse',
+    'column-reverse': 'flex-col-reverse'
 };
 const flexWrapMap = {
     wrap: 'flex-wrap',
     nowrap: 'flex-nowrap',
-    'wrap-reverse': 'flex-wrap-reverse',
+    'wrap-reverse': 'flex-wrap-reverse'
 };
 const defaultProps = {
     content: [],
@@ -32,15 +46,17 @@ const defaultProps = {
     dimensions: null,
     border: null,
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const FlexConfig = {
     label: 'Flex',
     fields: {
-        content: { type: 'slot' },
+        content: {
+            type: 'slot'
+        }
     },
     defaultProps,
-    render: ({ content: Content, semanticElement = 'div', direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility, }) => {
+    render: ({ content: Content, semanticElement = 'div', direction, justifyContent, alignItems, gap, wrap, background, customPadding, margin, dimensions, border, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting (server-safe)
@@ -53,10 +69,12 @@ export const FlexConfig = {
         const backgroundStyles = backgroundValueToCSS(background);
         // Build wrapper styles
         const wrapperStyles = {
-            ...backgroundStyles,
+            ...backgroundStyles
         };
         // 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);
@@ -67,7 +85,9 @@ export const FlexConfig = {
             Object.assign(wrapperStyles, borderStyles);
         }
         // Apply 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);
@@ -85,7 +105,7 @@ export const FlexConfig = {
         // Dynamic styles that need inline (user-controlled values)
         const contentStyles = {
             gap,
-            ...dimensionsResult.baseStyles,
+            ...dimensionsResult.baseStyles
         };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
@@ -94,7 +114,21 @@ export const FlexConfig = {
         const allMediaQueryCSS = mediaQueries.join('\n');
         // Type assertion for Puck slot content - cast to any to avoid complex React type issues
         const ContentSlot = Content;
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsx(Wrapper, { className: wrapperClass, style: wrapperStyles, children: _jsx(ContentSlot, { className: contentClasses, style: contentStyles }) })] }));
-    },
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsx(Wrapper, {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: /*#__PURE__*/ _jsx(ContentSlot, {
+                        className: contentClasses,
+                        style: contentStyles
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Flex.server.js.map

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

@@ -14,7 +14,7 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared';
+import { type PaddingValue, type BorderValue, type DimensionsValue, type BackgroundValue, type AnimationValue, type ResponsiveValue, type VisibilityValue } from '../../fields/shared.js';
 export type GridSemanticElement = 'div' | 'ul' | 'ol';
 export interface GridProps {
     content: unknown;
@@ -30,4 +30,3 @@ export interface GridProps {
     visibility: VisibilityValue | null;
 }
 export declare const GridConfig: ComponentConfig;
-//# sourceMappingURL=Grid.d.ts.map

package/dist/components/layout/Grid.js

@@ -13,19 +13,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Responsive Controls:
  * - gap: Different gap at different breakpoints
  * - visibility: Show/hide at different breakpoints
- */
-import { useId } from 'react';
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createBorderField } from '../../fields/BorderField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createMarginField } from '../../fields/MarginField';
-import { createResetField } from '../../fields/ResetField';
-import { createBackgroundField } from '../../fields/BackgroundField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createResponsiveField } from '../../fields/ResponsiveField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+ */ import { useId } from 'react';
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, borderValueToCSS, backgroundValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createBorderField } from '../../fields/BorderField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createBackgroundField } from '../../fields/BackgroundField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createResponsiveField } from '../../fields/ResponsiveField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
 // Default values for responsive fields
 const DEFAULT_PADDING = {
     top: 0,
@@ -33,12 +32,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
+    }
 };
 const defaultProps = {
     content: [],
@@ -51,64 +54,85 @@ const defaultProps = {
     border: null,
     margin: null,
     animation: null,
-    visibility: null,
+    visibility: null
 };
 export const GridConfig = {
     label: 'Grid',
     fields: {
-        _reset: createResetField({ defaultProps }),
+        _reset: createResetField({
+            defaultProps
+        }),
         content: {
             type: 'slot',
-            disallow: ['Section'],
+            disallow: [
+                'Section'
+            ]
         },
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         // Semantic element selection
         semanticElement: {
             type: 'select',
             label: 'HTML Element',
             options: [
-                { label: 'Div', value: 'div' },
-                { label: 'Unordered List', value: 'ul' },
-                { label: 'Ordered List', value: 'ol' },
-            ],
+                {
+                    label: 'Div',
+                    value: 'div'
+                },
+                {
+                    label: 'Unordered List',
+                    value: 'ul'
+                },
+                {
+                    label: 'Ordered List',
+                    value: 'ol'
+                }
+            ]
         },
         numColumns: {
             type: 'number',
             label: 'Number of Columns',
             min: 1,
-            max: 12,
+            max: 12
         },
         gap: {
             type: 'number',
             label: 'Gap (px)',
-            min: 0,
+            min: 0
         },
         // Background
-        background: createBackgroundField({ label: 'Background' }),
+        background: createBackgroundField({
+            label: 'Background'
+        }),
         // Advanced custom options
-        border: createBorderField({ label: 'Border' }),
+        border: createBorderField({
+            label: 'Border'
+        }),
         // Responsive dimensions
         dimensions: createResponsiveField({
             label: 'Dimensions (Responsive)',
-            innerField: (config) => createDimensionsField(config),
-            defaultValue: DEFAULT_DIMENSIONS,
+            innerField: (config)=>createDimensionsField(config),
+            defaultValue: DEFAULT_DIMENSIONS
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
         }),
-        animation: createAnimationField({ label: 'Animation' }),
         // 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, semanticElement = 'div', numColumns, gap, background, customPadding, dimensions, border, margin, animation, visibility, }) => {
+    render: ({ content: Content, semanticElement = 'div', numColumns, gap, background, customPadding, dimensions, border, margin, animation, visibility })=>{
         // Dynamic element based on semanticElement prop
         const Wrapper = semanticElement;
         // Generate unique IDs for CSS targeting
@@ -122,10 +146,12 @@ export const GridConfig = {
         const backgroundStyles = backgroundValueToCSS(background);
         // Build wrapper styles
         const wrapperStyles = {
-            ...backgroundStyles,
+            ...backgroundStyles
         };
         // 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);
@@ -136,7 +162,9 @@ export const GridConfig = {
             Object.assign(wrapperStyles, borderStyles);
         }
         // 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);
@@ -153,7 +181,7 @@ export const GridConfig = {
         // Dynamic styles that need inline (user-controlled values: gap, columns)
         const contentStyles = {
             gap,
-            ...dimensionsResult.baseStyles,
+            ...dimensionsResult.baseStyles
         };
         if (dimensionsResult.mediaQueryCSS) {
             mediaQueries.push(dimensionsResult.mediaQueryCSS);
@@ -161,17 +189,36 @@ export const GridConfig = {
         // Grid template columns must be inline since numColumns is dynamic
         const gridStyles = {
             ...contentStyles,
-            '--grid-cols': numColumns,
+            '--grid-cols': numColumns
         };
         // Combine all media queries
         const allMediaQueryCSS = mediaQueries.join('\n');
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [allMediaQueryCSS && _jsx("style", { children: allMediaQueryCSS }), _jsxs(Wrapper, { className: wrapperClass, style: wrapperStyles, children: [_jsx(Content, { className: contentClasses, style: gridStyles }), _jsx("style", { children: `
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                allMediaQueryCSS && /*#__PURE__*/ _jsx("style", {
+                    children: allMediaQueryCSS
+                }),
+                /*#__PURE__*/ _jsxs(Wrapper, {
+                    className: wrapperClass,
+                    style: wrapperStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx(Content, {
+                            className: contentClasses,
+                            style: gridStyles
+                        }),
+                        /*#__PURE__*/ _jsx("style", {
+                            children: `
             @media (min-width: 768px) {
               .flex.md\\:grid {
                 grid-template-columns: repeat(var(--grid-cols), 1fr);
               }
             }
-          ` })] })] }));
-    },
+          `
+                        })
+                    ]
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Grid.js.map