dune-react 0.0.20 → 0.0.22

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

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

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

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

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

@@ -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-inline-card/index.js

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { TeamStickyScatter, TeamStickyScatterDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { teamStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -19,7 +20,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        imageShape: teamStyleFields.imageShape
+        imageShape: teamStyleFields.imageShape,
+        ...sectionWrapperFields
       }
     }
   },

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

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

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

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

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

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

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

@@ -3,19 +3,23 @@ import { BiSolidStar } from "../../../../node_modules/.pnpm/react-icons@5.6.0_re
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const BentoTestimonial = (props) => {
   const { heading, description, testimonialCards, styles } = {
     ...BentoTestimonialDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     hasBackgroundCards = true,
     gridLayout = "4x2"
   } = styles ?? {};
   let logoCardCount = 0;
   let backgroundImageCardCount = 0;
   const gridRowsClass = gridLayout === "4x3" ? "lg:grid-rows-3" : "lg:grid-rows-2";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsx("div", { className: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center", children: [
       /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })

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