dune-react 0.0.20 → 0.0.22

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

@@ -5,12 +5,18 @@ import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ImageTestimonialCarousel = (props) => {
   const { testimonials, styles } = {
     ...ImageTestimonialCarouselDefaults,
     ...props
   };
-  const { mediaType = "image" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    mediaType = "image"
+  } = styles ?? {};
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
   useEffect(() => {
@@ -20,7 +26,7 @@ const ImageTestimonialCarousel = (props) => {
       setCurrent(api.selectedScrollSnap() + 1);
     });
   }, [api]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx(
     Carousel,
     {
       setApi,

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

@@ -49,6 +49,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.";
+                    };
+                };
                 mediaType: {
                     readonly type: "radio";
                     readonly label: "Media Type";

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

@@ -1,6 +1,7 @@
 import { ImageTestimonialCarousel, ImageTestimonialCarouselDefaults } from "./component.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     testimonials: {
@@ -20,7 +21,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: testimonialStyleFields.mediaType
+        mediaType: testimonialStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -1,11 +1,18 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const MarqueeTestimonial = (props) => {
-  const { heading, description, testimonials } = {
+  const { heading, description, testimonials, styles } = {
     ...MarqueeTestimonialDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const renderTestimonials = () => /* @__PURE__ */ jsx("div", { className: "flex", children: testimonials.map((testimonial2, index) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -35,7 +42,7 @@ const MarqueeTestimonial = (props) => {
     },
     index
   )) });
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "overflow-hidden py-16 md:py-24 lg:py-28", children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("overflow-hidden py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsxs("div", { className: "container mb-12 max-w-lg px-[5%] text-center md:mb-18 lg:mb-20", 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 })

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

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const MasonryTestimonial = (props) => {
   const {
     heading,
@@ -11,9 +13,14 @@ const MasonryTestimonial = (props) => {
     ...MasonryTestimonialDefaults,
     ...props
   };
-  const { masonryColumns = 3 } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    masonryColumns = 3
+  } = styles ?? {};
   const columnsClass = masonryColumns === 2 ? "md:columns-2" : "md:columns-2 lg:columns-3";
-  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 w-full max-w-lg text-center md:mb-18 lg:mb-20", 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 })

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

@@ -39,6 +39,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.";
+                    };
+                };
                 masonryColumns: {
                     readonly type: "radio";
                     readonly label: "Masonry Columns";

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

@@ -1,6 +1,7 @@
 import { MasonryTestimonial, MasonryTestimonialDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -20,7 +21,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        masonryColumns: testimonialStyleFields.masonryColumns
+        masonryColumns: testimonialStyleFields.masonryColumns,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/testimonial-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 TestimonialSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     ratingType?: "logo" | "stars";
     attributionLayout?: "stacked" | "inline";
     textAlign?: "left" | "center";
@@ -29,7 +32,6 @@ export interface TestimonialSectionBaseProps {
     heading: string;
     description: string;
     buttons: BaseButton[];
-    image: BaseImage;
     images: BaseImage[];
     styles: TestimonialSectionStyles;
 }

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

@@ -3,6 +3,8 @@ import React__default from "react";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const StickyTestimonial = (props) => {
   const {
     heading,
@@ -14,8 +16,13 @@ const StickyTestimonial = (props) => {
     ...StickyTestimonialDefaults,
     ...props
   };
-  const { animation = "stickyStack" } = 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: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    animation = "stickyStack"
+  } = styles ?? {};
+  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: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { className: "static md:sticky md:top-[30%]", 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/testimonial-sections/sticky-testimonial/index.d.ts

@@ -25,7 +25,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";
@@ -118,6 +118,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: {
                     readonly type: "radio";
                     readonly label: "Animation";

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

@@ -2,6 +2,7 @@ import { StickyTestimonial, StickyTestimonialDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        animation: testimonialStyleFields.animation
+        animation: testimonialStyleFields.animation,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,13 +2,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../shadcn/tabs.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const TabTestimonial = (props) => {
   const { heading, description, tabs, styles } = {
     ...TabTestimonialDefaults,
     ...props
   };
-  const { 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", children: [
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    hasImage = false
+  } = styles ?? {};
+  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 w-full 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 })

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

@@ -27,6 +27,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: "Has Image";

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

@@ -1,6 +1,7 @@
 import { TabTestimonial, TabTestimonialDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -16,7 +17,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        hasImage: testimonialStyleFields.hasImage
+        hasImage: testimonialStyleFields.hasImage,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,6 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 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 TestimonialCardGrid = (props) => {
   const {
     heading,
@@ -13,6 +15,9 @@ const TestimonialCardGrid = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textAlign = "center",
     gridColumns = 2,
     ratingType = "logo",
@@ -20,7 +25,7 @@ const TestimonialCardGrid = (props) => {
     hasButton = false
   } = styles ?? {};
   const gridColsClass = gridColumns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: `mx-auto mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "text-center" : "text-left"}`, 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 })

package/dist/components/puck-block/testimonial-sections/testimonial-card-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.";
+                    };
+                };
                 textAlign: {
                     readonly type: "radio";
                     readonly label: "Text Align";

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

@@ -1,6 +1,7 @@
 import { TestimonialCardGrid, TestimonialCardGridDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -22,7 +23,8 @@ const conf = {
         gridColumns: testimonialStyleFields.gridColumns,
         ratingType: testimonialStyleFields.ratingType,
         bordered: testimonialStyleFields.bordered,
-        hasButton: testimonialStyleFields.hasButton
+        hasButton: testimonialStyleFields.hasButton,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -6,6 +6,7 @@ import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TestimonialCarousel = (props) => {
   const {
     heading,
@@ -17,6 +18,9 @@ const TestimonialCarousel = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     ratingType = "logo",
     hasHeading = false,
     textAlign = "center",
@@ -34,7 +38,7 @@ const TestimonialCarousel = (props) => {
     });
   }, [api]);
   const basisClass = carouselColumns === 3 ? "md:basis-1/2 lg:basis-1/3" : carouselColumns === 2 ? "md:basis-1/2" : "md:basis-full";
-  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: [
     hasHeading && /* @__PURE__ */ jsxs("div", { className: `mb-12 w-full max-w-lg md:mb-18 lg:mb-20 ${textAlign === "center" ? "mx-auto 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 })

package/dist/components/puck-block/testimonial-sections/testimonial-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.";
+                    };
+                };
                 ratingType: {
                     readonly type: "radio";
                     readonly label: "Rating Type";

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

@@ -1,6 +1,7 @@
 import { TestimonialCarousel, TestimonialCarouselDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -23,7 +24,8 @@ const conf = {
         textAlign: testimonialStyleFields.textAlign,
         carouselColumns: testimonialStyleFields.carouselColumns,
         bordered: testimonialStyleFields.bordered,
-        hasButton: testimonialStyleFields.hasButton
+        hasButton: testimonialStyleFields.hasButton,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/text-sections/aside-nav-content/component.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const AsideNavContent = (props) => {
   var _a;
   const {
@@ -13,6 +14,9 @@ const AsideNavContent = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     asidePosition = "left"
   } = styles ?? {};
   const currentHash = (_a = aside.links[0]) == null ? void 0 : _a.href;
@@ -31,7 +35,7 @@ const AsideNavContent = (props) => {
     )) }) })
   ] }) }) }) });
   const proseContent = /* @__PURE__ */ jsx("div", { className: "max-w-lg", children: /* @__PURE__ */ jsx("div", { className: "prose md:prose-md lg:prose-lg", dangerouslySetInnerHTML: { __html: prose } }) });
-  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__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 lg:grid-cols-[20rem_1fr] lg:gap-x-16 xxl:gap-x-48", children: asidePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { 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__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 lg:grid-cols-[20rem_1fr] lg:gap-x-16 xxl:gap-x-48", children: asidePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     asideContent,
     proseContent
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/puck-block/text-sections/aside-nav-content/index.d.ts

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

package/dist/components/puck-block/text-sections/aside-nav-content/index.js

@@ -1,5 +1,6 @@
 import { AsideNavContent, AsideNavContentDefaults } from "./component.js";
 import { textStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     aside: {
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        asidePosition: textStyleFields.asidePosition
+        asidePosition: textStyleFields.asidePosition,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/text-sections/blog-article/component.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const BlogArticle = (props) => {
   const {
     prose,
@@ -14,9 +16,12 @@ const BlogArticle = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     hasBreadcrumbs = 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: "mx-auto 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__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg", children: [
     hasBreadcrumbs && breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-2 text-sm", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
       index > 0 && /* @__PURE__ */ jsx("span", { children: "/" }),
       /* @__PURE__ */ jsx("a", { href: crumb.url, className: "hover:underline", children: crumb.label })

package/dist/components/puck-block/text-sections/blog-article/index.d.ts

@@ -77,6 +77,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.";
+                    };
+                };
                 hasBreadcrumbs: {
                     readonly type: "radio";
                     readonly label: "Show Breadcrumbs";