@opensite/ui 1.5.9 → 1.6.0

package/dist/stats-card-group.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -149,6 +149,6 @@ interface StatsCardGroupProps {
  * />
  * ```
  */
-declare function StatsCardGroup({ stats, statsSlot, avatars, avatarsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, cardClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, avatarsClassName, optixFlowConfig, }: StatsCardGroupProps): react_jsx_runtime.JSX.Element;
+declare function StatsCardGroup({ stats, statsSlot, avatars, avatarsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, cardClassName, statsClassName, statValueClassName, statLabelClassName, statIconClassName, avatarsClassName, optixFlowConfig, }: StatsCardGroupProps): react_jsx_runtime.JSX.Element;
 
 export { type CardGroupStat, StatsCardGroup, type StatsCardGroupProps };

package/dist/stats-card-group.js

@@ -526,12 +526,12 @@ function StatsCardGroup({
   avatars,
   avatarsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   cardClassName,
   statsClassName,
   statValueClassName,
@@ -576,14 +576,20 @@ function StatsCardGroup({
           },
           avatarIndex
         )),
-        avatars.length > 4 && /* @__PURE__ */ jsxs("div", { className: cn(
-          "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background)
-        ), children: [
-          "+",
-          avatars.length - 4
-        ] })
+        avatars.length > 4 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
+              getNestedCardBg(background, "muted"),
+              getNestedCardTextColor(background)
+            ),
+            children: [
+              "+",
+              avatars.length - 4
+            ]
+          }
+        )
       ] });
     },
     [avatarsSlot, avatars, background, avatarsClassName, optixFlowConfig]
@@ -634,12 +640,19 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn(
-        "rounded-xl border p-8",
-        getNestedCardBg(background, "card"),
-        getNestedCardTextColor(background),
-        cardClassName
-      ), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-xl border p-8",
+            getNestedCardBg(background, "card"),
+            getNestedCardTextColor(background),
+            cardClassName
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent })
+        }
+      ) })
     }
   );
 }

package/dist/stats-circular-progress.cjs

@@ -592,12 +592,12 @@ function StatsCircularProgress({
   categoriesSlot,
   defaultCategory,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -730,7 +730,8 @@ function StatsCircularProgress({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/stats-circular-progress.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -175,6 +175,6 @@ interface StatsCircularProgressProps {
  * />
  * ```
  */
-declare function StatsCircularProgress({ badge, badgeSlot, heading, description, categories, categoriesSlot, defaultCategory, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName, }: StatsCircularProgressProps): react_jsx_runtime.JSX.Element;
+declare function StatsCircularProgress({ badge, badgeSlot, heading, description, categories, categoriesSlot, defaultCategory, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName, }: StatsCircularProgressProps): react_jsx_runtime.JSX.Element;
 
 export { type CircularStat, type StatCategory, StatsCircularProgress, type StatsCircularProgressProps };

package/dist/stats-circular-progress.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -175,6 +175,6 @@ interface StatsCircularProgressProps {
  * />
  * ```
  */
-declare function StatsCircularProgress({ badge, badgeSlot, heading, description, categories, categoriesSlot, defaultCategory, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName, }: StatsCircularProgressProps): react_jsx_runtime.JSX.Element;
+declare function StatsCircularProgress({ badge, badgeSlot, heading, description, categories, categoriesSlot, defaultCategory, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName, }: StatsCircularProgressProps): react_jsx_runtime.JSX.Element;
 
 export { type CircularStat, type StatCategory, StatsCircularProgress, type StatsCircularProgressProps };

package/dist/stats-circular-progress.js

@@ -570,12 +570,12 @@ function StatsCircularProgress({
   categoriesSlot,
   defaultCategory,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -708,7 +708,8 @@ function StatsCircularProgress({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(

package/dist/stats-growth-timeline.cjs

@@ -1008,12 +1008,12 @@ function StatsGrowthTimeline({
   actions,
   actionsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -1049,11 +1049,17 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              milestone.year && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-                "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background)
-              ), children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
+                    getNestedCardBg(background, "muted"),
+                    getNestedCardTextColor(background)
+                  ),
+                  children: milestone.year
+                }
+              ),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
               milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
@@ -1151,7 +1157,8 @@ function StatsGrowthTimeline({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -204,6 +204,6 @@ interface StatsGrowthTimelineProps {
  * />
  * ```
  */
-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;
+declare function StatsGrowthTimeline({ badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, 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

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -204,6 +204,6 @@ interface StatsGrowthTimelineProps {
  * />
  * ```
  */
-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;
+declare function StatsGrowthTimeline({ badge, badgeSlot, heading, description, milestones, milestonesSlot, currentStats, currentStatsSlot, currentStatsHeading, futureHeading, futureDescription, futureSlot, actions, actionsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, 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

@@ -987,12 +987,12 @@ function StatsGrowthTimeline({
   actions,
   actionsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -1028,11 +1028,17 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              milestone.year && /* @__PURE__ */ jsx("div", { className: cn(
-                "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background)
-              ), children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
+                    getNestedCardBg(background, "muted"),
+                    getNestedCardTextColor(background)
+                  ),
+                  children: milestone.year
+                }
+              ),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
               milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
@@ -1130,7 +1136,8 @@ function StatsGrowthTimeline({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(

package/dist/stats-icon-cards.cjs

@@ -516,12 +516,12 @@ function StatsIconCards({
   stats,
   statsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -619,7 +619,8 @@ function StatsIconCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",

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

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -146,6 +146,6 @@ interface StatsIconCardsProps {
  * />
  * ```
  */
-declare function StatsIconCards({ heading, description, stats, statsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, contentClassName, headingClassName, descriptionClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statGrowthClassName, statIconClassName, }: StatsIconCardsProps): react_jsx_runtime.JSX.Element;
+declare function StatsIconCards({ heading, description, stats, statsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statGrowthClassName, statIconClassName, }: StatsIconCardsProps): react_jsx_runtime.JSX.Element;
 
 export { type StatIconItem, StatsIconCards, type StatsIconCardsProps };

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

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -146,6 +146,6 @@ interface StatsIconCardsProps {
  * />
  * ```
  */
-declare function StatsIconCards({ heading, description, stats, statsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, contentClassName, headingClassName, descriptionClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statGrowthClassName, statIconClassName, }: StatsIconCardsProps): react_jsx_runtime.JSX.Element;
+declare function StatsIconCards({ heading, description, stats, statsSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statGrowthClassName, statIconClassName, }: StatsIconCardsProps): react_jsx_runtime.JSX.Element;
 
 export { type StatIconItem, StatsIconCards, type StatsIconCardsProps };

package/dist/stats-icon-cards.js

@@ -495,12 +495,12 @@ function StatsIconCards({
   stats,
   statsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -598,7 +598,8 @@ function StatsIconCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",

package/dist/stats-impact-grid.cjs

@@ -1035,12 +1035,12 @@ function StatsImpactGrid({
   actions,
   ctaSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -1115,50 +1115,56 @@ function StatsImpactGrid({
     if (comparisonSlot) return comparisonSlot;
     if (!hasComparisonContent) return null;
     const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-      "mb-16 rounded-xl p-8",
-      getNestedCardBg(background, "muted"),
-      getNestedCardTextColor(background),
-      comparisonClassName
-    ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
-        comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
-        hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full bg-muted-foreground",
-                style: { width: `${baselinePercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-16 rounded-xl p-8",
+          getNestedCardBg(background, "muted"),
+          getNestedCardTextColor(background),
+          comparisonClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
+            comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
+            hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-full bg-muted-foreground",
+                    style: { width: `${baselinePercent}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-full bg-primary",
+                    style: { width: `${targetPercent}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full bg-primary",
-                style: { width: `${targetPercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
-          ] })
-        ] })
-      ] }),
-      (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
-        ] }),
-        baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border" }),
-        targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+          (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
+            ] }),
+            baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border" }),
+            targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+            ] })
+          ] }) })
         ] })
-      ] }) })
-    ] }) });
+      }
+    );
   }, [
     comparisonSlot,
     hasComparisonContent,
@@ -1222,7 +1228,8 @@ function StatsImpactGrid({
       patternOpacity,
       patternClassName,
       className: cn("relative overflow-hidden", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -217,6 +217,6 @@ interface StatsImpactGridProps {
  * />
  * ```
  */
-declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, baselineValue, targetValue, baselineLabel, targetLabel, baselinePercent, targetPercent, 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;
+declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, baselineValue, targetValue, baselineLabel, targetLabel, baselinePercent, targetPercent, comparisonSlot, ctaHeading, actions, ctaSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, 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

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig } from './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -217,6 +217,6 @@ interface StatsImpactGridProps {
  * />
  * ```
  */
-declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, baselineValue, targetValue, baselineLabel, targetLabel, baselinePercent, targetPercent, 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;
+declare function StatsImpactGrid({ badge, badgeSlot, heading, description, stats, statsSlot, comparisonHeading, comparisonDescription, baselineValue, targetValue, baselineLabel, targetLabel, baselinePercent, targetPercent, comparisonSlot, ctaHeading, actions, ctaSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, comparisonClassName, ctaClassName, }: StatsImpactGridProps): react_jsx_runtime.JSX.Element;
 
 export { type ImpactStat, StatsImpactGrid, type StatsImpactGridProps };