dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/hero-sections/sticky-video-hero/component.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, 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";
@@ -14,14 +16,15 @@ const StickyVideoHero = (props) => {
     description = "",
     buttons = [],
     video = "",
-    image = { src: "", alt: "" },
+    images = [{ src: "", alt: "" }],
     videoImage = { src: "", alt: "" },
     styles
   } = {
     ...StickyVideoHeroDefaults,
     ...props
   };
-  const variant = (styles == null ? void 0 : styles.variant) ?? "centered";
+  const image = images == null ? void 0 : images[0];
+  const { className: sectionClassName, style: sectionStyle, css, variant = "centered" } = styles ?? {};
   if (variant === "parallax-bg") {
     return /* @__PURE__ */ jsx(
       ParallaxBgVariant,
@@ -31,7 +34,10 @@ const StickyVideoHero = (props) => {
         buttons,
         video,
         image,
-        videoImage
+        videoImage,
+        sectionClassName,
+        sectionStyle,
+        css
       }
     );
   }
@@ -42,7 +48,10 @@ const StickyVideoHero = (props) => {
       description,
       buttons,
       video,
-      image
+      image,
+      sectionClassName,
+      sectionStyle,
+      css
     }
   );
 };
@@ -51,16 +60,23 @@ const CenteredVariant = ({
   description,
   buttons,
   video,
-  image
+  image,
+  sectionClassName,
+  sectionStyle,
+  css
 }) => {
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
   const halfViewportHeight = typeof window !== "undefined" ? window.innerHeight * 0.5 : 100;
-  const { scrollY } = useScroll();
+  const { scrollY } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
   const contentMotion = {
     scale: useTransform(scrollY, [0, halfViewportHeight], [1, 0.95]),
     opacity: useTransform(scrollY, [0, halfViewportHeight], [1, 0])
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%]", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-[300vh] flex-col", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: cn("px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-[300vh] flex-col", children: [
     /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -112,10 +128,17 @@ const ParallaxBgVariant = ({
   buttons,
   video,
   image,
-  videoImage
+  videoImage,
+  sectionClassName,
+  sectionStyle,
+  css
 }) => {
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
-  const { scrollYProgress } = useScroll();
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
   const containerMotion = {
     y: useTransform(scrollYProgress, [0, 0.4], ["0vh", "-5vh"]),
     width: useTransform(scrollYProgress, [0, 0.4], ["90%", "100%"]),
@@ -127,14 +150,14 @@ const ParallaxBgVariant = ({
   const videoDialogTranslate = {
     y: useTransform(scrollYProgress, [0.3, 0.4], ["0%", "200%"])
   };
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative flex h-[150vh] flex-col items-center", children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative flex h-[150vh] flex-col items-center", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsxs(
       motion.div,
       {
         className: "sticky top-[5vh] z-10 mb-[-5vh] mt-[5vh] flex h-[90vh] w-[90%] flex-col items-start justify-center overflow-hidden",
         style: containerMotion,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container relative z-10 max-w-md", children: [
+          /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs("div", { className: "container relative z-10 max-w-md", children: [
             /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold text-text-alternative md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
             /* @__PURE__ */ jsx("p", { className: "text-text-alternative md:text-md", children: description }),
             /* @__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)) })
@@ -183,10 +206,10 @@ const StickyVideoHeroDefaults = {
   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"
-  },
+  }],
   videoImage: {
     src: "https://picsum.photos/seed/hero-video/1200/800",
     alt: "Relume placeholder image"

package/dist/components/puck-block/hero-sections/sticky-video-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";
@@ -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;
+            };
         };
         videoImage: {
             type: "object";
@@ -116,6 +124,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.";
+                    };
+                };
                 variant: {
                     readonly type: "radio";
                     readonly label: "Variant";

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

@@ -1,21 +1,23 @@
 import { StickyVideoHero, StickyVideoHeroDefaults } 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 { imageField, 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,
     video: { type: "text" },
-    image: imageField,
+    images: imagesField,
     videoImage: imageField,
     styles: {
       type: "object",
       label: "Styles",
       objectFields: {
-        variant: heroStyleFields.variant
+        variant: heroStyleFields.variant,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -5,13 +5,16 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../shadcn/tabs.j
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { AnimatePresence, motion } from "framer-motion";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const TabHero = (props) => {
-  const { defaultTabValue, tabs } = {
+  const { defaultTabValue, tabs, styles } = {
     ...TabHeroDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [activeTab, setActiveTab] = useState(defaultTabValue);
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative min-h-screen", children: /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative min-h-screen", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
     /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: tabs.content.map(
       (content, index) => content.value === activeTab && /* @__PURE__ */ jsx(
         TabsContent,
@@ -55,7 +58,7 @@ const TabHero = (props) => {
 };
 const TabContentBlock = ({ ...content }) => {
   return /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col items-center justify-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs(
       motion.div,
       {
         className: "relative z-10 mx-auto max-w-lg text-center",

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

@@ -52,6 +52,34 @@ declare const conf: {
                 };
             };
         };
+        styles: {
+            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.";
+                    };
+                };
+            };
+        };
     };
     defaultProps: TabHeroProps;
     render: (props: TabHeroProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 import { TabHero, TabHeroDefaults } from "./component.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     defaultTabValue: { type: "text" },
@@ -31,6 +32,11 @@ const conf = {
           }
         }
       }
+    },
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: { ...sectionWrapperFields }
     }
   },
   defaultProps: TabHeroDefaults,

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

@@ -1,9 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useScroll, useTransform, motion } from "framer-motion";
 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";
 const ThreeImageParallaxHero = (props) => {
   const {
     heading,
@@ -17,14 +21,28 @@ const ThreeImageParallaxHero = (props) => {
     ...ThreeImageParallaxHeroDefaults,
     ...props
   };
-  const { textAlign = "left", responsive = false } = { ...ThreeImageParallaxHeroDefaults.styles, ...styles };
-  const { scrollYProgress } = useScroll();
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textAlign = "left",
+    responsive = false
+  } = { ...ThreeImageParallaxHeroDefaults.styles, ...styles };
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
   const isMobile = useMediaQuery("(max-width: 767px)");
   const isTablet = useMediaQuery("(max-width: 991px)");
   const isCenter = textAlign === "center";
   const fixedLeftY = useTransform(scrollYProgress, [0, 1], ["-15.444%", "0%"]);
   const fixedCenterY = useTransform(scrollYProgress, [0, 1], ["15.333%", "0%"]);
-  const fixedRightY = useTransform(scrollYProgress, [0, 0.5], ["11.333%", "-20%"]);
+  const fixedRightY = useTransform(
+    scrollYProgress,
+    [0, 0.5],
+    ["11.333%", "-20%"]
+  );
   const responsiveLeftY = useTransform(
     scrollYProgress,
     [0, 1],
@@ -49,51 +67,91 @@ const ThreeImageParallaxHero = (props) => {
   const rightImageTranslate = {
     y: responsive ? responsiveRightY : fixedRightY
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-    /* @__PURE__ */ jsx("div", { className: "rb-12 mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: isCenter ? "mx-auto w-full max-w-lg text-center" : "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 }),
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      ref: sectionRef,
+      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 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: isCenter ? "mx-auto w-full max-w-lg text-center" : "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 }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: isCenter ? "mt-6 flex items-center justify-center gap-4 md:mt-8" : "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
+                  ))
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center gap-6 sm:gap-8 md:gap-0", children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute bottom-0 left-0 z-10 w-2/5 overflow-hidden rounded-lg shadow-xl",
+              style: leftImageTranslate,
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: imageLeft.src,
+                  alt: imageLeft.alt,
+                  className: "aspect-square size-full object-cover"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "mx-[10%] mb-[10%] w-1/2 overflow-hidden rounded-lg shadow-xl",
+              style: centerImageTranslate,
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: imageCenter.src,
+                  alt: imageCenter.alt,
+                  className: "aspect-square size-full object-cover"
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsx(
-            "div",
+            motion.div,
             {
-              className: isCenter ? "mt-6 flex items-center justify-center gap-4 md:mt-8" : "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))
+              className: "absolute right-0 top-[10%] w-2/5 overflow-hidden rounded-lg shadow-xl",
+              style: rightImageTranslate,
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  src: imageRight.src,
+                  alt: imageRight.alt,
+                  className: "aspect-[4/3] size-full object-cover"
+                }
+              )
             }
           )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center gap-6 sm:gap-8 md:gap-0", children: [
-      /* @__PURE__ */ jsx(motion.div, { className: "absolute bottom-0 left-0 z-10 w-2/5", style: leftImageTranslate, children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: imageLeft.src,
-          alt: imageLeft.alt,
-          className: "aspect-square size-full object-cover"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(motion.div, { className: "mx-[10%] mb-[10%] w-1/2", style: centerImageTranslate, children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: imageCenter.src,
-          alt: imageCenter.alt,
-          className: "aspect-square size-full object-cover"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(motion.div, { className: "absolute right-0 top-[10%] w-2/5", style: rightImageTranslate, children: /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: imageRight.src,
-          alt: imageRight.alt,
-          className: "aspect-[4/3] size-full object-cover"
-        }
-      ) })
-    ] })
-  ] }) });
+        ] })
+      ] })
+    }
+  );
 };
 const ThreeImageParallaxHeroDefaults = {
   heading: "Long heading is what you see here in this header section",

package/dist/components/puck-block/hero-sections/three-image-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";
@@ -121,6 +121,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/three-image-parallax-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,
@@ -15,7 +16,8 @@ const conf = {
       type: "object",
       objectFields: {
         textAlign: heroStyleFields.textAlign,
-        responsive: heroStyleFields.responsive
+        responsive: heroStyleFields.responsive,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/hero-sections/vertical-gallery-hero/component.js

@@ -2,21 +2,48 @@
 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 VerticalGalleryHero = (props) => {
-  const { heading, description, buttons = [], images = [] } = {
+  const {
+    heading,
+    description,
+    buttons = [],
+    images = [],
+    styles
+  } = {
     ...VerticalGalleryHeroDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
-      className: "grid grid-cols-1 gap-y-16 pt-16 md:grid-flow-row md:pt-24 lg:grid-flow-col lg:grid-cols-2 lg:items-center lg:pt-0",
+      className: cn(
+        "grid grid-cols-1 gap-y-16 pt-16 md:grid-flow-row md:pt-24 lg:grid-flow-col lg:grid-cols-2 lg:items-center lg:pt-0",
+        sectionClassName
+      ),
+      style: sectionStyle,
+      css,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mx-[5%] max-w-[40rem] 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 }),
           /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
-          /* @__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)) })
+          /* @__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
+          )) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "h-[30rem] overflow-hidden pl-[5vw] pr-[5vw] md:h-[40rem] lg:h-screen lg:pl-0", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-x-4", children: [
           /* @__PURE__ */ jsx("div", { className: "-mt-[120%] grid size-full animate-loop-vertically columns-2 grid-cols-1 gap-4 self-center", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "grid size-full grid-cols-1 gap-4", children: /* @__PURE__ */ jsx("div", { className: "relative w-full pt-[120%]", children: /* @__PURE__ */ jsx(

package/dist/components/puck-block/hero-sections/vertical-gallery-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/zoom-grid-hero/component.js

@@ -1,25 +1,33 @@
 "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 ZoomGridHero = (props) => {
-  const { heading, description, buttons = [], images = [] } = {
+  const { heading, description, buttons = [], images = [], styles } = {
     ...ZoomGridHeroDefaults,
     ...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 opacityContent = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
   const opacityOverlay = useTransform(scrollYProgress, [0, 1], [1, 0]);
   const scale = useTransform(scrollYProgress, [0, 1], [3.2, 1]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative h-[300vh]", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 h-screen overflow-hidden", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: cn("relative h-[300vh]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 h-screen overflow-hidden", children: [
     /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "flex h-full items-center justify-center",
         style: { opacity: opacityContent },
-        children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-auto max-w-lg text-center", children: [
+        children: /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-auto max-w-lg text-center", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold text-text-alternative md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
           /* @__PURE__ */ jsx("p", { className: "text-text-alternative 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)) })