dune-react 0.0.20 → 0.0.22

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./shadcn/index.ts";
 export * from "./ui-block/index.ts";
 export * from "./puck-base/index.ts";
+export * from "./puck-core/index.ts";
 export * from "./puck-block/index.ts";

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

@@ -1,5 +1,5 @@
 import { type ButtonProps } from "@/components/shadcn/button";
-import { Action, IconName } from "./core/types";
+import { Action, IconName } from "@/components/puck-core/core/types";
 export interface CompoundButtonProps {
     label: string;
     action?: Action;

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

@@ -4,12 +4,11 @@ import { useState, useCallback } from "react";
 import { SafeDynamicIcon } from "./safe-dynamic-icon.js";
 import { Button, buttonVariants } from "../shadcn/button.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../shadcn/dialog.js";
-import { button } from "./core/fields.js";
 import { cn } from "../../utils/css-utils.js";
-import { resolveActionUrl } from "./core/types.js";
-import { withEditable } from "./core/with-editable.js";
-import { AutoField } from "./fields/auto-field.js";
-const BUTTON_FIELDS = button.objectFields;
+import { withEditable } from "../puck-core/core/with-editable.js";
+import { buttonField, resolveActionUrl } from "../puck-core/core/props/interactive.js";
+import { AutoField } from "../puck-core/fields/auto-field.js";
+const BUTTON_FIELDS = buttonField.objectFields;
 function ButtonEditDialog({
   open,
   onOpenChange,
@@ -80,7 +79,7 @@ function CompoundButtonBase(props) {
 }
 const EditableButton = withEditable(CompoundButtonBase, {
   type: "button",
-  fields: button.objectFields
+  fields: buttonField.objectFields
 });
 const CompoundButton = (props) => {
   const [dialogOpen, setDialogOpen] = useState(false);

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

@@ -1,4 +1,4 @@
-import { IconName } from "./core/types";
+import { IconName } from "@/components/puck-core/core/types";
 import { CompoundButtonProps } from "./button";
 import { CompoundImageProps } from "./image";
 export interface CompoundCardProps {

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/css-utils.js";
-import { ErrorBoundary } from "./error-boundary.js";
+import { ErrorBoundary } from "../puck-core/error-boundary.js";
 const SECTION_STYLE_VARS = {
   dark: {
     "--background": "oklch(0.145 0 0)",

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

@@ -1,6 +1,6 @@
 import { CompoundBadgeProps } from "./badge";
 import { CompoundButtonProps } from "./button";
-import { Feature } from "./core/types";
+import { Feature } from "@/components/puck-core/core/types";
 export interface CompoundContentProps {
     badge?: CompoundBadgeProps;
     heading?: string;

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

@@ -4,8 +4,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import Cropper from "react-easy-crop";
 import { Pencil, Search, Upload, Loader2, Check } from "lucide-react";
 import { cn } from "../../utils/css-utils.js";
-import { withEditable } from "./core/with-editable.js";
-import { image } from "./core/fields.js";
+import { withEditable } from "../puck-core/core/with-editable.js";
 import { Button } from "../shadcn/button.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../shadcn/dialog.js";
 import { Input } from "../shadcn/input.js";
@@ -13,20 +12,21 @@ import { Label } from "../shadcn/label.js";
 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 useUpload from "../puck-core/use-upload.js";
+import { useEditorContext } from "../puck-core/core/context/editor-context.js";
+import { imageField } from "../puck-core/core/props/media.js";
 const createImage = (url) => new Promise((resolve, reject) => {
-  const image2 = new Image();
-  image2.addEventListener("load", () => resolve(image2));
-  image2.addEventListener("error", (error) => reject(error));
-  image2.setAttribute("crossOrigin", "anonymous");
-  image2.src = url;
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
 });
 const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
-  const image2 = await createImage(imageSrc);
+  const image = await createImage(imageSrc);
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
-  const maxSize = Math.max(image2.width, image2.height);
+  const maxSize = Math.max(image.width, image.height);
   const safeArea = 2 * (maxSize / 2 * Math.sqrt(2));
   canvas.width = safeArea;
   canvas.height = safeArea;
@@ -34,17 +34,17 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
   ctx.rotate(rotation * Math.PI / 180);
   ctx.translate(-safeArea / 2, -safeArea / 2);
   ctx.drawImage(
-    image2,
-    safeArea / 2 - image2.width * 0.5,
-    safeArea / 2 - image2.height * 0.5
+    image,
+    safeArea / 2 - image.width * 0.5,
+    safeArea / 2 - image.height * 0.5
   );
   const data = ctx.getImageData(0, 0, safeArea, safeArea);
   canvas.width = pixelCrop.width;
   canvas.height = pixelCrop.height;
   ctx.putImageData(
     data,
-    Math.round(0 - safeArea / 2 + image2.width * 0.5 - pixelCrop.x),
-    Math.round(0 - safeArea / 2 + image2.height * 0.5 - pixelCrop.y)
+    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
+    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
   );
   return new Promise((resolve) => {
     canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.95);
@@ -326,7 +326,7 @@ function ImageEditDialog({
 }
 const EditableImage = withEditable(CompoundImageBase, {
   type: "image",
-  fields: image.objectFields
+  fields: imageField.objectFields
 });
 const CompoundImage = (props) => {
   const [dialogOpen, setDialogOpen] = useState(false);

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

@@ -7,16 +7,5 @@ export { CompoundField, type CompoundFieldProps, fieldTypes, type FieldTypes } f
 export { CompoundForm, type CompoundFormProps, formMethods, type FormMethods } from "./form";
 export { CompoundImage, type CompoundImageProps } from "./image";
 export { CompoundArticleCard, type CompoundArticleCardProps } from "./article-card";
-export { ImageUploadField } from "./image-upload-field";
-export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./fields";
-export { ErrorBoundary } from "./error-boundary";
 export { GradientText, type GradientTextProps } from "./gradient-text";
-export { InlineEditable } from "./inline-editable";
-export { type IconName, type Feature, type ActionType, type Action, resolveActionUrl, } from "./core/types";
-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 { AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields";
-export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";
+export { SafeDynamicIcon } from "./safe-dynamic-icon";

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

@@ -34,7 +34,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";
@@ -112,7 +112,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";
@@ -170,7 +170,7 @@ declare const conf: {
                 action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 title: {
                     type: string;
@@ -181,6 +181,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

@@ -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";
@@ -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
       }
     }
   },