dune-react 0.0.20 → 0.0.21

package/dist/components/puck-block/showcase-sections/tab-timeline/index.js

@@ -2,6 +2,7 @@ import { TabTimeline, TabTimelineDefaults } from "./component.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { showcaseStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tabs: {
@@ -14,7 +15,7 @@ const conf = {
           type: "object",
           label: "Content",
           objectFields: {
-            date: { type: "text" },
+            date: { type: "text", ...sectionWrapperFields },
             heading: { type: "text" },
             description: { type: "textarea" },
             buttons: buttonsField,
@@ -27,7 +28,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        contentLayout: showcaseStyleFields.contentLayout
+        contentLayout: showcaseStyleFields.contentLayout,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-sections/zigzag-timeline/component.js

@@ -4,7 +4,9 @@ import { useRef } from "react";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, useTransform, motion } from "framer-motion";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ZigzagTimeline = (props) => {
   const {
     tagline,
@@ -18,10 +20,13 @@ const ZigzagTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     bordered = false,
     hasImage = false
   } = styles ?? {};
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
     /* @__PURE__ */ jsx("div", { className: "mb-12 text-center md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-lg", 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 }),
@@ -48,8 +53,10 @@ const ZigzagEntry = ({
 }) => {
   const isEven = index % 2 === 0;
   const circleRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(circleRef);
   const { scrollYProgress } = useScroll({
     target: circleRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
     offset: ["end end", "end center"]
   });
   const backgroundColor = {

package/dist/components/puck-block/showcase-sections/zigzag-timeline/index.d.ts

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

package/dist/components/puck-block/showcase-sections/zigzag-timeline/index.js

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

package/dist/components/puck-block/team-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 TeamSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     textAlign?: "left" | "center";
     gridColumns?: 2 | 3 | 4;
     imageShape?: "circle" | "square";

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

@@ -5,12 +5,18 @@ import { Button } from "../../../shadcn/button.js";
 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 TeamCarousel = (props) => {
   const { tagline, heading, description, teamMembers, footer, styles } = {
     ...TeamCarouselDefaults,
     ...props
   };
-  const { imageShape = "circle" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    imageShape = "circle"
+  } = styles ?? {};
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
   useEffect(() => {
@@ -21,7 +27,7 @@ const TeamCarousel = (props) => {
     });
   }, [api]);
   const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden 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 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/team-sections/team-carousel/index.d.ts

@@ -36,6 +36,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.";
+                    };
+                };
                 heading: {
                     readonly type: "text";
                     readonly contentEditable: true;
@@ -105,6 +127,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.";
+                    };
+                };
                 imageShape: {
                     readonly type: "radio";
                     readonly label: "Image Shape";

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

@@ -2,6 +2,7 @@ import { TeamCarousel, TeamCarouselDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { teamStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -22,14 +23,16 @@ const conf = {
       objectFields: {
         heading: headingField,
         description: descriptionField,
-        button: buttonField
+        button: buttonField,
+        ...sectionWrapperFields
       }
     },
     styles: {
       type: "object",
       label: "Styles",
       objectFields: {
-        imageShape: teamStyleFields.imageShape
+        imageShape: teamStyleFields.imageShape,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -1,12 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../../../shadcn/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 TeamGrid = (props) => {
   const { tagline, heading, description, teamMembers, footer, styles } = {
     ...TeamGridDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textAlign = "center",
     imageShape = "circle",
     gridColumns = 4,
@@ -14,7 +19,7 @@ const TeamGrid = (props) => {
   } = styles ?? {};
   const gridColsClass = gridColumns === 2 ? "md:grid-cols-2" : gridColumns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2 lg:grid-cols-4";
   const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
-  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: `mx-auto mb-12 max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "text-center" : "text-left"}`, children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

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

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

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

@@ -2,6 +2,7 @@ import { TeamGrid, TeamGridDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { teamStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -22,7 +23,8 @@ const conf = {
       objectFields: {
         heading: headingField,
         description: descriptionField,
-        button: buttonField
+        button: buttonField,
+        ...sectionWrapperFields
       }
     },
     styles: {
@@ -32,7 +34,8 @@ const conf = {
         textAlign: teamStyleFields.textAlign,
         imageShape: teamStyleFields.imageShape,
         gridColumns: teamStyleFields.gridColumns,
-        hasFooter: teamStyleFields.hasFooter
+        hasFooter: teamStyleFields.hasFooter,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/team-sections/team-inline-card/component.js

@@ -1,14 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../../../shadcn/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 TeamInlineCard = (props) => {
   const { tagline, heading, description, teamMembers, footer, styles } = {
     ...TeamInlineCardDefaults,
     ...props
   };
-  const { imageShape = "circle", cardLayout = "horizontal" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    imageShape = "circle",
+    cardLayout = "horizontal"
+  } = styles ?? {};
   const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 items-start md:grid-flow-row md:gap-x-12 lg:gap-x-20", 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 grid grid-cols-1 items-start md:grid-flow-row md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { className: "rb-12 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: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/team-sections/team-inline-card/index.d.ts

@@ -36,6 +36,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.";
+                    };
+                };
                 heading: {
                     readonly type: "text";
                     readonly contentEditable: true;
@@ -105,6 +127,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.";
+                    };
+                };
                 imageShape: {
                     readonly type: "radio";
                     readonly label: "Image Shape";

package/dist/components/puck-block/team-sections/team-inline-card/index.js

@@ -2,6 +2,7 @@ import { TeamInlineCard, TeamInlineCardDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { teamStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -22,7 +23,8 @@ const conf = {
       objectFields: {
         heading: headingField,
         description: descriptionField,
-        button: buttonField
+        button: buttonField,
+        ...sectionWrapperFields
       }
     },
     styles: {
@@ -30,7 +32,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         imageShape: teamStyleFields.imageShape,
-        cardLayout: teamStyleFields.cardLayout
+        cardLayout: teamStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/team-sections/team-sticky-scatter/component.js

@@ -3,12 +3,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const TeamStickyScatter = (props) => {
   const { tagline, heading, description, teamMembers, styles } = {
     ...TeamStickyScatterDefaults,
     ...props
   };
-  const { imageShape = "circle" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    imageShape = "circle"
+  } = styles ?? {};
   const isMobile = useMediaQuery("(max-width: 767px)");
   const shouldAddMarginTop = (index) => {
     return index === 1 || index === 3 || index === 7;
@@ -17,7 +24,7 @@ const TeamStickyScatter = (props) => {
     return [0, 2, 3, 4, 6].indexOf(index) !== -1;
   };
   const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-square w-full object-cover";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container relative", 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 relative", children: [
     /* @__PURE__ */ jsxs("div", { className: "static top-[50vh] mx-auto mt-20 max-w-lg translate-y-[-50%] text-center md:sticky", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/team-sections/team-sticky-scatter/index.d.ts

@@ -36,6 +36,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.";
+                    };
+                };
                 imageShape: {
                     readonly type: "radio";
                     readonly label: "Image Shape";

package/dist/components/puck-block/team-sections/team-sticky-scatter/index.js

@@ -1,6 +1,7 @@
 import { TeamStickyScatter, TeamStickyScatterDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { teamStyleFields } 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: {
-        imageShape: teamStyleFields.imageShape
+        imageShape: teamStyleFields.imageShape,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/team-sections/team-two-column/component.js

@@ -1,19 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const TeamTwoColumn = (props) => {
   const { tagline, heading, description, button, teamMembers, styles } = {
     ...TeamTwoColumnDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     imageShape = "circle",
     cardLayout = "horizontal",
     memberGridColumns = 1
   } = styles ?? {};
   const imageClass = imageShape === "circle" ? "size-20 min-h-20 min-w-20 rounded-full object-cover" : "aspect-[3/2] w-full object-cover";
   const memberGridClass = memberGridColumns === 2 ? "grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-8 md:gap-y-16 lg:gap-x-12" : "grid grid-cols-1 gap-y-12 md:gap-x-8 md:gap-y-16 lg:gap-x-12";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 items-start md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:gap-x-20", 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 grid grid-cols-1 items-start md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { className: "rb-12 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: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/team-sections/team-two-column/index.d.ts

@@ -91,6 +91,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.";
+                    };
+                };
                 imageShape: {
                     readonly type: "radio";
                     readonly label: "Image Shape";

package/dist/components/puck-block/team-sections/team-two-column/index.js

@@ -2,6 +2,7 @@ import { TeamTwoColumn, TeamTwoColumnDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { teamStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -23,7 +24,8 @@ const conf = {
       objectFields: {
         imageShape: teamStyleFields.imageShape,
         cardLayout: teamStyleFields.cardLayout,
-        memberGridColumns: teamStyleFields.memberGridColumns
+        memberGridColumns: teamStyleFields.memberGridColumns,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/testimonial-sections/bento-testimonial/component.js

@@ -3,19 +3,23 @@ import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_re
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const BentoTestimonial = (props) => {
   const { heading, description, testimonialCards, styles } = {
     ...BentoTestimonialDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     hasBackgroundCards = true,
     gridLayout = "4x2"
   } = styles ?? {};
   let logoCardCount = 0;
   let backgroundImageCardCount = 0;
   const gridRowsClass = gridLayout === "4x3" ? "lg:grid-rows-3" : "lg:grid-rows-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__ */ jsx("div", { className: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center", children: [
       /* @__PURE__ */ jsx("h1", { 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 })