@delmaredigital/payload-puck 0.1.3 → 0.2.0

package/dist/editor/index.mjs

@@ -345,6 +345,7 @@ var init_HeaderActions = __esm({
             ]
           }
         ),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 font-mono", children: "v0.2.0" }),
         documentStatus && (() => {
           const isPublished = documentStatus === "published";
           const hasUnpublishedChanges = documentStatus === "draft" && wasPublished;
@@ -870,25 +871,23 @@ function responsiveValueToCSS(value, converter, uniqueId) {
       mediaQueryCSS: ""
     };
   }
-  const mediaQueries = [];
-  let baseStyles = {};
+  const cssRules = [];
   BREAKPOINTS.forEach((bp) => {
     const bpValue = value[bp.key];
     if (bpValue === void 0) return;
     const cssProps = converter(bpValue);
     if (!cssProps) return;
+    const styleString = cssPropertiesToString(cssProps);
+    if (!styleString) return;
     if (bp.key === "xs") {
-      baseStyles = cssProps;
+      cssRules.push(`.${uniqueId} { ${styleString} }`);
     } else {
-      const styleString = cssPropertiesToString(cssProps);
-      if (styleString) {
-        mediaQueries.push(
-          `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
-        );
-      }
+      cssRules.push(
+        `@media (min-width: ${bp.minWidth}px) { .${uniqueId} { ${styleString} } }`
+      );
     }
   });
-  return { baseStyles, mediaQueryCSS: mediaQueries.join("\n") };
+  return { baseStyles: {}, mediaQueryCSS: cssRules.join("\n") };
 }
 function visibilityValueToCSS(visibility, uniqueId) {
   if (!visibility) return "";
@@ -1921,16 +1920,13 @@ var init_Container_server = __esm({
     idCounter = 0;
     defaultProps = {
       content: [],
-      background: null,
-      customPadding: null,
+      visibility: null,
       dimensions: null,
+      background: null,
       border: null,
+      padding: null,
       margin: null,
-      animation: null,
-      innerBackground: null,
-      innerPadding: null,
-      innerBorder: null,
-      visibility: null
+      animation: null
     };
     ContainerConfig = {
       label: "Container",
@@ -1940,84 +1936,86 @@ var init_Container_server = __esm({
       defaultProps,
       render: ({
         content: Content2,
-        background,
-        customPadding,
+        visibility,
         dimensions,
+        background,
         border,
+        padding,
         margin,
-        animation,
-        innerBackground,
-        innerPadding,
-        innerBorder,
-        visibility
+        animation
       }) => {
         const uniqueId = generateUniqueId();
-        const outerClass = `puck-container-outer-${uniqueId}`;
-        const innerClass = `puck-container-inner-${uniqueId}`;
+        const containerClass = `puck-container-${uniqueId}`;
         const mediaQueries = [];
-        const outerBackgroundStyles = backgroundValueToCSS(background);
-        const outerStyles = {
-          ...outerBackgroundStyles
-        };
-        const outerPaddingResult = responsiveValueToCSS(
-          customPadding,
-          (v) => ({ padding: paddingValueToCSS(v) }),
-          outerClass
-        );
-        Object.assign(outerStyles, outerPaddingResult.baseStyles);
-        if (outerPaddingResult.mediaQueryCSS) {
-          mediaQueries.push(outerPaddingResult.mediaQueryCSS);
-        }
-        const outerBorderStyles = borderValueToCSS(border);
-        if (outerBorderStyles) {
-          Object.assign(outerStyles, outerBorderStyles);
+        const containerStyles = {};
+        const backgroundStyles = backgroundValueToCSS(background);
+        if (backgroundStyles) {
+          Object.assign(containerStyles, backgroundStyles);
         }
-        const marginResult = responsiveValueToCSS(
-          margin,
-          (v) => ({ margin: marginValueToCSS(v) }),
-          outerClass
-        );
-        Object.assign(outerStyles, marginResult.baseStyles);
-        if (marginResult.mediaQueryCSS) {
-          mediaQueries.push(marginResult.mediaQueryCSS);
+        const borderStyles = borderValueToCSS(border);
+        if (borderStyles) {
+          Object.assign(containerStyles, borderStyles);
         }
-        const innerBackgroundStyles = backgroundValueToCSS(innerBackground);
-        const innerStyles = {
-          ...innerBackgroundStyles
-        };
         const dimensionsResult = responsiveValueToCSS(
           dimensions,
           dimensionsValueToCSS,
-          innerClass
+          containerClass
         );
-        Object.assign(innerStyles, dimensionsResult.baseStyles);
+        Object.assign(containerStyles, dimensionsResult.baseStyles);
         if (dimensionsResult.mediaQueryCSS) {
           mediaQueries.push(dimensionsResult.mediaQueryCSS);
         }
-        const innerPaddingResult = responsiveValueToCSS(
-          innerPadding,
+        const hasMinHeight = (() => {
+          if (!dimensions) return false;
+          if (typeof dimensions === "object" && "xs" in dimensions) {
+            const responsiveDims = dimensions;
+            return Object.values(responsiveDims).some((v) => {
+              if (!v || typeof v !== "object") return false;
+              const dim2 = v;
+              return dim2.minHeight?.enabled && dim2.minHeight?.value > 0;
+            });
+          }
+          const dim = dimensions;
+          return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+        })();
+        if (hasMinHeight) {
+          containerStyles.display = "flex";
+          containerStyles.flexDirection = "column";
+        }
+        const paddingResult = responsiveValueToCSS(
+          padding,
           (v) => ({ padding: paddingValueToCSS(v) }),
-          innerClass
+          containerClass
         );
-        Object.assign(innerStyles, innerPaddingResult.baseStyles);
-        if (innerPaddingResult.mediaQueryCSS) {
-          mediaQueries.push(innerPaddingResult.mediaQueryCSS);
+        Object.assign(containerStyles, paddingResult.baseStyles);
+        if (paddingResult.mediaQueryCSS) {
+          mediaQueries.push(paddingResult.mediaQueryCSS);
         }
-        const innerBorderStyles = borderValueToCSS(innerBorder);
-        if (innerBorderStyles) {
-          Object.assign(innerStyles, innerBorderStyles);
+        const marginResult = responsiveValueToCSS(
+          margin,
+          (v) => ({ margin: marginValueToCSS(v) }),
+          containerClass
+        );
+        Object.assign(containerStyles, marginResult.baseStyles);
+        if (marginResult.mediaQueryCSS) {
+          mediaQueries.push(marginResult.mediaQueryCSS);
         }
-        const visibilityCSS = visibilityValueToCSS(visibility, outerClass);
+        const visibilityCSS = visibilityValueToCSS(visibility, containerClass);
         if (visibilityCSS) {
           mediaQueries.push(visibilityCSS);
         }
-        const contentClasses = cn2("px-4", innerClass);
-        const hasInnerStyles = Object.keys(innerStyles).length > 0;
         const allMediaQueryCSS = mediaQueries.join("\n");
+        const hasStyles = Object.keys(containerStyles).length > 0;
         const ContentSlot = Content2;
+        const renderContent = () => {
+          if (hasMinHeight) {
+            return /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsx(ContentSlot, { style: { flex: 1 } }) });
+          }
+          return /* @__PURE__ */ jsx(ContentSlot, {});
+        };
         return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
           allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
-          /* @__PURE__ */ jsx("div", { className: outerClass, style: outerStyles, children: hasInnerStyles ? /* @__PURE__ */ jsx("div", { className: contentClasses, style: innerStyles, children: /* @__PURE__ */ jsx(ContentSlot, {}) }) : /* @__PURE__ */ jsx(ContentSlot, { className: contentClasses, style: innerStyles }) })
+          hasStyles ? /* @__PURE__ */ jsx("div", { className: containerClass, style: containerStyles, children: renderContent() }) : /* @__PURE__ */ jsx(ContentSlot, { className: containerClass })
         ] });
       }
     };
@@ -2260,21 +2258,39 @@ var init_Grid_server = __esm({
 function generateUniqueId4() {
   return `s${(++idCounter4).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
 }
-var idCounter4, defaultProps4, SectionConfig;
+var idCounter4, DEFAULT_CONTENT_DIMENSIONS, DEFAULT_CONTENT_PADDING, defaultProps4, SectionConfig;
 var init_Section_server = __esm({
   "src/components/layout/Section.server.tsx"() {
     init_shared();
     init_AnimatedWrapper();
     idCounter4 = 0;
+    DEFAULT_CONTENT_DIMENSIONS = {
+      mode: "contained",
+      alignment: "center",
+      maxWidth: { value: 1200, unit: "px", enabled: true }
+    };
+    DEFAULT_CONTENT_PADDING = {
+      top: 0,
+      right: 16,
+      bottom: 0,
+      left: 16,
+      unit: "px",
+      linked: false
+    };
     defaultProps4 = {
       id: "",
       content: [],
-      background: null,
-      fullWidth: false,
-      customPadding: null,
-      dimensions: null,
-      border: null,
-      margin: null,
+      // Section layer defaults
+      sectionBackground: null,
+      sectionBorder: null,
+      sectionPadding: null,
+      sectionMargin: null,
+      // Content layer defaults - 1200px max-width so two-layer design is immediately visible
+      contentDimensions: { xs: DEFAULT_CONTENT_DIMENSIONS },
+      contentBackground: null,
+      contentBorder: null,
+      contentPadding: { xs: DEFAULT_CONTENT_PADDING },
+      // Other
       animation: null,
       visibility: null
     };
@@ -2287,12 +2303,14 @@ var init_Section_server = __esm({
       render: ({
         id,
         content: Content2,
-        background,
-        fullWidth,
-        customPadding,
-        dimensions,
-        border,
-        margin,
+        sectionBackground,
+        sectionBorder,
+        sectionPadding,
+        sectionMargin,
+        contentDimensions,
+        contentBackground,
+        contentBorder,
+        contentPadding,
         animation,
         visibility
       }) => {
@@ -2300,53 +2318,90 @@ var init_Section_server = __esm({
         const sectionClass = `puck-section-${uniqueId}`;
         const contentClass = `puck-section-content-${uniqueId}`;
         const mediaQueries = [];
-        const backgroundStyles = backgroundValueToCSS(background);
+        const sectionBackgroundStyles = backgroundValueToCSS(sectionBackground);
         const sectionStyles = {
-          ...backgroundStyles
+          ...sectionBackgroundStyles
         };
-        const paddingResult = responsiveValueToCSS(
-          customPadding,
+        const sectionBorderStyles = borderValueToCSS(sectionBorder);
+        if (sectionBorderStyles) {
+          Object.assign(sectionStyles, sectionBorderStyles);
+        }
+        const sectionPaddingResult = responsiveValueToCSS(
+          sectionPadding,
           (v) => ({ padding: paddingValueToCSS(v) }),
           sectionClass
         );
-        Object.assign(sectionStyles, paddingResult.baseStyles);
-        if (paddingResult.mediaQueryCSS) {
-          mediaQueries.push(paddingResult.mediaQueryCSS);
-        }
-        const borderStyles = borderValueToCSS(border);
-        if (borderStyles) {
-          Object.assign(sectionStyles, borderStyles);
+        Object.assign(sectionStyles, sectionPaddingResult.baseStyles);
+        if (sectionPaddingResult.mediaQueryCSS) {
+          mediaQueries.push(sectionPaddingResult.mediaQueryCSS);
         }
-        const marginResult = responsiveValueToCSS(
-          margin,
+        const sectionMarginResult = responsiveValueToCSS(
+          sectionMargin,
           (v) => ({ margin: marginValueToCSS(v) }),
           sectionClass
         );
-        Object.assign(sectionStyles, marginResult.baseStyles);
-        if (marginResult.mediaQueryCSS) {
-          mediaQueries.push(marginResult.mediaQueryCSS);
+        Object.assign(sectionStyles, sectionMarginResult.baseStyles);
+        if (sectionMarginResult.mediaQueryCSS) {
+          mediaQueries.push(sectionMarginResult.mediaQueryCSS);
         }
         const visibilityCSS = visibilityValueToCSS(visibility, sectionClass);
         if (visibilityCSS) {
           mediaQueries.push(visibilityCSS);
         }
-        const sectionClasses = cn2("relative w-full", sectionClass);
-        const dimensionsResult = responsiveValueToCSS(
-          dimensions,
+        const contentBackgroundStyles = backgroundValueToCSS(contentBackground);
+        const contentStyles = {
+          ...contentBackgroundStyles
+        };
+        const contentDimensionsResult = responsiveValueToCSS(
+          contentDimensions,
           dimensionsValueToCSS,
           contentClass
         );
-        if (dimensionsResult.mediaQueryCSS) {
-          mediaQueries.push(dimensionsResult.mediaQueryCSS);
+        Object.assign(contentStyles, contentDimensionsResult.baseStyles);
+        if (contentDimensionsResult.mediaQueryCSS) {
+          mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
         }
-        const contentClasses = cn2(
-          "relative z-10",
-          // Only apply preset content width if no dimensions set
-          !dimensions && !fullWidth && "max-w-[1200px] mx-auto px-4",
+        const hasMinHeight = (() => {
+          if (!contentDimensions) return false;
+          if (typeof contentDimensions === "object" && "xs" in contentDimensions) {
+            const responsiveDims = contentDimensions;
+            return Object.values(responsiveDims).some((v) => {
+              if (!v || typeof v !== "object") return false;
+              const dim2 = v;
+              return dim2.minHeight?.enabled && dim2.minHeight?.value > 0;
+            });
+          }
+          const dim = contentDimensions;
+          return dim.minHeight?.enabled && dim.minHeight?.value > 0;
+        })();
+        if (hasMinHeight) {
+          contentStyles.display = "flex";
+          contentStyles.flexDirection = "column";
+        }
+        const contentBorderStyles = borderValueToCSS(contentBorder);
+        if (contentBorderStyles) {
+          Object.assign(contentStyles, contentBorderStyles);
+        }
+        const contentPaddingResult = responsiveValueToCSS(
+          contentPadding,
+          (v) => ({ padding: paddingValueToCSS(v) }),
           contentClass
         );
+        Object.assign(contentStyles, contentPaddingResult.baseStyles);
+        if (contentPaddingResult.mediaQueryCSS) {
+          mediaQueries.push(contentPaddingResult.mediaQueryCSS);
+        }
+        const sectionClasses = cn2("relative w-full", sectionClass);
+        const contentClasses = cn2("relative z-10", contentClass);
+        const hasContentStyles = Object.keys(contentStyles).length > 0;
         const allMediaQueryCSS = mediaQueries.join("\n");
         const ContentSlot = Content2;
+        const renderContent = () => {
+          if (hasMinHeight) {
+            return /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsx(ContentSlot, { style: { flex: 1 } }) });
+          }
+          return /* @__PURE__ */ jsx(ContentSlot, {});
+        };
         return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
           allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
           /* @__PURE__ */ jsx(
@@ -2355,7 +2410,7 @@ var init_Section_server = __esm({
               id: id || void 0,
               className: sectionClasses,
               style: sectionStyles,
-              children: /* @__PURE__ */ jsx(ContentSlot, { className: contentClasses, style: dimensionsResult.baseStyles })
+              children: hasContentStyles ? /* @__PURE__ */ jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() }) : /* @__PURE__ */ jsx(ContentSlot, { className: contentClasses })
             }
           )
         ] });
@@ -2604,11 +2659,19 @@ var init_Text_server = __esm({
     };
   }
 });
-var defaultProps9, RichTextConfig;
+var DEFAULT_PADDING, defaultProps9, RichTextConfig;
 var init_RichText_server = __esm({
   "src/components/typography/RichText.server.tsx"() {
     init_shared();
     init_AnimatedWrapper();
+    DEFAULT_PADDING = {
+      top: 0,
+      right: 16,
+      bottom: 0,
+      left: 16,
+      unit: "px",
+      linked: false
+    };
     defaultProps9 = {
       content: "<p>Enter your content here...</p>",
       alignment: null,
@@ -2616,7 +2679,8 @@ var init_RichText_server = __esm({
       dimensions: null,
       animation: null,
       margin: null,
-      customPadding: null
+      customPadding: DEFAULT_PADDING
+      // Default 16px horizontal padding
     };
     RichTextConfig = {
       label: "Rich Text",
@@ -2641,12 +2705,12 @@ var init_RichText_server = __esm({
         const alignmentValue = alignment ?? "left";
         const alignmentClass = alignmentMap[alignmentValue] || alignmentMap.left;
         if (!content || content === "<p></p>") {
-          return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("section", { className: cn2("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert", children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("em", { children: "No content available" }) }) }) }) });
+          return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("section", { className: cn2("relative overflow-hidden", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("em", { children: "No content available" }) }) }) }) });
         }
-        return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("section", { className: cn2("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("section", { className: cn2("relative overflow-hidden", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "prose dark:prose-invert",
+            className: "prose dark:prose-invert max-w-none",
             dangerouslySetInnerHTML: { __html: content }
           }
         ) }) });
@@ -2657,11 +2721,19 @@ var init_RichText_server = __esm({
 function generateUniqueId7() {
   return `i${(++idCounter7).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
 }
-var idCounter7, defaultProps10, ImageConfig;
+var DEFAULT_PADDING2, idCounter7, defaultProps10, ImageConfig;
 var init_Image_server = __esm({
   "src/components/media/Image.server.tsx"() {
     init_shared();
     init_AnimatedWrapper();
+    DEFAULT_PADDING2 = {
+      top: 16,
+      right: 16,
+      bottom: 16,
+      left: 16,
+      unit: "px",
+      linked: true
+    };
     idCounter7 = 0;
     defaultProps10 = {
       image: null,
@@ -2675,7 +2747,8 @@ var init_Image_server = __esm({
       alignment: null,
       transform: null,
       animation: null,
-      customPadding: null,
+      customPadding: DEFAULT_PADDING2,
+      // Default 16px padding
       visibility: null
     };
     ImageConfig = {
@@ -2715,7 +2788,7 @@ var init_Image_server = __esm({
         if (!image?.url) {
           return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
             visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
-            /* @__PURE__ */ jsx("div", { className: cn2("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn2(
@@ -2754,7 +2827,7 @@ var init_Image_server = __esm({
         ) : imageElement;
         return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
           visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
-          /* @__PURE__ */ jsx("div", { className: cn2("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: content }) })
+          /* @__PURE__ */ jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: content }) })
         ] });
       }
     };
@@ -3264,11 +3337,19 @@ var init_Button_server = __esm({
     };
   }
 });
-var defaultProps12, CardConfig;
+var DEFAULT_CONTENT_PADDING2, defaultProps12, CardConfig;
 var init_Card_server = __esm({
   "src/components/interactive/Card.server.tsx"() {
     init_shared();
     init_AnimatedWrapper();
+    DEFAULT_CONTENT_PADDING2 = {
+      top: 16,
+      right: 16,
+      bottom: 16,
+      left: 16,
+      unit: "px",
+      linked: true
+    };
     defaultProps12 = {
       image: null,
       heading: "Card Heading",
@@ -3283,12 +3364,13 @@ var init_Card_server = __esm({
       alignment: null,
       transform: null,
       animation: null,
-      customPadding: null
+      contentPadding: DEFAULT_CONTENT_PADDING2
+      // Default 16px padding
     };
     CardConfig = {
       label: "Card",
       defaultProps: defaultProps12,
-      render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, customPadding }) => {
+      render: ({ image, heading, text, link, openInNewTab, shadow, background, dimensions, alignment, margin, border, transform, animation, contentPadding }) => {
         const hasBorderRadius = border?.radius && border.radius > 0;
         const cardClasses = cn2(
           "overflow-hidden transition-all bg-card",
@@ -3324,9 +3406,10 @@ var init_Card_server = __esm({
         if (borderStyles) {
           Object.assign(cardStyle, borderStyles);
         }
-        const paddingCSS = paddingValueToCSS(customPadding);
-        if (paddingCSS) {
-          cardStyle.padding = paddingCSS;
+        const contentStyle = {};
+        const contentPaddingCSS = paddingValueToCSS(contentPadding);
+        if (contentPaddingCSS) {
+          contentStyle.padding = contentPaddingCSS;
         }
         const cardContent = /* @__PURE__ */ jsxs("div", { className: cardClasses, style: cardStyle, children: [
           image?.url ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -3337,7 +3420,7 @@ var init_Card_server = __esm({
               className: "w-full h-full object-cover"
             }
           ) }) : /* @__PURE__ */ jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "No image" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
             heading && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading }),
             text && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: text })
           ] })
@@ -3360,11 +3443,19 @@ var init_Card_server = __esm({
     };
   }
 });
-var defaultProps13, DividerConfig;
+var DEFAULT_PADDING3, defaultProps13, DividerConfig;
 var init_Divider_server = __esm({
   "src/components/interactive/Divider.server.tsx"() {
     init_shared();
     init_AnimatedWrapper();
+    DEFAULT_PADDING3 = {
+      top: 0,
+      right: 16,
+      bottom: 0,
+      left: 16,
+      unit: "px",
+      linked: false
+    };
     defaultProps13 = {
       style: "solid",
       color: null,
@@ -3372,7 +3463,8 @@ var init_Divider_server = __esm({
       dimensions: null,
       transform: null,
       animation: null,
-      customPadding: null
+      customPadding: DEFAULT_PADDING3
+      // Default 16px horizontal padding
     };
     DividerConfig = {
       label: "Divider",
@@ -3396,7 +3488,7 @@ var init_Divider_server = __esm({
         }
         const customColor = colorValueToCSS(color);
         const hrStyle = customColor ? { borderColor: customColor } : void 0;
-        return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ jsx(
           "hr",
           {
             className: cn2(
@@ -3513,9 +3605,9 @@ function AccordionClient({
     Object.assign(style, transformStyles);
   }
   if (!items || items.length === 0) {
-    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
+    return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
   }
-  return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsx(
     AccordionItem,
     {
       item,

package/dist/fields/index.d.mts

@@ -1,5 +1,5 @@
-import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-DeNKN95N.mjs';
-export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-DeNKN95N.mjs';
+import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-X9UpCJKW.mjs';
+export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-X9UpCJKW.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { CustomField } from '@measured/puck';

package/dist/fields/index.d.ts

@@ -1,5 +1,5 @@
-import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-DeNKN95N.js';
-export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-DeNKN95N.js';
+import { C as ColorValue, P as PaddingValue, a as BorderValue, W as WidthValue, D as DimensionsValue, G as GradientValue, B as BackgroundValue, R as ResponsiveValue, V as VisibilityValue, A as AnimationValue, T as TransformValue } from '../shared-X9UpCJKW.js';
+export { _ as ANIMATION_CATEGORIES, F as AdvancedEasingFunction, J as AnimationCategory, I as AnimationOrigin, u as BREAKPOINTS, aI as BackgroundCSSResult, k as BackgroundImageValue, l as BackgroundOverlay, s as Breakpoint, j as ContentAlignment, $ as DEFAULT_ANIMATION, a2 as DEFAULT_TRANSFORM, z as DEFAULT_VISIBILITY, e as DimensionConstraint, h as DimensionsMode, f as DimensionsUnit, Z as EASING_CSS_MAP, E as EasingFunction, H as EntranceAnimation, o as GradientMask, n as GradientStop, M as MediaField, b as MediaReference, t as ResponsiveCSSResult, S as StaggerConfig, K as StaggerDirection, a0 as TransformOrigin, az as alignItemsMap, al as alignmentMap, L as animationValueToCSS, af as aspectRatioField, at as aspectRatioMap, a8 as backgroundColorField, p as backgroundValueToCSS, am as bgColorMap, ah as borderRadiusField, av as borderRadiusMap, aF as borderValueToCSS, a7 as buttonSizeField, a5 as buttonStyleField, a6 as buttonVariantField, a3 as cn, aC as colorValueToCSS, ai as columnsCountField, aw as columnsCountMap, c as createMediaField, x as cssPropertiesToString, d as dimensionsValueToCSS, ag as dividerStyleField, au as dividerStyleMap, aj as flexDirectionField, ax as flexDirectionMap, ak as flexWrapField, aB as flexWrapMap, aa as gapField, ao as gapMap, Y as generateStaggerStyles, O as getAnimationCSSVariables, r as getBackgroundImageOpacity, aH as getCustomStyleObject, Q as getDefaultEasingForAnimation, g as getDimensionsSummary, N as getEntranceAnimationStyles, U as getRelevantIntensityControls, X as getStaggerDelay, q as gradientValueToCSS, aJ as hasCustomStyles, ad as headingLevelField, ar as headingLevelMap, i as isLegacyWidthValue, v as isResponsiveValue, ay as justifyContentMap, aK as layoutComponentsDisallow, aE as marginValueToCSS, m as migrateWidthValue, aD as paddingValueToCSS, w as responsiveValueToCSS, aA as selfAlignmentMap, ab as shadowField, ap as shadowMap, ac as spacerHeightField, aq as spacerHeightMap, a9 as textColorField, an as textColorMap, ae as textSizeField, as as textSizeMap, a1 as transformValueToCSS, a4 as visibilityField, y as visibilityValueToCSS, aG as widthValueToCSS } from '../shared-X9UpCJKW.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { CustomField } from '@measured/puck';