@opensite/ui 1.5.9 → 1.6.0

package/dist/stats-impact-grid.js

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

@@ -396,12 +396,12 @@ function StatsMilestoneSidebar({
   milestones,
   milestonesSlot,
   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",
   sidebarClassName,
   headingClassName,
   descriptionClassName,
@@ -436,7 +436,13 @@ function StatsMilestoneSidebar({
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  }, [
+    sidebarSlot,
+    heading,
+    description,
+    headingClassName,
+    descriptionClassName
+  ]);
   const milestonesContent = React.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -484,7 +490,15 @@ function StatsMilestoneSidebar({
       },
       index
     )) });
-  }, [milestonesSlot, milestones, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName]);
+  }, [
+    milestonesSlot,
+    milestones,
+    milestonesClassName,
+    milestoneItemClassName,
+    milestoneYearClassName,
+    milestoneTitleClassName,
+    milestoneDescriptionClassName
+  ]);
   const hasSidebarContent = !!(sidebarSlot || heading || description);
   const hasMilestonesContent = !!(milestonesSlot || milestones && milestones.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -496,9 +510,16 @@ function StatsMilestoneSidebar({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
         hasSidebarContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
-        hasMilestonesContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
+        hasMilestonesContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12",
+            children: milestonesContent
+          }
+        )
       ] }) })
     }
   );

package/dist/stats-milestone-sidebar.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';
 
 /**
@@ -132,6 +132,6 @@ interface StatsMilestoneSidebarProps {
  * />
  * ```
  */
-declare function StatsMilestoneSidebar({ heading, description, sidebarSlot, milestones, milestonesSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, sidebarClassName, headingClassName, descriptionClassName, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName, }: StatsMilestoneSidebarProps): react_jsx_runtime.JSX.Element;
+declare function StatsMilestoneSidebar({ heading, description, sidebarSlot, milestones, milestonesSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, sidebarClassName, headingClassName, descriptionClassName, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName, }: StatsMilestoneSidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type MilestoneItem, StatsMilestoneSidebar, type StatsMilestoneSidebarProps };

package/dist/stats-milestone-sidebar.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';
 
 /**
@@ -132,6 +132,6 @@ interface StatsMilestoneSidebarProps {
  * />
  * ```
  */
-declare function StatsMilestoneSidebar({ heading, description, sidebarSlot, milestones, milestonesSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, sidebarClassName, headingClassName, descriptionClassName, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName, }: StatsMilestoneSidebarProps): react_jsx_runtime.JSX.Element;
+declare function StatsMilestoneSidebar({ heading, description, sidebarSlot, milestones, milestonesSlot, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, sidebarClassName, headingClassName, descriptionClassName, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName, }: StatsMilestoneSidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type MilestoneItem, StatsMilestoneSidebar, type StatsMilestoneSidebarProps };

package/dist/stats-milestone-sidebar.js

@@ -390,12 +390,12 @@ function StatsMilestoneSidebar({
   milestones,
   milestonesSlot,
   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",
   sidebarClassName,
   headingClassName,
   descriptionClassName,
@@ -430,7 +430,13 @@ function StatsMilestoneSidebar({
         }
       ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  }, [
+    sidebarSlot,
+    heading,
+    description,
+    headingClassName,
+    descriptionClassName
+  ]);
   const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -478,7 +484,15 @@ function StatsMilestoneSidebar({
       },
       index
     )) });
-  }, [milestonesSlot, milestones, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName]);
+  }, [
+    milestonesSlot,
+    milestones,
+    milestonesClassName,
+    milestoneItemClassName,
+    milestoneYearClassName,
+    milestoneTitleClassName,
+    milestoneDescriptionClassName
+  ]);
   const hasSidebarContent = !!(sidebarSlot || heading || description);
   const hasMilestonesContent = !!(milestonesSlot || milestones && milestones.length > 0);
   return /* @__PURE__ */ jsx(
@@ -490,9 +504,16 @@ function StatsMilestoneSidebar({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
         hasSidebarContent && /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
-        hasMilestonesContent && /* @__PURE__ */ jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
+        hasMilestonesContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12",
+            children: milestonesContent
+          }
+        )
       ] }) })
     }
   );

package/dist/stats-number-ticker.cjs

@@ -515,22 +515,51 @@ function TickerStatItem({
   descriptionClassName
 }) {
   const decimals = stat.value % 1 !== 0 ? 1 : 0;
-  const displayValue = useNumberTicker(stat.value, duration, isVisible, decimals);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-    "rounded-xl border p-6 transition-shadow hover:shadow-md",
-    getNestedCardBg(background, "card"),
-    getNestedCardTextColor(background),
-    stat.className,
-    cardClassName
-  ), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-2 text-4xl font-bold tabular-nums md:text-5xl", valueClassName), children: [
-      stat.prefix,
-      displayValue,
-      stat.suffix
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 text-lg font-semibold", labelClassName), children: stat.label }),
-    stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", descriptionClassName), children: stat.description }))
-  ] });
+  const displayValue = useNumberTicker(
+    stat.value,
+    duration,
+    isVisible,
+    decimals
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border p-6 transition-shadow hover:shadow-md",
+        getNestedCardBg(background, "card"),
+        getNestedCardTextColor(background),
+        stat.className,
+        cardClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-2 text-4xl font-bold tabular-nums md:text-5xl",
+              valueClassName
+            ),
+            children: [
+              stat.prefix,
+              displayValue,
+              stat.suffix
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 text-lg font-semibold", labelClassName), children: stat.label }),
+        stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "text-sm text-muted-foreground",
+              descriptionClassName
+            ),
+            children: stat.description
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", descriptionClassName), children: stat.description }))
+      ]
+    }
+  );
 }
 function StatsNumberTicker({
   badge,
@@ -541,12 +570,12 @@ function StatsNumberTicker({
   statsSlot,
   animationDuration = 2500,
   background = "white",
-  spacing = "lg",
   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,
@@ -582,21 +611,41 @@ function StatsNumberTicker({
   const statsContent = React3.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      TickerStatItem,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        stat,
-        duration: animationDuration,
-        isVisible,
-        background,
-        cardClassName: statCardClassName,
-        valueClassName: statValueClassName,
-        labelClassName: statLabelClassName,
-        descriptionClassName: statDescriptionClassName
-      },
-      index
-    )) });
-  }, [statsSlot, stats, background, animationDuration, isVisible, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName]);
+        className: cn(
+          "grid gap-6 sm:grid-cols-2 lg:grid-cols-4",
+          statsGridClassName
+        ),
+        children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          TickerStatItem,
+          {
+            stat,
+            duration: animationDuration,
+            isVisible,
+            background,
+            cardClassName: statCardClassName,
+            valueClassName: statValueClassName,
+            labelClassName: statLabelClassName,
+            descriptionClassName: statDescriptionClassName
+          },
+          index
+        ))
+      }
+    );
+  }, [
+    statsSlot,
+    stats,
+    background,
+    animationDuration,
+    isVisible,
+    statsGridClassName,
+    statCardClassName,
+    statValueClassName,
+    statLabelClassName,
+    statDescriptionClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -607,11 +656,30 @@ function StatsNumberTicker({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
         statsContent
       ] })

package/dist/stats-number-ticker.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';
 
 /**
@@ -154,6 +154,6 @@ interface StatsNumberTickerProps {
  * />
  * ```
  */
-declare function StatsNumberTicker({ badge, badgeSlot, heading, description, stats, statsSlot, animationDuration, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName, }: StatsNumberTickerProps): react_jsx_runtime.JSX.Element;
+declare function StatsNumberTicker({ badge, badgeSlot, heading, description, stats, statsSlot, animationDuration, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName, }: StatsNumberTickerProps): react_jsx_runtime.JSX.Element;
 
 export { StatsNumberTicker, type StatsNumberTickerProps, type TickerStat };

package/dist/stats-number-ticker.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';
 
 /**
@@ -154,6 +154,6 @@ interface StatsNumberTickerProps {
  * />
  * ```
  */
-declare function StatsNumberTicker({ badge, badgeSlot, heading, description, stats, statsSlot, animationDuration, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName, }: StatsNumberTickerProps): react_jsx_runtime.JSX.Element;
+declare function StatsNumberTicker({ badge, badgeSlot, heading, description, stats, statsSlot, animationDuration, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName, }: StatsNumberTickerProps): react_jsx_runtime.JSX.Element;
 
 export { StatsNumberTicker, type StatsNumberTickerProps, type TickerStat };