@delmaredigital/payload-puck 0.1.3 → 0.2.0

package/dist/editor/index.js

@@ -371,6 +371,7 @@ var init_HeaderActions = __esm({
             ]
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 font-mono", children: "v0.2.0" }),
         documentStatus && (() => {
           const isPublished = documentStatus === "published";
           const hasUnpublishedChanges = documentStatus === "draft" && wasPublished;
@@ -896,25 +897,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 "";
@@ -1947,16 +1946,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",
@@ -1966,84 +1962,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__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { style: { flex: 1 } }) });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {});
+        };
         return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
           allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: outerClass, style: outerStyles, children: hasInnerStyles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, style: innerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: innerStyles }) })
+          hasStyles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClass, style: containerStyles, children: renderContent() }) : /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: containerClass })
         ] });
       }
     };
@@ -2286,21 +2284,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
     };
@@ -2313,12 +2329,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
       }) => {
@@ -2326,53 +2344,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__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { style: { flex: 1 } }) });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {});
+        };
         return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
           allMediaQueryCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: allMediaQueryCSS }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2381,7 +2436,7 @@ var init_Section_server = __esm({
               id: id || void 0,
               className: sectionClasses,
               style: sectionStyles,
-              children: /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses, style: dimensionsResult.baseStyles })
+              children: hasContentStyles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() }) : /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, { className: contentClasses })
             }
           )
         ] });
@@ -2630,11 +2685,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,
@@ -2642,7 +2705,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",
@@ -2667,12 +2731,12 @@ var init_RichText_server = __esm({
         const alignmentValue = alignment ?? "left";
         const alignmentClass = alignmentMap[alignmentValue] || alignmentMap.left;
         if (!content || content === "<p></p>") {
-          return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn2("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose dark:prose-invert", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "No content available" }) }) }) }) });
+          return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn2("relative overflow-hidden", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose dark:prose-invert max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "No content available" }) }) }) }) });
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn2("relative overflow-hidden px-4", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn2("relative overflow-hidden", alignmentClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "prose dark:prose-invert",
+            className: "prose dark:prose-invert max-w-none",
             dangerouslySetInnerHTML: { __html: content }
           }
         ) }) });
@@ -2683,11 +2747,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,
@@ -2701,7 +2773,8 @@ var init_Image_server = __esm({
       alignment: null,
       transform: null,
       animation: null,
-      customPadding: null,
+      customPadding: DEFAULT_PADDING2,
+      // Default 16px padding
       visibility: null
     };
     ImageConfig = {
@@ -2741,7 +2814,7 @@ var init_Image_server = __esm({
         if (!image?.url) {
           return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
             visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: cn2(
@@ -2780,7 +2853,7 @@ var init_Image_server = __esm({
         ) : imageElement;
         return /* @__PURE__ */ jsxRuntime.jsxs(AnimatedWrapper, { animation, children: [
           visibilityCSS && /* @__PURE__ */ jsxRuntime.jsx("style", { children: visibilityCSS }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("py-4 px-4", wrapperClass), style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: content }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: alignmentClasses, children: content }) })
         ] });
       }
     };
@@ -3290,11 +3363,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",
@@ -3309,12 +3390,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",
@@ -3350,9 +3432,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__ */ jsxRuntime.jsxs("div", { className: cardClasses, style: cardStyle, children: [
           image?.url ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3363,7 +3446,7 @@ var init_Card_server = __esm({
               className: "w-full h-full object-cover"
             }
           ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "No image" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
             heading && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: heading }),
             text && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: text })
           ] })
@@ -3386,11 +3469,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,
@@ -3398,7 +3489,8 @@ var init_Divider_server = __esm({
       dimensions: null,
       transform: null,
       animation: null,
-      customPadding: null
+      customPadding: DEFAULT_PADDING3
+      // Default 16px horizontal padding
     };
     DividerConfig = {
       label: "Divider",
@@ -3422,7 +3514,7 @@ var init_Divider_server = __esm({
         }
         const customColor = colorValueToCSS(color);
         const hrStyle = customColor ? { borderColor: customColor } : void 0;
-        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(wrapperStyle).length > 0 ? wrapperStyle : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
           "hr",
           {
             className: cn2(
@@ -3539,9 +3631,9 @@ function AccordionClient({
     Object.assign(style, transformStyles);
   }
   if (!items || items.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-muted-foreground", children: "No accordion items. Add items in the editor." }) }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4", style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: Object.keys(style).length > 0 ? style : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: accordionClasses, style: accordionStyle, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
     AccordionItem,
     {
       item,