dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/hero-sections/grid-expand-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -111,6 +111,28 @@ declare const conf: {
         styles: {
             type: "object";
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textAlign: {
                     readonly type: "radio";
                     readonly label: "Text Align";

package/dist/components/puck-block/hero-sections/grid-expand-hero/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -13,7 +14,8 @@ const conf = {
       type: "object",
       objectFields: {
         textAlign: heroStyleFields.textAlign,
-        gridRatio: heroStyleFields.gridRatio
+        gridRatio: heroStyleFields.gridRatio,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/hero-sections/horizontal-marquee-hero/component.js

@@ -2,16 +2,20 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const HorizontalMarqueeHero = (props) => {
-  const { heading, description, buttons = [], images = [] } = {
+  const { heading, description, buttons = [], images = [], styles } = {
     ...HorizontalMarqueeHeroDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
-      className: "grid grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:grid-cols-2 lg:pt-0",
+      className: cn("grid grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:grid-cols-2 lg:pt-0", sectionClassName),
+      style: sectionStyle,
+      css,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mx-[5%] sm:max-w-md md:justify-self-start lg:ml-[5vw] lg:mr-20 lg:justify-self-end", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),

package/dist/components/puck-block/hero-sections/horizontal-marquee-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

package/dist/components/puck-block/hero-sections/inline-image-hero/index.d.ts

@@ -39,7 +39,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -109,6 +109,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textAlign: {
                     readonly type: "radio";
                     readonly label: "Text Align";

package/dist/components/puck-block/hero-sections/inline-image-hero/index.js

@@ -2,6 +2,7 @@ import { InlineImageHero, InlineImageHeroDefaults } from "./inline-image-hero.js
 import { descriptionField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     headers: {
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        textAlign: heroStyleFields.textAlign
+        textAlign: heroStyleFields.textAlign,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/hero-sections/inline-image-hero/inline-image-hero.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const InlineImageHero = (props) => {
   const { headers = [], description, buttons = [], styles: rawStyles } = {
     ...InlineImageHeroDefaults,
     ...props
   };
-  const { textAlign } = rawStyles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, textAlign } = rawStyles ?? {};
   const isCenter = textAlign === "center";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: `container max-w-xl overflow-hidden${isCenter ? " text-center" : ""}`,

package/dist/components/puck-block/hero-sections/media-text-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
         video: {
             type: string;
@@ -115,7 +123,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -168,6 +176,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 mediaPosition: {
                     type: "radio";
                     label: string;

package/dist/components/puck-block/hero-sections/mouse-track-hero/component.js

@@ -3,6 +3,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
 import { useCallback } from "react";
 const imagePositions = {
@@ -44,10 +46,11 @@ const getTransformStyles = (smoothMouseX, smoothMouseY, xRange, yRange) => {
   };
 };
 const MouseTrackHero = (props) => {
-  const { heading, description, buttons = [], group1Images = [], group2Images = [] } = {
+  const { heading, description, buttons = [], group1Images = [], group2Images = [], styles } = {
     ...MouseTrackHeroDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const { smoothMouseX, smoothMouseY, handleMouseMove } = useMouseMove();
   const isMobile = useMediaQuery("(max-width: 991px)");
   const Animate = isMobile ? "div" : motion.div;
@@ -78,13 +81,14 @@ const MouseTrackHero = (props) => {
     }
   );
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
-      className: "relative flex h-svh items-center justify-center overflow-hidden lg:h-screen",
+      className: cn("relative flex h-svh items-center justify-center overflow-hidden lg:h-screen", sectionClassName),
+      style: sectionStyle,
+      css,
       onMouseMove: handleMouseMove,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 text-center", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
           /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
           /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })

package/dist/components/puck-block/hero-sections/mouse-track-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -112,6 +112,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textLayout: {
                     type: "select";
                     label: string;

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -22,7 +23,8 @@ const conf = {
             { label: "Centered", value: "centered" }
           ]
         },
-        imageGridRatio: heroStyleFields.imageGridRatio
+        imageGridRatio: heroStyleFields.imageGridRatio,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/multi-image-grid-hero.js

@@ -1,12 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const MultiImageGridHero = (props) => {
   const { heading, description, buttons, images, styles: rawStyles } = {
     ...MultiImageGridHeroDefaults,
     ...props
   };
-  const { textLayout, imageGridRatio } = rawStyles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, textLayout, imageGridRatio } = rawStyles ?? {};
   const imageAspectRatios = ["aspect-[3/2]", "aspect-[2/3]", "aspect-square", "aspect-[3/4]"];
   const imageMarginTops = ["mt-[10%]", "", "mt-[70%]", "mt-[15%]"];
   const renderButtons = () => /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) });
@@ -29,7 +31,7 @@ const MultiImageGridHero = (props) => {
     )) });
   };
   if (textLayout === "centered") {
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
       /* @__PURE__ */ jsx("div", { className: "rb-12 mb-12 flex flex-col items-center text-center md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
         /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
@@ -39,7 +41,7 @@ const MultiImageGridHero = (props) => {
     ] }) });
   }
   if (textLayout === "left-block") {
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
       /* @__PURE__ */ jsx("div", { className: "ml-[5%]", children: /* @__PURE__ */ jsxs("div", { className: "mb-12 w-full max-w-lg md:mb-18 lg:mb-20", children: [
         /* @__PURE__ */ jsx("h2", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
@@ -48,7 +50,7 @@ const MultiImageGridHero = (props) => {
       renderImages()
     ] }) });
   }
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 grid grid-cols-1 items-start gap-5 md:mb-18 md:grid-cols-2 md:gap-12 lg:mb-20 lg:gap-20", children: [
       /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: heading }),
       /* @__PURE__ */ jsxs("div", { className: "mx-[7.5%] flex flex-col justify-end md:mt-48", children: [

package/dist/components/puck-block/hero-sections/overlapping-image-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -122,6 +122,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textPosition: {
                     readonly type: "radio";
                     readonly label: "Text Position";

package/dist/components/puck-block/hero-sections/overlapping-image-hero/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -17,7 +18,8 @@ const conf = {
       objectFields: {
         textPosition: heroStyleFields.textPosition,
         imageCount: heroStyleFields.imageCount,
-        overlapStyle: heroStyleFields.overlapStyle
+        overlapStyle: heroStyleFields.overlapStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/hero-sections/overlapping-image-hero/overlapping-image-hero.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const OverlappingImageHero = (props) => {
   const {
     heading,
@@ -14,7 +16,7 @@ const OverlappingImageHero = (props) => {
     ...OverlappingImageHeroDefaults,
     ...props
   };
-  const { textPosition, imageCount, overlapStyle } = rawStyles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, textPosition, imageCount, overlapStyle } = rawStyles ?? {};
   const renderButtons = () => /* @__PURE__ */ jsx("div", { className: "mt-6 flex gap-x-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) });
   const renderOverlappingImages = () => {
     if (imageCount === 3) {
@@ -161,7 +163,7 @@ const OverlappingImageHero = (props) => {
     ] });
   };
   if (textPosition === "top") {
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
       /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 grid grid-cols-1 items-start gap-x-12 gap-y-5 md:mb-18 md:grid-cols-2 md:gap-y-8 lg:mb-20 lg:gap-x-20 lg:gap-y-16", children: [
         /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold md:text-9xl lg:text-10xl", children: heading }),
         /* @__PURE__ */ jsxs("div", { children: [
@@ -173,7 +175,7 @@ const OverlappingImageHero = (props) => {
     ] }) });
   }
   if (textPosition === "top-left") {
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-12 w-full max-w-lg md:mb-18 lg:mb-20", children: [
         /* @__PURE__ */ jsx("h2", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
@@ -182,7 +184,7 @@ const OverlappingImageHero = (props) => {
       renderOverlappingImages()
     ] }) });
   }
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-16", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-16", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),

package/dist/components/puck-block/hero-sections/parallax-images-hero/component.js

@@ -4,20 +4,27 @@ import { useScroll, useSpring, useTransform, motion } from "framer-motion";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useRef } from "react";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
 const ParallaxImagesHero = (props) => {
-  const { heading, description, buttons = [], images = [] } = {
+  const { heading, description, buttons = [], images = [], styles } = {
     ...ParallaxImagesHeroDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const transformRef = useRef(null);
-  const { scrollYProgress } = useScroll({ target: transformRef });
+  const [scrollContainerRef] = useScrollContainer(transformRef);
+  const { scrollYProgress } = useScroll({
+    target: transformRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
   const animatedScrollYProgress = useSpring(scrollYProgress, {
     bounce: 0
   });
   const yFirst = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-87.5vh"]);
   const ySecond = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-39.6vh"]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", ref: transformRef, className: "relative h-[150vh] px-[5%] md:h-[300vh]", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 h-screen overflow-hidden", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: transformRef, className: cn("relative h-[150vh] px-[5%] md:h-[300vh]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 h-screen overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-auto top-0 z-10", children: /* @__PURE__ */ jsx(motion.div, { className: "flex flex-col gap-[26vw] pt-[70vh]", style: { y: yFirst }, children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/puck-block/hero-sections/parallax-images-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

package/dist/components/puck-block/hero-sections/props.d.ts

@@ -8,6 +8,9 @@ import type { BaseImage } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
 export type { BaseImage, BaseButton };
 export interface HeroSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     mediaPosition?: "left" | "right" | "top" | "bottom";
     textAlign?: "left" | "center";
     textLayout?: "single-column" | "two-column" | "two-column-reverse" | "two-column-top" | "left-block" | "centered";
@@ -26,7 +29,6 @@ export interface HeroSectionBaseProps {
     heading: string;
     description: string;
     buttons: BaseButton[];
-    image: BaseImage;
     images: BaseImage[];
     video: string;
     inputPlaceholder: string;

package/dist/components/puck-block/hero-sections/scatter-parallax-hero/component.js

@@ -1,15 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { useScroll, useTransform, motion } from "framer-motion";
 const ScatterParallaxHero = (props) => {
-  const { heading, description, buttons = [], images = [] } = {
+  const { heading, description, buttons = [], images = [], styles } = {
     ...ScatterParallaxHeroDefaults,
     ...props
   };
-  const { scrollYProgress } = useScroll();
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
   const containerMotion = {
     y: useTransform(scrollYProgress, [0, 1], ["0%", "5%"]),
     scale: useTransform(scrollYProgress, [0, 1], [1, 0]),
@@ -34,9 +42,9 @@ const ScatterParallaxHero = (props) => {
       y: useTransform(scrollYProgress, [0, 1], ["0%", "120%"])
     }
   ];
-  return /* @__PURE__ */ jsx("section", { id: "relume", children: /* @__PURE__ */ jsxs("div", { className: "relative h-[110vh] md:h-[500vh]", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: sectionClassName, style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "relative h-[110vh] md:h-[500vh]", children: [
     /* @__PURE__ */ jsxs("div", { className: "sticky top-0 min-h-screen overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-20 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-20 text-center", children: [
         /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
         /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-x-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })

package/dist/components/puck-block/hero-sections/scatter-parallax-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";