dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/registry.generated.js

@@ -0,0 +1,558 @@
+import conf from "./text-sections/sticky-text-multi-image/index.js";
+import conf$1 from "./text-sections/side-media-content/index.js";
+import conf$2 from "./text-sections/prose-content/index.js";
+import conf$3 from "./text-sections/blog-article/index.js";
+import conf$4 from "./text-sections/aside-nav-content/index.js";
+import conf$5 from "./testimonial-sections/testimonial-carousel/index.js";
+import conf$6 from "./testimonial-sections/testimonial-card-grid/index.js";
+import conf$7 from "./testimonial-sections/tab-testimonial/index.js";
+import conf$8 from "./testimonial-sections/sticky-testimonial/index.js";
+import conf$9 from "./testimonial-sections/masonry-testimonial/index.js";
+import conf$a from "./testimonial-sections/marquee-testimonial/index.js";
+import conf$b from "./testimonial-sections/image-testimonial-carousel/index.js";
+import conf$c from "./testimonial-sections/image-testimonial/index.js";
+import conf$d from "./testimonial-sections/halfscreen-testimonial-carousel/index.js";
+import conf$e from "./testimonial-sections/centered-testimonial/index.js";
+import conf$f from "./testimonial-sections/bento-testimonial/index.js";
+import conf$g from "./team-sections/team-two-column/index.js";
+import conf$h from "./team-sections/team-sticky-scatter/index.js";
+import conf$i from "./team-sections/team-inline-card/index.js";
+import conf$j from "./team-sections/team-grid/index.js";
+import conf$k from "./team-sections/team-carousel/index.js";
+import conf$l from "./showcase-sections/zigzag-timeline/index.js";
+import conf$m from "./showcase-sections/tab-timeline/index.js";
+import conf$n from "./showcase-sections/sticky-scroll-timeline/index.js";
+import conf$o from "./showcase-sections/single-column-timeline/index.js";
+import conf$p from "./showcase-sections/horizontal-timeline/index.js";
+import conf$q from "./showcase-sections/compact-timeline/index.js";
+import conf$r from "./pricing-sections/tab-single-pricing/index.js";
+import conf$s from "./pricing-sections/tab-pricing-grid/index.js";
+import conf$t from "./pricing-sections/split-pricing/index.js";
+import conf$u from "./pricing-sections/single-pricing-card/index.js";
+import conf$v from "./pricing-sections/pricing-comparison-table/index.js";
+import conf$w from "./pricing-sections/pricing-card-grid/index.js";
+import conf$x from "./metrics-sections/tab-stats/index.js";
+import conf$y from "./metrics-sections/split-stats/index.js";
+import conf$z from "./metrics-sections/mixed-grid-stats/index.js";
+import conf$A from "./metrics-sections/header-stats-row/index.js";
+import conf$B from "./metrics-sections/center-media-stats/index.js";
+import conf$C from "./hero-sections/zoom-grid-hero/index.js";
+import conf$D from "./hero-sections/vertical-gallery-hero/index.js";
+import conf$E from "./hero-sections/three-image-parallax-hero/index.js";
+import conf$F from "./hero-sections/tab-hero/index.js";
+import conf$G from "./hero-sections/sticky-video-hero/index.js";
+import conf$H from "./hero-sections/sticky-expand-hero/index.js";
+import conf$I from "./hero-sections/scroll-zoom-hero/index.js";
+import conf$J from "./hero-sections/scroll-expand-video-hero/index.js";
+import conf$K from "./hero-sections/scatter-parallax-hero/index.js";
+import conf$L from "./hero-sections/parallax-images-hero/index.js";
+import conf$M from "./hero-sections/overlapping-image-hero/index.js";
+import conf$N from "./hero-sections/multi-image-grid-hero/index.js";
+import conf$O from "./hero-sections/mouse-track-hero/index.js";
+import conf$P from "./hero-sections/inline-image-hero/index.js";
+import conf$Q from "./hero-sections/horizontal-marquee-hero/index.js";
+import conf$R from "./hero-sections/grid-expand-hero/index.js";
+import conf$S from "./hero-sections/fullscreen-video-hero/index.js";
+import conf$T from "./hero-sections/dual-marquee-hero/index.js";
+import conf$U from "./hero-sections/column-scroll-hero/index.js";
+import conf$V from "./hero-sections/carousel-hero/index.js";
+import conf$W from "./header-sections/standard-navbar/index.js";
+import conf$X from "./header-sections/mega-menu-navbar/index.js";
+import conf$Y from "./header-sections/fullscreen-overlay-navbar/index.js";
+import conf$Z from "./header-sections/floating-bordered-navbar/index.js";
+import conf$_ from "./header-sections/drawer-navbar/index.js";
+import conf$$ from "./header-sections/centered-navbar/index.js";
+import conf$10 from "./gallery-sections/static-grid/index.js";
+import conf$11 from "./gallery-sections/split-carousel/index.js";
+import conf$12 from "./gallery-sections/scroll-parallax-portfolio/index.js";
+import conf$13 from "./gallery-sections/scroll-parallax/index.js";
+import conf$14 from "./gallery-sections/portfolio-divider/index.js";
+import conf$15 from "./gallery-sections/portfolio-cards/index.js";
+import conf$16 from "./gallery-sections/masonry-grid/index.js";
+import conf$17 from "./gallery-sections/interactive-portfolio/index.js";
+import conf$18 from "./gallery-sections/image-carousel/index.js";
+import conf$19 from "./gallery-sections/fullscreen-portfolio/index.js";
+import conf$1a from "./gallery-sections/asymmetric-grid/index.js";
+import conf$1b from "./footer-sections/cta-links-footer/index.js";
+import conf$1c from "./footer-sections/contact-links-footer/index.js";
+import conf$1d from "./footer-sections/centered-minimal-footer/index.js";
+import conf$1e from "./feature-sections/text-only-section/index.js";
+import conf$1f from "./feature-sections/text-media-split/index.js";
+import conf$1g from "./feature-sections/tab-feature/index.js";
+import conf$1h from "./feature-sections/feature-list-split/index.js";
+import conf$1i from "./feature-sections/feature-cards-grid/index.js";
+import conf$1j from "./faq-sections/two-column-static-faq/index.js";
+import conf$1k from "./faq-sections/two-column-accordion-faq/index.js";
+import conf$1l from "./faq-sections/stacked-static-faq/index.js";
+import conf$1m from "./faq-sections/stacked-accordion-faq/index.js";
+import conf$1n from "./faq-sections/icon-card-faq/index.js";
+import conf$1o from "./faq-sections/dual-column-accordion-faq/index.js";
+import conf$1p from "./cta-sections/text-block-cta/index.js";
+import conf$1q from "./cta-sections/side-media-cta/index.js";
+import conf$1r from "./cta-sections/mouse-track-cta/index.js";
+import conf$1s from "./cta-sections/feature-card-cta/index.js";
+import conf$1t from "./contact-sections/tab-locations/index.js";
+import conf$1u from "./contact-sections/split-info-form/index.js";
+import conf$1v from "./contact-sections/location-cards-grid/index.js";
+import conf$1w from "./contact-sections/info-cards-media/index.js";
+import conf$1x from "./contact-sections/header-info-fullwidth/index.js";
+import conf$1y from "./contact-sections/header-form-cards/index.js";
+import conf$1z from "./contact-sections/form-with-media/index.js";
+import conf$1A from "./contact-sections/contact-modal/index.js";
+import conf$1B from "./contact-sections/contact-cards-grid/index.js";
+import conf$1C from "./contact-sections/centered-form/index.js";
+import conf$1D from "./banner-sections/scroll-parallax-text/index.js";
+import conf$1E from "./banner-sections/scroll-driven-marquee/index.js";
+import conf$1F from "./banner-sections/dual-row-marquee/index.js";
+import conf$1G from "./banner-sections/css-marquee-banner/index.js";
+const categories = {
+  banner: {
+    title: "Banner",
+    components: [
+      "CssMarqueeBanner",
+      "DualRowMarquee",
+      "ScrollDrivenMarquee",
+      "ScrollParallaxText"
+    ]
+  },
+  callToAction: {
+    title: "CTA",
+    components: [
+      "FeatureCardCta",
+      "MouseTrackCta",
+      "SideMediaCta",
+      "TextBlockCta"
+    ]
+  },
+  contact: {
+    title: "Contact",
+    components: [
+      "CenteredForm",
+      "ContactCardsGrid",
+      "ContactModal",
+      "FormWithMedia",
+      "HeaderFormCards",
+      "HeaderInfoFullwidth",
+      "InfoCardsMedia",
+      "LocationCardsGrid",
+      "SplitInfoForm",
+      "TabLocations"
+    ]
+  },
+  faq: {
+    title: "FAQ",
+    components: [
+      "DualColumnAccordionFaq",
+      "IconCardFaq",
+      "StackedAccordionFaq",
+      "StackedStaticFaq",
+      "TwoColumnAccordionFaq",
+      "TwoColumnStaticFaq"
+    ]
+  },
+  feature: {
+    title: "Feature",
+    components: [
+      "FeatureCardsGrid",
+      "FeatureListSplit",
+      "TabFeature",
+      "TextMediaSplit",
+      "TextOnlySection"
+    ]
+  },
+  footer: {
+    title: "Footer",
+    components: [
+      "CenteredMinimalFooter",
+      "ContactLinksFooter",
+      "CtaLinksFooter"
+    ]
+  },
+  gallery: {
+    title: "Gallery",
+    components: [
+      "AsymmetricGrid",
+      "FullscreenPortfolio",
+      "ImageCarousel",
+      "InteractivePortfolio",
+      "MasonryGrid",
+      "PortfolioCards",
+      "PortfolioDivider",
+      "ScrollParallax",
+      "ScrollParallaxPortfolio",
+      "SplitCarousel",
+      "StaticGrid"
+    ]
+  },
+  header: {
+    title: "Header",
+    components: [
+      "CenteredNavbar",
+      "DrawerNavbar",
+      "FloatingBorderedNavbar",
+      "FullscreenOverlayNavbar",
+      "MegaMenuNavbar",
+      "StandardNavbar"
+    ]
+  },
+  hero: {
+    title: "Hero",
+    components: [
+      "CarouselHero",
+      "ColumnScrollHero",
+      "DualMarqueeHero",
+      "FullscreenVideoHero",
+      "GridExpandHero",
+      "HorizontalMarqueeHero",
+      "InlineImageHero",
+      "MouseTrackHero",
+      "MultiImageGridHero",
+      "OverlappingImageHero",
+      "ParallaxImagesHero",
+      "ScatterParallaxHero",
+      "ScrollExpandVideoHero",
+      "ScrollZoomHero",
+      "StickyExpandHero",
+      "StickyVideoHero",
+      "TabHero",
+      "ThreeImageParallaxHero",
+      "VerticalGalleryHero",
+      "ZoomGridHero"
+    ]
+  },
+  metrics: {
+    title: "Stats",
+    components: [
+      "CenterMediaStats",
+      "HeaderStatsRow",
+      "MixedGridStats",
+      "SplitStats",
+      "TabStats"
+    ]
+  },
+  pricing: {
+    title: "Pricing",
+    components: [
+      "PricingCardGrid",
+      "PricingComparisonTable",
+      "SinglePricingCard",
+      "SplitPricing",
+      "TabPricingGrid",
+      "TabSinglePricing"
+    ]
+  },
+  showcase: {
+    title: "Showcase",
+    components: [
+      "CompactTimeline",
+      "HorizontalTimeline",
+      "SingleColumnTimeline",
+      "StickyScrollTimeline",
+      "TabTimeline",
+      "ZigzagTimeline"
+    ]
+  },
+  team: {
+    title: "Team",
+    components: [
+      "TeamCarousel",
+      "TeamGrid",
+      "TeamInlineCard",
+      "TeamStickyScatter",
+      "TeamTwoColumn"
+    ]
+  },
+  testimonial: {
+    title: "Testimonial",
+    components: [
+      "BentoTestimonial",
+      "CenteredTestimonial",
+      "HalfscreenTestimonialCarousel",
+      "ImageTestimonial",
+      "ImageTestimonialCarousel",
+      "MarqueeTestimonial",
+      "MasonryTestimonial",
+      "StickyTestimonial",
+      "TabTestimonial",
+      "TestimonialCardGrid",
+      "TestimonialCarousel"
+    ]
+  },
+  text: {
+    title: "Content",
+    components: [
+      "AsideNavContent",
+      "BlogArticle",
+      "ProseContent",
+      "SideMediaContent",
+      "StickyTextMultiImage"
+    ]
+  }
+};
+const sectionsMap = {
+  "banner-section": [
+    "CssMarqueeBanner",
+    "DualRowMarquee",
+    "ScrollDrivenMarquee",
+    "ScrollParallaxText"
+  ],
+  "contact-section": [
+    "CenteredForm",
+    "ContactCardsGrid",
+    "ContactModal",
+    "FormWithMedia",
+    "HeaderFormCards",
+    "HeaderInfoFullwidth",
+    "InfoCardsMedia",
+    "LocationCardsGrid",
+    "SplitInfoForm",
+    "TabLocations"
+  ],
+  "cta-section": [
+    "FeatureCardCta",
+    "MouseTrackCta",
+    "SideMediaCta",
+    "TextBlockCta"
+  ],
+  "faq-section": [
+    "DualColumnAccordionFaq",
+    "IconCardFaq",
+    "StackedAccordionFaq",
+    "StackedStaticFaq",
+    "TwoColumnAccordionFaq",
+    "TwoColumnStaticFaq"
+  ],
+  "feature-section": [
+    "FeatureCardsGrid",
+    "FeatureListSplit",
+    "TabFeature",
+    "TextMediaSplit",
+    "TextOnlySection"
+  ],
+  "footer-section": [
+    "CenteredMinimalFooter",
+    "ContactLinksFooter",
+    "CtaLinksFooter"
+  ],
+  "gallery-section": [
+    "AsymmetricGrid",
+    "FullscreenPortfolio",
+    "ImageCarousel",
+    "InteractivePortfolio",
+    "MasonryGrid",
+    "PortfolioCards",
+    "PortfolioDivider",
+    "ScrollParallax",
+    "ScrollParallaxPortfolio",
+    "SplitCarousel",
+    "StaticGrid"
+  ],
+  "header-section": [
+    "CenteredNavbar",
+    "DrawerNavbar",
+    "FloatingBorderedNavbar",
+    "FullscreenOverlayNavbar",
+    "MegaMenuNavbar",
+    "StandardNavbar"
+  ],
+  "hero-sections": [
+    "CarouselHero",
+    "ColumnScrollHero",
+    "DualMarqueeHero",
+    "FullscreenVideoHero",
+    "GridExpandHero",
+    "HorizontalMarqueeHero",
+    "InlineImageHero",
+    "MouseTrackHero",
+    "MultiImageGridHero",
+    "OverlappingImageHero",
+    "ParallaxImagesHero",
+    "ScatterParallaxHero",
+    "ScrollExpandVideoHero",
+    "ScrollZoomHero",
+    "StickyExpandHero",
+    "StickyVideoHero",
+    "TabHero",
+    "ThreeImageParallaxHero",
+    "VerticalGalleryHero",
+    "ZoomGridHero"
+  ],
+  "metrics-section": [
+    "CenterMediaStats",
+    "HeaderStatsRow",
+    "MixedGridStats",
+    "SplitStats",
+    "TabStats"
+  ],
+  "pricing-section": [
+    "PricingCardGrid",
+    "PricingComparisonTable",
+    "SinglePricingCard",
+    "SplitPricing",
+    "TabPricingGrid",
+    "TabSinglePricing"
+  ],
+  "showcase-section": [
+    "CompactTimeline",
+    "HorizontalTimeline",
+    "SingleColumnTimeline",
+    "StickyScrollTimeline",
+    "TabTimeline",
+    "ZigzagTimeline"
+  ],
+  "team-section": [
+    "TeamCarousel",
+    "TeamGrid",
+    "TeamInlineCard",
+    "TeamStickyScatter",
+    "TeamTwoColumn"
+  ],
+  "testimonial-section": [
+    "BentoTestimonial",
+    "CenteredTestimonial",
+    "HalfscreenTestimonialCarousel",
+    "ImageTestimonial",
+    "ImageTestimonialCarousel",
+    "MarqueeTestimonial",
+    "MasonryTestimonial",
+    "StickyTestimonial",
+    "TabTestimonial",
+    "TestimonialCardGrid",
+    "TestimonialCarousel"
+  ],
+  "text-section": [
+    "AsideNavContent",
+    "BlogArticle",
+    "ProseContent",
+    "SideMediaContent",
+    "StickyTextMultiImage"
+  ]
+};
+const confMap = {
+  CssMarqueeBanner: conf$1G,
+  DualRowMarquee: conf$1F,
+  ScrollDrivenMarquee: conf$1E,
+  ScrollParallaxText: conf$1D,
+  CenteredForm: conf$1C,
+  ContactCardsGrid: conf$1B,
+  ContactModal: conf$1A,
+  FormWithMedia: conf$1z,
+  HeaderFormCards: conf$1y,
+  HeaderInfoFullwidth: conf$1x,
+  InfoCardsMedia: conf$1w,
+  LocationCardsGrid: conf$1v,
+  SplitInfoForm: conf$1u,
+  TabLocations: conf$1t,
+  FeatureCardCta: conf$1s,
+  MouseTrackCta: conf$1r,
+  SideMediaCta: conf$1q,
+  TextBlockCta: conf$1p,
+  DualColumnAccordionFaq: conf$1o,
+  IconCardFaq: conf$1n,
+  StackedAccordionFaq: conf$1m,
+  StackedStaticFaq: conf$1l,
+  TwoColumnAccordionFaq: conf$1k,
+  TwoColumnStaticFaq: conf$1j,
+  FeatureCardsGrid: conf$1i,
+  FeatureListSplit: conf$1h,
+  TabFeature: conf$1g,
+  TextMediaSplit: conf$1f,
+  TextOnlySection: conf$1e,
+  CenteredMinimalFooter: conf$1d,
+  ContactLinksFooter: conf$1c,
+  CtaLinksFooter: conf$1b,
+  AsymmetricGrid: conf$1a,
+  FullscreenPortfolio: conf$19,
+  ImageCarousel: conf$18,
+  InteractivePortfolio: conf$17,
+  MasonryGrid: conf$16,
+  PortfolioCards: conf$15,
+  PortfolioDivider: conf$14,
+  ScrollParallax: conf$13,
+  ScrollParallaxPortfolio: conf$12,
+  SplitCarousel: conf$11,
+  StaticGrid: conf$10,
+  CenteredNavbar: conf$$,
+  DrawerNavbar: conf$_,
+  FloatingBorderedNavbar: conf$Z,
+  FullscreenOverlayNavbar: conf$Y,
+  MegaMenuNavbar: conf$X,
+  StandardNavbar: conf$W,
+  CarouselHero: conf$V,
+  ColumnScrollHero: conf$U,
+  DualMarqueeHero: conf$T,
+  FullscreenVideoHero: conf$S,
+  GridExpandHero: conf$R,
+  HorizontalMarqueeHero: conf$Q,
+  InlineImageHero: conf$P,
+  MouseTrackHero: conf$O,
+  MultiImageGridHero: conf$N,
+  OverlappingImageHero: conf$M,
+  ParallaxImagesHero: conf$L,
+  ScatterParallaxHero: conf$K,
+  ScrollExpandVideoHero: conf$J,
+  ScrollZoomHero: conf$I,
+  StickyExpandHero: conf$H,
+  StickyVideoHero: conf$G,
+  TabHero: conf$F,
+  ThreeImageParallaxHero: conf$E,
+  VerticalGalleryHero: conf$D,
+  ZoomGridHero: conf$C,
+  CenterMediaStats: conf$B,
+  HeaderStatsRow: conf$A,
+  MixedGridStats: conf$z,
+  SplitStats: conf$y,
+  TabStats: conf$x,
+  PricingCardGrid: conf$w,
+  PricingComparisonTable: conf$v,
+  SinglePricingCard: conf$u,
+  SplitPricing: conf$t,
+  TabPricingGrid: conf$s,
+  TabSinglePricing: conf$r,
+  CompactTimeline: conf$q,
+  HorizontalTimeline: conf$p,
+  SingleColumnTimeline: conf$o,
+  StickyScrollTimeline: conf$n,
+  TabTimeline: conf$m,
+  ZigzagTimeline: conf$l,
+  TeamCarousel: conf$k,
+  TeamGrid: conf$j,
+  TeamInlineCard: conf$i,
+  TeamStickyScatter: conf$h,
+  TeamTwoColumn: conf$g,
+  BentoTestimonial: conf$f,
+  CenteredTestimonial: conf$e,
+  HalfscreenTestimonialCarousel: conf$d,
+  ImageTestimonial: conf$c,
+  ImageTestimonialCarousel: conf$b,
+  MarqueeTestimonial: conf$a,
+  MasonryTestimonial: conf$9,
+  StickyTestimonial: conf$8,
+  TabTestimonial: conf$7,
+  TestimonialCardGrid: conf$6,
+  TestimonialCarousel: conf$5,
+  AsideNavContent: conf$4,
+  BlogArticle: conf$3,
+  ProseContent: conf$2,
+  SideMediaContent: conf$1,
+  StickyTextMultiImage: conf
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+};
+function getComponentDefaultProps(componentType) {
+  var _a;
+  return ((_a = confMap[componentType]) == null ? void 0 : _a.defaultProps) ?? {};
+}
+function buildComponents(wrapRender) {
+  const result = {};
+  for (const [name, conf2] of Object.entries(confMap)) {
+    result[name] = wrapRender(conf2);
+  }
+  return result;
+}
+export {
+  buildComponents,
+  categories,
+  confMap,
+  getComponentDefaultProps,
+  sectionsMap
+};

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

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