dune-react 0.0.20 → 0.0.21

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

@@ -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/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/scroll-expand-video-hero/component.js

@@ -5,17 +5,25 @@ import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js"
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, useSpring, useTransform, motion } from "framer-motion";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 const ScrollExpandVideoHero = (props) => {
-  const { heading, description, buttons = [], video = "", image = { src: "", alt: "" } } = {
+  const { heading, description, buttons = [], video = "", images = [{ src: "", alt: "" }], styles } = {
     ...ScrollExpandVideoHeroDefaults,
     ...props
   };
+  const image = images == null ? void 0 : images[0];
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const transformRef = useRef(null);
-  const { scrollY, scrollYProgress } = useScroll({ target: transformRef });
+  const [scrollContainerRef] = useScrollContainer(transformRef);
+  const { scrollY, scrollYProgress } = useScroll({
+    target: transformRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
   const animatedScrollYProgress = useSpring(scrollYProgress, {
     bounce: 0
   });
@@ -26,11 +34,12 @@ const ScrollExpandVideoHero = (props) => {
   const height = useTransform(animatedScrollYProgress, [0.3, 1], ["80vh", "100vh"]);
   const y = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-10vh"]);
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
       ref: transformRef,
-      className: "relative flex h-[300vh] flex-col items-center",
+      className: cn("relative flex h-[300vh] flex-col items-center", sectionClassName),
+      style: sectionStyle,
+      css,
       children: [
         /* @__PURE__ */ jsx("div", { className: "px-[5%]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-0 mx-auto flex min-h-[80vh] max-w-lg items-center justify-center py-16 text-center md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(motion.div, { style: { opacity: fadeOut, scale: scaleDown }, children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
@@ -77,10 +86,10 @@ const ScrollExpandVideoHeroDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
-  image: {
+  images: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
     alt: "Relume placeholder image"
-  }
+  }]
 };
 export {
   ScrollExpandVideoHero,

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

@@ -94,14 +94,22 @@ declare const conf: {
         video: {
             type: string;
         };
-        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;
+            };
         };
     };
     defaultProps: ScrollExpandVideoHeroProps;

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

@@ -1,14 +1,14 @@
 import { ScrollExpandVideoHero, ScrollExpandVideoHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
 const conf = {
   fields: {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
     video: { type: "text" },
-    image: imageField
+    images: imagesField
   },
   defaultProps: ScrollExpandVideoHeroDefaults,
   render: ScrollExpandVideoHero

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/component.js

@@ -1,26 +1,35 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useScroll, useTransform, motion } from "framer-motion";
 import { VideoIframe } from "../../../shadcn/video-iframe.js";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.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 { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 const ScrollZoomHero = (props) => {
-  const { heading, description, buttons, image, video, styles: rawStyles } = {
+  var _a, _b, _c, _d;
+  const { heading, description, buttons, images, video, styles: rawStyles } = {
     ...ScrollZoomHeroDefaults,
     ...props
   };
-  const { mediaType } = rawStyles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, mediaType } = rawStyles ?? {};
   const isMobile = useMediaQuery("(max-width: 767px)");
-  const { scrollYProgress } = useScroll();
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
   const scaleValue = useTransform(
     scrollYProgress,
     mediaType === "play" ? [0, 0.3] : [0, 0.5],
     [0.5, 1]
   );
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative md:min-h-screen", children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: cn("relative md:min-h-screen", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 grid grid-cols-1 items-start gap-y-5 md:mb-18 md:grid-cols-2 md:gap-x-12 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", { className: "mx-[7.5%] self-end md:mt-48", children: [
@@ -35,7 +44,7 @@ const ScrollZoomHero = (props) => {
           className: "relative flex size-full origin-top-right items-center justify-center",
           style: { scale: isMobile ? 1 : scaleValue },
           children: [
-            /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
+            /* @__PURE__ */ jsx(CompoundImage, { src: ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src) ?? "", alt: ((_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt) ?? "", className: "size-full object-cover" }),
             /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
             /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
           ]
@@ -47,7 +56,7 @@ const ScrollZoomHero = (props) => {
       {
         className: "flex origin-top-right flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start",
         style: { scale: isMobile ? 1 : scaleValue },
-        children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" })
+        children: /* @__PURE__ */ jsx(CompoundImage, { src: ((_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.src) ?? "", alt: ((_d = images == null ? void 0 : images[0]) == null ? void 0 : _d.alt) ?? "", className: "size-full object-cover" })
       }
     )
   ] }) }) });
@@ -57,10 +66,10 @@ const ScrollZoomHeroDefaults = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
-  image: {
+  images: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
     alt: "Relume placeholder image"
-  },
+  }],
   styles: {
     mediaType: "play"
   }

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/index.d.ts

@@ -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;
@@ -107,6 +115,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.";
+                    };
+                };
                 mediaType: {
                     readonly type: "radio";
                     readonly label: "Media Type";

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/index.js

@@ -1,20 +1,22 @@
 import { ScrollZoomHero, ScrollZoomHeroDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
-import { imageField } from "../../../puck-core/core/props/media.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,
     description: descriptionField,
     buttons: buttonsField,
-    image: imageField,
+    images: imagesField,
     video: { type: "text" },
     styles: {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: heroStyleFields.mediaType
+        mediaType: heroStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -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;
@@ -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: {
                     readonly type: "radio";
                     readonly label: "Media Position";

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

@@ -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;
@@ -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.";
+                    };
+                };
                 textAlign: {
                     readonly type: "radio";
                     readonly label: "Text Align";