dune-react 0.0.20 → 0.0.21

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

@@ -31,6 +31,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.";
+                    };
+                };
                 hasBackgroundCards: {
                     readonly type: "radio";
                     readonly label: "Has Background Cards";

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

@@ -1,6 +1,7 @@
 import { BentoTestimonial, BentoTestimonialDefaults } 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,
@@ -24,7 +25,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         hasBackgroundCards: testimonialStyleFields.hasBackgroundCards,
-        gridLayout: testimonialStyleFields.gridLayout
+        gridLayout: testimonialStyleFields.gridLayout,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } 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 CenteredTestimonial = (props) => {
   const {
     quote,
@@ -16,10 +18,13 @@ const CenteredTestimonial = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     ratingType = "logo",
     attributionLayout = "stacked"
   } = styles ?? {};
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container w-full max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-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 w-full max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
     ratingType === "logo" && logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt, className: "max-h-14" }) }),
     ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-6 flex md:mb-8", children: Array(numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
     /* @__PURE__ */ jsx("blockquote", { className: "text-xl font-bold md:text-2xl", children: quote }),

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

@@ -41,6 +41,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/centered-testimonial/index.js

@@ -1,6 +1,7 @@
 import { CenteredTestimonial, CenteredTestimonialDefaults } 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: {
     quote: { type: "textarea" },
@@ -15,7 +16,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         ratingType: testimonialStyleFields.ratingType,
-        attributionLayout: testimonialStyleFields.attributionLayout
+        attributionLayout: testimonialStyleFields.attributionLayout,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -6,12 +6,16 @@ import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext
 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 { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const HalfscreenTestimonialCarousel = (props) => {
   const { heading, description, testimonials, styles } = {
     ...HalfscreenTestimonialCarouselDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     ratingType = "stars",
     hasButton = false,
     overflow = "halfscreen"
@@ -25,7 +29,7 @@ const HalfscreenTestimonialCarousel = (props) => {
       setCurrent(api.selectedScrollSnap() + 1);
     });
   }, [api]);
-  return /* @__PURE__ */ jsx("section", { className: `overflow-hidden py-16 md:py-24 lg:py-28 ${overflow === "contained" ? "px-[5%]" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: `grid auto-cols-fr grid-cols-1 items-center gap-12 md:gap-16 lg:grid-cols-2 lg:gap-0 ${overflow === "contained" ? "container" : ""}`, children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn(`overflow-hidden py-8 md:py-12 lg:py-14 ${overflow === "contained" ? "px-[5%]" : ""}`, sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: `grid auto-cols-fr grid-cols-1 items-center gap-12 md:gap-16 lg:grid-cols-2 lg:gap-0 ${overflow === "contained" ? "container" : ""}`, children: [
     /* @__PURE__ */ jsx("div", { className: "flex lg:justify-self-end", children: /* @__PURE__ */ jsxs("div", { className: `w-full max-w-md ${overflow === "halfscreen" ? "mx-[5%] lg:mb-24 lg:ml-[5vw] lg:mr-20" : ""}`, children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })

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

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

@@ -1,6 +1,7 @@
 import { HalfscreenTestimonialCarousel, HalfscreenTestimonialCarouselDefaults } 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 = {
       objectFields: {
         ratingType: testimonialStyleFields.ratingType,
         hasButton: testimonialStyleFields.hasButton,
-        overflow: testimonialStyleFields.overflow
+        overflow: testimonialStyleFields.overflow,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,7 +2,7 @@ import type { TestimonialComponentProps, BaseImage } from "../props";
 type ImageTestimonialExtra = {
     numberOfStars: number;
     quote: string;
-    image: BaseImage;
+    images: BaseImage[];
     name: string;
     position: string;
     logo: BaseImage;

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

@@ -1,11 +1,14 @@
 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 ImageTestimonial = (props) => {
+  var _a, _b, _c, _d;
   const {
     numberOfStars,
     quote,
-    image,
+    images,
     name,
     position,
     logo,
@@ -14,10 +17,15 @@ const ImageTestimonial = (props) => {
     ...ImageTestimonialDefaults,
     ...props
   };
-  const { mediaType = "image" } = 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 w-full auto-cols-fr grid-cols-1 items-center justify-center gap-12 md:grid-cols-2 md:gap-10 lg:gap-x-20", children: [
-    /* @__PURE__ */ jsx("div", { className: "order-last md:order-first", children: mediaType === "image" ? /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "aspect-square w-full object-cover" }) : /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-full", children: [
-      /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    mediaType = "image"
+  } = 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 w-full auto-cols-fr grid-cols-1 items-center justify-center gap-12 md:grid-cols-2 md:gap-10 lg:gap-x-20", children: [
+    /* @__PURE__ */ jsx("div", { className: "order-last md:order-first", children: mediaType === "image" ? /* @__PURE__ */ jsx(CompoundImage, { src: ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src) ?? "", alt: ((_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt) ?? "", className: "aspect-square w-full object-cover" }) : /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-full", children: [
+      /* @__PURE__ */ jsx(CompoundImage, { src: ((_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.src) ?? "", alt: ((_d = images == null ? void 0 : images[0]) == null ? void 0 : _d.alt) ?? "", className: "size-full object-cover" }),
       /* @__PURE__ */ jsx("button", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx("svg", { className: "size-6 text-black", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("polygon", { points: "5,3 19,12 5,21" }) }) }) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
@@ -37,7 +45,7 @@ const ImageTestimonial = (props) => {
 const ImageTestimonialDefaults = {
   numberOfStars: 5,
   quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
-  image: { src: "https://picsum.photos/seed/image-testimonial/800/800", alt: "Testimonial image" },
+  images: [{ src: "https://picsum.photos/seed/image-testimonial/800/800", alt: "Testimonial image" }],
   name: "Name Surname",
   position: "Position, Company name",
   logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },

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

@@ -7,14 +7,22 @@ declare const conf: {
         quote: {
             type: string;
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
                     type: "text";
                 };
             };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
         };
         logo: {
             type: "object";
@@ -38,6 +46,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/index.js

@@ -1,10 +1,11 @@
 import { ImageTestimonial, ImageTestimonialDefaults } from "./component.js";
-import { imageField } from "../../../puck-core/core/props/media.js";
+import { imageField, imagesField } from "../../../puck-core/core/props/media.js";
 import { testimonialStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     quote: { type: "textarea" },
-    image: imageField,
+    images: imagesField,
     logo: imageField,
     name: { type: "text" },
     position: { type: "text" },
@@ -13,7 +14,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: testimonialStyleFields.mediaType
+        mediaType: testimonialStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

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

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