dune-react 0.0.20 → 0.0.21

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../shadcn/accordion.js";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TwoColumnAccordionFaq = (props) => {
   const {
     heading,
@@ -13,8 +14,8 @@ const TwoColumnAccordionFaq = (props) => {
     ...TwoColumnAccordionFaqDefaults,
     ...props
   };
-  const { bordered = false } = styles ?? {};
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-12 lg:grid-cols-[.75fr,1fr] lg:gap-x-20", children: [
+  const { className: sectionClassName, style: sectionStyle, css, bordered = false } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-12 lg:grid-cols-[.75fr,1fr] lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),

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

@@ -1,16 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundButton } from "../../../puck-base/button.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
+import { cn } from "../../../../utils/css-utils.js";
 const TwoColumnStaticFaq = (props) => {
   const {
     heading,
     description,
     button,
-    questions
+    questions,
+    styles
   } = {
     ...TwoColumnStaticFaqDefaults,
     ...props
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-12 lg:grid-cols-[.75fr,1fr] lg:gap-x-20", children: [
+  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 gap-y-12 md:grid-cols-2 md:gap-x-12 lg:grid-cols-[.75fr,1fr] lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
       /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),

package/dist/components/puck-block/feature-sections/feature-cards-grid/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 FeatureCardsGrid = (props) => {
   const {
     features = [],
@@ -19,6 +20,9 @@ const FeatureCardsGrid = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaType = "image"
   } = styles ?? {};
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
@@ -54,7 +58,7 @@ const FeatureCardsGrid = (props) => {
     }
     return /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "size-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 items-center gap-y-12 md:grid-cols-2 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 items-center gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-8 py-2 sm:grid-cols-2", children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ jsx(CompoundImage, { src: feature.icon.src, className: "size-12", alt: feature.icon.alt }) }),

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

@@ -201,6 +201,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/feature-cards-grid/index.js

@@ -2,6 +2,7 @@ import { FeatureCardsGrid, FeatureCardsGridDefaults } from "./component.js";
 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: {
     features: {
@@ -21,7 +22,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: featureStyleFields.mediaType
+        mediaType: featureStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/feature-sections/feature-list-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 FeatureListSplit = (props) => {
   const {
     featureSections = [],
@@ -19,6 +20,9 @@ const FeatureListSplit = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaType = "image"
   } = styles ?? {};
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
@@ -54,7 +58,7 @@ const FeatureListSplit = (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 items-center gap-y-12 md:grid-cols-2 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 items-center gap-y-12 md:grid-cols-2 md:gap-x-12 lg:gap-x-20", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-8 py-2", children: featureSections.map((section, index) => /* @__PURE__ */ jsxs("div", { className: "flex self-start", children: [
         /* @__PURE__ */ jsx("div", { className: "mr-6 flex-none self-start", children: /* @__PURE__ */ jsx(CompoundImage, { src: section.icon.src, className: "size-12", alt: section.icon.alt }) }),

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

@@ -201,6 +201,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/feature-list-split/index.js

@@ -2,6 +2,7 @@ import { FeatureListSplit, FeatureListSplitDefaults } from "./component.js";
 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: {
     featureSections: {
@@ -21,7 +22,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: featureStyleFields.mediaType
+        mediaType: featureStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -8,6 +8,9 @@ import type { BaseImage } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
 export type { BaseImage, BaseButton };
 export interface FeatureSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     mediaType?: "image" | "video" | "play";
     textLayout?: "single" | "twoColumn";
     bgMedia?: "none" | "image" | "video";

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

@@ -7,13 +7,15 @@ 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(
+  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(
     Tabs,
     {
       defaultValue: defaultTabValue,

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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