@delmaredigital/payload-puck 0.1.2 → 0.2.0

package/dist/config/index.mjs

@@ -479,25 +479,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 "";
@@ -547,16 +545,13 @@ function generateUniqueId() {
 }
 var 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
 };
 var ContainerConfig = {
   label: "Container",
@@ -566,84 +561,86 @@ var ContainerConfig = {
   defaultProps,
   render: ({
     content: Content,
-    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 = cn("px-4", innerClass);
-    const hasInnerStyles = Object.keys(innerStyles).length > 0;
     const allMediaQueryCSS = mediaQueries.join("\n");
+    const hasStyles = Object.keys(containerStyles).length > 0;
     const ContentSlot = Content;
+    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 })
     ] });
   }
 };
@@ -871,15 +868,33 @@ var idCounter4 = 0;
 function generateUniqueId4() {
   return `s${(++idCounter4).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
 }
+var DEFAULT_CONTENT_DIMENSIONS = {
+  mode: "contained",
+  alignment: "center",
+  maxWidth: { value: 1200, unit: "px", enabled: true }
+};
+var DEFAULT_CONTENT_PADDING = {
+  top: 0,
+  right: 16,
+  bottom: 0,
+  left: 16,
+  unit: "px",
+  linked: false
+};
 var 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
 };
@@ -892,12 +907,14 @@ var SectionConfig = {
   render: ({
     id,
     content: Content,
-    background,
-    fullWidth,
-    customPadding,
-    dimensions,
-    border,
-    margin,
+    sectionBackground,
+    sectionBorder,
+    sectionPadding,
+    sectionMargin,
+    contentDimensions,
+    contentBackground,
+    contentBorder,
+    contentPadding,
     animation,
     visibility
   }) => {
@@ -905,53 +922,90 @@ var SectionConfig = {
     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 = cn("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);
-    }
-    const contentClasses = cn(
-      "relative z-10",
-      // Only apply preset content width if no dimensions set
-      !dimensions && !fullWidth && "max-w-[1200px] mx-auto px-4",
+    Object.assign(contentStyles, contentDimensionsResult.baseStyles);
+    if (contentDimensionsResult.mediaQueryCSS) {
+      mediaQueries.push(contentDimensionsResult.mediaQueryCSS);
+    }
+    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 = cn("relative w-full", sectionClass);
+    const contentClasses = cn("relative z-10", contentClass);
+    const hasContentStyles = Object.keys(contentStyles).length > 0;
     const allMediaQueryCSS = mediaQueries.join("\n");
     const ContentSlot = Content;
+    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(
@@ -960,7 +1014,7 @@ var SectionConfig = {
           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 })
         }
       )
     ] });
@@ -1181,6 +1235,14 @@ var TextConfig = {
     ) });
   }
 };
+var DEFAULT_PADDING = {
+  top: 0,
+  right: 16,
+  bottom: 0,
+  left: 16,
+  unit: "px",
+  linked: false
+};
 var defaultProps9 = {
   content: "<p>Enter your content here...</p>",
   alignment: null,
@@ -1188,7 +1250,8 @@ var defaultProps9 = {
   dimensions: null,
   animation: null,
   margin: null,
-  customPadding: null
+  customPadding: DEFAULT_PADDING
+  // Default 16px horizontal padding
 };
 var RichTextConfig = {
   label: "Rich Text",
@@ -1213,17 +1276,25 @@ var RichTextConfig = {
     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: cn("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: cn("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: cn("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: cn("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 }
       }
     ) }) });
   }
 };
+var DEFAULT_PADDING2 = {
+  top: 16,
+  right: 16,
+  bottom: 16,
+  left: 16,
+  unit: "px",
+  linked: true
+};
 var idCounter7 = 0;
 function generateUniqueId7() {
   return `i${(++idCounter7).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
@@ -1240,7 +1311,8 @@ var defaultProps10 = {
   alignment: null,
   transform: null,
   animation: null,
-  customPadding: null,
+  customPadding: DEFAULT_PADDING2,
+  // Default 16px padding
   visibility: null
 };
 var ImageConfig = {
@@ -1280,7 +1352,7 @@ var ImageConfig = {
     if (!image?.url) {
       return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
         visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
-        /* @__PURE__ */ jsx("div", { className: cn("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: cn(
@@ -1319,7 +1391,7 @@ var ImageConfig = {
     ) : imageElement;
     return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
       visibilityCSS && /* @__PURE__ */ jsx("style", { children: visibilityCSS }),
-      /* @__PURE__ */ jsx("div", { className: cn("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 }) })
     ] });
   }
 };
@@ -1713,6 +1785,14 @@ var ButtonConfig = {
     );
   }
 };
+var DEFAULT_CONTENT_PADDING2 = {
+  top: 16,
+  right: 16,
+  bottom: 16,
+  left: 16,
+  unit: "px",
+  linked: true
+};
 var defaultProps12 = {
   image: null,
   heading: "Card Heading",
@@ -1727,12 +1807,13 @@ var defaultProps12 = {
   alignment: null,
   transform: null,
   animation: null,
-  customPadding: null
+  contentPadding: DEFAULT_CONTENT_PADDING2
+  // Default 16px padding
 };
 var 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 = cn(
       "overflow-hidden transition-all bg-card",
@@ -1768,9 +1849,10 @@ var CardConfig = {
     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(
@@ -1781,7 +1863,7 @@ var CardConfig = {
           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 })
       ] })
@@ -1802,6 +1884,14 @@ var CardConfig = {
     return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: cardContent }) }) });
   }
 };
+var DEFAULT_PADDING3 = {
+  top: 0,
+  right: 16,
+  bottom: 0,
+  left: 16,
+  unit: "px",
+  linked: false
+};
 var defaultProps13 = {
   style: "solid",
   color: null,
@@ -1809,7 +1899,8 @@ var defaultProps13 = {
   dimensions: null,
   transform: null,
   animation: null,
-  customPadding: null
+  customPadding: DEFAULT_PADDING3
+  // Default 16px horizontal padding
 };
 var DividerConfig = {
   label: "Divider",
@@ -1833,7 +1924,7 @@ var DividerConfig = {
     }
     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: cn(