dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/contact-sections/contact-modal/contact-modal.js

@@ -6,18 +6,18 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from ".
 import { Sheet, SheetTrigger, SheetContent } from "../../../shadcn/sheet.js";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { Input } from "../../../shadcn/input.js";
-import { Checkbox } from "../../../shadcn/checkbox.js";
 import { Label } from "../../../shadcn/label.js";
 import { Textarea } from "../../../shadcn/textarea.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { useContactForm } from "../use-contact-form.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ContactModal = (props) => {
   const { heading, description, button, styles } = {
     ...ContactModalDefaults,
     ...props
   };
-  const { formType = "simple", modalType = "dialog" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, formType = "simple", modalType = "dialog" } = styles ?? {};
   const { createSubmitHandler, submitting } = useContactForm();
   const [name, setName] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -26,7 +26,6 @@ const ContactModal = (props) => {
   const [phone, setPhone] = useState("");
   const [message, setMessage] = useState("");
   const [topic, setTopic] = useState("");
-  const [acceptTerms, setAcceptTerms] = useState(false);
   const handleSubmit = createSubmitHandler(
     () => ({
       name: name || `${firstName} ${lastName}`.trim() || "",
@@ -42,7 +41,6 @@ const ContactModal = (props) => {
       setPhone("");
       setMessage("");
       setTopic("");
-      setAcceptTerms(false);
     }
   );
   const renderSimpleFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -122,28 +120,12 @@ const ContactModal = (props) => {
     ] }),
     /* @__PURE__ */ jsxs("form", { className: "grid gap-6", onSubmit: handleSubmit, children: [
       formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
-      /* @__PURE__ */ jsxs("div", { className: "rb-4 mb-4 flex items-center", children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            id: "terms",
-            checked: acceptTerms,
-            onCheckedChange: setAcceptTerms,
-            className: "mr-2"
-          }
-        ),
-        /* @__PURE__ */ jsxs(Label, { htmlFor: "terms", className: "cursor-pointer text-sm", children: [
-          "I accept the",
-          " ",
-          /* @__PURE__ */ jsx("a", { className: "text-link-primary underline", href: "#", children: "Terms" })
-        ] })
-      ] }),
       /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
     ] })
   ] });
   if (modalType === "sheet-right" || modalType === "sheet-bottom") {
     const side = modalType === "sheet-right" ? "right" : "bottom";
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg text-center", children: /* @__PURE__ */ jsxs(Sheet, { 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 max-w-lg text-center", children: /* @__PURE__ */ jsxs(Sheet, { children: [
       /* @__PURE__ */ jsx(SheetTrigger, { render: /* @__PURE__ */ jsx(Button, {}), children: "Open contact form" }),
       /* @__PURE__ */ jsx(
         SheetContent,
@@ -161,8 +143,8 @@ const ContactModal = (props) => {
       )
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg text-center", children: /* @__PURE__ */ jsxs(Dialog, { children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { children: "Open modal" }) }),
+  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 max-w-lg text-center", children: /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90", children: "Open modal" }) }),
     /* @__PURE__ */ jsx(
       DialogContent,
       {

package/dist/components/puck-block/contact-sections/contact-modal/index.d.ts

@@ -21,7 +21,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";
@@ -71,6 +71,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.";
+                    };
+                };
                 formType: {
                     readonly type: "radio";
                     readonly label: "Form Type";

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

@@ -2,6 +2,7 @@ import { ContactModal, ContactModalDefaults } from "./contact-modal.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { contactStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     heading: headingField,
@@ -12,7 +13,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         formType: contactStyleFields.formType,
-        modalType: contactStyleFields.modalType
+        modalType: contactStyleFields.modalType,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,25 +2,24 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { Input } from "../../../shadcn/input.js";
-import { Checkbox } from "../../../shadcn/checkbox.js";
 import { Label } from "../../../shadcn/label.js";
 import { Textarea } from "../../../shadcn/textarea.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useContactForm } from "../use-contact-form.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const FormWithMedia = (props) => {
   const { tagline, heading, description, button, image, styles } = {
     ...FormWithMediaDefaults,
     ...props
   };
-  const { mediaPosition = "right", mediaType = "image" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, mediaPosition = "right", mediaType = "image" } = styles ?? {};
   const { createSubmitHandler, submitting } = useContactForm();
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [phone, setPhone] = useState("");
   const [message, setMessage] = useState("");
-  const [acceptTerms, setAcceptTerms] = useState(false);
   const handleSubmit = createSubmitHandler(
     () => ({
       name: name || "",
@@ -33,7 +32,6 @@ const FormWithMedia = (props) => {
       setEmail("");
       setPhone("");
       setMessage("");
-      setAcceptTerms(false);
     }
   );
   const formContent = /* @__PURE__ */ jsxs("div", { children: [
@@ -68,19 +66,11 @@ const FormWithMedia = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center space-x-2 text-sm md:mb-4", children: [
-        /* @__PURE__ */ jsx(Checkbox, { id: "terms", checked: acceptTerms, onCheckedChange: setAcceptTerms }),
-        /* @__PURE__ */ jsxs(Label, { htmlFor: "terms", className: "cursor-pointer", children: [
-          "I accept the",
-          " ",
-          /* @__PURE__ */ jsx("a", { className: "text-link-primary underline", href: "#", children: "Terms" })
-        ] })
-      ] }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
     ] })
   ] });
   const mediaContent = /* @__PURE__ */ jsx("div", { children: mediaType === "map" ? /* @__PURE__ */ jsx("a", { href: "#map", className: "block", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }) }) : /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }) });
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx(
+  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: cn(

package/dist/components/puck-block/contact-sections/form-with-media/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";
@@ -83,6 +83,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/contact-sections/form-with-media/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonField } from "../../../puck-core/core/props/interactive.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" },
@@ -15,7 +16,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         mediaPosition: contactStyleFields.mediaPosition,
-        mediaType: contactStyleFields.mediaType
+        mediaType: contactStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -4,12 +4,13 @@ import { useState } from "react";
 import { Button } from "../../../shadcn/button.js";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../shadcn/select.js";
 import { Input } from "../../../shadcn/input.js";
-import { Checkbox } from "../../../shadcn/checkbox.js";
 import { Label } from "../../../shadcn/label.js";
 import { Textarea } from "../../../shadcn/textarea.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { useContactForm } from "../use-contact-form.js";
 import { BiMap, BiPhone, BiEnvelope } 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";
 import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
 const iconMap = {
   email: /* @__PURE__ */ jsx(BiEnvelope, { className: "size-8" }),
@@ -21,7 +22,7 @@ const HeaderFormCards = (props) => {
     ...HeaderFormCardsDefaults,
     ...props
   };
-  const { formType = "simple" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, formType = "simple" } = styles ?? {};
   const { createSubmitHandler, submitting } = useContactForm();
   const [name, setName] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -30,7 +31,6 @@ const HeaderFormCards = (props) => {
   const [phone, setPhone] = useState("");
   const [message, setMessage] = useState("");
   const [topic, setTopic] = useState("");
-  const [acceptTerms, setAcceptTerms] = useState(false);
   const handleSubmit = createSubmitHandler(
     () => ({
       name: name || `${firstName} ${lastName}`.trim() || "",
@@ -46,7 +46,6 @@ const HeaderFormCards = (props) => {
       setPhone("");
       setMessage("");
       setTopic("");
-      setAcceptTerms(false);
     }
   );
   const renderSimpleFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -119,7 +118,7 @@ const HeaderFormCards = (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: [
+  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: "rb-12 mb-8 max-w-lg md:mb-12", 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 }),
@@ -128,14 +127,6 @@ const HeaderFormCards = (props) => {
     /* @__PURE__ */ jsxs("div", { className: "grid auto-cols-fr grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-[1fr_1fr] md:gap-x-20 md:gap-y-16", children: [
       /* @__PURE__ */ jsxs("form", { className: "grid grid-cols-1 gap-6", onSubmit: handleSubmit, children: [
         formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
-        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center space-x-2 text-sm md:mb-4", children: [
-          /* @__PURE__ */ jsx(Checkbox, { id: "terms", checked: acceptTerms, onCheckedChange: setAcceptTerms }),
-          /* @__PURE__ */ jsxs(Label, { htmlFor: "terms", className: "cursor-pointer", children: [
-            "I accept the",
-            " ",
-            /* @__PURE__ */ jsx("a", { className: "text-link-primary underline", href: "#", children: "Terms" })
-          ] })
-        ] }),
         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "mb-auto grid gap-x-4 gap-y-10 py-2 sm:grid-cols-2", children: contacts.map((contact, index) => /* @__PURE__ */ jsxs("div", { children: [

package/dist/components/puck-block/contact-sections/header-form-cards/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";
@@ -92,6 +92,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.";
+                    };
+                };
                 formType: {
                     readonly type: "radio";
                     readonly label: "Form Type";

package/dist/components/puck-block/contact-sections/header-form-cards/index.js

@@ -2,6 +2,7 @@ import { HeaderFormCards, HeaderFormCardsDefaults } from "./header-form-cards.js
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { contactStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        formType: contactStyleFields.formType
+        formType: contactStyleFields.formType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/header-info-fullwidth/header-info-fullwidth.js

@@ -2,6 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { BiMap, BiPhone, BiEnvelope } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
 const iconMap = {
   email: /* @__PURE__ */ jsx(BiEnvelope, { className: "size-6" }),
@@ -13,8 +15,8 @@ const HeaderInfoFullwidth = (props) => {
     ...HeaderInfoFullwidthDefaults,
     ...props
   };
-  const { mediaType = "image" } = 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 = "image" } = 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 grid auto-cols-fr grid-cols-1 gap-x-12 gap-y-12 md:mb-20 md:grid-cols-[1fr_.75fr] md:gap-x-20 md:gap-y-16", children: [
       /* @__PURE__ */ jsxs("div", { className: "rb-12 max-w-lg", children: [
         /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),

package/dist/components/puck-block/contact-sections/header-info-fullwidth/index.d.ts

@@ -46,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/contact-sections/header-info-fullwidth/index.js

@@ -2,6 +2,7 @@ import { HeaderInfoFullwidth, HeaderInfoFullwidthDefaults } from "./header-info-
 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" },
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: contactStyleFields.mediaType
+        mediaType: contactStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/info-cards-media/index.d.ts

@@ -46,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/contact-sections/info-cards-media/index.js

@@ -2,6 +2,7 @@ import { InfoCardsMedia, InfoCardsMediaDefaults } from "./info-cards-media.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" },
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: contactStyleFields.mediaType
+        mediaType: contactStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/info-cards-media/info-cards-media.js

@@ -2,6 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { BiMap, BiPhone, BiEnvelope } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
 const iconMap = {
   email: /* @__PURE__ */ jsx(BiEnvelope, { className: "size-8" }),
@@ -13,8 +15,8 @@ const InfoCardsMedia = (props) => {
     ...InfoCardsMediaDefaults,
     ...props
   };
-  const { mediaType = "image" } = 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 = "image" } = 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: "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/contact-sections/location-cards-grid/index.d.ts

@@ -49,7 +49,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";
@@ -101,6 +101,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/contact-sections/location-cards-grid/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonField } from "../../../puck-core/core/props/interactive.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" },
@@ -26,7 +27,8 @@ const conf = {
       objectFields: {
         mediaType: contactStyleFields.mediaType,
         textAlign: contactStyleFields.textAlign,
-        headerAlign: contactStyleFields.headerAlign
+        headerAlign: contactStyleFields.headerAlign,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/location-cards-grid/location-cards-grid.js

@@ -2,19 +2,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { Button } from "../../../shadcn/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const LocationCardsGrid = (props) => {
   const { tagline, heading, description, locations, styles } = {
     ...LocationCardsGridDefaults,
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaType = "map",
     textAlign = "center",
     headerAlign = "center"
   } = styles ?? {};
   const isCardCenter = textAlign === "center";
   const isHeaderCenter = headerAlign === "center";
-  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",
       {

package/dist/components/puck-block/contact-sections/props.d.ts

@@ -8,6 +8,9 @@ import type { BaseImage } from "@/components/puck-core/core/props/media";
 import type { BaseButton, Action } from "@/components/puck-core/core/props/interactive";
 export type { BaseImage, BaseButton, Action };
 export interface ContactSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     formType?: "simple" | "advanced";
     textAlign?: "left" | "center";
     mediaPosition?: "left" | "right";

package/dist/components/puck-block/contact-sections/split-info-form/index.d.ts

@@ -33,7 +33,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";
@@ -83,6 +83,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.";
+                    };
+                };
                 formType: {
                     readonly type: "radio";
                     readonly label: "Form Type";