dune-react 0.0.20 → 0.0.21

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

@@ -2,20 +2,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useScroll, useSpring, 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";
 import { useRef } from "react";
 const StickyExpandHero = (props) => {
-  const { heading, description, buttons = [], image = { src: "", alt: "" } } = {
+  const { heading, description, buttons = [], images, styles } = {
     ...StickyExpandHeroDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const image = (images == null ? void 0 : images[0]) ?? { src: "", alt: "" };
   const headerRef = useRef(null);
   const isMobile = useMediaQuery("(max-width: 991px)");
-  const { scrollYProgress } = useScroll({ target: headerRef });
+  const [scrollContainerRef] = useScrollContainer(headerRef);
+  const { scrollYProgress } = useScroll({
+    target: headerRef,
+    // 自动检测滚动容器：在 Puck 编辑器 iframe 中找到真实的滚动父级
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
   const smoothScrollYProgress = useSpring(scrollYProgress, { stiffness: 300, damping: 30 });
   const width = useTransform(smoothScrollYProgress, [0, 1], ["50%", "100%"]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", ref: headerRef, className: "relative md:h-[300vh]", children: /* @__PURE__ */ jsxs("div", { className: "static top-0 grid auto-cols-fr grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:sticky lg:h-screen lg:grid-cols-2 lg:gap-y-0 lg:pt-0", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: headerRef, className: cn("md:h-[300vh]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "static top-0 grid auto-cols-fr grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:sticky lg:h-screen lg:grid-cols-2 lg:gap-y-0 lg:pt-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative mx-[5%] max-w-md 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 }),
@@ -47,10 +57,10 @@ const StickyExpandHeroDefaults = {
   heading: "Medium length hero heading goes here",
   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" }],
-  image: {
+  images: [{
     src: "https://picsum.photos/seed/hero-landscape/1200/800",
     alt: "Relume placeholder image"
-  }
+  }]
 };
 export {
   StickyExpandHero,

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

@@ -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

@@ -16,6 +16,28 @@ declare const conf: {
                     label: string;
                     arrayFields: {
                         value: {
+                            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.";
+                                };
+                            };
                             type: string;
                         };
                         text: {
@@ -40,6 +62,28 @@ declare const conf: {
                             type: string;
                             objectFields: {
                                 src: {
+                                    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.";
+                                        };
+                                    };
                                     type: string;
                                     label: string;
                                 };

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" },
@@ -10,7 +11,7 @@ const conf = {
           type: "array",
           label: "Triggers",
           arrayFields: {
-            value: { type: "text" },
+            value: { type: "text", ...sectionWrapperFields },
             text: { type: "text" }
           }
         },
@@ -24,7 +25,7 @@ const conf = {
             image: {
               type: "object",
               objectFields: {
-                src: { type: "image", label: "Image" },
+                src: { type: "image", label: "Image", ...sectionWrapperFields },
                 alt: { type: "text" }
               }
             }

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,8 +21,12 @@ 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";
@@ -49,7 +57,7 @@ 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: [
+  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",
       {

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

@@ -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,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 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 }),

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)) })

package/dist/components/puck-block/location-sections/location-1/location.d.ts

@@ -18,6 +18,9 @@ export interface LocationSectionProps {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
+        className?: string;
+        style?: Record<string, unknown>;
+        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

package/dist/components/puck-block/location-sections/location-2/location.d.ts

@@ -18,6 +18,9 @@ export interface Location2Props {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
+        className?: string;
+        style?: Record<string, unknown>;
+        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

package/dist/components/puck-block/location-sections/location-3/location.d.ts

@@ -16,6 +16,9 @@ export interface Location3Props {
     mapStyle?: "default" | "grayscale" | "dark";
     locations: LocationEntry[];
     styles?: {
+        className?: string;
+        style?: Record<string, unknown>;
+        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

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

@@ -33,6 +33,9 @@ export type LocationSectionProps = {
     contentAlign?: "left" | "right";
     columns?: "2" | "3";
     styles?: {
+        className?: string;
+        style?: React.CSSProperties;
+        css?: string;
         padding?: LocationPadding;
         sectionStyle?: LocationSectionStyle;
         backgroundColor?: string;

package/dist/components/puck-block/metrics-sections/center-media-stats/center-media-stats.js

@@ -6,6 +6,7 @@ import { CompoundImage } from "../../../puck-base/image.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";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const CenterMediaStats = (props) => {
   const {
     tagline,
@@ -19,6 +20,9 @@ const CenterMediaStats = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaPosition = "left",
     mediaType = "image",
     statsStyle = "line"
@@ -74,7 +78,7 @@ const CenterMediaStats = (props) => {
   };
   const mediaBlock = /* @__PURE__ */ jsx("div", { children: renderMedia() });
   const statsBlock = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 md:grid-cols-3 md:gap-x-8 md:gap-y-12 md:p-8 lg:grid-cols-1 lg:gap-x-0 lg:p-12", children: stats.map((stat, index) => renderStat(stat, index)) });
-  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: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/metrics-sections/center-media-stats/index.d.ts

@@ -44,6 +44,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";