@delmaredigital/payload-puck 0.6.12 → 0.6.14

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

@@ -1,5 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, responsiveValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
+/**
+ * Template Component - Server-safe Configuration
+ *
+ * A reusable template container for rendering nested components.
+ * This server-safe version excludes the TemplateField (which requires client-side APIs).
+ *
+ * For the full editor experience with template loading, use Template.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, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn, dimensionsValueToCSS, marginValueToCSS, paddingValueToCSS, responsiveValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
 // Simple ID generator for server-side rendering
 let idCounter = 0;
 function generateUniqueId() {
@@ -14,7 +27,7 @@ const defaultProps = {
     dimensions: null,
     customPadding: null,
     margin: null,
-    visibility: null,
+    visibility: null
 };
 // =============================================================================
 // Component Configuration (Server-safe)
@@ -25,14 +38,14 @@ export const TemplateServerConfig = {
         // In server config, templateId is just for reference (no loading UI)
         templateId: {
             type: 'text',
-            label: 'Template ID',
+            label: 'Template ID'
         },
         content: {
-            type: 'slot',
-        },
+            type: 'slot'
+        }
     },
     defaultProps,
-    render: ({ content: Content, dimensions, customPadding, margin, visibility }) => {
+    render: ({ content: Content, dimensions, customPadding, margin, visibility })=>{
         // Generate unique IDs for CSS targeting (server-safe)
         const uniqueId = generateUniqueId();
         const wrapperClass = `puck-template-${uniqueId}`;
@@ -42,13 +55,17 @@ export const TemplateServerConfig = {
         // 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);
@@ -69,7 +86,20 @@ export const TemplateServerConfig = {
         const ContentSlot = Content;
         // 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(ContentSlot, { 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(ContentSlot, {
+                        className: contentClass,
+                        style: dimensionsResult.baseStyles
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Template.server.js.map

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

@@ -3,12 +3,11 @@
  *
  * Structural components for page layout and content organization.
  */
-export { ContainerConfig } from './Container';
-export { FlexConfig } from './Flex';
-export { GridConfig } from './Grid';
-export { SectionConfig } from './Section';
-export { SpacerConfig } from './Spacer';
-export { TemplateConfig } from './Template';
-export { TemplateServerConfig } from './Template.server';
-export type { TemplateProps } from './Template';
-//# sourceMappingURL=index.d.ts.map
+export { ContainerConfig } from './Container.js';
+export { FlexConfig } from './Flex.js';
+export { GridConfig } from './Grid.js';
+export { SectionConfig } from './Section.js';
+export { SpacerConfig } from './Spacer.js';
+export { TemplateConfig } from './Template.js';
+export { TemplateServerConfig } from './Template.server.js';
+export type { TemplateProps } from './Template.js';

package/dist/components/layout/index.js

@@ -2,12 +2,10 @@
  * Layout Components
  *
  * Structural components for page layout and content organization.
- */
-export { ContainerConfig } from './Container';
-export { FlexConfig } from './Flex';
-export { GridConfig } from './Grid';
-export { SectionConfig } from './Section';
-export { SpacerConfig } from './Spacer';
-export { TemplateConfig } from './Template';
-export { TemplateServerConfig } from './Template.server';
-//# sourceMappingURL=index.js.map
+ */ export { ContainerConfig } from './Container.js';
+export { FlexConfig } from './Flex.js';
+export { GridConfig } from './Grid.js';
+export { SectionConfig } from './Section.js';
+export { SpacerConfig } from './Spacer.js';
+export { TemplateConfig } from './Template.js';
+export { TemplateServerConfig } from './Template.server.js';

package/dist/components/media/Image.d.ts

@@ -8,9 +8,9 @@
  * - visibility: Show/hide at different breakpoints
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type DimensionsValue, type BorderValue, type AnimationValue, type TransformValue, type VisibilityValue } from '../../fields/shared';
-import { type MediaReference } from '../../fields/MediaField';
-import { type Alignment } from '../../fields/AlignmentField';
+import { type PaddingValue, type DimensionsValue, type BorderValue, type AnimationValue, type TransformValue, type VisibilityValue } from '../../fields/shared.js';
+import { type MediaReference } from '../../fields/MediaField.js';
+import { type Alignment } from '../../fields/AlignmentField.js';
 export interface ImageProps {
     image: MediaReference | null;
     alt: string;
@@ -27,4 +27,3 @@ export interface ImageProps {
     visibility: VisibilityValue | null;
 }
 export declare const ImageConfig: ComponentConfig;
-//# sourceMappingURL=Image.d.ts.map

package/dist/components/media/Image.js

@@ -7,20 +7,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Responsive Controls:
  * - visibility: Show/hide at different breakpoints
- */
-import { useId } from 'react';
-import { aspectRatioField, aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
-import { createMarginField } from '../../fields/MarginField';
-import { createPaddingField } from '../../fields/PaddingField';
-import { createDimensionsField } from '../../fields/DimensionsField';
-import { createBorderField } from '../../fields/BorderField';
-import { createMediaField } from '../../fields/MediaField';
-import { createAlignmentField } from '../../fields/AlignmentField';
-import { createAnimationField } from '../../fields/AnimationField';
-import { createTransformField } from '../../fields/TransformField';
-import { createResetField } from '../../fields/ResetField';
-import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField';
+ */ import { useId } from 'react';
+import { aspectRatioField, aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
+import { createMarginField } from '../../fields/MarginField.js';
+import { createPaddingField } from '../../fields/PaddingField.js';
+import { createDimensionsField } from '../../fields/DimensionsField.js';
+import { createBorderField } from '../../fields/BorderField.js';
+import { createMediaField } from '../../fields/MediaField.js';
+import { createAlignmentField } from '../../fields/AlignmentField.js';
+import { createAnimationField } from '../../fields/AnimationField.js';
+import { createTransformField } from '../../fields/TransformField.js';
+import { createResetField } from '../../fields/ResetField.js';
+import { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js';
 // Default padding with standard spacing (replaces hardcoded py-4 px-4)
 const DEFAULT_PADDING = {
     top: 16,
@@ -28,7 +27,7 @@ const DEFAULT_PADDING = {
     bottom: 16,
     left: 16,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 const defaultProps = {
     image: null,
@@ -42,44 +41,71 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    customPadding: DEFAULT_PADDING, // Default 16px padding, visible in editor
-    visibility: null,
+    customPadding: DEFAULT_PADDING,
+    visibility: null
 };
 export const ImageConfig = {
     label: 'Image',
     fields: {
-        _reset: createResetField({ defaultProps }),
-        image: createMediaField({ label: 'Image' }),
+        _reset: createResetField({
+            defaultProps
+        }),
+        image: createMediaField({
+            label: 'Image'
+        }),
         alt: {
             type: 'text',
-            label: 'Alt Text Override',
+            label: 'Alt Text Override'
         },
         // Responsive visibility control
-        visibility: createResponsiveVisibilityField({ label: 'Visibility' }),
+        visibility: createResponsiveVisibilityField({
+            label: 'Visibility'
+        }),
         aspectRatio: aspectRatioField,
         link: {
             type: 'text',
-            label: 'Link URL',
+            label: 'Link URL'
         },
         openInNewTab: {
             type: 'radio',
             label: 'Open in New Tab',
             options: [
-                { label: 'Yes', value: true },
-                { label: 'No', value: false },
-            ],
+                {
+                    label: 'Yes',
+                    value: true
+                },
+                {
+                    label: 'No',
+                    value: false
+                }
+            ]
         },
-        border: createBorderField({ label: 'Border' }),
-        dimensions: createDimensionsField({ label: 'Dimensions' }),
-        alignment: createAlignmentField({ label: 'Alignment', defaultValue: 'center' }),
-        transform: createTransformField({ label: 'Transform' }),
-        animation: createAnimationField({ label: 'Animation' }),
+        border: createBorderField({
+            label: 'Border'
+        }),
+        dimensions: createDimensionsField({
+            label: 'Dimensions'
+        }),
+        alignment: createAlignmentField({
+            label: 'Alignment',
+            defaultValue: 'center'
+        }),
+        transform: createTransformField({
+            label: 'Transform'
+        }),
+        animation: createAnimationField({
+            label: 'Animation'
+        }),
         // Spacing (grouped at bottom)
-        margin: createMarginField({ label: 'Margin' }),
-        customPadding: createPaddingField({ label: 'Padding' }),
+        margin: createMarginField({
+            label: 'Margin'
+        }),
+        customPadding: createPaddingField({
+            label: 'Padding'
+        })
     },
     defaultProps,
-    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {
+    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility })=>{
         // Generate unique ID for CSS targeting
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const uniqueId = useId().replace(/:/g, '');
@@ -88,7 +114,7 @@ export const ImageConfig = {
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
         const dimensionsStyles = dimensionsValueToCSS(dimensions);
         const style = {
-            ...dimensionsStyles,
+            ...dimensionsStyles
         };
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -110,14 +136,69 @@ export const ImageConfig = {
         const alignmentClasses = cn('flex', alignmentValue === 'left' && 'justify-start', alignmentValue === 'center' && 'justify-center', alignmentValue === 'right' && 'justify-end');
         // Placeholder if no image
         if (!image?.url) {
-            return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: _jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''), children: _jsx("span", { className: "text-muted-foreground", children: "No image selected" }) }) }) })] }));
+            return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+                animation: animation,
+                children: [
+                    visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                        children: visibilityCSS
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: wrapperClass,
+                        style: Object.keys(style).length > 0 ? style : undefined,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: alignmentClasses,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "text-muted-foreground",
+                                    children: "No image selected"
+                                })
+                            })
+                        })
+                    })
+                ]
+            });
         }
         // For auto aspect ratio, use natural image dimensions
         // For fixed aspect ratios, use absolute positioning within aspect-ratio container
         // Note: When using aspect ratios in Flex, set a min-width via Dimensions
-        const imageElement = aspectRatio === 'auto' ? (_jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "w-full h-auto object-cover" }) })) : (_jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]), children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "absolute inset-0 w-full h-full object-cover" }) }));
-        const content = link ? (_jsx("a", { href: link, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, className: "block transition-opacity hover:opacity-90", children: imageElement })) : (imageElement);
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: content }) })] }));
-    },
+        const imageElement = aspectRatio === 'auto' ? /*#__PURE__*/ _jsx("div", {
+            className: "relative overflow-hidden rounded-lg w-full",
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "w-full h-auto object-cover"
+            })
+        }) : /*#__PURE__*/ _jsx("div", {
+            className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]),
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "absolute inset-0 w-full h-full object-cover"
+            })
+        });
+        const content = link ? /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: openInNewTab ? '_blank' : undefined,
+            rel: openInNewTab ? 'noopener noreferrer' : undefined,
+            className: "block transition-opacity hover:opacity-90",
+            children: imageElement
+        }) : imageElement;
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                    children: visibilityCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: wrapperClass,
+                    style: Object.keys(style).length > 0 ? style : undefined,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: alignmentClasses,
+                        children: content
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Image.js.map

package/dist/components/media/Image.server.d.ts

@@ -6,9 +6,9 @@
  * Safe for use in server components.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type DimensionsValue, type BorderValue, type AnimationValue, type TransformValue, type VisibilityValue } from '../../fields/shared';
-import type { MediaReference } from '../../fields/MediaField';
-import type { Alignment } from '../../fields/AlignmentField';
+import { type PaddingValue, type DimensionsValue, type BorderValue, type AnimationValue, type TransformValue, type VisibilityValue } from '../../fields/shared.js';
+import type { MediaReference } from '../../fields/MediaField.js';
+import type { Alignment } from '../../fields/AlignmentField.js';
 export interface ImageProps {
     image: MediaReference | null;
     alt: string;
@@ -25,4 +25,3 @@ export interface ImageProps {
     visibility: VisibilityValue | null;
 }
 export declare const ImageConfig: ComponentConfig<ImageProps>;
-//# sourceMappingURL=Image.server.d.ts.map

package/dist/components/media/Image.server.js

@@ -1,6 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS, } from '../../fields/shared';
-import { AnimatedWrapper } from '../AnimatedWrapper';
+/**
+ * Image Component - Server-safe Puck Configuration
+ *
+ * Standalone image block with optional link wrapper.
+ * This version contains only the render function and types - no fields.
+ * Safe for use in server components.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { aspectRatioMap, cn, marginValueToCSS, paddingValueToCSS, dimensionsValueToCSS, borderValueToCSS, transformValueToCSS, visibilityValueToCSS } from '../../fields/shared.js';
+import { AnimatedWrapper } from '../AnimatedWrapper.js';
 // Default padding with standard spacing (replaces hardcoded py-4 px-4)
 const DEFAULT_PADDING = {
     top: 16,
@@ -8,7 +14,7 @@ const DEFAULT_PADDING = {
     bottom: 16,
     left: 16,
     unit: 'px',
-    linked: true,
+    linked: true
 };
 // Simple ID generator for server-side rendering
 let idCounter = 0;
@@ -27,13 +33,13 @@ const defaultProps = {
     alignment: null,
     transform: null,
     animation: null,
-    customPadding: DEFAULT_PADDING, // Default 16px padding
-    visibility: null,
+    customPadding: DEFAULT_PADDING,
+    visibility: null
 };
 export const ImageConfig = {
     label: 'Image',
     defaultProps,
-    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility }) => {
+    render: ({ image, alt, aspectRatio, link, openInNewTab, dimensions, alignment, margin, border, transform, animation, customPadding, visibility })=>{
         // Generate unique ID for CSS targeting (server-safe)
         const uniqueId = generateUniqueId();
         const wrapperClass = `puck-image-${uniqueId}`;
@@ -41,7 +47,7 @@ export const ImageConfig = {
         const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass);
         const dimensionsStyles = dimensionsValueToCSS(dimensions);
         const style = {
-            ...dimensionsStyles,
+            ...dimensionsStyles
         };
         const marginCSS = marginValueToCSS(margin);
         if (marginCSS) {
@@ -63,14 +69,69 @@ export const ImageConfig = {
         const alignmentClasses = cn('flex', alignmentValue === 'left' && 'justify-start', alignmentValue === 'center' && 'justify-center', alignmentValue === 'right' && 'justify-end');
         // Placeholder if no image
         if (!image?.url) {
-            return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: _jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''), children: _jsx("span", { className: "text-muted-foreground", children: "No image selected" }) }) }) })] }));
+            return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+                animation: animation,
+                children: [
+                    visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                        children: visibilityCSS
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: wrapperClass,
+                        style: Object.keys(style).length > 0 ? style : undefined,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: alignmentClasses,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: cn('relative overflow-hidden rounded-lg w-full max-w-md bg-muted flex items-center justify-center min-h-[200px]', aspectRatioMap[aspectRatio] || ''),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "text-muted-foreground",
+                                    children: "No image selected"
+                                })
+                            })
+                        })
+                    })
+                ]
+            });
         }
         // For auto aspect ratio, use natural image dimensions
         // For fixed aspect ratios, use absolute positioning within aspect-ratio container
         // Note: When using aspect ratios in Flex, set a min-width via Dimensions
-        const imageElement = aspectRatio === 'auto' ? (_jsx("div", { className: "relative overflow-hidden rounded-lg w-full", children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "w-full h-auto object-cover" }) })) : (_jsx("div", { className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]), children: _jsx("img", { src: image.url, alt: alt || image.alt || '', className: "absolute inset-0 w-full h-full object-cover" }) }));
-        const content = link ? (_jsx("a", { href: link, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, className: "block transition-opacity hover:opacity-90", children: imageElement })) : (imageElement);
-        return (_jsxs(AnimatedWrapper, { animation: animation, children: [visibilityCSS && _jsx("style", { children: visibilityCSS }), _jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : undefined, children: _jsx("div", { className: alignmentClasses, children: content }) })] }));
-    },
+        const imageElement = aspectRatio === 'auto' ? /*#__PURE__*/ _jsx("div", {
+            className: "relative overflow-hidden rounded-lg w-full",
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "w-full h-auto object-cover"
+            })
+        }) : /*#__PURE__*/ _jsx("div", {
+            className: cn('relative overflow-hidden rounded-lg w-full', aspectRatioMap[aspectRatio]),
+            children: /*#__PURE__*/ _jsx("img", {
+                src: image.url,
+                alt: alt || image.alt || '',
+                className: "absolute inset-0 w-full h-full object-cover"
+            })
+        });
+        const content = link ? /*#__PURE__*/ _jsx("a", {
+            href: link,
+            target: openInNewTab ? '_blank' : undefined,
+            rel: openInNewTab ? 'noopener noreferrer' : undefined,
+            className: "block transition-opacity hover:opacity-90",
+            children: imageElement
+        }) : imageElement;
+        return /*#__PURE__*/ _jsxs(AnimatedWrapper, {
+            animation: animation,
+            children: [
+                visibilityCSS && /*#__PURE__*/ _jsx("style", {
+                    children: visibilityCSS
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: wrapperClass,
+                    style: Object.keys(style).length > 0 ? style : undefined,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: alignmentClasses,
+                        children: content
+                    })
+                })
+            ]
+        });
+    }
 };
-//# sourceMappingURL=Image.server.js.map

package/dist/components/media/index.d.ts

@@ -3,5 +3,4 @@
  *
  * Image and media display components.
  */
-export { ImageConfig } from './Image';
-//# sourceMappingURL=index.d.ts.map
+export { ImageConfig } from './Image.js';

package/dist/components/media/index.js

@@ -2,6 +2,4 @@
  * Media Components
  *
  * Image and media display components.
- */
-export { ImageConfig } from './Image';
-//# sourceMappingURL=index.js.map
+ */ export { ImageConfig } from './Image.js';

package/dist/components/typography/Heading.d.ts

@@ -5,8 +5,8 @@
  * Supports custom margin for spacing control.
  */
 import type { ComponentConfig } from '@puckeditor/core';
-import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue } from '../../fields/shared';
-import { type Alignment } from '../../fields/AlignmentField';
+import { type PaddingValue, type ColorValue, type DimensionsValue, type AnimationValue } from '../../fields/shared.js';
+import { type Alignment } from '../../fields/AlignmentField.js';
 export interface HeadingProps {
     text: string;
     level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -18,4 +18,3 @@ export interface HeadingProps {
     customPadding: PaddingValue | null;
 }
 export declare const HeadingConfig: ComponentConfig;
-//# sourceMappingURL=Heading.d.ts.map