dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/feature-sections/tab-feature/component.js

@@ -7,47 +7,53 @@ import { CompoundImage } from "../../../puck-base/image.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabFeature = (props) => {
-  const { defaultTabValue, tabs = [] } = {
+  const {
+    defaultTabValue,
+    tabs = [],
+    styles
+  } = {
     ...TabFeatureDefaults,
     ...props
   };
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs(
-    Tabs,
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
     {
-      defaultValue: defaultTabValue,
-      className: "grid grid-cols-1 items-center gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20",
-      children: [
-        /* @__PURE__ */ jsx(TabsList, { className: "col-start-1 col-end-2 row-start-1 row-end-2 grid grid-cols-1 items-center gap-x-4 gap-y-10", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
-          TabsTrigger,
-          {
-            value: tab.value,
-            className: "flex-col items-start justify-start whitespace-normal border-0 border-l-2 border-transparent py-0 pl-8 pr-0 text-left data-[state=active]:border-black data-[state=active]:bg-transparent data-[state=active]:text-text-primary",
-            children: [
-              /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl", children: tab.heading }),
-              /* @__PURE__ */ jsx("p", { children: tab.description })
-            ]
-          },
-          tab.value
-        )) }),
-        /* @__PURE__ */ jsx("div", { className: "max-size-full flex items-center justify-center overflow-hidden", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
-          TabsContent,
-          {
-            value: tab.value,
-            className: "data-[state=active]:animate-tabs",
-            children: [
-              tab.image && !tab.videoUrl && /* @__PURE__ */ jsx(
-                CompoundImage,
-                {
-                  src: tab.image.src,
-                  alt: tab.image.alt,
-                  className: "size-full object-cover"
-                }
-              ),
-              tab.videoUrl && tab.image && /* @__PURE__ */ jsxs(Dialog, { children: [
-                /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
-                  /* @__PURE__ */ jsx(
+      className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          defaultValue: defaultTabValue,
+          className: "grid grid-cols-1 items-center gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20",
+          children: [
+            /* @__PURE__ */ jsx(TabsList, { className: "col-start-1 col-end-2 row-start-1 row-end-2 h-full! w-full! grid grid-cols-1 items-center gap-x-4 gap-y-4", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+              TabsTrigger,
+              {
+                value: tab.value,
+                className: "flex-col items-start justify-start whitespace-normal border-0 border-l-2 border-transparent py-2 px-2 pr-0 text-left data-[state=active]:border-black data-[state=active]:bg-transparent data-[state=active]:text-text-primary",
+                children: [
+                  /* @__PURE__ */ jsx("h3", { className: "mb-3 text-2xl font-bold md:mb-2 md:text-3xl md:leading-[1.3] lg:text-4xl", children: tab.heading }),
+                  /* @__PURE__ */ jsx("p", { children: tab.description })
+                ]
+              },
+              tab.value
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "size-full flex items-center justify-center overflow-hidden", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+              TabsContent,
+              {
+                value: tab.value,
+                className: "data-[state=active]:animate-tabs",
+                children: [
+                  tab.image && !tab.videoUrl && /* @__PURE__ */ jsx(
                     CompoundImage,
                     {
                       src: tab.image.src,
@@ -55,33 +61,45 @@ const TabFeature = (props) => {
                       className: "size-full object-cover"
                     }
                   ),
-                  /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
-                  /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
-                ] }) }),
-                /* @__PURE__ */ jsxs(DialogContent, { children: [
-                  !isIframeLoaded && /* @__PURE__ */ jsx(CgSpinner, { className: "mx-auto size-16 animate-spin text-white" }),
-                  /* @__PURE__ */ jsx(
-                    "iframe",
-                    {
-                      className: cn(
-                        "z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]",
-                        { visible: isIframeLoaded, hidden: !isIframeLoaded }
+                  tab.videoUrl && tab.image && /* @__PURE__ */ jsxs(Dialog, { children: [
+                    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
+                      /* @__PURE__ */ jsx(
+                        CompoundImage,
+                        {
+                          src: tab.image.src,
+                          alt: tab.image.alt,
+                          className: "size-full object-cover"
+                        }
                       ),
-                      src: tab.videoUrl,
-                      allow: "autoplay; encrypted-media; picture-in-picture",
-                      allowFullScreen: true,
-                      onLoad: () => setIsIframeLoaded(true)
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          },
-          tab.value
-        )) })
-      ]
+                      /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" }),
+                      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" })
+                    ] }) }),
+                    /* @__PURE__ */ jsxs(DialogContent, { children: [
+                      !isIframeLoaded && /* @__PURE__ */ jsx(CgSpinner, { className: "mx-auto size-16 animate-spin text-white" }),
+                      /* @__PURE__ */ jsx(
+                        "iframe",
+                        {
+                          className: cn(
+                            "z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]",
+                            { visible: isIframeLoaded, hidden: !isIframeLoaded }
+                          ),
+                          src: tab.videoUrl,
+                          allow: "autoplay; encrypted-media; picture-in-picture",
+                          allowFullScreen: true,
+                          onLoad: () => setIsIframeLoaded(true)
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              },
+              tab.value
+            )) })
+          ]
+        }
+      ) })
     }
-  ) }) });
+  );
 };
 const TabFeatureDefaults = {
   defaultTabValue: "tab-1",

package/dist/components/puck-block/feature-sections/text-media-split/component.js

@@ -7,6 +7,7 @@ import { CompoundImage } from "../../../puck-base/image.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TextMediaSplit = (props) => {
   const {
     tagline,
@@ -21,6 +22,9 @@ const TextMediaSplit = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaType = "image",
     hasTagline = true,
     hasButtons = true
@@ -57,7 +61,7 @@ const TextMediaSplit = (props) => {
     }
     return /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "w-full object-cover", alt: image.alt });
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-y-12 md:grid-cols-2 md:items-center md:gap-x-12 lg:gap-x-20", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-y-12 md:grid-cols-2 md:items-center md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       hasTagline && /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/feature-sections/text-media-split/index.d.ts

@@ -28,7 +28,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";
@@ -110,6 +110,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/feature-sections/text-media-split/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { featureStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -18,7 +19,8 @@ const conf = {
         mediaType: featureStyleFields.mediaType,
         contentSlots: featureStyleFields.contentSlots,
         hasTagline: featureStyleFields.hasTagline,
-        hasButtons: featureStyleFields.hasButtons
+        hasButtons: featureStyleFields.hasButtons,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/feature-sections/text-only-section/component.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const TextOnlySection = (props) => {
   const {
     tagline,
@@ -16,6 +18,9 @@ const TextOnlySection = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textLayout = "single",
     bgMedia = "none",
     hasTagline = true,
@@ -47,7 +52,7 @@ const TextOnlySection = (props) => {
     ] });
   };
   if (bgMedia === "image" && bgImage) {
-    return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative px-[5%] py-16 md:py-24 lg:py-28", children: [
+    return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: [
       /* @__PURE__ */ jsx("div", { className: "container relative z-10", children: renderContent() }),
       /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
         /* @__PURE__ */ jsx(CompoundImage, { src: bgImage.src, className: "size-full object-cover", alt: bgImage.alt }),
@@ -56,7 +61,7 @@ const TextOnlySection = (props) => {
     ] });
   }
   if (bgMedia === "video" && bgVideo) {
-    return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative px-[5%] py-16 md:py-24 lg:py-28", children: [
+    return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("relative px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: [
       /* @__PURE__ */ jsx("div", { className: "container relative z-10", children: renderContent() }),
       /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
         /* @__PURE__ */ jsx("video", { className: "size-full object-cover", autoPlay: true, loop: true, muted: true, children: /* @__PURE__ */ jsx("source", { src: bgVideo, type: "video/mp4" }) }),
@@ -64,7 +69,7 @@ const TextOnlySection = (props) => {
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderContent() }) });
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: renderContent() }) });
 };
 const TextOnlySectionDefaults = {
   tagline: "Tagline",

package/dist/components/puck-block/feature-sections/text-only-section/index.d.ts

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

package/dist/components/puck-block/feature-sections/text-only-section/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { featureStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -26,7 +27,8 @@ const conf = {
         textLayout: featureStyleFields.textLayout,
         bgMedia: featureStyleFields.bgMedia,
         hasTagline: featureStyleFields.hasTagline,
-        hasButtons: featureStyleFields.hasButtons
+        hasButtons: featureStyleFields.hasButtons,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/footer-sections/centered-minimal-footer/centered-minimal-footer.js

@@ -1,8 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const CenteredMinimalFooter = (props) => {
-  const { logo, columnLinks, socialMediaLinks, footerText, footerLinks } = { ...CenteredMinimalFooterDefaults, ...props };
-  return /* @__PURE__ */ jsx("footer", { id: "relume", className: "px-[5%] py-12 md:py-18 lg:py-20", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  const { logo, columnLinks, socialMediaLinks, footerText, footerLinks, styles } = { ...CenteredMinimalFooterDefaults, ...props };
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-6 md:py-9 lg:py-10", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-center justify-items-center gap-x-[4vw] gap-y-12 pb-12 md:pb-18 lg:grid-cols-[0.25fr_1fr_0.25fr] lg:justify-between lg:gap-y-4 lg:pb-20", children: [
       /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, className: "lg:justify-self-start", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "inline-block" }) }),
       columnLinks == null ? void 0 : columnLinks.map((col, i) => /* @__PURE__ */ jsx("ul", { className: "grid grid-flow-row grid-cols-1 items-start justify-center justify-items-center gap-6 md:grid-flow-col md:grid-cols-[max-content] md:justify-center md:justify-items-start", children: col.links.map((l, li) => /* @__PURE__ */ jsx("li", { className: "font-semibold", children: /* @__PURE__ */ jsx("a", { href: l.url, children: l.title }) }, li)) }, i)),

package/dist/components/puck-block/footer-sections/compact-newsletter-footer/index.d.ts

@@ -25,7 +25,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";
@@ -81,6 +81,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.";
+                    };
+                };
                 hasCompanyImage: {
                     readonly type: "radio";
                     readonly label: "Company Image";

package/dist/components/puck-block/footer-sections/contact-links-footer/contact-links-footer.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const ContactLinksFooter = (props) => {
   const { logo, address, contact, columnLinks, socialMediaLinks, footerText, footerLinks, styles } = { ...ContactLinksFooterDefaults, ...props };
-  const { bordered = false } = styles ?? {};
-  return /* @__PURE__ */ jsx("footer", { id: "relume", className: cn("px-[5%] py-12 md:py-18 lg:py-20", { "border border-border-primary mx-[5%]": bordered }), children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  const { className: sectionClassName, style: sectionStyle, css, bordered = false } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-6 md:py-9 lg:py-10", { "border border-border-primary mx-[5%]": bordered }, sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-[4vw] gap-y-12 pb-12 md:gap-y-16 md:pb-18 lg:grid-cols-[1fr_0.5fr] lg:gap-y-4 lg:pb-20", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx("a", { href: logo == null ? void 0 : logo.url, children: /* @__PURE__ */ jsx(CompoundImage, { src: logo == null ? void 0 : logo.src, alt: logo == null ? void 0 : logo.alt, className: "inline-block" }) }) }),

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

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

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

@@ -1,7 +1,8 @@
 import { ContactLinksFooter, ContactLinksFooterDefaults } from "./contact-links-footer.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { footerStyleFields } from "../props.js";
-const conf = { fields: { logo: imageField, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, hasCompanyImage: footerStyleFields.hasCompanyImage } } }, defaultProps: ContactLinksFooterDefaults, render: ContactLinksFooter };
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = { fields: { logo: imageField, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, hasCompanyImage: footerStyleFields.hasCompanyImage, ...sectionWrapperFields } } }, defaultProps: ContactLinksFooterDefaults, render: ContactLinksFooter };
 export {
   ContactLinksFooter,
   ContactLinksFooterDefaults,

package/dist/components/puck-block/footer-sections/cta-links-footer/cta-links-footer.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const CtaLinksFooter = (props) => {
   const { logo, heading, description, buttons, columnLinks, socialMediaLinks, footerText, styles } = { ...CtaLinksFooterDefaults, ...props };
-  const { bordered = false } = styles ?? {};
-  return /* @__PURE__ */ jsx("footer", { id: "relume", className: cn("px-[5%] py-12 md:py-18 lg:py-20", { "border border-border-primary mx-[5%]": bordered }), children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  const { className: sectionClassName, style: sectionStyle, css, bordered = false } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-6 md:py-9 lg:py-10", { "border border-border-primary mx-[5%]": bordered }, sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "border-b border-border-primary", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-12 grid grid-cols-1 gap-x-[8vw] gap-y-12 md:mb-18 md:gap-y-16 lg:mb-20 lg:grid-cols-[1fr_0.5fr] lg:gap-y-20", children: [
         /* @__PURE__ */ jsxs("div", { className: "max-w-md", children: [

package/dist/components/puck-block/footer-sections/cta-links-footer/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";
@@ -107,6 +107,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 bordered: {
                     readonly type: "radio";
                     readonly label: "Bordered";

package/dist/components/puck-block/footer-sections/cta-links-footer/index.js

@@ -3,7 +3,8 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { footerStyleFields } from "../props.js";
-const conf = { fields: { logo: imageField, heading: headingField, description: descriptionField, buttons: buttonsField, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered } } }, defaultProps: CtaLinksFooterDefaults, render: CtaLinksFooter };
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
+const conf = { fields: { logo: imageField, heading: headingField, description: descriptionField, buttons: buttonsField, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, ...sectionWrapperFields } } }, defaultProps: CtaLinksFooterDefaults, render: CtaLinksFooter };
 export {
   CtaLinksFooter,
   CtaLinksFooterDefaults,

package/dist/components/puck-block/footer-sections/links-newsletter-footer/index.d.ts

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

package/dist/components/puck-block/footer-sections/newsletter-links-footer/index.d.ts

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