dune-react 0.0.20 → 0.0.21

package/dist/components/puck-block/footer-sections/newsletter-top-links-footer/index.d.ts

@@ -88,6 +88,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.";
+                    };
+                };
                 hasCompanyImage: {
                     readonly type: "radio";
                     readonly label: "Company Image";

package/dist/components/puck-block/footer-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 FooterSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     bordered?: boolean;
     hasCompanyImage?: boolean;
     topContentType?: "newsletter" | "cta";

package/dist/components/puck-block/gallery-sections/asymmetric-grid/asymmetric-grid.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const AsymmetricGrid = (props) => {
   const { heading, description, images, styles } = {
     ...AsymmetricGridDefaults,
     ...props
   };
-  const { gridPattern = "1large-2small" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, gridPattern = "1large-2small" } = styles ?? {};
   const is4Small = gridPattern === "1large-4small";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })

package/dist/components/puck-block/gallery-sections/asymmetric-grid/index.d.ts

@@ -33,6 +33,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.";
+                    };
+                };
                 gridPattern: {
                     readonly type: "select";
                     readonly label: "Grid Pattern";

package/dist/components/puck-block/gallery-sections/asymmetric-grid/index.js

@@ -2,6 +2,7 @@ import { AsymmetricGrid, AsymmetricGridDefaults } from "./asymmetric-grid.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -11,7 +12,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        gridPattern: galleryStyleFields.gridPattern
+        gridPattern: galleryStyleFields.gridPattern,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/fullscreen-portfolio/fullscreen-portfolio.js

@@ -4,16 +4,19 @@ import { useRef } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, useTransform, motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 const FullscreenPortfolio = (props) => {
   const { projects, styles } = {
     ...FullscreenPortfolioDefaults,
     ...props
   };
-  const { animation = "sticky-stack" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, animation = "sticky-stack" } = styles ?? {};
   if (animation === "scroll-fade") {
-    return /* @__PURE__ */ jsx(ScrollFadeVariant, { projects });
+    return /* @__PURE__ */ jsx(ScrollFadeVariant, { projects, sectionClassName, sectionStyle, css });
   }
-  return /* @__PURE__ */ jsx("section", { id: "relume", children: projects.map((project, index) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn(sectionClassName), style: sectionStyle, css, children: projects.map((project, index) => /* @__PURE__ */ jsxs(
     "div",
     {
       className: "sticky top-0 flex h-screen items-center justify-center px-[5%]",
@@ -48,11 +51,18 @@ const FullscreenPortfolio = (props) => {
   )) });
 };
 const ScrollFadeVariant = ({
-  projects
+  projects,
+  sectionClassName,
+  sectionStyle,
+  css
 }) => {
   const containerRef = useRef(null);
-  const { scrollYProgress } = useScroll({ target: containerRef });
-  return /* @__PURE__ */ jsx("section", { id: "relume", ref: containerRef, className: "relative", children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center px-[5%]", children: projects.map((project, index) => {
+  const [scrollContainerRef] = useScrollContainer(containerRef);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center px-[5%]", children: projects.map((project, index) => {
     const segmentSize = 1 / projects.length;
     const start = index * segmentSize;
     const end = start + segmentSize;

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

@@ -90,10 +90,35 @@ declare const conf: {
                 animation: {
                     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;
-                    }[];
+                    })[];
                 };
             };
         };

package/dist/components/puck-block/gallery-sections/fullscreen-portfolio/index.js

@@ -1,6 +1,7 @@
 import { FullscreenPortfolio, FullscreenPortfolioDefaults } from "./fullscreen-portfolio.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     projects: {
@@ -22,7 +23,7 @@ const conf = {
           type: "radio",
           label: "Animation",
           options: [
-            { label: "Sticky Stack", value: "sticky-stack" },
+            { label: "Sticky Stack", value: "sticky-stack", ...sectionWrapperFields },
             { label: "Scroll Fade", value: "scroll-fade" }
           ]
         }

package/dist/components/puck-block/gallery-sections/image-carousel/image-carousel.js

@@ -4,12 +4,16 @@ import { useState, useEffect } from "react";
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ImageCarousel = (props) => {
   const { heading, description, images, styles } = {
     ...ImageCarouselDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     fullscreen = false,
     headerAlign = "center",
     navStyle = "centerDots",
@@ -44,8 +48,8 @@ const ImageCarousel = (props) => {
         return "basis-full";
     }
   };
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: cn({ "h-dvh": isFullscreen }), children: [
-    /* @__PURE__ */ jsx("div", { className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn({ "h-dvh": isFullscreen }, sectionClassName), style: sectionStyle, css, children: [
+    /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn("container", {

package/dist/components/puck-block/gallery-sections/image-carousel/index.d.ts

@@ -33,6 +33,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.";
+                    };
+                };
                 fullscreen: {
                     readonly type: "radio";
                     readonly label: "Fullscreen";

package/dist/components/puck-block/gallery-sections/image-carousel/index.js

@@ -2,6 +2,7 @@ import { ImageCarousel, ImageCarouselDefaults } from "./image-carousel.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -16,7 +17,8 @@ const conf = {
         navStyle: galleryStyleFields.navStyle,
         slidesPerView: galleryStyleFields.slidesPerView,
         slideOverflow: galleryStyleFields.slideOverflow,
-        activeOpacity: galleryStyleFields.activeOpacity
+        activeOpacity: galleryStyleFields.activeOpacity,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/interactive-portfolio/index.d.ts

@@ -38,6 +38,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.";
+                    };
+                };
                 listLayout: {
                     readonly type: "select";
                     readonly label: "List Layout";

package/dist/components/puck-block/gallery-sections/interactive-portfolio/index.js

@@ -1,6 +1,7 @@
 import { InteractivePortfolio, InteractivePortfolioDefaults } from "./interactive-portfolio.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -19,7 +20,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        listLayout: galleryStyleFields.listLayout
+        listLayout: galleryStyleFields.listLayout,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const getDirection = (ev, obj) => {
   const { width: w, height: h, left, top } = obj.getBoundingClientRect();
@@ -23,7 +24,7 @@ const InteractivePortfolio = (props) => {
     ...InteractivePortfolioDefaults,
     ...props
   };
-  const { listLayout = "center" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, listLayout = "center" } = styles ?? {};
   const ref = useRef(null);
   const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
   const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -48,7 +49,7 @@ const InteractivePortfolio = (props) => {
   const translateLeftInverse = direction === "left" ? -50 : 0;
   const translateRightInverse = direction === "right" ? 50 : 0;
   if (listLayout === "left-with-sticky-image") {
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16", children: [
         /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-20 lg:self-start", children: /* @__PURE__ */ jsx("div", { className: "aspect-square w-full overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -88,7 +89,7 @@ const InteractivePortfolio = (props) => {
     ] }) });
   }
   const isLeftAligned = listLayout === "left-aligned";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", onMouseMove: handleMouseMove, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isLeftAligned }), children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, onMouseMove: handleMouseMove, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isLeftAligned }), children: [
     /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
     /* @__PURE__ */ jsx(
       motion.div,

package/dist/components/puck-block/gallery-sections/masonry-grid/index.d.ts

@@ -33,6 +33,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.";
+                    };
+                };
                 columns: {
                     readonly type: "text";
                     readonly label: "Columns";

package/dist/components/puck-block/gallery-sections/masonry-grid/index.js

@@ -2,6 +2,7 @@ import { MasonryGrid, MasonryGridDefaults } from "./masonry-grid.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { imagesField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -11,7 +12,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        columns: galleryStyleFields.columns
+        columns: galleryStyleFields.columns,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/masonry-grid/masonry-grid.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const MasonryGrid = (props) => {
   const { heading, description, images, styles } = {
     ...MasonryGridDefaults,
     ...props
   };
-  const { columns = "2" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, columns = "2" } = styles ?? {};
   const cols = parseInt(columns, 10) || 2;
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })

package/dist/components/puck-block/gallery-sections/portfolio-cards/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.";
+                    };
+                };
                 columns: {
                     readonly type: "text";
                     readonly label: "Columns";

package/dist/components/puck-block/gallery-sections/portfolio-cards/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -28,7 +29,8 @@ const conf = {
         columns: galleryStyleFields.columns,
         bordered: galleryStyleFields.bordered,
         cardLayout: galleryStyleFields.cardLayout,
-        metaType: galleryStyleFields.metaType
+        metaType: galleryStyleFields.metaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/portfolio-cards/portfolio-cards.js

@@ -3,12 +3,16 @@ import { cn } from "../../../../utils/css-utils.js";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const PortfolioCards = (props) => {
   const { tagline, heading, description, projects, button, styles } = {
     ...PortfolioCardsDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     columns = "1",
     bordered = false,
     cardLayout = "inline",
@@ -110,7 +114,7 @@ const PortfolioCards = (props) => {
       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("header", { 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/gallery-sections/portfolio-divider/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.";
+                    };
+                };
                 mediaPosition: {
                     readonly type: "radio";
                     readonly label: "Media Position";

package/dist/components/puck-block/gallery-sections/portfolio-divider/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { galleryStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaPosition: galleryStyleFields.mediaPosition
+        mediaPosition: galleryStyleFields.mediaPosition,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/gallery-sections/portfolio-divider/portfolio-divider.js

@@ -2,14 +2,16 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Button } from "../../../shadcn/button.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 PortfolioDivider = (props) => {
   const { tagline, heading, description, projects, button, styles } = {
     ...PortfolioDividerDefaults,
     ...props
   };
-  const { mediaPosition = "right" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, mediaPosition = "right" } = styles ?? {};
   const isMediaLeft = mediaPosition === "left";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("header", { className: "mb-12 max-w-lg 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/gallery-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 GallerySectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     columns?: string;
     gap?: "with" | "without";
     gridPattern?: "1large-2small" | "1large-4small";

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -2,18 +2,24 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useScroll, useTransform, motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallax = (props) => {
-  const { heading, description, images } = {
+  const { heading, description, images, styles } = {
     ...ScrollParallaxDefaults,
     ...props
   };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const transformRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
-    target: transformRef
+    target: transformRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
-  return /* @__PURE__ */ jsxs("section", { id: "relume", ref: transformRef, children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })