@delmaredigital/payload-puck 0.6.12 → 0.6.13

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,45 @@ 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/Section.server.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.server.js","sourceRoot":"","sources":["../../../src/components/layout/Section.server.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/layout/Section.server.tsx"],"sourcesContent":["/**\n * Section Component - Server-safe Puck Configuration\n *\n * Full-width section with two-layer architecture:\n * - Section layer (outer): Full-bleed background, border, padding, margin\n * - Content layer (inner): Constrained content area with max-width, background, border, padding\n *\n * This is a server-safe version with minimal fields (only slot for content).\n * For the full editor version with fields, use Section.tsx\n *\n * Responsive Controls:\n * - contentDimensions: Different max-width/min-height at different breakpoints\n * - sectionPadding: Different section padding at different breakpoints\n * - contentPadding: Different content padding at different breakpoints\n * - sectionMargin: Different margins at different breakpoints\n * - visibility: Show/hide at different breakpoints\n */\n\nimport type { ComponentConfig } from '@puckeditor/core'\nimport {\n  cn,\n  dimensionsValueToCSS,\n  marginValueToCSS,\n  paddingValueToCSS,\n  borderValueToCSS,\n  backgroundValueToCSS,\n  responsiveValueToCSS,\n  visibilityValueToCSS,\n  type PaddingValue,\n  type BorderValue,\n  type DimensionsValue,\n  type BackgroundValue,\n  type AnimationValue,\n  type ResponsiveValue,\n  type VisibilityValue,\n} from '../../fields/shared.js'\nimport { AnimatedWrapper } from '../AnimatedWrapper.js'\n\n// Simple ID generator for server-side rendering\nlet idCounter = 0\nfunction generateUniqueId(): string {\n  return `s${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`\n}\n\n// Default section padding - standard vertical spacing for sections\nconst DEFAULT_SECTION_PADDING: PaddingValue = {\n  top: 48,\n  right: 0,\n  bottom: 48,\n  left: 0,\n  unit: 'px',\n  linked: false,\n}\n\n// Default content dimensions - 1200px max-width centered\nconst DEFAULT_CONTENT_DIMENSIONS: DimensionsValue = {\n  mode: 'contained',\n  alignment: 'center',\n  maxWidth: { value: 1200, unit: 'px', enabled: true },\n}\n\n// Default content padding with standard horizontal spacing\nconst DEFAULT_CONTENT_PADDING: PaddingValue = {\n  top: 0,\n  right: 16,\n  bottom: 0,\n  left: 16,\n  unit: 'px',\n  linked: false,\n}\n\nexport type SemanticElement = 'section' | 'article' | 'aside' | 'nav' | 'div' | 'header' | 'footer' | 'main'\n\nexport interface SectionProps {\n  id: string\n  content: unknown\n  semanticElement: SemanticElement\n  // Section layer (outer, full-width)\n  sectionBackground: BackgroundValue | null\n  sectionBorder: BorderValue | null\n  sectionPadding: ResponsiveValue<PaddingValue> | PaddingValue | null\n  sectionMargin: ResponsiveValue<PaddingValue> | PaddingValue | null\n  // Content layer (inner, constrained)\n  contentDimensions: ResponsiveValue<DimensionsValue> | DimensionsValue | null\n  contentBackground: BackgroundValue | null\n  contentBorder: BorderValue | null\n  contentPadding: ResponsiveValue<PaddingValue> | PaddingValue | null\n  // Other\n  animation: AnimationValue | null\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: SectionProps = {\n  id: '',\n  content: [],\n  semanticElement: 'section',\n  // Section layer defaults - padding gives sections proper spacing\n  sectionBackground: null,\n  sectionBorder: null,\n  sectionPadding: { xs: DEFAULT_SECTION_PADDING },\n  sectionMargin: null,\n  // Content layer defaults - 1200px max-width so two-layer design is immediately visible\n  contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },\n  contentBackground: null,\n  contentBorder: null,\n  contentPadding: { xs: DEFAULT_CONTENT_PADDING },\n  // Other\n  animation: null,\n  visibility: null,\n}\n\nexport const SectionConfig: ComponentConfig = {\n  label: 'Section',\n  fields: {\n    content: { type: 'slot' },\n  },\n  defaultProps,\n  render: ({\n    id,\n    content: Content,\n    semanticElement = 'section',\n    sectionBackground,\n    sectionBorder,\n    sectionPadding,\n    sectionMargin,\n    contentDimensions,\n    contentBackground,\n    contentBorder,\n    contentPadding,\n    animation,\n    visibility,\n  }) => {\n    // Dynamic element based on semanticElement prop\n    const Wrapper = semanticElement as React.ElementType\n    // Generate unique IDs for CSS targeting (server-safe)\n    const uniqueId = generateUniqueId()\n    const sectionClass = `puck-section-${uniqueId}`\n    const contentClass = `puck-section-content-${uniqueId}`\n\n    // Collect all media query CSS\n    const mediaQueries: string[] = []\n\n    // === Section layer styles (outer, full-width) ===\n    const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground)\n    const sectionStyles: React.CSSProperties = {\n      ...sectionBackgroundStyles,\n    }\n\n    // Section border\n    const sectionBorderStyles = borderValueToCSS(sectionBorder)\n    if (sectionBorderStyles) {\n      Object.assign(sectionStyles, sectionBorderStyles)\n    }\n\n    // Section padding with responsive support\n    const sectionPaddingResult = responsiveValueToCSS(\n      sectionPadding,\n      (v) => ({ padding: paddingValueToCSS(v) }),\n      sectionClass\n    )\n    Object.assign(sectionStyles, sectionPaddingResult.baseStyles)\n    if (sectionPaddingResult.mediaQueryCSS) {\n      mediaQueries.push(sectionPaddingResult.mediaQueryCSS)\n    }\n\n    // Section margin with responsive support\n    const sectionMarginResult = responsiveValueToCSS(\n      sectionMargin,\n      (v) => ({ margin: marginValueToCSS(v) }),\n      sectionClass\n    )\n    Object.assign(sectionStyles, sectionMarginResult.baseStyles)\n    if (sectionMarginResult.mediaQueryCSS) {\n      mediaQueries.push(sectionMarginResult.mediaQueryCSS)\n    }\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, sectionClass)\n    if (visibilityCSS) {\n      mediaQueries.push(visibilityCSS)\n    }\n\n    // === Content layer styles (inner, constrained) ===\n    const contentBackgroundStyles = backgroundValueToCSS(contentBackground)\n    const contentStyles: React.CSSProperties = {\n      ...contentBackgroundStyles,\n    }\n\n    // Content dimensions with responsive support\n    const contentDimensionsResult = responsiveValueToCSS(\n      contentDimensions,\n      dimensionsValueToCSS,\n      contentClass\n    )\n    Object.assign(contentStyles, contentDimensionsResult.baseStyles)\n    if (contentDimensionsResult.mediaQueryCSS) {\n      mediaQueries.push(contentDimensionsResult.mediaQueryCSS)\n    }\n\n    // Check if minHeight is set - if so, we need flex layout to make slot expand\n    const hasMinHeight = (() => {\n      if (!contentDimensions) return false\n      // Check if it's a responsive value\n      if (typeof contentDimensions === 'object' && 'xs' in contentDimensions) {\n        const responsiveDims = contentDimensions as ResponsiveValue<DimensionsValue>\n        return Object.values(responsiveDims).some((v) => {\n          if (!v || typeof v !== 'object') return false\n          const dim = v as DimensionsValue\n          return dim.minHeight?.enabled && dim.minHeight?.value > 0\n        })\n      }\n      // Non-responsive value\n      const dim = contentDimensions as DimensionsValue\n      return dim.minHeight?.enabled && dim.minHeight?.value > 0\n    })()\n\n    // Add flex layout when minHeight is set to make content stretch\n    if (hasMinHeight) {\n      contentStyles.display = 'flex'\n      contentStyles.flexDirection = 'column'\n    }\n\n    // Content border\n    const contentBorderStyles = borderValueToCSS(contentBorder)\n    if (contentBorderStyles) {\n      Object.assign(contentStyles, contentBorderStyles)\n    }\n\n    // Content padding with responsive support\n    const contentPaddingResult = responsiveValueToCSS(\n      contentPadding,\n      (v) => ({ padding: paddingValueToCSS(v) }),\n      contentClass\n    )\n    Object.assign(contentStyles, contentPaddingResult.baseStyles)\n    if (contentPaddingResult.mediaQueryCSS) {\n      mediaQueries.push(contentPaddingResult.mediaQueryCSS)\n    }\n\n    const sectionClasses = cn('relative w-full', sectionClass)\n    const contentClasses = cn('relative z-10', contentClass)\n\n    // Check if we have any content styling\n    const hasContentStyles = Object.keys(contentStyles).length > 0\n\n    // Combine all media queries\n    const allMediaQueryCSS = mediaQueries.join('\\n')\n\n    // Type assertion for Puck slot content\n    const ContentSlot = Content as any\n\n    // When minHeight is set, wrap Content to ensure slot expands\n    const renderContent = () => {\n      if (hasMinHeight) {\n        return (\n          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>\n            <ContentSlot style={{ flex: 1 }} />\n          </div>\n        )\n      }\n      return <ContentSlot />\n    }\n\n    return (\n      <AnimatedWrapper animation={animation}>\n        {allMediaQueryCSS && <style>{allMediaQueryCSS}</style>}\n        <Wrapper\n          id={id || undefined}\n          className={sectionClasses}\n          style={sectionStyles}\n        >\n          {hasContentStyles ? (\n            <div className={contentClasses} style={contentStyles}>\n              {renderContent()}\n            </div>\n          ) : (\n            <ContentSlot className={contentClasses} />\n          )}\n        </Wrapper>\n      </AnimatedWrapper>\n    )\n  },\n}\n"],"names":["cn","dimensionsValueToCSS","marginValueToCSS","paddingValueToCSS","borderValueToCSS","backgroundValueToCSS","responsiveValueToCSS","visibilityValueToCSS","AnimatedWrapper","idCounter","generateUniqueId","toString","Math","random","slice","DEFAULT_SECTION_PADDING","top","right","bottom","left","unit","linked","DEFAULT_CONTENT_DIMENSIONS","mode","alignment","maxWidth","value","enabled","DEFAULT_CONTENT_PADDING","defaultProps","id","content","semanticElement","sectionBackground","sectionBorder","sectionPadding","xs","sectionMargin","contentDimensions","contentBackground","contentBorder","contentPadding","animation","visibility","SectionConfig","label","fields","type","render","Content","Wrapper","uniqueId","sectionClass","contentClass","mediaQueries","sectionBackgroundStyles","sectionStyles","sectionBorderStyles","Object","assign","sectionPaddingResult","v","padding","baseStyles","mediaQueryCSS","push","sectionMarginResult","margin","visibilityCSS","contentBackgroundStyles","contentStyles","contentDimensionsResult","hasMinHeight","responsiveDims","values","some","dim","minHeight","display","flexDirection","contentBorderStyles","contentPaddingResult","sectionClasses","contentClasses","hasContentStyles","keys","length","allMediaQueryCSS","join","ContentSlot","renderContent","div","style","flex","undefined","className"],"mappings":"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"}

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

@@ -8,7 +8,7 @@
  * - 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';

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Spacer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAA4B,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AA0CpF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAC7C,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAQD,eAAO,MAAM,YAAY,EAAE,eAoD1B,CAAA"}
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Spacer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAA4B,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAA;AA0CvF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAC7C,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAQD,eAAO,MAAM,YAAY,EAAE,eAoD1B,CAAA"}

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,18 @@ 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.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/components/layout/Spacer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/layout/Spacer.tsx"],"sourcesContent":["/**\n * Spacer Component - Puck Configuration\n *\n * Simple spacing component for adding vertical or horizontal space.\n * Uses Tailwind classes for layout and sizing from predefined options.\n *\n * Responsive Controls:\n * - visibility: Show/hide at different breakpoints\n */\n\nimport { useId } from 'react'\nimport type { ComponentConfig } from '@puckeditor/core'\nimport { cn, visibilityValueToCSS, type VisibilityValue } from '../../fields/shared.js'\nimport { createResetField } from '../../fields/ResetField.js'\nimport { createResponsiveVisibilityField } from '../../fields/ResponsiveVisibilityField.js'\n\nconst spacingOptions = [\n  { label: '8px', value: '8px' },\n  { label: '16px', value: '16px' },\n  { label: '24px', value: '24px' },\n  { label: '32px', value: '32px' },\n  { label: '48px', value: '48px' },\n  { label: '64px', value: '64px' },\n  { label: '80px', value: '80px' },\n  { label: '96px', value: '96px' },\n  { label: '128px', value: '128px' },\n]\n\n// Tailwind height classes for predefined spacing options\nconst heightMap: Record<string, string> = {\n  '8px': 'h-2',\n  '16px': 'h-4',\n  '24px': 'h-6',\n  '32px': 'h-8',\n  '48px': 'h-12',\n  '64px': 'h-16',\n  '80px': 'h-20',\n  '96px': 'h-24',\n  '128px': 'h-32',\n}\n\n// Tailwind width classes for predefined spacing options\nconst widthMap: Record<string, string> = {\n  '8px': 'w-2',\n  '16px': 'w-4',\n  '24px': 'w-6',\n  '32px': 'w-8',\n  '48px': 'w-12',\n  '64px': 'w-16',\n  '80px': 'w-20',\n  '96px': 'w-24',\n  '128px': 'w-32',\n}\n\nexport interface SpacerProps {\n  size: string\n  direction: 'vertical' | 'horizontal' | 'both'\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: SpacerProps = {\n  size: '24px',\n  direction: 'vertical',\n  visibility: null,\n}\n\nexport const SpacerConfig: ComponentConfig = {\n  label: 'Spacer',\n  fields: {\n    _reset: createResetField({ defaultProps }),\n    // Responsive visibility control\n    visibility: createResponsiveVisibilityField({ label: 'Visibility' }),\n    size: {\n      type: 'select',\n      label: 'Size',\n      options: spacingOptions,\n    },\n    direction: {\n      type: 'radio',\n      label: 'Direction',\n      options: [\n        { label: 'Vertical', value: 'vertical' },\n        { label: 'Horizontal', value: 'horizontal' },\n        { label: 'Both', value: 'both' },\n      ],\n    },\n  },\n  defaultProps,\n  render: ({ size, direction, visibility }) => {\n    // Generate unique ID for CSS targeting\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const uniqueId = useId().replace(/:/g, '')\n    const wrapperClass = `puck-spacer-${uniqueId}`\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass)\n\n    const getClasses = (): string => {\n      const heightClass = heightMap[size] || 'h-6'\n      const widthClass = widthMap[size] || 'w-6'\n\n      if (direction === 'vertical') {\n        return `block ${heightClass} w-full`\n      }\n      if (direction === 'horizontal') {\n        return `inline-block ${widthClass} h-full`\n      }\n      // both\n      return `block ${heightClass} ${widthClass}`\n    }\n\n    return (\n      <>\n        {visibilityCSS && <style>{visibilityCSS}</style>}\n        <div className={cn(getClasses(), wrapperClass)} aria-hidden=\"true\" />\n      </>\n    )\n  },\n}\n"],"names":["useId","cn","visibilityValueToCSS","createResetField","createResponsiveVisibilityField","spacingOptions","label","value","heightMap","widthMap","defaultProps","size","direction","visibility","SpacerConfig","fields","_reset","type","options","render","uniqueId","replace","wrapperClass","visibilityCSS","getClasses","heightClass","widthClass","style","div","className","aria-hidden"],"mappings":";AAAA;;;;;;;;CAQC,GAED,SAASA,KAAK,QAAQ,QAAO;AAE7B,SAASC,EAAE,EAAEC,oBAAoB,QAA8B,yBAAwB;AACvF,SAASC,gBAAgB,QAAQ,6BAA4B;AAC7D,SAASC,+BAA+B,QAAQ,4CAA2C;AAE3F,MAAMC,iBAAiB;IACrB;QAAEC,OAAO;QAAOC,OAAO;IAAM;IAC7B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAASC,OAAO;IAAQ;CAClC;AAED,yDAAyD;AACzD,MAAMC,YAAoC;IACxC,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;AACX;AAEA,wDAAwD;AACxD,MAAMC,WAAmC;IACvC,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;AACX;AAQA,MAAMC,eAA4B;IAChCC,MAAM;IACNC,WAAW;IACXC,YAAY;AACd;AAEA,OAAO,MAAMC,eAAgC;IAC3CR,OAAO;IACPS,QAAQ;QACNC,QAAQb,iBAAiB;YAAEO;QAAa;QACxC,gCAAgC;QAChCG,YAAYT,gCAAgC;YAAEE,OAAO;QAAa;QAClEK,MAAM;YACJM,MAAM;YACNX,OAAO;YACPY,SAASb;QACX;QACAO,WAAW;YACTK,MAAM;YACNX,OAAO;YACPY,SAAS;gBACP;oBAAEZ,OAAO;oBAAYC,OAAO;gBAAW;gBACvC;oBAAED,OAAO;oBAAcC,OAAO;gBAAa;gBAC3C;oBAAED,OAAO;oBAAQC,OAAO;gBAAO;aAChC;QACH;IACF;IACAG;IACAS,QAAQ,CAAC,EAAER,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAE;QACtC,uCAAuC;QACvC,sDAAsD;QACtD,MAAMO,WAAWpB,QAAQqB,OAAO,CAAC,MAAM;QACvC,MAAMC,eAAe,CAAC,YAAY,EAAEF,UAAU;QAE9C,2BAA2B;QAC3B,MAAMG,gBAAgBrB,qBAAqBW,YAAYS;QAEvD,MAAME,aAAa;YACjB,MAAMC,cAAcjB,SAAS,CAACG,KAAK,IAAI;YACvC,MAAMe,aAAajB,QAAQ,CAACE,KAAK,IAAI;YAErC,IAAIC,cAAc,YAAY;gBAC5B,OAAO,CAAC,MAAM,EAAEa,YAAY,OAAO,CAAC;YACtC;YACA,IAAIb,cAAc,cAAc;gBAC9B,OAAO,CAAC,aAAa,EAAEc,WAAW,OAAO,CAAC;YAC5C;YACA,OAAO;YACP,OAAO,CAAC,MAAM,EAAED,YAAY,CAAC,EAAEC,YAAY;QAC7C;QAEA,qBACE;;gBACGH,+BAAiB,KAACI;8BAAOJ;;8BAC1B,KAACK;oBAAIC,WAAW5B,GAAGuB,cAAcF;oBAAeQ,eAAY;;;;IAGlE;AACF,EAAC"}

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

@@ -11,7 +11,7 @@
  * - 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';

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

@@ -1 +1 @@
-{"version":3,"file":"Spacer.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Spacer.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAA4B,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAkCpF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAC7C,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAQD,eAAO,MAAM,YAAY,EAAE,eAAe,CAAC,WAAW,CAgCrD,CAAA"}
+{"version":3,"file":"Spacer.server.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Spacer.server.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAA4B,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAkCvF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAC7C,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAQD,eAAO,MAAM,YAAY,EAAE,eAAe,CAAC,WAAW,CAgCrD,CAAA"}

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,18 @@ 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/Spacer.server.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.server.js","sourceRoot":"","sources":["../../../src/components/layout/Spacer.server.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,EAAE,EAAE,oBAAoB,EAAwB,MAAM,qBAAqB,CAAA;AAEpF,gDAAgD;AAChD,IAAI,SAAS,GAAG,CAAC,CAAA;AACjB,SAAS,gBAAgB;IACvB,OAAO,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AACnF,CAAC;AAED,yDAAyD;AACzD,MAAM,SAAS,GAA2B;IACxC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,wDAAwD;AACxD,MAAM,QAAQ,GAA2B;IACvC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,MAAM;CAChB,CAAA;AAQD,MAAM,YAAY,GAAgB;IAChC,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,UAAU;IACrB,UAAU,EAAE,IAAI;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAiC;IACxD,KAAK,EAAE,QAAQ;IACf,YAAY;IACZ,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;QAC1C,qDAAqD;QACrD,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;QACnC,MAAM,YAAY,GAAG,eAAe,QAAQ,EAAE,CAAA;QAE9C,2BAA2B;QAC3B,MAAM,aAAa,GAAG,oBAAoB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;QAEpE,MAAM,UAAU,GAAG,GAAW,EAAE;YAC9B,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,KAAK,CAAA;YAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,KAAK,CAAA;YAE1C,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBAC7B,OAAO,SAAS,WAAW,SAAS,CAAA;YACtC,CAAC;YACD,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;gBAC/B,OAAO,gBAAgB,UAAU,SAAS,CAAA;YAC5C,CAAC;YACD,OAAO;YACP,OAAO,SAAS,WAAW,IAAI,UAAU,EAAE,CAAA;QAC7C,CAAC,CAAA;QAED,OAAO,CACL,8BACG,aAAa,IAAI,0BAAQ,aAAa,GAAS,EAChD,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,YAAY,CAAC,iBAAc,MAAM,GAAG,IACpE,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}
+{"version":3,"sources":["../../../src/components/layout/Spacer.server.tsx"],"sourcesContent":["/**\n * Spacer Component - Server-safe Puck Configuration\n *\n * Simple spacing component for adding vertical or horizontal space.\n * Uses Tailwind classes for layout and sizing from predefined options.\n *\n * This is a server-safe version with NO fields property.\n * For the full editor version with fields, use Spacer.tsx\n *\n * Responsive Controls:\n * - visibility: Show/hide at different breakpoints\n */\n\nimport type { ComponentConfig } from '@puckeditor/core'\nimport { cn, visibilityValueToCSS, type VisibilityValue } from '../../fields/shared.js'\n\n// Simple ID generator for server-side rendering\nlet idCounter = 0\nfunction generateUniqueId(): string {\n  return `sp${(++idCounter).toString(36)}${Math.random().toString(36).slice(2, 6)}`\n}\n\n// Tailwind height classes for predefined spacing options\nconst heightMap: Record<string, string> = {\n  '8px': 'h-2',\n  '16px': 'h-4',\n  '24px': 'h-6',\n  '32px': 'h-8',\n  '48px': 'h-12',\n  '64px': 'h-16',\n  '80px': 'h-20',\n  '96px': 'h-24',\n  '128px': 'h-32',\n}\n\n// Tailwind width classes for predefined spacing options\nconst widthMap: Record<string, string> = {\n  '8px': 'w-2',\n  '16px': 'w-4',\n  '24px': 'w-6',\n  '32px': 'w-8',\n  '48px': 'w-12',\n  '64px': 'w-16',\n  '80px': 'w-20',\n  '96px': 'w-24',\n  '128px': 'w-32',\n}\n\nexport interface SpacerProps {\n  size: string\n  direction: 'vertical' | 'horizontal' | 'both'\n  visibility: VisibilityValue | null\n}\n\nconst defaultProps: SpacerProps = {\n  size: '24px',\n  direction: 'vertical',\n  visibility: null,\n}\n\nexport const SpacerConfig: ComponentConfig<SpacerProps> = {\n  label: 'Spacer',\n  defaultProps,\n  render: ({ size, direction, visibility }) => {\n    // Generate unique ID for CSS targeting (server-safe)\n    const uniqueId = generateUniqueId()\n    const wrapperClass = `puck-spacer-${uniqueId}`\n\n    // Visibility media queries\n    const visibilityCSS = visibilityValueToCSS(visibility, wrapperClass)\n\n    const getClasses = (): string => {\n      const heightClass = heightMap[size] || 'h-6'\n      const widthClass = widthMap[size] || 'w-6'\n\n      if (direction === 'vertical') {\n        return `block ${heightClass} w-full`\n      }\n      if (direction === 'horizontal') {\n        return `inline-block ${widthClass} h-full`\n      }\n      // both\n      return `block ${heightClass} ${widthClass}`\n    }\n\n    return (\n      <>\n        {visibilityCSS && <style>{visibilityCSS}</style>}\n        <div className={cn(getClasses(), wrapperClass)} aria-hidden=\"true\" />\n      </>\n    )\n  },\n}\n"],"names":["cn","visibilityValueToCSS","idCounter","generateUniqueId","toString","Math","random","slice","heightMap","widthMap","defaultProps","size","direction","visibility","SpacerConfig","label","render","uniqueId","wrapperClass","visibilityCSS","getClasses","heightClass","widthClass","style","div","className","aria-hidden"],"mappings":"AAAA;;;;;;;;;;;CAWC;AAGD,SAASA,EAAE,EAAEC,oBAAoB,QAA8B,yBAAwB;AAEvF,gDAAgD;AAChD,IAAIC,YAAY;AAChB,SAASC;IACP,OAAO,CAAC,EAAE,EAAE,AAAC,CAAA,EAAED,SAAQ,EAAGE,QAAQ,CAAC,MAAMC,KAAKC,MAAM,GAAGF,QAAQ,CAAC,IAAIG,KAAK,CAAC,GAAG,IAAI;AACnF;AAEA,yDAAyD;AACzD,MAAMC,YAAoC;IACxC,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;AACX;AAEA,wDAAwD;AACxD,MAAMC,WAAmC;IACvC,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,SAAS;AACX;AAQA,MAAMC,eAA4B;IAChCC,MAAM;IACNC,WAAW;IACXC,YAAY;AACd;AAEA,OAAO,MAAMC,eAA6C;IACxDC,OAAO;IACPL;IACAM,QAAQ,CAAC,EAAEL,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAE;QACtC,qDAAqD;QACrD,MAAMI,WAAWd;QACjB,MAAMe,eAAe,CAAC,YAAY,EAAED,UAAU;QAE9C,2BAA2B;QAC3B,MAAME,gBAAgBlB,qBAAqBY,YAAYK;QAEvD,MAAME,aAAa;YACjB,MAAMC,cAAcb,SAAS,CAACG,KAAK,IAAI;YACvC,MAAMW,aAAab,QAAQ,CAACE,KAAK,IAAI;YAErC,IAAIC,cAAc,YAAY;gBAC5B,OAAO,CAAC,MAAM,EAAES,YAAY,OAAO,CAAC;YACtC;YACA,IAAIT,cAAc,cAAc;gBAC9B,OAAO,CAAC,aAAa,EAAEU,WAAW,OAAO,CAAC;YAC5C;YACA,OAAO;YACP,OAAO,CAAC,MAAM,EAAED,YAAY,CAAC,EAAEC,YAAY;QAC7C;QAEA,qBACE;;gBACGH,+BAAiB,KAACI;8BAAOJ;;8BAC1B,KAACK;oBAAIC,WAAWzB,GAAGoB,cAAcF;oBAAeQ,eAAY;;;;IAGlE;AACF,EAAC"}

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;

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

@@ -1 +1 @@
-{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Template.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAA;AA6B5B,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,4BAA4B;IAC5B,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,yBAAyB;IACzB,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,wBAAwB;IACxB,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,4BAA4B;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAmBD,eAAO,MAAM,cAAc,EAAE,eAiG5B,CAAA"}
+{"version":3,"file":"Template.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Template.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAOL,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,wBAAwB,CAAA;AA6B/B,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,4DAA4D;IAC5D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,4BAA4B;IAC5B,UAAU,EAAE,eAAe,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAAA;IACrE,yBAAyB;IACzB,aAAa,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAClE,wBAAwB;IACxB,MAAM,EAAE,eAAe,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,IAAI,CAAA;IAC3D,4BAA4B;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAA;CACnC;AAmBD,eAAO,MAAM,cAAc,EAAE,eAiG5B,CAAA"}