@delmaredigital/payload-puck 0.1.3 → 0.2.0

package/dist/components/index.mjs

@@ -544,25 +544,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") };
 }
 var DEFAULT_VISIBILITY = {
   xs: true,
@@ -1942,12 +1940,12 @@ var Checkbox = React6.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var DEFAULT_VALUE3 = {
-  mode: "contained",
+  mode: "full",
   alignment: "center",
   maxWidth: {
-    value: 1200,
+    value: 0,
     unit: "px",
-    enabled: true
+    enabled: false
   },
   advancedMode: false
 };
@@ -2174,11 +2172,13 @@ function DimensionsFieldInner({
   const handleAdvancedToggle = useCallback(() => {
     const newAdvancedMode = !advancedMode;
     setAdvancedMode(newAdvancedMode);
-    onChange({
-      ...currentValue,
-      advancedMode: newAdvancedMode
-    });
-  }, [advancedMode, currentValue, onChange]);
+    if (value !== null) {
+      onChange({
+        ...currentValue,
+        advancedMode: newAdvancedMode
+      });
+    }
+  }, [advancedMode, currentValue, onChange, value]);
   const modeConfig = [
     { mode: "full", icon: MoveHorizontal, label: "Full", title: "Full width (100%)" },
     { mode: "contained", icon: Square, label: "Contain", title: "Contained (centered with max-width)" },
@@ -4716,7 +4716,7 @@ function ResponsiveFieldInner({
 }) {
   const [activeBreakpoint, setActiveBreakpoint] = useState("xs");
   const getCurrentValue = useCallback(() => {
-    if (!value) return defaultValue ?? null;
+    if (!value) return null;
     if (activeBreakpoint === "xs") {
       return value.xs ?? defaultValue ?? null;
     }
@@ -4738,21 +4738,35 @@ function ResponsiveFieldInner({
   const hasOverride = useCallback(
     (breakpoint) => {
       if (!value) return false;
-      if (breakpoint === "xs") return value.xs !== void 0;
+      if (breakpoint === "xs") return false;
       return value[breakpoint] !== void 0;
     },
     [value]
   );
+  const getInheritanceSource = useCallback(() => {
+    if (!value || activeBreakpoint === "xs") return null;
+    if (value[activeBreakpoint] !== void 0) return null;
+    const breakpointOrder = ["xl", "lg", "md", "sm", "xs"];
+    const activeIndex = breakpointOrder.indexOf(activeBreakpoint);
+    for (let i = activeIndex + 1; i < breakpointOrder.length; i++) {
+      const bp = breakpointOrder[i];
+      if (value[bp] !== void 0) {
+        return bp;
+      }
+    }
+    return null;
+  }, [value, activeBreakpoint]);
   const handleInnerChange = useCallback(
     (newValue) => {
       if (activeBreakpoint === "xs") {
-        if (newValue === null && defaultValue !== void 0) {
-          onChange({ ...value, xs: defaultValue });
-        } else if (newValue !== null) {
+        if (newValue === null) {
+          onChange(null);
+        } else {
           onChange({ ...value, xs: newValue });
         }
       } else {
         if (newValue === null) {
+          if (!value) return;
           const newResponsive = { ...value };
           delete newResponsive[activeBreakpoint];
           onChange(newResponsive);
@@ -4781,6 +4795,7 @@ function ResponsiveFieldInner({
   const currentValue = getCurrentValue();
   const isOverrideBreakpoint = activeBreakpoint !== "xs";
   const currentHasOverride = hasOverride(activeBreakpoint);
+  const inheritanceSource = getInheritanceSource();
   const overrideCount = value ? ["sm", "md", "lg", "xl"].filter((bp) => value[bp] !== void 0).length : 0;
   return /* @__PURE__ */ jsxs("div", { className: "puck-field space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -4822,7 +4837,11 @@ function ResponsiveFieldInner({
       /* @__PURE__ */ jsx("span", { children: activeBreakpoint === "xs" ? "Extra small screens (0-639px)" : /* @__PURE__ */ jsxs(Fragment, { children: [
         BREAKPOINTS.find((bp) => bp.key === activeBreakpoint)?.minWidth,
         "px and up",
-        !currentHasOverride && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: " (inheriting from xs)" })
+        !currentHasOverride && inheritanceSource && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+          " (inheriting from ",
+          inheritanceSource.toUpperCase(),
+          ")"
+        ] })
       ] }) }),
       isOverrideBreakpoint && currentHasOverride && !readOnly && /* @__PURE__ */ jsx(
         Button,
@@ -4974,11 +4993,6 @@ function createResponsiveVisibilityField(config = {}) {
     )
   };
 }
-var DEFAULT_DIMENSIONS = {
-  mode: "contained",
-  alignment: "center",
-  maxWidth: { value: 1200, unit: "px", enabled: true }
-};
 var DEFAULT_PADDING = {
   top: 0,
   right: 0,
@@ -4987,18 +5001,20 @@ var DEFAULT_PADDING = {
   unit: "px",
   linked: true
 };
+var DEFAULT_DIMENSIONS = {
+  mode: "full",
+  alignment: "center",
+  maxWidth: { value: 100, unit: "%", enabled: true }
+};
 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",
@@ -5007,119 +5023,113 @@ var ContainerConfig = {
     content: {
       type: "slot"
     },
-    // Responsive visibility control
+    // Visibility first
     visibility: createResponsiveVisibilityField({ label: "Visibility" }),
-    // Outer (section-level) options
-    background: createBackgroundField({ label: "Outer Background" }),
-    border: createBorderField({ label: "Outer Border" }),
-    // Responsive dimensions field
+    // Dimensions
     dimensions: createResponsiveField({
-      label: "Dimensions (Responsive)",
+      label: "Dimensions",
       innerField: (config) => createDimensionsField(config),
       defaultValue: DEFAULT_DIMENSIONS
     }),
-    animation: createAnimationField({ label: "Animation" }),
-    // Inner (content container) options
-    innerBackground: createBackgroundField({ label: "Inner Background" }),
-    innerBorder: createBorderField({ label: "Inner Border" }),
-    // Responsive inner padding
-    innerPadding: createResponsiveField({
-      label: "Inner Padding (Responsive)",
+    // Styling
+    background: createBackgroundField({ label: "Background" }),
+    border: createBorderField({ label: "Border" }),
+    // Spacing
+    padding: createResponsiveField({
+      label: "Padding",
       innerField: (config) => createPaddingField(config),
       defaultValue: DEFAULT_PADDING
     }),
-    // Spacing (grouped at bottom) - Responsive
     margin: createResponsiveField({
-      label: "Margin (Responsive)",
+      label: "Margin",
       innerField: (config) => createMarginField(config),
       defaultValue: DEFAULT_PADDING
     }),
-    customPadding: createResponsiveField({
-      label: "Outer Padding (Responsive)",
-      innerField: (config) => createPaddingField(config),
-      defaultValue: DEFAULT_PADDING
-    })
+    // Animation
+    animation: createAnimationField({ label: "Animation" })
   },
   defaultProps,
   render: ({
     content: Content3,
-    background,
-    customPadding,
+    visibility,
     dimensions,
+    background,
     border,
+    padding,
     margin,
-    animation,
-    innerBackground,
-    innerPadding,
-    innerBorder,
-    visibility
+    animation
   }) => {
     const uniqueId = useId().replace(/:/g, "");
-    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 renderContent = () => {
+      if (hasMinHeight) {
+        return /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsx(Content3, { style: { flex: 1 } }) });
+      }
+      return /* @__PURE__ */ jsx(Content3, {});
+    };
     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(Content3, {}) }) : /* @__PURE__ */ jsx(Content3, { className: contentClasses, style: innerStyles }) })
+      hasStyles ? /* @__PURE__ */ jsx("div", { className: containerClass, style: containerStyles, children: renderContent() }) : /* @__PURE__ */ jsx(Content3, { className: containerClass })
     ] });
   }
 };
@@ -5614,20 +5624,33 @@ var DEFAULT_PADDING4 = {
   unit: "px",
   linked: true
 };
-var DEFAULT_DIMENSIONS4 = {
-  mode: "full",
+var DEFAULT_CONTENT_DIMENSIONS = {
+  mode: "contained",
   alignment: "center",
-  maxWidth: { value: 100, unit: "%", enabled: true }
+  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
 };
@@ -5635,6 +5658,9 @@ var SectionConfig = {
   label: "Section",
   fields: {
     _reset: createResetField({ defaultProps: defaultProps4 }),
+    // Visibility first
+    visibility: createResponsiveVisibilityField({ label: "Visibility" }),
+    // Section ID for anchors
     id: {
       type: "text",
       label: "Section ID"
@@ -5642,49 +5668,47 @@ var SectionConfig = {
     content: {
       type: "slot"
     },
-    // Responsive visibility control
-    visibility: createResponsiveVisibilityField({ label: "Visibility" }),
-    fullWidth: {
-      type: "radio",
-      label: "Full Width Content",
-      options: [
-        { label: "Yes", value: true },
-        { label: "No", value: false }
-      ]
-    },
-    // Background
-    background: createBackgroundField({ label: "Background" }),
-    // Advanced custom options
-    border: createBorderField({ label: "Border" }),
-    // Responsive dimensions
-    dimensions: createResponsiveField({
-      label: "Dimensions (Responsive)",
-      innerField: (config) => createDimensionsField(config),
-      defaultValue: DEFAULT_DIMENSIONS4
+    // Section layer (outer)
+    sectionBackground: createBackgroundField({ label: "Section Background" }),
+    sectionBorder: createBorderField({ label: "Section Border" }),
+    sectionPadding: createResponsiveField({
+      label: "Section Padding",
+      innerField: (config) => createPaddingField(config),
+      defaultValue: DEFAULT_PADDING4
     }),
-    animation: createAnimationField({ label: "Animation" }),
-    // Spacing (grouped at bottom) - Responsive
-    margin: createResponsiveField({
-      label: "Margin (Responsive)",
+    sectionMargin: createResponsiveField({
+      label: "Section Margin",
       innerField: (config) => createMarginField(config),
       defaultValue: DEFAULT_PADDING4
     }),
-    customPadding: createResponsiveField({
-      label: "Padding (Responsive)",
+    // Content layer (inner)
+    contentDimensions: createResponsiveField({
+      label: "Content Dimensions",
+      innerField: (config) => createDimensionsField(config),
+      defaultValue: DEFAULT_CONTENT_DIMENSIONS
+    }),
+    contentBackground: createBackgroundField({ label: "Content Background" }),
+    contentBorder: createBorderField({ label: "Content Border" }),
+    contentPadding: createResponsiveField({
+      label: "Content Padding",
       innerField: (config) => createPaddingField(config),
       defaultValue: DEFAULT_PADDING4
-    })
+    }),
+    // Animation
+    animation: createAnimationField({ label: "Animation" })
   },
   defaultProps: defaultProps4,
   render: ({
     id,
     content: Content3,
-    background,
-    fullWidth,
-    customPadding,
-    dimensions,
-    border,
-    margin,
+    sectionBackground,
+    sectionBorder,
+    sectionPadding,
+    sectionMargin,
+    contentDimensions,
+    contentBackground,
+    contentBorder,
+    contentPadding,
     animation,
     visibility
   }) => {
@@ -5692,52 +5716,89 @@ 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 renderContent = () => {
+      if (hasMinHeight) {
+        return /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ jsx(Content3, { style: { flex: 1 } }) });
+      }
+      return /* @__PURE__ */ jsx(Content3, {});
+    };
     return /* @__PURE__ */ jsxs(AnimatedWrapper, { animation, children: [
       allMediaQueryCSS && /* @__PURE__ */ jsx("style", { children: allMediaQueryCSS }),
       /* @__PURE__ */ jsx(
@@ -5746,7 +5807,7 @@ var SectionConfig = {
           id: id || void 0,
           className: sectionClasses,
           style: sectionStyles,
-          children: /* @__PURE__ */ jsx(Content3, { className: contentClasses, style: dimensionsResult.baseStyles })
+          children: hasContentStyles ? /* @__PURE__ */ jsx("div", { className: contentClasses, style: contentStyles, children: renderContent() }) : /* @__PURE__ */ jsx(Content3, { className: contentClasses })
         }
       )
     ] });
@@ -6240,7 +6301,7 @@ var DEFAULT_PADDING5 = {
   unit: "px",
   linked: true
 };
-var DEFAULT_DIMENSIONS5 = {
+var DEFAULT_DIMENSIONS4 = {
   mode: "full",
   alignment: "center",
   maxWidth: { value: 100, unit: "%", enabled: true }
@@ -6267,7 +6328,7 @@ var TemplateConfig = {
     dimensions: createResponsiveField({
       label: "Dimensions (Responsive)",
       innerField: (config) => createDimensionsField(config),
-      defaultValue: DEFAULT_DIMENSIONS5
+      defaultValue: DEFAULT_DIMENSIONS4
     }),
     // Spacing (grouped at bottom) - Responsive
     margin: createResponsiveField({
@@ -6596,6 +6657,14 @@ var TextConfig = {
     ) });
   }
 };
+var DEFAULT_PADDING6 = {
+  top: 0,
+  right: 16,
+  bottom: 0,
+  left: 16,
+  unit: "px",
+  linked: false
+};
 var defaultProps10 = {
   content: "<p>Enter your content here...</p>",
   alignment: null,
@@ -6603,7 +6672,8 @@ var defaultProps10 = {
   dimensions: null,
   animation: null,
   margin: null,
-  customPadding: null
+  customPadding: DEFAULT_PADDING6
+  // Default 16px horizontal padding, visible in editor
 };
 var RichTextConfig = {
   label: "Rich Text",
@@ -6642,12 +6712,12 @@ 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 }
       }
     ) }) });
@@ -7805,7 +7875,7 @@ function RichTextRender({
     }
     return Object.keys(s).length > 0 ? s : void 0;
   }, [dimensions, margin, customPadding]);
-  return /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden", style, children: /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert", dangerouslySetInnerHTML: { __html: content } }) });
+  return /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden", style, children: /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert max-w-none", dangerouslySetInnerHTML: { __html: content } }) });
 }
 var RichTextEditorConfig = {
   label: "Rich Text",
@@ -8245,6 +8315,14 @@ function createTransformField(config) {
     )
   };
 }
+var DEFAULT_PADDING7 = {
+  top: 16,
+  right: 16,
+  bottom: 16,
+  left: 16,
+  unit: "px",
+  linked: true
+};
 var defaultProps12 = {
   image: null,
   alt: "",
@@ -8257,7 +8335,8 @@ var defaultProps12 = {
   alignment: null,
   transform: null,
   animation: null,
-  customPadding: null,
+  customPadding: DEFAULT_PADDING7,
+  // Default 16px padding, visible in editor
   visibility: null
 };
 var ImageConfig = {
@@ -8328,7 +8407,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(
@@ -8367,7 +8446,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 }) })
     ] });
   }
 };
@@ -8715,6 +8794,14 @@ var ButtonConfig = {
     );
   }
 };
+var DEFAULT_CONTENT_PADDING2 = {
+  top: 16,
+  right: 16,
+  bottom: 16,
+  left: 16,
+  unit: "px",
+  linked: true
+};
 var defaultProps14 = {
   image: null,
   heading: "Card Heading",
@@ -8729,7 +8816,8 @@ var defaultProps14 = {
   alignment: null,
   transform: null,
   animation: null,
-  customPadding: null
+  contentPadding: DEFAULT_CONTENT_PADDING2
+  // Default 16px padding, visible in editor
 };
 var CardConfig = {
   label: "Card",
@@ -8773,10 +8861,10 @@ var CardConfig = {
     animation: createAnimationField({ label: "Animation" }),
     // Spacing (grouped at bottom)
     margin: createMarginField({ label: "Margin" }),
-    customPadding: createPaddingField({ label: "Padding" })
+    contentPadding: createPaddingField({ label: "Content Padding" })
   },
   defaultProps: defaultProps14,
-  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",
@@ -8812,9 +8900,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(
@@ -8825,7 +8914,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 })
       ] })
@@ -8846,6 +8935,14 @@ var CardConfig = {
     return /* @__PURE__ */ jsx(AnimatedWrapper, { animation, children: /* @__PURE__ */ jsx("div", { className: alignmentClasses, children: /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: cardContent }) }) });
   }
 };
+var DEFAULT_PADDING8 = {
+  top: 0,
+  right: 16,
+  bottom: 0,
+  left: 16,
+  unit: "px",
+  linked: false
+};
 var defaultProps15 = {
   style: "solid",
   color: null,
@@ -8853,7 +8950,8 @@ var defaultProps15 = {
   dimensions: null,
   transform: null,
   animation: null,
-  customPadding: null
+  customPadding: DEFAULT_PADDING8
+  // Default 16px horizontal padding, visible in editor
 };
 var DividerConfig = {
   label: "Divider",
@@ -8888,7 +8986,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(
@@ -9003,9 +9101,9 @@ function AccordionRenderer({
     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,
@@ -9016,6 +9114,14 @@ function AccordionRenderer({
     index
   )) }) }) });
 }
+var DEFAULT_PADDING9 = {
+  top: 0,
+  right: 16,
+  bottom: 0,
+  left: 16,
+  unit: "px",
+  linked: false
+};
 var defaultProps16 = {
   items: [
     {
@@ -9036,7 +9142,8 @@ var defaultProps16 = {
   dimensions: null,
   transform: null,
   animation: null,
-  customPadding: null
+  customPadding: DEFAULT_PADDING9
+  // Default 16px horizontal padding, visible in editor
 };
 var AccordionConfig = {
   label: "Accordion",