dune-react 0.0.19 → 0.0.20

package/dist/components/puck-block/hero-sections/zoom-grid-hero/index.d.ts

@@ -0,0 +1,115 @@
+import { ZoomGridHero, ZoomGridHeroDefaults } from "./component";
+import type { ZoomGridHeroProps } from "./component";
+export { ZoomGridHero, ZoomGridHeroDefaults };
+export type { ZoomGridHeroProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly label: {
+                    readonly type: "text";
+                };
+                readonly action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../../puck-core").ActionField;
+                };
+                readonly variant: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "primary";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "secondary";
+                        readonly value: "secondary";
+                    }, {
+                        readonly label: "outline";
+                        readonly value: "outline";
+                    }, {
+                        readonly label: "ghost";
+                        readonly value: "ghost";
+                    }, {
+                        readonly label: "link";
+                        readonly value: "link";
+                    }, {
+                        readonly label: "destructive";
+                        readonly value: "destructive";
+                    }];
+                };
+                readonly size: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "sm";
+                        readonly value: "sm";
+                    }, {
+                        readonly label: "lg";
+                        readonly value: "lg";
+                    }, {
+                        readonly label: "icon";
+                        readonly value: "icon";
+                    }];
+                };
+                readonly icon: {
+                    type: "custom";
+                    render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                };
+            };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
+                    type: "text";
+                };
+            };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
+        };
+    };
+    defaultProps: ZoomGridHeroProps;
+    render: (props: ZoomGridHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

package/dist/components/puck-block/hero-sections/zoom-grid-hero/index.js

@@ -0,0 +1,19 @@
+import { ZoomGridHero, ZoomGridHeroDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    images: imagesField
+  },
+  defaultProps: ZoomGridHeroDefaults,
+  render: ZoomGridHero
+};
+export {
+  ZoomGridHero,
+  ZoomGridHeroDefaults,
+  conf as default
+};

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

@@ -1,57 +1,15 @@
-export { conf as AnnouncementBannerConf, type AnnouncementBannerProps } from "./banner-sections/announcement-banner-1/index.tsx";
-export { conf as MarqueeConf, type MarqueeProps } from "./banner-sections/marquee-1/index.tsx";
-export { conf as ContactUsConf, type ContactUsProps } from "./contact-sections/contact-us-1/index.tsx";
-export { conf as ContactUs2Conf, type ContactUs2Props } from "./contact-sections/contact-us-2/index.tsx";
-export { conf as ContactUs3Conf, type ContactUs3Props } from "./contact-sections/contact-us-3/index.tsx";
-export { conf as BannerCtaConf, type BannerCtaProps } from "./cta-sections/banner-cta-1/index.tsx";
-export { conf as CtaConf, type CtaProps } from "./cta-sections/cta-1/index.tsx";
-export { conf as GradientCtaConf, type GradientCtaProps } from "./cta-sections/gradient-cta-1/index.tsx";
-export { conf as NewsletterSignupConf, type NewsletterSignupProps } from "./cta-sections/newsletter-signup-1/index.tsx";
-export { conf as PromoSectionConf, type PromoSectionProps } from "./cta-sections/promo-section-1/index.tsx";
-export { conf as AccordionConf, type AccordionProps } from "./faq-sections/accordion-1/index.tsx";
-export { conf as FaqConf, type FaqProps } from "./faq-sections/faq-1/index.tsx";
-export { conf as Faq2Conf, type Faq2Props } from "./faq-sections/faq-2/index.tsx";
-export { conf as BentoConf, type BentoProps } from "./feature-sections/bento-1/index.tsx";
-export { conf as FeatureCardsConf, type FeatureCardsProps } from "./feature-sections/feature-cards-1/index.tsx";
-export { conf as FeatureShowcaseConf, type FeatureShowcaseProps } from "./feature-sections/feature-showcase-1/index.tsx";
-export { conf as IconGridConf, type IconGridProps } from "./feature-sections/icon-grid-1/index.tsx";
-export { conf as ProductFeaturesConf, type ProductFeaturesProps } from "./feature-sections/product-features-1/index.tsx";
-export { conf as FooterConf, type FooterProps } from "./footer-sections/footer-1/index.tsx";
-export { conf as GalleryConf, type GalleryProps } from "./gallery-sections/gallery-1/index.tsx";
-export { conf as Gallery2Conf, type Gallery2Props } from "./gallery-sections/gallery-2/index.tsx";
-export { conf as Gallery3Conf, type Gallery3Props } from "./gallery-sections/gallery-3/index.tsx";
-export { default as HeaderConf, type HeaderProps } from "./header-sections/header-1/index.tsx";
-export { conf as StickyNavConf, type StickyNavProps } from "./header-sections/sticky-nav-1/index.tsx";
-export { conf as FullscreenHeroConf, type FullscreenHeroProps } from "./hero-sections/fullscreen-hero-1/index.tsx";
-export { conf as GradientHeroConf, type GradientHeroProps } from "./hero-sections/gradient-hero-1/index.tsx";
-export { conf as HeroConf, type HeroProps } from "./hero-sections/hero-1/index.tsx";
-export { conf as ImageHeroConf, type ImageHeroProps } from "./hero-sections/image-hero-1/index.tsx";
-export { conf as SplitHeroConf, type SplitHeroProps } from "./hero-sections/split-hero-1/index.tsx";
-export { conf as VideoHeroConf, type VideoHeroProps } from "./hero-sections/video-hero-1/index.tsx";
-export { conf as LocationConf, type LocationSectionProps as LocationProps } from "./location-sections/location-1/index.tsx";
-export { conf as Location2Conf, type Location2Props } from "./location-sections/location-2/index.tsx";
-export { conf as Location3Conf, type Location3Props } from "./location-sections/location-3/index.tsx";
-export { conf as StatsConf, type StatsProps } from "./metrics-sections/stats-1/index.tsx";
-export { conf as Stats2Conf, type Stats2Props } from "./metrics-sections/stats-2/index.tsx";
-export { conf as Stats3Conf, type Stats3Props } from "./metrics-sections/stats-3/index.tsx";
-export { conf as ComparisonConf, type ComparisonProps } from "./pricing-sections/comparison-1/index.tsx";
-export { conf as PricingConf, type PricingProps } from "./pricing-sections/pricing-1/index.tsx";
-export { conf as Pricing2Conf, type Pricing2Props } from "./pricing-sections/pricing-2/index.tsx";
-export { conf as BeforeAfterConf, type BeforeAfterProps } from "./showcase-sections/before-after-1/index.tsx";
-export { conf as CaseStudyConf, type CaseStudyProps } from "./showcase-sections/case-study-1/index.tsx";
-export { conf as StepByStepConf, type StepByStepProps } from "./showcase-sections/step-by-step-1/index.tsx";
-export { conf as TeamGridConf, type TeamGridProps } from "./team-sections/team-grid-1/index.tsx";
-export { conf as TeamGrid2Conf, type TeamGrid2Props } from "./team-sections/team-grid-2/index.tsx";
-export { conf as TeamProfilesConf, type TeamProfilesProps } from "./team-sections/team-profiles-1/index.tsx";
-export { conf as CustomersConf, type CustomersProps } from "./testimonial-sections/customers-1/index.tsx";
-export { conf as LogoMarqueeConf, type LogoMarqueeProps } from "./testimonial-sections/logo-marquee-1/index.tsx";
-export { conf as ReviewSectionConf, type ReviewSectionProps } from "./testimonial-sections/review-section-1/index.tsx";
-export { conf as LogoWallConf, type LogoWall1Props as LogoWallProps } from "./testimonial-sections/logo-wall-1/index.tsx";
-export { conf as TestimonialsConf, type TestimonialsProps } from "./testimonial-sections/testimonials-1/index.tsx";
-export { conf as ArticlesConf, type ArticlesProps } from "./text-sections/articles-1/index.tsx";
-export { conf as ContentSectionConf, type ContentSectionProps } from "./text-sections/content-section-1/index.tsx";
-export { conf as RichTextConf, type RichTextProps } from "./text-sections/rich-text-1/index.tsx";
-export { conf as TabSectionConf, type TabSectionProps } from "./text-sections/tab-section-1/index.tsx";
-export { conf as TimelineConf, type TimelineProps } from "./text-sections/timeline-1/index.tsx";
-export { conf as TwoColumnConf, type TwoColumnProps } from "./text-sections/two-column-1/index.tsx";
-export type { ILayoutProps } from "./type.ts";
+export * from "./banner-sections";
+export * from "./header-sections";
+export * from "./hero-sections";
+export * from "./feature-sections";
+export * from "./testimonial-sections";
+export * from "./gallery-sections";
+export * from "./cta-sections";
+export * from "./contact-sections";
+export * from "./faq-sections";
+export * from "./pricing-sections";
+export * from "./metrics-sections";
+export * from "./text-sections";
+export * from "./showcase-sections";
+export * from "./team-sections";
+export * from "./footer-sections";

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

@@ -0,0 +1,4 @@
+import type { MetricsComponentProps, MetricsSectionBaseProps } from "../props";
+export type CenterMediaStatsProps = MetricsComponentProps;
+export declare const CenterMediaStats: (props: CenterMediaStatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CenterMediaStatsDefaults: MetricsSectionBaseProps;

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

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
+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";
+const CenterMediaStats = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    stats,
+    image,
+    styles
+  } = {
+    ...CenterMediaStatsDefaults,
+    ...props
+  };
+  const {
+    mediaPosition = "left",
+    mediaType = "image",
+    statsStyle = "line"
+  } = styles ?? {};
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const isMediaLeft = mediaPosition === "left";
+  const isPlayButton = mediaType === "playButton";
+  const renderStat = (stat, index) => {
+    if (statsStyle === "cardPlain") {
+      return /* @__PURE__ */ jsxs("div", { className: "border border-border-primary p-6 md:p-8", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-6xl font-bold leading-[1.2] md:text-9xl lg:text-10xl", children: stat.percentage }),
+        /* @__PURE__ */ jsx("h3", { className: "text-md font-bold leading-[1.4] md:text-xl", children: stat.heading })
+      ] }, index);
+    }
+    if (statsStyle === "cardReversed") {
+      return /* @__PURE__ */ jsxs("div", { className: "border border-border-primary bg-background-secondary p-6 md:p-8", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-md font-bold leading-[1.4] md:text-xl", children: stat.heading }),
+        /* @__PURE__ */ jsx("p", { className: "text-6xl font-bold leading-[1.2] md:text-9xl lg:text-10xl", children: stat.percentage })
+      ] }, index);
+    }
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-6xl font-bold leading-[1.2] md:text-9xl lg:text-10xl", children: stat.percentage }),
+      /* @__PURE__ */ jsx("h3", { className: "text-md font-bold leading-[1.4] md:text-xl", children: stat.heading })
+    ] }, index);
+  };
+  const renderMedia = () => {
+    if (isPlayButton) {
+      return /* @__PURE__ */ jsxs(Dialog, { children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex w-full items-center justify-center", children: [
+          /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "aspect-[3/2] size-full object-cover" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-10 bg-black/50" }),
+          /* @__PURE__ */ jsx(FaCirclePlay, { className: "absolute z-20 size-16 text-white" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          !isIframeLoaded && /* @__PURE__ */ jsx(CgSpinner, { className: "mx-auto size-16 animate-spin text-white" }),
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              className: cn("z-0 mx-auto aspect-video size-full md:w-[738px] lg:w-[940px]", {
+                visible: isIframeLoaded,
+                hidden: !isIframeLoaded
+              }),
+              src: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
+              allow: "autoplay; encrypted-media; picture-in-picture",
+              allowFullScreen: true,
+              onLoad: () => setIsIframeLoaded(true)
+            }
+          )
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/2] size-full object-cover", src: image.src, alt: image.alt });
+  };
+  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: [
+    /* @__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 }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-6 md:gap-y-0 lg:grid-cols-[1fr_0.5fr]", children: isMediaLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      mediaBlock,
+      statsBlock
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      statsBlock,
+      mediaBlock
+    ] }) })
+  ] }) });
+};
+const CenterMediaStatsDefaults = {
+  tagline: "Tagline",
+  heading: "Short heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  buttons: [],
+  stats: [
+    { percentage: "30%", heading: "Short heading goes here" },
+    { percentage: "30%", heading: "Short heading goes here" },
+    { percentage: "30%", heading: "Short heading goes here" }
+  ],
+  image: {
+    src: "https://picsum.photos/seed/stats-media/1200/800",
+    alt: "Relume placeholder image"
+  },
+  styles: {
+    mediaPosition: "left",
+    mediaType: "image",
+    statsStyle: "line"
+  }
+};
+export {
+  CenterMediaStats,
+  CenterMediaStatsDefaults
+};

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

@@ -0,0 +1,89 @@
+import { CenterMediaStats, CenterMediaStatsDefaults } from "./center-media-stats";
+import type { CenterMediaStatsProps } from "./center-media-stats";
+export { CenterMediaStats, CenterMediaStatsDefaults };
+export type { CenterMediaStatsProps };
+declare const conf: {
+    fields: {
+        tagline: {
+            type: string;
+        };
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        stats: {
+            type: string;
+            max: number;
+            getItemSummary: (item: {
+                heading?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                percentage: {
+                    type: string;
+                };
+                heading: {
+                    readonly type: "text";
+                    readonly contentEditable: true;
+                };
+            };
+        };
+        image: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+        styles: {
+            type: string;
+            label: string;
+            objectFields: {
+                mediaPosition: {
+                    readonly type: "radio";
+                    readonly label: "Media Position";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Right";
+                        readonly value: "right";
+                    }];
+                };
+                mediaType: {
+                    readonly type: "radio";
+                    readonly label: "Media Type";
+                    readonly options: readonly [{
+                        readonly label: "Image";
+                        readonly value: "image";
+                    }, {
+                        readonly label: "Play Button";
+                        readonly value: "playButton";
+                    }];
+                };
+                statsStyle: {
+                    readonly type: "select";
+                    readonly label: "Stats Style";
+                    readonly options: readonly [{
+                        readonly label: "Line (border-left)";
+                        readonly value: "line";
+                    }, {
+                        readonly label: "Card Plain";
+                        readonly value: "cardPlain";
+                    }, {
+                        readonly label: "Card Reversed";
+                        readonly value: "cardReversed";
+                    }];
+                };
+            };
+        };
+    };
+    defaultProps: import("../props").MetricsSectionBaseProps;
+    render: (props: CenterMediaStatsProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,37 @@
+import { CenterMediaStats, CenterMediaStatsDefaults } from "./center-media-stats.js";
+import { headingField, descriptionField } from "../../../puck-core/core/props/content.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+import { metricsStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    tagline: { type: "text" },
+    heading: headingField,
+    description: descriptionField,
+    stats: {
+      type: "array",
+      max: 6,
+      getItemSummary: (item, index = 0) => item.heading || `Stat ${index + 1}`,
+      arrayFields: {
+        percentage: { type: "text" },
+        heading: headingField
+      }
+    },
+    image: imageField,
+    styles: {
+      type: "object",
+      label: "Styles",
+      objectFields: {
+        mediaPosition: metricsStyleFields.mediaPosition,
+        mediaType: metricsStyleFields.mediaType,
+        statsStyle: metricsStyleFields.statsStyle
+      }
+    }
+  },
+  defaultProps: CenterMediaStatsDefaults,
+  render: CenterMediaStats
+};
+export {
+  CenterMediaStats,
+  CenterMediaStatsDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+import type { MetricsComponentProps, MetricsSectionBaseProps } from "../props";
+export type HeaderStatsRowProps = MetricsComponentProps;
+export declare const HeaderStatsRow: (props: HeaderStatsRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderStatsRowDefaults: MetricsSectionBaseProps;

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

@@ -0,0 +1,104 @@
+import { jsxs, Fragment, jsx } 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";
+const HeaderStatsRow = (props) => {
+  const {
+    tagline,
+    heading,
+    description,
+    buttons,
+    stats,
+    image,
+    styles
+  } = {
+    ...HeaderStatsRowDefaults,
+    ...props
+  };
+  const {
+    textLayout = "twoColumn",
+    bgMedia = "none",
+    statsStyle = "line"
+  } = styles ?? {};
+  const isTwoColumn = textLayout === "twoColumn";
+  const hasBg = bgMedia !== "none";
+  const isBgImage = bgMedia === "image";
+  const isBgVideo = bgMedia === "video";
+  const textColorClass = hasBg ? "text-text-alternative" : "";
+  const renderStat = (stat, index) => {
+    if (statsStyle === "cardPlain") {
+      return /* @__PURE__ */ jsxs("div", { className: "border border-border-primary p-6 md:p-8", children: [
+        /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-10xl font-bold leading-[1.3] md:text-[4rem] lg:text-[5rem]", textColorClass), children: stat.percentage }),
+        /* @__PURE__ */ jsx("h3", { className: cn("text-md font-bold leading-[1.4] md:text-xl", textColorClass), children: stat.heading })
+      ] }, index);
+    }
+    if (statsStyle === "cardReversed") {
+      return /* @__PURE__ */ jsxs("div", { className: "border border-border-primary bg-background-secondary p-6 md:p-8", children: [
+        /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-md font-bold leading-[1.4] md:text-xl", textColorClass), children: stat.heading }),
+        /* @__PURE__ */ jsx("p", { className: cn("text-10xl font-bold leading-[1.3] md:text-[4rem] lg:text-[5rem]", textColorClass), children: stat.percentage })
+      ] }, index);
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "border-l-2 border-border-primary pl-8", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-10xl font-bold leading-[1.3] md:text-[4rem] lg:text-[5rem]", textColorClass), children: stat.percentage }),
+      /* @__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: [
+    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 }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
+      ] }),
+      isBgVideo && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("video", { className: "size-full object-cover", autoPlay: true, loop: true, muted: true, children: /* @__PURE__ */ jsx("source", { src: "https://www.example.com/video.mp4", type: "video/mp4" }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("container", { "relative z-10": hasBg }), 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-[5.25rem]": isTwoColumn
+      }), children: isTwoColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("mb-3 font-semibold md:mb-4", textColorClass), children: tagline }),
+          /* @__PURE__ */ jsx("h2", { className: cn("text-5xl font-bold md:text-7xl lg:text-8xl", textColorClass), children: heading })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("md:text-md", textColorClass), children: description }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap items-center gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: cn("mb-3 font-semibold md:mb-4", textColorClass), children: tagline }),
+        /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", textColorClass), children: heading }),
+        /* @__PURE__ */ jsx("p", { className: cn("md:text-md", textColorClass), children: description })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 md:grid-cols-3 md:gap-x-8 lg:gap-x-12 lg:gap-y-16", children: stats.map((stat, index) => renderStat(stat, index)) })
+    ] })
+  ] });
+};
+const HeaderStatsRowDefaults = {
+  tagline: "Tagline",
+  heading: "Medium length section heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+  buttons: [
+    { label: "Button", variant: "secondary" },
+    { label: "Button", variant: "link" }
+  ],
+  stats: [
+    { percentage: "30%", heading: "Short heading goes here" },
+    { percentage: "30%", heading: "Short heading goes here" },
+    { percentage: "30%", heading: "Short heading goes here" }
+  ],
+  image: {
+    src: "https://picsum.photos/seed/stats-bg/1920/1080",
+    alt: "Relume placeholder image"
+  },
+  styles: {
+    textLayout: "twoColumn",
+    bgMedia: "none",
+    statsStyle: "line"
+  }
+};
+export {
+  HeaderStatsRow,
+  HeaderStatsRowDefaults
+};