dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/hero-sections/zoom-grid-hero/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";

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

@@ -13,3 +13,5 @@ export * from "./text-sections";
 export * from "./showcase-sections";
 export * from "./team-sections";
 export * from "./footer-sections";
+export { confMap, categories, sectionsMap, buildComponents, getComponentDefaultProps } from "./registry.generated";
+export type { ComponentName, ComponentProps } from "./registry.generated";

package/dist/components/puck-block/location-sections/location-1/location.d.ts

@@ -1,6 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
-import type { MapLocation } from "@/components/puck-base/core/fields";
+import type { MapLocation } from "@/components/puck-core/core/fields";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
     url?: string;
@@ -18,6 +18,9 @@ export interface LocationSectionProps {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
+        className?: string;
+        style?: Record<string, unknown>;
+        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

package/dist/components/puck-block/location-sections/location-2/location.d.ts

@@ -1,6 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundButtonProps } from "@/components/puck-base/button";
-import type { MapLocation } from "@/components/puck-base/core/fields";
+import type { MapLocation } from "@/components/puck-core/core/fields";
 interface LocationButton extends Omit<CompoundButtonProps, "label"> {
     label?: string;
     url?: string;
@@ -18,6 +18,9 @@ export interface Location2Props {
     mapTint?: "none" | "theme";
     buttons?: LocationButton[];
     styles?: {
+        className?: string;
+        style?: Record<string, unknown>;
+        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

package/dist/components/puck-block/location-sections/location-3/location.d.ts

@@ -1,6 +1,6 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
-import type { Action } from "@/components/puck-base/core/types";
-import type { MapLocation } from "@/components/puck-base/core/fields";
+import type { Action } from "@/components/puck-core/core/types";
+import type { MapLocation } from "@/components/puck-core/core/fields";
 export interface LocationEntry {
     name: string;
     location?: MapLocation;
@@ -16,6 +16,9 @@ export interface Location3Props {
     mapStyle?: "default" | "grayscale" | "dark";
     locations: LocationEntry[];
     styles?: {
+        className?: string;
+        style?: Record<string, unknown>;
+        css?: string;
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
         backgroundColor?: string;

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

@@ -1,4 +1,4 @@
-import type { MapLocation } from "@/components/puck-base/core/fields";
+import type { MapLocation } from "@/components/puck-core/core/fields";
 type LocationVariant = "location-1" | "location-2" | "location-3";
 type LocationPadding = {
     top?: "none" | "small" | "medium" | "large";
@@ -33,6 +33,9 @@ export type LocationSectionProps = {
     contentAlign?: "left" | "right";
     columns?: "2" | "3";
     styles?: {
+        className?: string;
+        style?: React.CSSProperties;
+        css?: string;
         padding?: LocationPadding;
         sectionStyle?: LocationSectionStyle;
         backgroundColor?: string;

package/dist/components/puck-block/metrics-sections/center-media-stats/center-media-stats.js

@@ -6,6 +6,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 CenterMediaStats = (props) => {
   const {
     tagline,
@@ -19,6 +20,9 @@ const CenterMediaStats = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     mediaPosition = "left",
     mediaType = "image",
     statsStyle = "line"
@@ -74,7 +78,7 @@ const CenterMediaStats = (props) => {
   };
   const mediaBlock = /* @__PURE__ */ jsx("div", { children: renderMedia() });
   const statsBlock = /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 md:grid-cols-3 md:gap-x-8 md:gap-y-12 md:p-8 lg:grid-cols-1 lg:gap-x-0 lg:p-12", children: stats.map((stat, index) => renderStat(stat, index)) });
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
       /* @__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/metrics-sections/center-media-stats/index.d.ts

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

package/dist/components/puck-block/metrics-sections/center-media-stats/index.js

@@ -2,6 +2,7 @@ import { CenterMediaStats, CenterMediaStatsDefaults } from "./center-media-stats
 import { headingField, descriptionField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { metricsStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -23,7 +24,8 @@ const conf = {
       objectFields: {
         mediaPosition: metricsStyleFields.mediaPosition,
         mediaType: metricsStyleFields.mediaType,
-        statsStyle: metricsStyleFields.statsStyle
+        statsStyle: metricsStyleFields.statsStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/metrics-sections/header-stats-row/header-stats-row.js

@@ -1,5 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const HeaderStatsRow = (props) => {
@@ -16,6 +17,9 @@ const HeaderStatsRow = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textLayout = "twoColumn",
     bgMedia = "none",
     statsStyle = "line"
@@ -43,7 +47,7 @@ const HeaderStatsRow = (props) => {
       /* @__PURE__ */ jsx("h3", { className: cn("text-md font-bold leading-[1.4] md:text-xl", textColorClass), children: stat.heading })
     ] }, index);
   };
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: cn("px-[5%] py-16 md:py-24 lg:py-28", { relative: hasBg }), children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", { relative: hasBg }, sectionClassName), style: sectionStyle, css, children: [
     hasBg && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
       isBgImage && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "size-full object-cover", alt: image.alt }),

package/dist/components/puck-block/metrics-sections/header-stats-row/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";
@@ -123,6 +123,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/metrics-sections/header-stats-row/index.js

@@ -3,6 +3,7 @@ import { headingField, descriptionField } 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 { metricsStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       objectFields: {
         textLayout: metricsStyleFields.textLayout,
         bgMedia: metricsStyleFields.bgMedia,
-        statsStyle: metricsStyleFields.statsStyle
+        statsStyle: metricsStyleFields.statsStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/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";
@@ -128,6 +128,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/metrics-sections/mixed-grid-stats/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 { metricsStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         textLayout: metricsStyleFields.textLayout,
-        statsStyle: metricsStyleFields.statsStyle
+        statsStyle: metricsStyleFields.statsStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/metrics-sections/mixed-grid-stats/mixed-grid-stats.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import React__default from "react";
@@ -16,12 +17,15 @@ const MixedGridStats = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     textLayout = "twoColumn",
     statsStyle = "cardPlain"
   } = styles ?? {};
   const isTwoColumn = textLayout === "twoColumn";
   const isReversed = statsStyle === "cardReversed";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsx("div", { className: cn("mb-12 md:mb-18 lg:mb-20", {
       "grid grid-cols-1 gap-y-5 md:grid-cols-2 md:gap-x-12 lg:gap-x-20": isTwoColumn
     }), children: isTwoColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/puck-block/metrics-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 MetricsSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     textLayout?: "twoColumn" | "stacked";
     statsLayout?: "2x2" | "single-column";
     mediaPosition?: "left" | "right";

package/dist/components/puck-block/metrics-sections/split-stats/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";
@@ -123,6 +123,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.";
+                    };
+                };
                 statsLayout: {
                     readonly type: "radio";
                     readonly label: "Stats Layout";

package/dist/components/puck-block/metrics-sections/split-stats/index.js

@@ -3,6 +3,7 @@ import { headingField, descriptionField } 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 { metricsStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       objectFields: {
         statsLayout: metricsStyleFields.statsLayout,
         bgMedia: metricsStyleFields.bgMedia,
-        statsStyle: metricsStyleFields.statsStyle
+        statsStyle: metricsStyleFields.statsStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/metrics-sections/split-stats/split-stats.js

@@ -1,5 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const SplitStats = (props) => {
@@ -16,6 +17,9 @@ const SplitStats = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     statsLayout = "2x2",
     bgMedia = "none",
     statsStyle = "line"
@@ -43,7 +47,7 @@ const SplitStats = (props) => {
       /* @__PURE__ */ jsx("h3", { className: cn("text-md font-bold leading-[1.4] md:text-xl", textColorClass), children: stat.heading })
     ] }, index);
   };
-  return /* @__PURE__ */ jsxs("section", { id: "relume", className: cn("px-[5%] py-16 md:py-24 lg:py-28", { relative: hasBg }), children: [
+  return /* @__PURE__ */ jsxs(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", { relative: hasBg }, sectionClassName), style: sectionStyle, css, children: [
     hasBg && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
       isBgImage && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "size-full object-cover", alt: image.alt }),

package/dist/components/puck-block/metrics-sections/tab-stats/index.d.ts

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

package/dist/components/puck-block/metrics-sections/tab-stats/index.js

@@ -2,6 +2,7 @@ import { TabStats, TabStatsDefaults } from "./tab-stats.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { metricsStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -31,7 +32,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaPosition: metricsStyleFields.mediaPosition
+        mediaPosition: metricsStyleFields.mediaPosition,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/metrics-sections/tab-stats/tab-stats.js

@@ -5,6 +5,8 @@ import { VideoIframe } from "../../../shadcn/video-iframe.js";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { TabsContent, TabsList, TabsTrigger, Tabs } from "../../../shadcn/tabs.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabStats = (props) => {
   const {
     tagline,
@@ -17,7 +19,12 @@ const TabStats = (props) => {
     ...TabStatsDefaults,
     ...props
   };
-  const { mediaPosition = "left" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    mediaPosition = "left"
+  } = styles ?? {};
   const isMediaLeft = mediaPosition === "left";
   const mediaPanel = /* @__PURE__ */ jsx("div", { className: "max-size-full flex items-center justify-center overflow-hidden", children: tabs.map((tab) => /* @__PURE__ */ jsx(
     TabsContent,
@@ -52,7 +59,7 @@ const TabStats = (props) => {
     },
     tab.value
   )) });
-  const tabTriggers = /* @__PURE__ */ jsx(TabsList, { className: "grid grid-cols-1 items-center gap-x-4 gap-y-10", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
+  const tabTriggers = /* @__PURE__ */ jsx(TabsList, { className: "grid grid-cols-1 h-full! w-full! items-center gap-x-4 gap-y-10", children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
     TabsTrigger,
     {
       value: tab.value,
@@ -65,27 +72,35 @@ const TabStats = (props) => {
     },
     index
   )) });
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-col items-start", children: [
-    /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 w-full max-w-lg md:mb-18 lg:mb-20", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
-      /* @__PURE__ */ jsx("h1", { className: "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 })
-    ] }),
-    /* @__PURE__ */ jsx(
-      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: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          mediaPanel,
-          tabTriggers
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          tabTriggers,
-          mediaPanel
-        ] })
-      }
-    )
-  ] }) });
+  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 flex flex-col items-start", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rb-12 mb-12 w-full max-w-lg md:mb-18 lg:mb-20", children: [
+          /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
+          /* @__PURE__ */ jsx("h1", { className: "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 })
+        ] }),
+        /* @__PURE__ */ jsx(
+          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: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              mediaPanel,
+              tabTriggers
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              tabTriggers,
+              mediaPanel
+            ] })
+          }
+        )
+      ] })
+    }
+  );
 };
 const TabStatsDefaults = {
   tagline: "Tagline",

package/dist/components/puck-block/pricing-sections/pricing-card-grid/component.js

@@ -1,15 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { BiCheck } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
 import { Button } from "../../../shadcn/button.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const PricingCardGrid = (props) => {
   const { tagline, heading, description, pricingPlans, styles } = {
     ...PricingCardGridDefaults,
     ...props
   };
-  const { columns = 2 } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, columns = 2 } = styles ?? {};
   const gridColsClass = columns === 3 ? "md:grid-cols-2 lg:grid-cols-3" : "md:grid-cols-2";
   const containerMaxW = columns === 3 ? "" : "max-w-xl";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: `container ${containerMaxW}`, 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 ${containerMaxW}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/pricing-sections/pricing-card-grid/index.d.ts

@@ -42,6 +42,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/pricing-sections/pricing-card-grid/index.js

@@ -1,6 +1,7 @@
 import { PricingCardGrid, PricingCardGridDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { pricingStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -24,7 +25,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         columns: pricingStyleFields.columns,
-        cardLayout: pricingStyleFields.cardLayout
+        cardLayout: pricingStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },