dune-react 0.0.20 → 0.0.21

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

@@ -2,12 +2,15 @@ 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 { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const SplitPricing = (props) => {
-  const { tagline, heading, description, featureSections, pricingPlan } = {
+  const { tagline, heading, description, featureSections, pricingPlan, styles } = {
     ...SplitPricingDefaults,
     ...props
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", 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", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-8 w-full max-w-lg 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/split-pricing/index.d.ts

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

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

@@ -1,5 +1,6 @@
 import { SplitPricing, SplitPricingDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -17,7 +18,7 @@ const conf = {
       type: "object",
       label: "Pricing Plan",
       objectFields: {
-        planName: { type: "text" },
+        planName: { type: "text", ...sectionWrapperFields },
         description: { type: "textarea" },
         monthlyPrice: { type: "text" }
       }

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

@@ -2,15 +2,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 { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabPricingGrid = (props) => {
   const { tagline, heading, description, defaultTabValue, tabs, styles } = {
     ...TabPricingGridDefaults,
     ...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-8 max-w-lg text-center md:mb-10 lg:mb-12", 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/tab-pricing-grid/index.d.ts

@@ -40,6 +40,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/tab-pricing-grid/index.js

@@ -1,6 +1,7 @@
 import { TabPricingGrid, TabPricingGridDefaults } 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" },
@@ -26,7 +27,8 @@ const conf = {
       label: "Styles",
       objectFields: {
         columns: pricingStyleFields.columns,
-        cardLayout: pricingStyleFields.cardLayout
+        cardLayout: pricingStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -2,12 +2,15 @@ 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 { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabSinglePricing = (props) => {
-  const { tagline, heading, description, defaultTabValue, tabs } = {
+  const { tagline, heading, description, defaultTabValue, tabs, styles } = {
     ...TabSinglePricingDefaults,
     ...props
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
+  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 max-w-lg", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-8 max-w-lg text-center md:mb-10 lg:mb-12", 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 }),

package/dist/components/puck-block/pricing-sections/tab-single-pricing/index.d.ts

@@ -40,6 +40,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.";
+                    };
+                };
                 cardLayout: {
                     readonly type: "select";
                     readonly label: "Card Layout";

package/dist/components/puck-block/pricing-sections/tab-single-pricing/index.js

@@ -1,6 +1,7 @@
 import { TabSinglePricing, TabSinglePricingDefaults } 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" },
@@ -25,7 +26,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        cardLayout: pricingStyleFields.cardLayout
+        cardLayout: pricingStyleFields.cardLayout,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-sections/compact-timeline/component.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } 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 CompactTimeline = (props) => {
   const {
     tagline,
@@ -15,9 +16,12 @@ const CompactTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     hasImage = false
   } = styles ?? {};
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden 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: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", 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/showcase-sections/compact-timeline/index.d.ts

@@ -121,6 +121,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.";
+                    };
+                };
                 hasImage: {
                     readonly type: "radio";
                     readonly label: "Show Images";

package/dist/components/puck-block/showcase-sections/compact-timeline/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 { showcaseStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        hasImage: showcaseStyleFields.hasImage
+        hasImage: showcaseStyleFields.hasImage,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-sections/horizontal-timeline/component.js

@@ -4,6 +4,8 @@ import { useState, useEffect } from "react";
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "../../../shadcn/carousel.js";
 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 HorizontalTimeline = (props) => {
   const {
     tagline,
@@ -17,6 +19,9 @@ const HorizontalTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     hasImage = false
   } = styles ?? {};
   const [api, setApi] = useState();
@@ -29,7 +34,7 @@ const HorizontalTimeline = (props) => {
     api.scrollTo(0);
     api.reInit();
   }, [api]);
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "overflow-hidden px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("overflow-hidden 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: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-lg text-center", 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/showcase-sections/horizontal-timeline/index.d.ts

@@ -121,6 +121,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.";
+                    };
+                };
                 hasImage: {
                     readonly type: "radio";
                     readonly label: "Show Images";

package/dist/components/puck-block/showcase-sections/horizontal-timeline/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 { showcaseStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -22,7 +23,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        hasImage: showcaseStyleFields.hasImage
+        hasImage: showcaseStyleFields.hasImage,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-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 ShowcaseSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     bordered?: boolean;
     hasImage?: boolean;
     contentLayout?: "image-only" | "text+image";

package/dist/components/puck-block/showcase-sections/single-column-timeline/component.js

@@ -4,7 +4,9 @@ import { useRef } from "react";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, useTransform, motion } from "framer-motion";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const SingleColumnTimeline = (props) => {
   const {
     tagline,
@@ -18,10 +20,13 @@ const SingleColumnTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     bordered = false,
     hasImage = 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 max-w-lg", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container max-w-lg", children: [
     /* @__PURE__ */ jsx("div", { className: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-lg", 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 }),
@@ -46,8 +51,10 @@ const TimelineEntry = ({
   hasImage
 }) => {
   const circleRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(circleRef);
   const { scrollYProgress } = useScroll({
     target: circleRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
     offset: ["end end", "end center"]
   });
   const backgroundColor = {

package/dist/components/puck-block/showcase-sections/single-column-timeline/index.d.ts

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

package/dist/components/puck-block/showcase-sections/single-column-timeline/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 { showcaseStyleFields } 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: {
         bordered: showcaseStyleFields.bordered,
-        hasImage: showcaseStyleFields.hasImage
+        hasImage: showcaseStyleFields.hasImage,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-sections/sticky-scroll-timeline/component.js

@@ -4,7 +4,9 @@ import { useRef } from "react";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { useScroll, useTransform, motion } from "framer-motion";
+import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const StickyScrollTimeline = (props) => {
   const {
     tagline,
@@ -18,10 +20,13 @@ const StickyScrollTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     bordered = false,
     hasImage = false
   } = styles ?? {};
-  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: "relative grid auto-cols-fr grid-cols-1 items-start justify-center gap-6 sm:gap-12 md:grid-cols-2 md:gap-24 lg:gap-32", 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: "relative grid auto-cols-fr grid-cols-1 items-start justify-center gap-6 sm:gap-12 md:grid-cols-2 md:gap-24 lg:gap-32", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative top-0 z-10 md:sticky md:top-20 md:z-auto md:pr-4", 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 }),
@@ -44,8 +49,10 @@ const TimelineEntry = ({
   hasImage
 }) => {
   const circleRef = useRef(null);
+  const [scrollContainerRef] = useScrollContainer(circleRef);
   const { scrollYProgress } = useScroll({
     target: circleRef,
+    ...scrollContainerRef.current ? { container: scrollContainerRef } : {},
     offset: ["end end", "end center"]
   });
   const backgroundColor = {

package/dist/components/puck-block/showcase-sections/sticky-scroll-timeline/index.d.ts

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

package/dist/components/puck-block/showcase-sections/sticky-scroll-timeline/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 { showcaseStyleFields } 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: {
         bordered: showcaseStyleFields.bordered,
-        hasImage: showcaseStyleFields.hasImage
+        hasImage: showcaseStyleFields.hasImage,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/showcase-sections/tab-timeline/component.d.ts

@@ -17,8 +17,6 @@ type TabTimelineExtra = {
 export type TabTimelineProps = ShowcaseComponentProps<TabTimelineExtra>;
 export declare const TabTimeline: (props: TabTimelineProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TabTimelineDefaults: TabTimelineExtra & {
-    styles: {
-        contentLayout: string;
-    };
+    styles: Partial<import("../props").ShowcaseSectionStyles>;
 };
 export {};

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

@@ -5,6 +5,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.j
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabTimeline = (props) => {
   var _a, _b;
   const { tabs = [], styles } = {
@@ -12,6 +13,9 @@ const TabTimeline = (props) => {
     ...props
   };
   const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
     contentLayout = "text+image"
   } = styles ?? {};
   const [activeTab, setActiveTab] = useState((_a = tabs[0]) == null ? void 0 : _a.value);
@@ -23,7 +27,7 @@ const TabTimeline = (props) => {
     const activeIndex = tabs.findIndex((tab) => tab.value === activeTab);
     return `${100 / (tabs.length * 2) * (activeIndex * 2 + 1)}%`;
   };
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container relative", 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 relative", children: [
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/puck-block/showcase-sections/tab-timeline/index.d.ts

@@ -21,6 +21,28 @@ declare const conf: {
                     label: string;
                     objectFields: {
                         date: {
+                            className: {
+                                readonly type: "text";
+                                readonly label: "Class Name";
+                                readonly ai: {
+                                    readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                                };
+                            };
+                            style: {
+                                readonly type: "object";
+                                readonly label: "Style";
+                                readonly objectFields: {};
+                                readonly ai: {
+                                    readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                                };
+                            };
+                            css: {
+                                readonly type: "textarea";
+                                readonly label: "Custom CSS";
+                                readonly ai: {
+                                    readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                                };
+                            };
                             type: string;
                         };
                         heading: {
@@ -125,6 +147,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.";
+                    };
+                };
                 contentLayout: {
                     readonly type: "radio";
                     readonly label: "Content Layout";
@@ -152,9 +196,7 @@ declare const conf: {
             };
         }[];
     } & {
-        styles: {
-            contentLayout: string;
-        };
+        styles: Partial<import("../props").ShowcaseSectionStyles>;
     };
     render: (props: TabTimelineProps) => import("react/jsx-runtime").JSX.Element;
 };