dune-react 0.0.20 → 0.0.21

package/dist/components/puck-base/core/with-editable.js

@@ -4,7 +4,7 @@ import { useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
 import { usePuckDispatch, usePuckAppState } from "./hooks.js";
 import { Pencil } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
 function getComponentIdFromDOM(el) {
@@ -68,7 +68,18 @@ function withEditable(Component, config) {
       [props, handleSave]
     );
     if (isBlock) {
-      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: "group relative block h-full w-full", children: [
+      const imgClass = String(props.className || "");
+      const isAbsoluteChild = /\babsolute\b/.test(imgClass);
+      const hasExplicitSize = /\bsize-\d/.test(imgClass) || /\b[wh]-\d+\b/.test(imgClass) && !/\b[wh]-full\b/.test(imgClass);
+      let wrapperClassName;
+      if (isAbsoluteChild) {
+        wrapperClassName = "group block h-full w-full";
+      } else if (hasExplicitSize) {
+        wrapperClassName = "group relative inline-block";
+      } else {
+        wrapperClassName = "group relative block";
+      }
+      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: wrapperClassName, children: [
         /* @__PURE__ */ jsx(Component, { ...props }),
         /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center", children: /* @__PURE__ */ jsx(
           "span",

package/dist/components/puck-base/fields/action-field.js

@@ -5,7 +5,7 @@ import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Tabs, TabsList, TabsTrigger } from "../../shadcn/tabs.js";
 import { LinkIcon, XIcon, GlobeIcon } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 const ACTION_TYPE_OPTIONS = [
   { label: "Page Link", value: "page" },
   { label: "External Link", value: "external" },

package/dist/components/puck-base/fields/location-field.js

@@ -4,7 +4,7 @@ import { memo, useState, useRef, useEffect, useCallback } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Loader2, Search, X, MapPin } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 let googleLoadPromise = null;
 function loadGooglePlaces(apiKey) {
   var _a, _b;

package/dist/components/puck-base/form.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundButton } from "./button.js";
 import { CompoundField } from "./field.js";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
 const formMethods = ["get", "post", "put", "patch", "delete"];
 const CompoundForm = (props) => {
   const { isEditor: isEditorMode } = useEditorContext();

package/dist/components/puck-base/image.js

@@ -14,7 +14,7 @@ import { ScrollArea } from "../shadcn/scroll-area.js";
 import { Slider } from "../shadcn/slider.js";
 import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
 import useUpload from "./use-upload.js";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
 const createImage = (url) => new Promise((resolve, reject) => {
   const image2 = new Image();
   image2.addEventListener("load", () => resolve(image2));

package/dist/components/puck-base/index.d.ts

@@ -17,6 +17,7 @@ export { withEditable } from "./core/with-editable";
 export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuckGetSelectorForId, type PuckComponentInfo, } from "./core/hooks";
 export { findComponentById, getRandomAdjective } from "./core/utils";
 export { icon, action, actionDefaults, button, buttons, badge, image, images, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";
-export { EditorContextProvider, useEditorContext } from "./editor-context";
+export { EditorContextProvider, useEditorContext } from "@/components/puck-core/core/context/editor-context";
+export { SectionIdProvider, useSectionId } from "@/components/puck-core/core/context/section-id-context";
 export { AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";

package/dist/components/puck-base/inline-editable.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createElement, useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
 import { usePuckDispatch } from "./core/hooks.js";
 import set from "../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 import { findComponentById } from "./core/utils.js";

package/dist/components/puck-block/banner-sections/css-marquee-banner/css-marquee-banner.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const CssMarqueeBanner = (props) => {
   const {
     headings = [],
@@ -11,12 +12,15 @@ const CssMarqueeBanner = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     direction = "left",
     contentType = "text"
   } = styles ?? {};
   const animationClass = direction === "left" ? "animate-marquee-left" : "animate-marquee-right";
   if (contentType === "textWithImage") {
-    return /* @__PURE__ */ jsx("section", { id: "relume", className: "flex w-screen max-w-full justify-end overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("flex w-screen max-w-full justify-end overflow-hidden", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
       "div",
       {
         className: `grid ${animationClass} auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-4`,
@@ -36,10 +40,11 @@ const CssMarqueeBanner = (props) => {
     )) }) });
   }
   return /* @__PURE__ */ jsx(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
-      className: "flex w-screen max-w-full justify-end overflow-hidden border-b border-border-primary",
+      className: cn("flex w-screen max-w-full justify-end overflow-hidden border-b border-border-primary", sectionClassName),
+      style: sectionStyle,
+      css,
       children: /* @__PURE__ */ jsx("div", { className: "flex w-[200vw]", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
         "div",
         {

package/dist/components/puck-block/banner-sections/css-marquee-banner/index.d.ts

@@ -37,6 +37,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.";
+                    };
+                };
                 direction: {
                     readonly type: "radio";
                     readonly label: "Direction";

package/dist/components/puck-block/banner-sections/css-marquee-banner/index.js

@@ -1,6 +1,7 @@
 import { CssMarqueeBanner, CssMarqueeBannerDefaults } from "./css-marquee-banner.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { bannerStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     headings: {
@@ -25,7 +26,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         direction: bannerStyleFields.direction,
-        contentType: bannerStyleFields.contentType
+        contentType: bannerStyleFields.contentType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/banner-sections/dismissible-banner/index.d.ts

@@ -173,6 +173,28 @@ declare const conf: {
                     render: typeof import("../../../puck-core").ActionField;
                 };
                 title: {
+                    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.";
+                        };
+                    };
                     type: string;
                 };
             };
@@ -181,6 +203,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.";
+                    };
+                };
                 containerStyle: {
                     readonly type: "radio";
                     readonly label: "Container Style";

package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.js

@@ -3,17 +3,28 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { useScroll, useTransform, motion } from "framer-motion";
 import React__default, { useRef } from "react";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 const DualRowMarquee = (props) => {
   const {
     headingsTop = [],
-    headingsBottom = []
+    headingsBottom = [],
+    styles
   } = {
     ...DualRowMarqueeDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
     offset: ["start end", "end start"]
   });
   const isMobile = useMediaQuery("(max-width: 991px)");
@@ -46,11 +57,12 @@ const DualRowMarquee = (props) => {
     }
   );
   return /* @__PURE__ */ jsxs(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
       ref: sectionRef,
-      className: "flex w-screen max-w-full flex-col justify-end overflow-hidden",
+      className: cn("flex w-screen max-w-full flex-col justify-end overflow-hidden", sectionClassName),
+      style: sectionStyle,
+      css,
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderHeadings(headingsTop, headingTopTranslate) }, index)) }),
         /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderHeadings(headingsBottom, headingBottomTranslate) }, index)) })

package/dist/components/puck-block/banner-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 BannerSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     containerStyle?: "boxed" | "fullWidth";
     textLayout?: "default" | "centered" | "inlineLink";
     ctaType?: "email" | "button" | "buttons" | "socialLinks";

package/dist/components/puck-block/banner-sections/scroll-driven-marquee/scroll-driven-marquee.js

@@ -2,20 +2,31 @@
 import { jsx } from "react/jsx-runtime";
 import { useScroll, useTransform, motion } from "framer-motion";
 import { useRef } from "react";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 const ScrollDrivenMarquee = (props) => {
   const {
-    headings = []
+    headings = [],
+    styles
   } = {
     ...ScrollDrivenMarqueeDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
     offset: ["start end", "end start"]
   });
   const headingTranslate = useTransform(scrollYProgress, [0, 1], ["-50%", "0%"]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", ref: sectionRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex whitespace-nowrap border-b border-t border-border-primary", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center overflow-hidden whitespace-nowrap py-4", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: sectionRef, className: cn("overflow-hidden", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "flex whitespace-nowrap border-b border-t border-border-primary", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center overflow-hidden whitespace-nowrap py-4", children: Array(2).fill(0).map((_, index) => /* @__PURE__ */ jsx(
     motion.div,
     {
       className: "ml-12 grid auto-cols-max grid-flow-col grid-cols-[max-content] gap-12",

package/dist/components/puck-block/banner-sections/scroll-parallax-text/scroll-parallax-text.js

@@ -3,26 +3,37 @@ import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useScroll, useTransform, motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 const ScrollParallaxText = (props) => {
   const {
-    headings = []
+    headings = [],
+    styles
   } = {
     ...ScrollParallaxTextDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const sectionRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(sectionRef);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
     offset: ["start start", "end start"]
   });
   const xPartOne = useTransform(scrollYProgress, [0, 1], ["-10%", "0%"]);
   const xPartTwo = useTransform(scrollYProgress, [0, 1], ["10%", "0%"]);
   return /* @__PURE__ */ jsx(
-    "section",
+    SectionWrapper,
     {
-      id: "relume",
       ref: sectionRef,
-      className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28",
+      className: cn("overflow-hidden px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
       children: /* @__PURE__ */ jsx("div", { className: "flex flex-col whitespace-nowrap", children: headings.map((heading, index) => /* @__PURE__ */ jsx(
         motion.h1,
         {

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

@@ -3,18 +3,18 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 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 { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const CenteredForm = (props) => {
   const { tagline, heading, description, button, styles } = {
     ...CenteredFormDefaults,
     ...props
   };
-  const { formType = "simple", textAlign = "center" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, formType = "simple", textAlign = "center" } = styles ?? {};
   const { createSubmitHandler, submitting } = useContactForm();
   const [name, setName] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -23,7 +23,6 @@ const CenteredForm = (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() || "",
@@ -39,7 +38,6 @@ const CenteredForm = (props) => {
       setPhone("");
       setMessage("");
       setTopic("");
-      setAcceptTerms(false);
     }
   );
   const isCenter = textAlign === "center";
@@ -114,7 +112,7 @@ const CenteredForm = (props) => {
       )
     ] })
   ] });
-  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",
       {
@@ -135,14 +133,6 @@ const CenteredForm = (props) => {
         onSubmit: handleSubmit,
         children: [
           formType === "advanced" ? renderAdvancedForm() : renderSimpleForm(),
-          /* @__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", { className: cn({ "text-center": isCenter }), children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
         ]
       }

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

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

@@ -2,6 +2,7 @@ import { CenteredForm, CenteredFormDefaults } from "./centered-form.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" },
@@ -13,7 +14,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         formType: contactStyleFields.formType,
-        textAlign: contactStyleFields.textAlign
+        textAlign: contactStyleFields.textAlign,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -1,6 +1,7 @@
 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 { 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-12" }),
@@ -13,6 +14,9 @@ const ContactCardsGrid = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     columns = 3,
     textAlign = "left",
     hasHeader = false,
@@ -22,7 +26,7 @@ const ContactCardsGrid = (props) => {
   const isCardCenter = textAlign === "center";
   const isHeaderCenter = headerAlign === "center";
   const gridColsClass = columns === 4 ? "md:grid-cols-2 lg:grid-cols-4" : "md:grid-cols-3";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     showHeader && /* @__PURE__ */ jsxs(
       "div",
       {

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

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

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

@@ -1,6 +1,7 @@
 import { ContactCardsGrid, ContactCardsGridDefaults } from "./contact-cards-grid.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { contactStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -23,7 +24,8 @@ const conf = {
         columns: contactStyleFields.columns,
         textAlign: contactStyleFields.textAlign,
         hasHeader: contactStyleFields.hasHeader,
-        headerAlign: contactStyleFields.headerAlign
+        headerAlign: contactStyleFields.headerAlign,
+        ...sectionWrapperFields
       }
     }
   },

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,7 +143,7 @@ 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: [
+  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, { children: "Open modal" }) }),
     /* @__PURE__ */ jsx(
       DialogContent,