dune-react 0.0.20 → 0.0.21

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

@@ -2,6 +2,7 @@ import { TabLocations, TabLocationsDefaults } from "./tab-locations.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { contactStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: contactStyleFields.mediaType
+        mediaType: contactStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/tab-locations/tab-locations.js

@@ -2,14 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabLocations = (props) => {
   var _a;
   const { tagline, heading, description, tabs, styles } = {
     ...TabLocationsDefaults,
     ...props
   };
-  const { mediaType = "map" } = 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, mediaType = "map" } = 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__ */ jsxs("div", { className: "mb-12 flex max-w-lg flex-col justify-start md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/contact-sections/use-contact-form.js

@@ -1,7 +1,7 @@
 "use client";
 import { useState } from "react";
 import { toast } from "sonner";
-import { useEditorContext } from "../../puck-core/editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 import { submitFormLead } from "./api/form-leads.js";
 const EMPTY = { name: "", email: "", phone: "", message: "" };
 function useContactForm() {

package/dist/components/puck-block/cta-sections/feature-card-cta/feature-card-cta.js

@@ -2,14 +2,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const FeatureCardCta = (props) => {
   const { featureSections = [], styles } = {
     ...FeatureCardCtaDefaults,
     ...props
   };
-  const { textAlign = "left" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, textAlign = "left" } = styles ?? {};
   const isCenter = textAlign === "center";
-  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 auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:gap-x-16", children: featureSections.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn({ "text-center": isCenter }), 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 auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:gap-x-16", children: featureSections.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn({ "text-center": isCenter }), children: [
     /* @__PURE__ */ jsx(
       CompoundImage,
       {

package/dist/components/puck-block/cta-sections/feature-card-cta/index.d.ts

@@ -113,6 +113,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/cta-sections/feature-card-cta/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { ctaStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     featureSections: {
@@ -20,7 +21,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        textAlign: ctaStyleFields.textAlign
+        textAlign: ctaStyleFields.textAlign,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/cta-sections/mouse-track-cta/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.";
+                    };
+                };
                 listStyle: {
                     readonly type: "radio";
                     readonly label: "List Style";

package/dist/components/puck-block/cta-sections/mouse-track-cta/index.js

@@ -3,6 +3,7 @@ import { headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { actionField } from "../../../puck-core/core/props/interactive.js";
 import { ctaStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -21,7 +22,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        listStyle: ctaStyleFields.listStyle
+        listStyle: ctaStyleFields.listStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/cta-sections/mouse-track-cta/mouse-track-cta.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
 const getDirection = (ev, obj) => {
   const { width: w, height: h, left, top } = obj.getBoundingClientRect();
@@ -29,7 +30,7 @@ const MouseTrackCta = (props) => {
     ...MouseTrackCtaDefaults,
     ...props
   };
-  const { listStyle = "center" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, listStyle = "center" } = styles ?? {};
   const isNumbered = listStyle === "numbered";
   const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
   const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -63,7 +64,7 @@ const MouseTrackCta = (props) => {
   const translateBottomInverse = direction === "bottom" ? isNumbered ? 25 : 50 : 0;
   const translateLeftInverse = direction === "left" ? isNumbered ? -25 : -50 : 0;
   const translateRightInverse = direction === "right" ? isNumbered ? 25 : 50 : 0;
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", onMouseMove: !isNumbered ? handleMouseMove : void 0, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isNumbered }), onMouseMove: isNumbered ? handleMouseMove : void 0, children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, onMouseMove: !isNumbered ? handleMouseMove : void 0, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isNumbered }), onMouseMove: isNumbered ? handleMouseMove : void 0, children: [
     /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
     /* @__PURE__ */ jsx(
       motion.div,

package/dist/components/puck-block/cta-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 CtaSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     textLayout?: "left" | "center" | "twoColumn" | "inlineRow";
     textAlign?: "left" | "center";
     mediaPosition?: "left" | "right";
@@ -21,7 +24,6 @@ export interface CtaSectionBaseProps {
     heading: string;
     description: string;
     buttons: BaseButton[];
-    image: BaseImage;
     images: BaseImage[];
     video: string;
     inputPlaceholder: string;

package/dist/components/puck-block/cta-sections/side-media-cta/index.d.ts

@@ -91,14 +91,22 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        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;
+            };
         };
         inputPlaceholder: {
             type: string;
@@ -165,6 +173,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.";
+                    };
+                };
                 mediaPosition: {
                     readonly type: "radio";
                     readonly label: "Media Position";

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

@@ -91,15 +91,6 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
-        image: {
-            type: "object";
-            objectFields: {
-                src: import("@puckeditor/core").Field<string>;
-                alt: {
-                    type: "text";
-                };
-            };
-        };
         images: {
             readonly type: "array";
             readonly max: 10;
@@ -202,6 +193,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.";
+                    };
+                };
                 textLayout: {
                     readonly type: "select";
                     readonly label: "Text Layout";

package/dist/components/puck-block/faq-sections/dual-column-accordion-faq/dual-column-accordion-faq.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const DualColumnAccordionFaq = (props) => {
   const {
     heading,
@@ -15,14 +16,14 @@ const DualColumnAccordionFaq = (props) => {
     ...DualColumnAccordionFaqDefaults,
     ...props
   };
-  const { bordered = false } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, bordered = false } = styles ?? {};
   const halfLength = Math.ceil(questions.length / 2);
   const firstColumnQuestions = questions.slice(0, halfLength);
   const secondColumnQuestions = questions.slice(halfLength);
   const itemClass = cn({
     "border border-border-primary px-5 md:px-6 first:rounded-t last:rounded-b": bordered
   });
-  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("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/faq-sections/dual-column-accordion-faq/index.d.ts

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

package/dist/components/puck-block/faq-sections/dual-column-accordion-faq/index.js

@@ -2,6 +2,7 @@ import { DualColumnAccordionFaq, DualColumnAccordionFaqDefaults } from "./dual-c
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { faqStyleFields } 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: {
-        bordered: faqStyleFields.bordered
+        bordered: faqStyleFields.bordered,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/faq-sections/icon-card-faq/icon-card-faq.js

@@ -1,6 +1,8 @@
 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 IconCardFaq = (props) => {
   const {
     heading,
@@ -8,12 +10,14 @@ const IconCardFaq = (props) => {
     iconQuestions,
     footerHeading,
     footerDescription,
-    button
+    button,
+    styles
   } = {
     ...IconCardFaqDefaults,
     ...props
   };
-  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 } = 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__ */ jsxs("div", { className: "mx-auto mb-12 w-full max-w-lg text-center md:mb-18 lg:mb-20", 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/faq-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 FaqSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     textAlign?: "left" | "center";
     gridColumns?: 1 | 2 | 3;
     bordered?: boolean;

package/dist/components/puck-block/faq-sections/stacked-accordion-faq/index.d.ts

@@ -96,6 +96,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/faq-sections/stacked-accordion-faq/index.js

@@ -2,6 +2,7 @@ import { StackedAccordionFaq, StackedAccordionFaqDefaults } from "./stacked-acco
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { faqStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -24,7 +25,8 @@ const conf = {
       objectFields: {
         textAlign: faqStyleFields.textAlign,
         hasFooter: faqStyleFields.hasFooter,
-        bordered: faqStyleFields.bordered
+        bordered: faqStyleFields.bordered,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/faq-sections/stacked-accordion-faq/stacked-accordion-faq.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const StackedAccordionFaq = (props) => {
   const {
     heading,
@@ -16,12 +17,15 @@ const StackedAccordionFaq = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textAlign = "center",
     hasFooter = true,
     bordered = false
   } = styles ?? {};
   const isCenter = textAlign === "center";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("rb-12 mb-12 md:mb-18 lg:mb-20", { "text-center": isCenter }), 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/faq-sections/stacked-static-faq/index.d.ts

@@ -96,6 +96,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/faq-sections/stacked-static-faq/index.js

@@ -2,6 +2,7 @@ import { StackedStaticFaq, StackedStaticFaqDefaults } from "./stacked-static-faq
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { faqStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -24,7 +25,8 @@ const conf = {
       objectFields: {
         textAlign: faqStyleFields.textAlign,
         gridColumns: faqStyleFields.gridColumns,
-        hasFooter: faqStyleFields.hasFooter
+        hasFooter: faqStyleFields.hasFooter,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/faq-sections/stacked-static-faq/stacked-static-faq.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const StackedStaticFaq = (props) => {
   const {
     heading,
@@ -15,6 +16,9 @@ const StackedStaticFaq = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textAlign = "center",
     gridColumns = 1,
     hasFooter = true
@@ -27,7 +31,7 @@ const StackedStaticFaq = (props) => {
     "grid-cols-1 md:grid-cols-2 lg:grid-cols-3": gridColumns === 3,
     "md:grid-cols-[0.75fr_1fr]": isInline
   });
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "w-full max-w-lg": gridColumns === 1 && isCenter }), 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: cn("container", { "w-full max-w-lg": gridColumns === 1 && isCenter }), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("rb-12 mb-12 md:mb-18 lg:mb-20", { "text-center": isCenter }), 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/faq-sections/two-column-accordion-faq/index.d.ts

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

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

@@ -2,6 +2,7 @@ import { TwoColumnAccordionFaq, TwoColumnAccordionFaqDefaults } from "./two-colu
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { faqStyleFields } 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: {
-        bordered: faqStyleFields.bordered
+        bordered: faqStyleFields.bordered,
+        ...sectionWrapperFields
       }
     }
   },