dune-react 0.0.20 → 0.0.21

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

@@ -156,6 +156,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.";
+                    };
+                };
                 bordered: {
                     readonly type: "radio";
                     readonly label: "Bordered";

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

@@ -3,6 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 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 imageColumns = [
   { className: "-mt-[20%] animate-loop-vertically-top" },
   { className: "-mt-[50%] animate-loop-vertically-bottom" },
@@ -11,12 +13,13 @@ const imageColumns = [
   { className: "mt-[-20%] animate-loop-vertically-top" }
 ];
 const ColumnScrollHero = (props) => {
-  const { heading, description, buttons = [], imagesPartOne = [], imagesPartTwo = [] } = {
+  const { heading, description, buttons = [], imagesPartOne = [], imagesPartTwo = [], styles } = {
     ...ColumnScrollHeroDefaults,
     ...props
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative px-[5%]", children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[60rem] min-h-svh items-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "container py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 mx-auto max-w-lg text-center", children: [
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "flex max-h-[60rem] min-h-svh items-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "container 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/hero-sections/dual-marquee-hero/component.js

@@ -2,12 +2,15 @@
 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 DualMarqueeHero = (props) => {
-  const { heading, description, buttons = [], images = [] } = {
+  const { heading, description, buttons = [], images = [], styles } = {
     ...DualMarqueeHeroDefaults,
     ...props
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-center", children: [
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  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 flex flex-col items-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 max-w-lg text-center md:mb-18 lg:mb-20", 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/fullscreen-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.";
+                    };
+                };
                 textLayout: {
                     readonly type: "select";
                     readonly label: "Text Layout";

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

@@ -1,20 +1,30 @@
 "use client";
 import { jsxs, jsx } 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 FullscreenVideoHero = (props) => {
-  const { heading, description, buttons = [], video = "", image = { src: "", alt: "" } } = {
+  const { heading, description, buttons = [], video = "", images = [{ src: "", alt: "" }], styles } = {
     ...FullscreenVideoHeroDefaults,
     ...props
   };
+  const image = images == null ? void 0 : images[0];
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const isMobile = useMediaQuery("(max-width: 767px)");
   const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 991px)");
-  const { scrollYProgress } = useScroll();
+  const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
+  const { scrollYProgress } = useScroll(
+    scrollContainerRef.current ? { container: scrollContainerRef } : void 0
+  );
   const createTransform = (mobileValues, tabletValues, desktopValues) => useTransform(
     scrollYProgress,
     [0, 1],
@@ -27,7 +37,7 @@ const FullscreenVideoHero = (props) => {
     top: createTransform(["0%", "37.5%"], ["0%", "35%"], ["0%", "40%"]),
     left: createTransform(["0%", "25%"], ["0%", "37.5%"], ["0%", "45%"])
   };
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative flex h-[300vh] flex-col items-center", children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative flex h-[300vh] flex-col items-center", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex w-full flex-col items-center justify-center", children: [
       /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-screen w-full items-center justify-center", children: /* @__PURE__ */ jsxs(Dialog, { children: [
         /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -66,10 +76,10 @@ const FullscreenVideoHeroDefaults = {
     }
   ],
   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 {
   FullscreenVideoHero,

package/dist/components/puck-block/hero-sections/fullscreen-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: FullscreenVideoHeroProps;

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

@@ -1,14 +1,14 @@
 import { FullscreenVideoHero, FullscreenVideoHeroDefaults } 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: FullscreenVideoHeroDefaults,
   render: FullscreenVideoHero

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

@@ -1,9 +1,13 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import { useScroll, motion, useTransform } 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 GridExpandHero = (props) => {
   const {
     heading,
@@ -15,9 +19,13 @@ const GridExpandHero = (props) => {
     ...GridExpandHeroDefaults,
     ...props
   };
-  const { textAlign = "left", gridRatio } = { ...GridExpandHeroDefaults.styles, ...styles };
+  const { className: sectionClassName, style: sectionStyle, css, textAlign = "left", gridRatio } = { ...GridExpandHeroDefaults.styles, ...styles };
   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 createTransform = (mobileValues, desktopValues) => useTransform(scrollYProgress, [0, 1], isMobile ? mobileValues : desktopValues);
   const isCenter = textAlign === "center";
   const resolvedGridRatio = gridRatio ?? (isCenter ? "32%_36%_32%" : "25%_50%_25%");
@@ -49,7 +57,7 @@ const GridExpandHero = (props) => {
     x: createTransform(["0vw", "25vw"], ["0vw", "32vw"])
   };
   if (isCenter) {
-    return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative h-[250vh]", children: [
+    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative h-[250vh]", sectionClassName), style: sectionStyle, css, children: [
       /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-lg 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 }),
@@ -99,7 +107,7 @@ const GridExpandHero = (props) => {
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative h-[250vh]", children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: sectionRef, className: cn("relative h-[250vh]", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsx("div", { className: "container", 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 }),

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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;
@@ -171,10 +179,35 @@ declare const conf: {
                 mediaPosition: {
                     type: "radio";
                     label: string;
-                    options: {
+                    options: ({
+                        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.";
+                            };
+                        };
+                        label: string;
+                        value: string;
+                    } | {
                         label: string;
                         value: string;
-                    }[];
+                    })[];
                 };
                 mediaType: {
                     readonly type: "radio";

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

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

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

@@ -115,10 +115,35 @@ declare const conf: {
                 textLayout: {
                     type: "select";
                     label: string;
-                    options: {
+                    options: ({
+                        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.";
+                            };
+                        };
                         label: string;
                         value: string;
-                    }[];
+                    } | {
+                        label: string;
+                        value: string;
+                    })[];
                 };
                 imageGridRatio: {
                     readonly type: "text";

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

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { heroStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -17,7 +18,7 @@ const conf = {
           type: "select",
           label: "Text Layout",
           options: [
-            { label: "Two Column Top", value: "two-column-top" },
+            { label: "Two Column Top", value: "two-column-top", ...sectionWrapperFields },
             { label: "Left Block", value: "left-block" },
             { label: "Centered", value: "centered" }
           ]