dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/header-sections/mega-menu-navbar/index.d.ts

@@ -41,7 +41,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -111,6 +111,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 megaMenuLayout: {
                     readonly type: "select";
                     readonly label: "Mega Menu Layout";

package/dist/components/puck-block/header-sections/mega-menu-navbar/index.js

@@ -2,8 +2,9 @@ import { MegaMenuNavbar, MegaMenuNavbarDefaults } from "./mega-menu-navbar.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { headerStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { logo: imageField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, styles: { type: "object", label: "Styles", objectFields: { megaMenuLayout: headerStyleFields.megaMenuLayout } } },
+  fields: { logo: imageField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, styles: { type: "object", label: "Styles", objectFields: { megaMenuLayout: headerStyleFields.megaMenuLayout, ...sectionWrapperFields } } },
   defaultProps: MegaMenuNavbarDefaults,
   render: MegaMenuNavbar
 };

package/dist/components/puck-block/header-sections/mega-menu-navbar/mega-menu-navbar.js

@@ -5,10 +5,13 @@ import { Button } from "../../../shadcn/button.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const MegaMenuNavbar = (props) => {
-  const { logo, navLinks, buttons } = { ...MegaMenuNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, styles } = { ...MegaMenuNavbarDefaults, ...props };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "relative z-[999] flex w-full items-center justify-between border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative z-[999] flex w-full items-center justify-between border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "lg:flex", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", children: [
         /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),

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

@@ -8,6 +8,9 @@ import type { BaseImage } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
 export type { BaseImage, BaseButton };
 export interface HeaderSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     dropdownType?: "simple" | "richIcon" | "richGrouped";
     overlayContent?: "linksOnly" | "withSocial" | "withContact" | "withArticles" | "withForm";
     megaMenuLayout?: "2colGrid" | "3colGrid" | "4colGrid" | "3colSidebar" | "4colFooter" | "linksBlog";

package/dist/components/puck-block/header-sections/standard-navbar/index.d.ts

@@ -41,7 +41,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -111,6 +111,28 @@ declare const conf: {
             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.";
+                    };
+                };
                 dropdownType: {
                     readonly type: "radio";
                     readonly label: "Dropdown Type";

package/dist/components/puck-block/header-sections/standard-navbar/index.js

@@ -2,12 +2,13 @@ import { StandardNavbar, StandardNavbarDefaults } from "./standard-navbar.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { headerStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     logo: imageField,
     navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } },
     buttons: buttonsField,
-    styles: { type: "object", label: "Styles", objectFields: { dropdownType: headerStyleFields.dropdownType } }
+    styles: { type: "object", label: "Styles", objectFields: { dropdownType: headerStyleFields.dropdownType, ...sectionWrapperFields } }
   },
   defaultProps: StandardNavbarDefaults,
   render: StandardNavbar

package/dist/components/puck-block/header-sections/standard-navbar/standard-navbar.js

@@ -6,11 +6,14 @@ import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { RxChevronDown } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/rx/index.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const StandardNavbar = (props) => {
-  const { logo, navLinks, buttons } = { ...StandardNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, styles } = { ...StandardNavbarDefaults, ...props };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const isMobile = useMediaQuery("(max-width: 991px)");
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "z-[999] flex w-full items-center border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("z-[999] flex w-full items-center border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "size-full lg:flex lg:items-center lg:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center justify-between px-[5%] md:min-h-18 lg:min-h-full lg:px-0", children: [
       /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt }) }),
       /* @__PURE__ */ jsxs("button", { className: "-mr-2 flex size-12 flex-col items-center justify-center lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [

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

@@ -4,15 +4,29 @@ import { useState, useEffect } from "react";
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.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 Autoplay from "embla-carousel-autoplay";
 const CarouselHero = (props) => {
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
-  const { heading, description, buttons, images, carouselHeading, carouselDescription } = {
+  const {
+    heading,
+    description,
+    buttons,
+    images,
+    carouselHeading,
+    carouselDescription,
+    styles
+  } = {
     ...CarouselHeroDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   useEffect(() => {
     if (!api) return;
     setCurrent(api.selectedScrollSnap() + 1);
@@ -21,17 +35,31 @@ const CarouselHero = (props) => {
     });
   }, [api]);
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
-      className: "grid grid-cols-1 items-center gap-y-16 overflow-hidden pt-16 sm:overflow-auto md:pt-24 lg:grid-cols-[50%_50%] lg:gap-y-0 lg:pt-0",
+      className: cn(
+        "grid grid-cols-1 items-center gap-y-16 overflow-hidden pt-16 sm:overflow-auto md:pt-24 lg:grid-cols-[50%_50%] lg:gap-y-0 lg:pt-0",
+        sectionClassName
+      ),
+      style: sectionStyle,
+      css,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "mx-[5%] max-w-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 }),
           /* @__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: "relative clear-both h-[300px] max-h-[60rem] min-h-screen w-full bg-[#ddd] text-center", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "relative clear-both h-[300px] max-h-[60rem] min-h-screen w-full text-center", children: /* @__PURE__ */ jsxs(
           Carousel,
           {
             opts: { loop: true },
@@ -40,7 +68,14 @@ const CarouselHero = (props) => {
             className: "relative left-0 right-0 z-10 block h-full overflow-hidden whitespace-nowrap pl-4",
             children: [
               /* @__PURE__ */ jsx(CarouselContent, { children: images.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-0", children: /* @__PURE__ */ jsx("div", { className: "relative inline-block size-full whitespace-normal text-left align-top", children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
-                /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(CompoundImage, { className: "absolute size-full object-cover", src: image.src, alt: image.alt }) }),
+                /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(
+                  CompoundImage,
+                  {
+                    className: "absolute size-full object-cover",
+                    src: image.src,
+                    alt: image.alt
+                  }
+                ) }),
                 /* @__PURE__ */ jsx("div", { className: "relative bg-background-secondary px-6 pb-32 pt-6 sm:px-8 sm:pt-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
                   /* @__PURE__ */ jsx("h6", { className: "mb-1 text-md font-bold leading-[1.4] md:text-xl", children: carouselHeading }),
                   /* @__PURE__ */ jsx("p", { children: carouselDescription })
@@ -73,9 +108,18 @@ const CarouselHeroDefaults = {
   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" }],
   images: [
-    { src: "https://picsum.photos/seed/hero-square/1200/1200", alt: "Relume placeholder image 1" },
-    { src: "https://picsum.photos/seed/hero-square/1200/1200", alt: "Relume placeholder image 2" },
-    { src: "https://picsum.photos/seed/hero-square/1200/1200", alt: "Relume placeholder image 3" }
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 3"
+    }
   ],
   carouselHeading: "Short heading goes here",
   carouselDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."

package/dist/components/puck-block/hero-sections/carousel-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/centered-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";
@@ -103,7 +103,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";
@@ -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/column-scroll-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/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/dual-marquee-hero/index.d.ts

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

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

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
         video: {
             type: string;
@@ -115,7 +123,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -168,6 +176,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 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,14 +37,16 @@ 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(
-          motion.button,
+          motion.div,
           {
+            role: "button",
+            tabIndex: 0,
             style: videoDialogMotion,
-            className: "absolute flex items-center justify-center",
+            className: "absolute flex cursor-pointer items-center justify-center",
             children: [
               /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
               /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
@@ -66,10 +78,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

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