dune-react 0.0.20 → 0.0.22

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

@@ -28,7 +28,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";
@@ -121,6 +121,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.";
+                    };
+                };
                 hasImage: {
                     readonly type: "radio";
                     readonly label: "Show Images";

package/dist/components/puck-block/showcase-sections/horizontal-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" },
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        hasImage: showcaseStyleFields.hasImage
+        hasImage: showcaseStyleFields.hasImage,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-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 ShowcaseSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     bordered?: boolean;
     hasImage?: boolean;
     contentLayout?: "image-only" | "text+image";

package/dist/components/puck-block/showcase-sections/single-column-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 SingleColumnTimeline = (props) => {
   const {
     tagline,
@@ -18,10 +20,13 @@ const SingleColumnTimeline = (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__ */ jsxs("div", { className: "container max-w-lg", 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 max-w-lg", children: [
     /* @__PURE__ */ jsx("div", { className: "mb-12 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 }),
@@ -46,8 +51,10 @@ const TimelineEntry = ({
   hasImage
 }) => {
   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/single-column-timeline/index.d.ts

@@ -28,7 +28,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";
@@ -122,7 +122,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";
@@ -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/single-column-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/showcase-sections/sticky-scroll-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 StickyScrollTimeline = (props) => {
   const {
     tagline,
@@ -18,10 +20,13 @@ const StickyScrollTimeline = (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: "relative grid auto-cols-fr grid-cols-1 items-start justify-center gap-6 sm:gap-12 md:grid-cols-2 md:gap-24 lg:gap-32", 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: "relative grid auto-cols-fr grid-cols-1 items-start justify-center gap-6 sm:gap-12 md:grid-cols-2 md:gap-24 lg:gap-32", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative top-0 z-10 md:sticky md:top-20 md:z-auto md:pr-4", 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 }),
@@ -44,8 +49,10 @@ const TimelineEntry = ({
   hasImage
 }) => {
   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/sticky-scroll-timeline/index.d.ts

@@ -28,7 +28,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";
@@ -122,7 +122,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";
@@ -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/sticky-scroll-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/showcase-sections/tab-timeline/component.d.ts

@@ -17,8 +17,6 @@ type TabTimelineExtra = {
 export type TabTimelineProps = ShowcaseComponentProps<TabTimelineExtra>;
 export declare const TabTimeline: (props: TabTimelineProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TabTimelineDefaults: TabTimelineExtra & {
-    styles: {
-        contentLayout: string;
-    };
+    styles: Partial<import("../props").ShowcaseSectionStyles>;
 };
 export {};

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

@@ -5,6 +5,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.j
 import { CompoundButton } from "../../../puck-base/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 TabTimeline = (props) => {
   var _a, _b;
   const { tabs = [], styles } = {
@@ -12,6 +13,9 @@ const TabTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     contentLayout = "text+image"
   } = styles ?? {};
   const [activeTab, setActiveTab] = useState((_a = tabs[0]) == null ? void 0 : _a.value);
@@ -23,7 +27,7 @@ const TabTimeline = (props) => {
     const activeIndex = tabs.findIndex((tab) => tab.value === activeTab);
     return `${100 / (tabs.length * 2) * (activeIndex * 2 + 1)}%`;
   };
-  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__ */ jsx(
       "div",
       {

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

@@ -42,7 +42,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";
@@ -125,6 +125,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.";
+                    };
+                };
                 contentLayout: {
                     readonly type: "radio";
                     readonly label: "Content Layout";
@@ -152,9 +174,7 @@ declare const conf: {
             };
         }[];
     } & {
-        styles: {
-            contentLayout: string;
-        };
+        styles: Partial<import("../props").ShowcaseSectionStyles>;
     };
     render: (props: TabTimelineProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -28,7 +28,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";
@@ -122,7 +122,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";
@@ -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

@@ -53,7 +53,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";
@@ -105,6 +105,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" },
@@ -29,7 +30,8 @@ const conf = {
       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

@@ -53,7 +53,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";
@@ -105,6 +105,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";