dune-react 0.0.20 → 0.0.21

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

@@ -62,10 +62,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/scroll-parallax-portfolio/index.js

@@ -1,5 +1,6 @@
 import { ScrollParallaxPortfolio, ScrollParallaxPortfolioDefaults } from "./scroll-parallax-portfolio.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     projects: {
@@ -23,7 +24,7 @@ const conf = {
           type: "radio",
           label: "Animation",
           options: [
-            { label: "Three Image Parallax", value: "threeImageParallax" },
+            { label: "Three Image Parallax", value: "threeImageParallax", ...sectionWrapperFields },
             { label: "Scale Opacity", value: "scaleOpacity" }
           ]
         }

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

@@ -3,23 +3,32 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useScroll, useTransform, motion, useSpring, easeOut, easeInOut } 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 ScrollParallaxPortfolio = (props) => {
   const { projects, styles } = {
     ...ScrollParallaxPortfolioDefaults,
     ...props
   };
-  const { animation = "threeImageParallax" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, animation = "threeImageParallax" } = styles ?? {};
   if (animation === "scaleOpacity") {
-    return /* @__PURE__ */ jsx(ScaleOpacityVariant, { projects });
+    return /* @__PURE__ */ jsx(ScaleOpacityVariant, { projects, sectionClassName, sectionStyle, css });
   }
-  return /* @__PURE__ */ jsx(ThreeImageParallaxVariant, { projects });
+  return /* @__PURE__ */ jsx(ThreeImageParallaxVariant, { projects, sectionClassName, sectionStyle, css });
 };
 const ThreeImageParallaxVariant = ({
-  projects
+  projects,
+  sectionClassName,
+  sectionStyle,
+  css
 }) => {
   const transformRef = useRef(null);
-  const { scrollYProgress } = useScroll({ target: transformRef });
+  const [scrollContainerRef] = useScrollContainer(transformRef);
+  const { scrollYProgress } = useScroll({
+    target: transformRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
+  });
   const smoothProgress = useSpring(scrollYProgress, {
     stiffness: 200,
     damping: 25,
@@ -61,8 +70,8 @@ const ThreeImageParallaxVariant = ({
       }
     };
   });
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative px-[5%]", children: [
-    /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-12 md:py-16 lg:py-20", children: projects.map((project, index) => {
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: [
+    /* @__PURE__ */ jsx("div", { ref: transformRef, className: "container", children: /* @__PURE__ */ jsx("div", { className: "py-6 md:py-8 lg:py-10", children: projects.map((project, index) => {
       var _a, _b, _c, _d, _e, _f;
       return /* @__PURE__ */ jsxs(
         "div",
@@ -132,11 +141,18 @@ const ThreeImageParallaxVariant = ({
   ] });
 };
 const ScaleOpacityVariant = ({
-  projects
+  projects,
+  sectionClassName,
+  sectionStyle,
+  css
 }) => {
   const containerRef = useRef(null);
-  const { scrollYProgress } = useScroll({ target: containerRef });
-  return /* @__PURE__ */ jsx("section", { id: "relume", ref: containerRef, className: "relative px-[5%]", children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center", 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 px-[5%]", 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", 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/split-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.";
+                    };
+                };
                 slideBasis: {
                     readonly type: "text";
                     readonly label: "Slide Basis";

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

@@ -2,6 +2,7 @@ import { SplitCarousel, SplitCarouselDefaults } from "./split-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,
@@ -11,7 +12,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        slideBasis: galleryStyleFields.slideBasis
+        slideBasis: galleryStyleFields.slideBasis,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -4,12 +4,13 @@ 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 SplitCarousel = (props) => {
   const { heading, description, images, styles } = {
     ...SplitCarouselDefaults,
     ...props
   };
-  const { slideBasis = "4/5" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, slideBasis = "4/5" } = styles ?? {};
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
   useEffect(() => {
@@ -31,7 +32,7 @@ const SplitCarousel = (props) => {
         return "basis-[95%] sm:basis-4/5 md:basis-1/2 lg:basis-4/5";
     }
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "grid auto-cols-fr grid-cols-1 items-center gap-12 md:gap-16 lg:grid-cols-2 lg:gap-0", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "grid auto-cols-fr grid-cols-1 items-center gap-12 md:gap-16 lg:grid-cols-2 lg:gap-0", children: [
     /* @__PURE__ */ jsx("div", { className: "flex lg:justify-self-end", children: /* @__PURE__ */ jsxs("div", { className: "mx-[5%] w-full max-w-md lg:mb-24 lg:ml-[5vw] lg:mr-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/static-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/static-grid/index.js

@@ -2,6 +2,7 @@ import { StaticGrid, StaticGridDefaults } from "./static-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,
@@ -12,7 +13,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         columns: galleryStyleFields.columns,
-        gap: galleryStyleFields.gap
+        gap: galleryStyleFields.gap,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -1,5 +1,6 @@
 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 columnsMap = {
   "1": "grid-cols-1",
@@ -13,10 +14,10 @@ const StaticGrid = (props) => {
     ...StaticGridDefaults,
     ...props
   };
-  const { columns = "2", gap = "with" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, columns = "2", gap = "with" } = styles ?? {};
   const gridCols = columnsMap[columns] ?? columnsMap["2"];
   const hasGap = gap === "with";
-  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/header-sections/centered-navbar/centered-navbar.js

@@ -4,10 +4,13 @@ import { useState } from "react";
 import { Button } from "../../../shadcn/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 CenteredNavbar = (props) => {
-  const { logo, navLinks, buttons } = { ...CenteredNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, styles } = { ...CenteredNavbarDefaults, ...props };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  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: "mx-auto size-full lg:grid lg:grid-cols-[0.375fr_1fr_0.375fr] lg:items-center lg:justify-between lg:gap-4", 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: "mx-auto size-full lg:grid lg:grid-cols-[0.375fr_1fr_0.375fr] lg:items-center lg:justify-between lg:gap-4", 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("div", { className: "flex items-center gap-4 lg:hidden", children: [

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

@@ -4,10 +4,13 @@ import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const DrawerNavbar = (props) => {
-  const { logo, navLinks, buttons } = { ...DrawerNavbarDefaults, ...props };
+  const { logo, navLinks, buttons, styles } = { ...DrawerNavbarDefaults, ...props };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18", children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("z-[999] grid w-full grid-cols-[1fr_max-content_1fr] items-center justify-between border-b border-border-primary bg-background-primary px-[5%] md:min-h-18", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsx("button", { className: "flex size-12 flex-col justify-center lg:hidden", onClick: () => setIsMobileMenuOpen((prev) => !prev), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "my-[3px] h-0.5 w-6 bg-black lg:hidden" }, i)) }),
     /* @__PURE__ */ jsxs(AnimatePresence, { children: [
       /* @__PURE__ */ jsxs(motion.div, { initial: "closed", animate: isMobileMenuOpen ? "open" : "closed", exit: "closed", variants: { closed: { x: "-100%", opacity: 1, transition: { type: "spring", duration: 0.6, bounce: 0 }, transitionEnd: { opacity: "var(--opacity-closed, 0%)", x: "var(--x-closed, -100%)" } }, open: { x: 0, opacity: 1, transition: { type: "spring", duration: 0.4, bounce: 0 } } }, className: "absolute left-0 top-0 z-50 flex h-dvh w-[90%] flex-col border-r border-border-primary bg-white px-[5%] pb-4 md:w-[80%] lg:visible lg:static lg:-ml-4 lg:flex lg:h-auto lg:w-auto lg:flex-row lg:border-none lg:px-0 lg:pb-0 lg:[--opacity-closed:100%] lg:[--x-closed:0%]", children: [

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

@@ -6,12 +6,14 @@ import { CompoundButton } from "../../../puck-base/button.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 FloatingBorderedNavbar = (props) => {
   const { logo, navLinks, button, styles } = { ...FloatingBorderedNavbarDefaults, ...props };
-  const { position = "relative" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, position = "relative" } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const isMobile = useMediaQuery("(max-width: 991px)");
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: `${position === "fixed" ? "fixed" : "relative"} z-[999] mx-auto mt-5 flex w-full items-start justify-center bg-background-primary px-[5%] md:mt-6 lg:mx-[5%] lg:w-auto lg:px-0`, children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 w-full items-center justify-between gap-4 border border-border-primary px-5 md:min-h-18 md:px-8 lg:w-auto", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn(`${position === "fixed" ? "fixed" : "relative"} z-[999] mx-auto mt-5 flex w-full items-start justify-center bg-background-primary px-[5%] md:mt-6 lg:mx-[5%] lg:w-auto lg:px-0`, sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 w-full items-center justify-between gap-4 border border-border-primary px-5 md:min-h-18 md:px-8 lg:w-auto", 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__ */ jsx(motion.div, { variants: { open: { height: "var(--height, 100vh)" }, close: { height: "auto" } }, initial: "close", exit: "close", animate: isMobileMenuOpen ? "open" : "close", className: "absolute left-0 right-0 top-full w-full overflow-hidden lg:static lg:left-auto lg:right-auto lg:top-auto lg:w-auto lg:overflow-visible lg:[--height:auto]", children: /* @__PURE__ */ jsx(motion.div, { variants: { open: { y: 0 }, close: { y: "var(--translate-y, -100%)" } }, animate: isMobileMenuOpen ? "open" : "close", initial: "close", exit: "close", transition: { duration: 0.3 }, className: "absolute left-0 right-0 top-0 mx-auto min-w-[200px] justify-self-center bg-background-primary px-[5%] text-center lg:static lg:inset-auto lg:mx-0 lg:px-0 lg:text-left lg:[--translate-y:0%]", children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col border border-t-0 border-border-primary bg-background-primary p-5 md:p-8 lg:w-auto lg:flex-row lg:border-none lg:bg-none lg:p-0", children: navLinks == null ? void 0 : navLinks.map(
       (navLink, index) => navLink.subMenuLinks && navLink.subMenuLinks.length > 0 ? /* @__PURE__ */ jsx(SubMenu, { navLink, isMobile }, index) : /* @__PURE__ */ jsx("a", { href: navLink.url, className: "relative block py-3 text-center text-md lg:px-4 lg:py-2 lg:text-left lg:text-base", children: navLink.title }, index)

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

@@ -87,6 +87,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.";
+                    };
+                };
                 position: {
                     readonly type: "radio";
                     readonly label: "Position";

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

@@ -2,8 +2,9 @@ import { FloatingBorderedNavbar, FloatingBorderedNavbarDefaults } from "./floati
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { buttonField } 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" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position } } },
+  fields: { logo: imageField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position, ...sectionWrapperFields } } },
   defaultProps: FloatingBorderedNavbarDefaults,
   render: FloatingBorderedNavbar
 };

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

@@ -4,10 +4,13 @@ import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const FullscreenOverlayNavbar = (props) => {
-  const { logo, navLinks, button } = { ...FullscreenOverlayNavbarDefaults, ...props };
+  const { logo, navLinks, button, styles } = { ...FullscreenOverlayNavbarDefaults, ...props };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative z-[999] flex min-h-16 w-full items-center border-b border-b-border-primary bg-background-primary px-[5%] md:min-h-18", children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative z-[999] flex min-h-16 w-full items-center border-b border-b-border-primary bg-background-primary px-[5%] md:min-h-18", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto flex size-full items-center justify-between", 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("div", { className: "flex items-center justify-center gap-2 lg:gap-4", children: [

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

@@ -87,6 +87,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.";
+                    };
+                };
                 overlayContent: {
                     readonly type: "select";
                     readonly label: "Overlay Content";

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

@@ -2,8 +2,9 @@ import { FullscreenOverlayNavbar, FullscreenOverlayNavbarDefaults } from "./full
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { buttonField } 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: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent } } },
+  fields: { logo: imageField, navLinks: { type: "array", max: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, button: buttonField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent, ...sectionWrapperFields } } },
   defaultProps: FullscreenOverlayNavbarDefaults,
   render: FullscreenOverlayNavbar
 };

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

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

@@ -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,17 @@ 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,10 +23,11 @@ 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 }),