@opensite/ui 0.3.3 → 0.4.0

package/dist/stats-circular-progress.js

@@ -400,6 +400,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -463,43 +464,11 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultCategories = [
-  {
-    id: "business",
-    name: "Business",
-    stats: [
-      { label: "Revenue Growth", value: 84, suffix: "%", info: "Year over year" },
-      { label: "ROI", value: 167, suffix: "%", info: "Return on investment" },
-      { label: "Market Share", value: 42, suffix: "%", info: "In primary markets" },
-      { label: "Profit Margin", value: 23, suffix: "%", info: "Net margin" }
-    ]
-  },
-  {
-    id: "technical",
-    name: "Technical",
-    stats: [
-      { label: "System Uptime", value: 99.97, suffix: "%", info: "Last 30 days" },
-      { label: "Load Time", value: 78, suffix: "%", info: "Faster than average" },
-      { label: "Code Coverage", value: 91, suffix: "%", info: "Test coverage" },
-      { label: "API Performance", value: 88, suffix: "%", info: "Response time" }
-    ]
-  },
-  {
-    id: "customer",
-    name: "Customer",
-    stats: [
-      { label: "Satisfaction", value: 94, suffix: "%", info: "Overall rating" },
-      { label: "Retention", value: 87, suffix: "%", info: "Customer loyalty" },
-      { label: "NPS Score", value: 72, suffix: "", info: "Net promoter score" },
-      { label: "Support Rating", value: 96, suffix: "%", info: "Issue resolution" }
-    ]
-  }
-];
 function getColorClass(value) {
-  if (value >= 90) return "text-emerald-500";
-  if (value >= 75) return "text-blue-500";
-  if (value >= 50) return "text-amber-500";
-  return "text-rose-500";
+  if (value >= 90) return "text-success";
+  if (value >= 75) return "text-primary";
+  if (value >= 50) return "text-accent-foreground";
+  return "text-destructive";
 }
 function CircularProgressIndicator({
   value,
@@ -550,11 +519,11 @@ function CircularProgressIndicator({
   );
 }
 function StatsCircularProgress({
-  badge = "Performance",
+  badge,
   badgeSlot,
-  heading = "Key Performance Indicators",
-  description = "Visualizing our achievements across all business aspects",
-  categories = defaultCategories,
+  heading,
+  description,
+  categories,
   categoriesSlot,
   defaultCategory = "business",
   background = "white",

package/dist/stats-growth-timeline.cjs

@@ -885,6 +885,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -948,79 +949,20 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultMilestones = [
-  {
-    id: "launch",
-    year: "2018",
-    title: "Company Founded",
-    description: "Started with a small team of 5 passionate individuals",
-    metric: { value: "5", label: "Team Members" },
-    icon: "lucide/calendar-days"
-  },
-  {
-    id: "first-customers",
-    year: "2019",
-    title: "First 100 Customers",
-    description: "Achieved product-market fit and began scaling operations",
-    metric: { value: "100+", label: "Early Adopters" },
-    icon: "lucide/users"
-  },
-  {
-    id: "series-a",
-    year: "2020",
-    title: "Series A Funding",
-    description: "Secured $8M in funding to accelerate growth and development",
-    metric: { value: "$8M", label: "Raised" },
-    icon: "lucide/bar-chart"
-  },
-  {
-    id: "expansion",
-    year: "2021",
-    title: "International Expansion",
-    description: "Expanded to 12 countries across Europe, Asia, and Australia",
-    metric: { value: "12", label: "Countries" },
-    icon: "lucide/activity"
-  },
-  {
-    id: "acquisition",
-    year: "2022",
-    title: "Strategic Acquisition",
-    description: "Acquired leading analytics provider to enhance our platform",
-    metric: { value: "2x", label: "Product Growth" },
-    icon: "lucide/award"
-  },
-  {
-    id: "unicorn",
-    year: "2023",
-    title: "Unicorn Status",
-    description: "Reached $1B valuation with 10,000+ enterprise customers worldwide",
-    metric: { value: "10K+", label: "Enterprise Clients" },
-    icon: "lucide/award"
-  }
-];
-var defaultCurrentStats = [
-  { value: "$1B+", label: "Company Valuation" },
-  { value: "180+", label: "Team Members" },
-  { value: "24", label: "Countries" },
-  { value: "12K+", label: "Global Customers" }
-];
-var defaultActions = [
-  { label: "View our roadmap", href: "#", variant: "link" }
-];
 function StatsGrowthTimeline({
-  badge = "Our Journey",
+  badge,
   badgeSlot,
-  heading = "Growing From Startup to Industry Leader",
-  description = "Track our exponential growth journey from a small startup to becoming the market leader.",
-  milestones = defaultMilestones,
+  heading,
+  description,
+  milestones,
   milestonesSlot,
-  currentStats = defaultCurrentStats,
+  currentStats,
   currentStatsSlot,
   currentStatsHeading = "Where We Are Today",
   futureHeading = "The Future Is Even Brighter",
   futureDescription = "We're just getting started. Our roadmap includes expansion to new markets, enhanced product offerings, and continued innovation to serve our growing customer base.",
   futureSlot,
-  actions = defaultActions,
+  actions,
   actionsSlot,
   background = "white",
   spacing = "lg",

package/dist/stats-growth-timeline.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
-import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 import './patternSvgs-c5ZNVoTT.cjs';
 
@@ -186,6 +186,23 @@ interface StatsGrowthTimelineProps {
      */
     futureClassName?: string;
 }
+/**
+ * StatsGrowthTimeline - A vertical timeline showcasing company milestones and growth
+ * journey. Features alternating left/right content placement, year badges, milestone
+ * cards with icons and metrics, a "Where We Are Today" summary section, and a future
+ * roadmap CTA. Ideal for about pages, investor presentations, or company history sections.
+ *
+ * @example
+ * ```tsx
+ * <StatsGrowthTimeline
+ *   badge="Our Journey"
+ *   heading="Growing From Startup to Industry Leader"
+ *   milestones={[
+ *     { id: "launch", year: "2018", title: "Company Founded", ... },
+ *   ]}
+ * />
+ * ```
+ */
 declare function StatsGrowthTimeline({ badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, timelineClassName, milestoneClassName, currentStatsClassName, futureClassName, }: StatsGrowthTimelineProps): react_jsx_runtime.JSX.Element;
 
 export { type CurrentStat, type Milestone, StatsGrowthTimeline, type StatsGrowthTimelineProps };

package/dist/stats-growth-timeline.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
-import { A as ActionConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 import './patternSvgs-c5ZNVoTT.js';
 
@@ -186,6 +186,23 @@ interface StatsGrowthTimelineProps {
      */
     futureClassName?: string;
 }
+/**
+ * StatsGrowthTimeline - A vertical timeline showcasing company milestones and growth
+ * journey. Features alternating left/right content placement, year badges, milestone
+ * cards with icons and metrics, a "Where We Are Today" summary section, and a future
+ * roadmap CTA. Ideal for about pages, investor presentations, or company history sections.
+ *
+ * @example
+ * ```tsx
+ * <StatsGrowthTimeline
+ *   badge="Our Journey"
+ *   heading="Growing From Startup to Industry Leader"
+ *   milestones={[
+ *     { id: "launch", year: "2018", title: "Company Founded", ... },
+ *   ]}
+ * />
+ * ```
+ */
 declare function StatsGrowthTimeline({ badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, timelineClassName, milestoneClassName, currentStatsClassName, futureClassName, }: StatsGrowthTimelineProps): react_jsx_runtime.JSX.Element;
 
 export { type CurrentStat, type Milestone, StatsGrowthTimeline, type StatsGrowthTimelineProps };

package/dist/stats-growth-timeline.js

@@ -864,6 +864,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -927,79 +928,20 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultMilestones = [
-  {
-    id: "launch",
-    year: "2018",
-    title: "Company Founded",
-    description: "Started with a small team of 5 passionate individuals",
-    metric: { value: "5", label: "Team Members" },
-    icon: "lucide/calendar-days"
-  },
-  {
-    id: "first-customers",
-    year: "2019",
-    title: "First 100 Customers",
-    description: "Achieved product-market fit and began scaling operations",
-    metric: { value: "100+", label: "Early Adopters" },
-    icon: "lucide/users"
-  },
-  {
-    id: "series-a",
-    year: "2020",
-    title: "Series A Funding",
-    description: "Secured $8M in funding to accelerate growth and development",
-    metric: { value: "$8M", label: "Raised" },
-    icon: "lucide/bar-chart"
-  },
-  {
-    id: "expansion",
-    year: "2021",
-    title: "International Expansion",
-    description: "Expanded to 12 countries across Europe, Asia, and Australia",
-    metric: { value: "12", label: "Countries" },
-    icon: "lucide/activity"
-  },
-  {
-    id: "acquisition",
-    year: "2022",
-    title: "Strategic Acquisition",
-    description: "Acquired leading analytics provider to enhance our platform",
-    metric: { value: "2x", label: "Product Growth" },
-    icon: "lucide/award"
-  },
-  {
-    id: "unicorn",
-    year: "2023",
-    title: "Unicorn Status",
-    description: "Reached $1B valuation with 10,000+ enterprise customers worldwide",
-    metric: { value: "10K+", label: "Enterprise Clients" },
-    icon: "lucide/award"
-  }
-];
-var defaultCurrentStats = [
-  { value: "$1B+", label: "Company Valuation" },
-  { value: "180+", label: "Team Members" },
-  { value: "24", label: "Countries" },
-  { value: "12K+", label: "Global Customers" }
-];
-var defaultActions = [
-  { label: "View our roadmap", href: "#", variant: "link" }
-];
 function StatsGrowthTimeline({
-  badge = "Our Journey",
+  badge,
   badgeSlot,
-  heading = "Growing From Startup to Industry Leader",
-  description = "Track our exponential growth journey from a small startup to becoming the market leader.",
-  milestones = defaultMilestones,
+  heading,
+  description,
+  milestones,
   milestonesSlot,
-  currentStats = defaultCurrentStats,
+  currentStats,
   currentStatsSlot,
   currentStatsHeading = "Where We Are Today",
   futureHeading = "The Future Is Even Brighter",
   futureDescription = "We're just getting started. Our roadmap includes expansion to new markets, enhanced product offerings, and continued innovation to serve our growing customer base.",
   futureSlot,
-  actions = defaultActions,
+  actions,
   actionsSlot,
   background = "white",
   spacing = "lg",

package/dist/stats-icon-cards.cjs

@@ -433,6 +433,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -496,40 +497,10 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultStats = [
-  {
-    label: "Active Users",
-    value: "120K+",
-    growth: "18% growth",
-    isPositive: true,
-    icon: "lucide/users"
-  },
-  {
-    label: "Avg. Session",
-    value: "4:30",
-    growth: "+2 min",
-    isPositive: true,
-    icon: "lucide/clock"
-  },
-  {
-    label: "Revenue",
-    value: "$3.2M",
-    growth: "32% increase",
-    isPositive: true,
-    icon: "lucide/dollar-sign"
-  },
-  {
-    label: "Conversion",
-    value: "9.5%",
-    growth: "2.1% higher",
-    isPositive: true,
-    icon: "lucide/target"
-  }
-];
 function StatsIconCards({
-  heading = "Our Growth in Numbers",
-  description = "Key metrics that showcase our impact in the market",
-  stats = defaultStats,
+  heading,
+  description,
+  stats,
   statsSlot,
   background = "white",
   spacing = "lg",

package/dist/stats-icon-cards.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 import './patternSvgs-c5ZNVoTT.cjs';
 

package/dist/stats-icon-cards.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
-import './blocks-XLPGq8A5.js';
+import './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 import './patternSvgs-c5ZNVoTT.js';
 

package/dist/stats-icon-cards.js

@@ -412,6 +412,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -475,40 +476,10 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultStats = [
-  {
-    label: "Active Users",
-    value: "120K+",
-    growth: "18% growth",
-    isPositive: true,
-    icon: "lucide/users"
-  },
-  {
-    label: "Avg. Session",
-    value: "4:30",
-    growth: "+2 min",
-    isPositive: true,
-    icon: "lucide/clock"
-  },
-  {
-    label: "Revenue",
-    value: "$3.2M",
-    growth: "32% increase",
-    isPositive: true,
-    icon: "lucide/dollar-sign"
-  },
-  {
-    label: "Conversion",
-    value: "9.5%",
-    growth: "2.1% higher",
-    isPositive: true,
-    icon: "lucide/target"
-  }
-];
 function StatsIconCards({
-  heading = "Our Growth in Numbers",
-  description = "Key metrics that showcase our impact in the market",
-  stats = defaultStats,
+  heading,
+  description,
+  stats,
   statsSlot,
   background = "white",
   spacing = "lg",

package/dist/stats-impact-grid.cjs

@@ -908,6 +908,7 @@ var backgroundStyles = {
   white: "bg-background text-foreground",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
   gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
   primary: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -971,73 +972,12 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var defaultStats = [
-  {
-    id: "roi",
-    value: "437",
-    suffix: "%",
-    label: "Average ROI",
-    description: "Return on investment for businesses using our platform",
-    icon: "lucide/line-chart",
-    iconColor: "text-primary"
-  },
-  {
-    id: "revenue",
-    value: "2.4",
-    prefix: "$",
-    suffix: "B+",
-    label: "Revenue Generated",
-    description: "Total revenue generated for our customers",
-    icon: "lucide/dollar-sign",
-    iconColor: "text-emerald-500"
-  },
-  {
-    id: "conversion",
-    value: "89",
-    suffix: "%",
-    label: "Conversion Increase",
-    description: "Average lift in conversion rates after implementation",
-    icon: "lucide/pie-chart",
-    iconColor: "text-blue-500"
-  },
-  {
-    id: "time",
-    value: "60",
-    suffix: "%",
-    label: "Time Saved",
-    description: "Average reduction in manual workload for marketing teams",
-    icon: "lucide/clock",
-    iconColor: "text-amber-500"
-  },
-  {
-    id: "growth",
-    value: "3.7",
-    suffix: "x",
-    label: "Customer Growth",
-    description: "Average growth in customer base year-over-year",
-    icon: "lucide/target",
-    iconColor: "text-purple-500"
-  },
-  {
-    id: "efficiency",
-    value: "83",
-    suffix: "%",
-    label: "Marketing Efficiency",
-    description: "Improvement in marketing efficiency across channels",
-    icon: "lucide/zap",
-    iconColor: "text-rose-500"
-  }
-];
-var defaultActions = [
-  { label: "Get Started", href: "#", variant: "default" },
-  { label: "View Case Studies", href: "#", variant: "outline" }
-];
 function StatsImpactGrid({
-  badge = "Proven Results",
+  badge,
   badgeSlot,
-  heading = "Transforming Businesses With Real Numbers",
-  description = "Our platform delivers measurable impact for businesses of all sizes. See the difference in black and white.",
-  stats = defaultStats,
+  heading,
+  description,
+  stats,
   statsSlot,
   comparisonHeading = "How Does This Compare?",
   comparisonDescription = "Our platform delivers results that are 4x better than industry averages across all key performance indicators.",
@@ -1045,7 +985,7 @@ function StatsImpactGrid({
   platformValue = "89%",
   comparisonSlot,
   ctaHeading = "Ready to See These Results in Your Business?",
-  actions = defaultActions,
+  actions,
   ctaSlot,
   background = "white",
   spacing = "lg",

package/dist/stats-impact-grid.d.cts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
-import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig } from './blocks-BfXV7q25.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-CKmytxru.cjs';
 import 'class-variance-authority/types';
 import './patternSvgs-c5ZNVoTT.cjs';
 
@@ -174,6 +174,24 @@ interface StatsImpactGridProps {
      */
     ctaClassName?: string;
 }
+/**
+ * StatsImpactGrid - A comprehensive stats section featuring a grid of impact metrics
+ * with icons, an industry comparison bar chart, and a call-to-action. Each stat card
+ * displays an icon, large value with prefix/suffix, label, and description. Includes
+ * a visual comparison between industry average and platform performance. Ideal for
+ * showcasing ROI, business impact, or platform benefits with social proof.
+ *
+ * @example
+ * ```tsx
+ * <StatsImpactGrid
+ *   badge="Proven Results"
+ *   heading="Transforming Businesses With Real Numbers"
+ *   stats={[
+ *     { id: "roi", value: "437", suffix: "%", label: "Average ROI", ... },
+ *   ]}
+ * />
+ * ```
+ */
 declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, industryAverage, platformValue, comparisonSlot, ctaHeading, actions, ctaSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
 
 export { type ImpactStat, StatsImpactGrid, type StatsImpactGridProps };

package/dist/stats-impact-grid.d.ts

@@ -2,9 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
-import { A as ActionConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig } from './blocks-BYytGxbF.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-CKmytxru.js';
 import 'class-variance-authority/types';
 import './patternSvgs-c5ZNVoTT.js';
 
@@ -174,6 +174,24 @@ interface StatsImpactGridProps {
      */
     ctaClassName?: string;
 }
+/**
+ * StatsImpactGrid - A comprehensive stats section featuring a grid of impact metrics
+ * with icons, an industry comparison bar chart, and a call-to-action. Each stat card
+ * displays an icon, large value with prefix/suffix, label, and description. Includes
+ * a visual comparison between industry average and platform performance. Ideal for
+ * showcasing ROI, business impact, or platform benefits with social proof.
+ *
+ * @example
+ * ```tsx
+ * <StatsImpactGrid
+ *   badge="Proven Results"
+ *   heading="Transforming Businesses With Real Numbers"
+ *   stats={[
+ *     { id: "roi", value: "437", suffix: "%", label: "Average ROI", ... },
+ *   ]}
+ * />
+ * ```
+ */
 declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, industryAverage, platformValue, comparisonSlot, ctaHeading, actions, ctaSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
 
 export { type ImpactStat, StatsImpactGrid, type StatsImpactGridProps };