dune-react 0.0.20 → 0.0.22

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

@@ -2,87 +2,92 @@ 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 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: [
+  const { className: sectionClassName, style: sectionStyle, css, mediaPosition = "right" } = styles ?? {};
+  const startsLeft = mediaPosition === "left";
+  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 }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
     ] }),
-    /* @__PURE__ */ jsx("div", { children: projects.map((project, index) => /* @__PURE__ */ jsx(
-      "article",
-      {
-        className: "grid grid-cols-1 items-center gap-x-12 gap-y-6 border-t border-border-primary py-8 md:grid-cols-2 md:gap-y-0 lg:gap-x-[4.9rem] lg:py-12",
-        children: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              className: "w-full object-cover",
-              alt: project.image.alt
-            }
-          ) }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
-            /* @__PURE__ */ jsx("p", { children: project.description }),
-            project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
-              "a",
+    /* @__PURE__ */ jsx("div", { children: projects.map((project, index) => {
+      const isMediaLeft = startsLeft ? index % 2 === 0 : index % 2 !== 0;
+      return /* @__PURE__ */ jsx(
+        "article",
+        {
+          className: "grid grid-cols-1 items-center gap-x-12 gap-y-6 border-t border-border-primary py-8 md:grid-cols-2 md:gap-y-0 lg:gap-x-[4.9rem] lg:py-12",
+          children: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
+              CompoundImage,
               {
-                href: tag.url,
-                className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-                children: tag.label
+                src: project.image.src,
+                className: "w-full object-cover",
+                alt: project.image.alt
               }
-            ) }, tagIndex)) }),
-            /* @__PURE__ */ jsx(
-              Button,
+            ) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
+              /* @__PURE__ */ jsx("p", { children: project.description }),
+              project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: tag.url,
+                  className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                  children: tag.label
+                }
+              ) }, tagIndex)) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: project.button.variant,
+                  size: project.button.size,
+                  className: "mt-6 md:mt-8",
+                  children: project.button.label
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
+              /* @__PURE__ */ jsx("p", { children: project.description }),
+              project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: tag.url,
+                  className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
+                  children: tag.label
+                }
+              ) }, tagIndex)) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: project.button.variant,
+                  size: project.button.size,
+                  className: "mt-6 md:mt-8",
+                  children: project.button.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
+              CompoundImage,
               {
-                variant: project.button.variant,
-                size: project.button.size,
-                className: "mt-6 md:mt-8",
-                children: project.button.label
+                src: project.image.src,
+                className: "w-full object-cover",
+                alt: project.image.alt
               }
-            )
+            ) }) })
           ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "mb-2 text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl", children: /* @__PURE__ */ jsx("a", { href: project.url, children: project.title }) }),
-            /* @__PURE__ */ jsx("p", { children: project.description }),
-            project.tags && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2 md:mt-4", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: tag.url,
-                className: "bg-background-secondary px-2 py-1 text-sm font-semibold",
-                children: tag.label
-              }
-            ) }, tagIndex)) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: project.button.variant,
-                size: project.button.size,
-                className: "mt-6 md:mt-8",
-                children: project.button.label
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: project.url, className: "flex aspect-[4/3] w-full", children: /* @__PURE__ */ jsx(
-            CompoundImage,
-            {
-              src: project.image.src,
-              className: "w-full object-cover",
-              alt: project.image.alt
-            }
-          ) }) })
-        ] })
-      },
-      index
-    )) }),
+        },
+        index
+      );
+    }) }),
     /* @__PURE__ */ jsx("footer", { className: "mt-12 flex justify-center md:mt-18 lg:mt-20", children: /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }) })
   ] }) });
 };

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

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

@@ -59,6 +59,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.";
+                    };
+                };
                 animation: {
                     type: "radio";
                     label: 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: {
@@ -26,7 +27,8 @@ const conf = {
             { label: "Three Image Parallax", value: "threeImageParallax" },
             { label: "Scale Opacity", value: "scaleOpacity" }
           ]
-        }
+        },
+        ...sectionWrapperFields
       }
     }
   },

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/centered-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";