@opensite/ui 0.5.2 → 0.5.4

package/dist/stats-growth-timeline.js

@@ -954,8 +954,8 @@ function StatsGrowthTimeline({
   futureSlot,
   actions,
   actionsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -978,14 +978,7 @@ function StatsGrowthTimeline({
   const renderMilestoneIcon = useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
-      DynamicIcon,
-      {
-        name: milestone.icon,
-        size: 32,
-        className: "text-primary"
-      }
-    ) });
+    return /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: milestone.icon, size: 32, className: "text-primary" }) });
   }, []);
   const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
@@ -1020,18 +1013,35 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  }, [
+    milestonesSlot,
+    milestones,
+    timelineClassName,
+    milestoneClassName,
+    renderMilestoneIcon
+  ]);
   const currentStatsContent = useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName), children: [
-      currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
-      ] }, index)) })
-    ] });
-  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName),
+        children: [
+          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
+            stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+          ] }, index)) })
+        ]
+      }
+    );
+  }, [
+    currentStatsSlot,
+    currentStats,
+    currentStatsHeading,
+    currentStatsClassName
+  ]);
   const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -1052,13 +1062,21 @@ function StatsGrowthTimeline({
   }, [actionsSlot, actions]);
   const futureContent = useMemo(() => {
     if (futureSlot) return futureSlot;
-    if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
+    if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
+      return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
       actionsContent
     ] });
-  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  }, [
+    futureSlot,
+    futureHeading,
+    futureDescription,
+    futureClassName,
+    actionsContent,
+    actions
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
@@ -1072,8 +1090,26 @@ function StatsGrowthTimeline({
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-3xl text-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
         milestonesContent,
         currentStatsContent,

package/dist/stats-icon-cards.cjs

@@ -513,8 +513,8 @@ function StatsIconCards({
   description,
   stats,
   statsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -530,28 +530,46 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = React.useCallback((stat) => {
-    if (stat.iconSlot) return stat.iconSlot;
-    if (!stat.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-      DynamicIcon,
-      {
-        name: stat.icon,
-        size: 24,
-        className: "text-primary"
-      }
-    ) });
-  }, [statIconClassName]);
+  const renderIcon = React.useCallback(
+    (stat) => {
+      if (stat.iconSlot) return stat.iconSlot;
+      if (!stat.icon) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
+            statIconClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
+        }
+      );
+    },
+    [statIconClassName]
+  );
   const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
+        className: cn(
+          "relative overflow-hidden rounded-xl border bg-background p-6",
+          stat.className,
+          statCardClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "font-medium text-muted-foreground",
+                  statLabelClassName
+                ),
+                children: stat.label
+              }
+            ),
             stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
             stat.growth && /* @__PURE__ */ jsxRuntime.jsxs(
               "p",
@@ -580,7 +598,15 @@ function StatsIconCards({
       },
       index
     ));
-  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  }, [
+    statsSlot,
+    stats,
+    statCardClassName,
+    statLabelClassName,
+    statValueClassName,
+    statGrowthClassName,
+    renderIcon
+  ]);
   const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -593,10 +619,37 @@ function StatsIconCards({
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-3 text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
       ] })
     }
   );

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-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

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-a7gKHzHy.js';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-icon-cards.js

@@ -492,8 +492,8 @@ function StatsIconCards({
   description,
   stats,
   statsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -509,28 +509,46 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = useCallback((stat) => {
-    if (stat.iconSlot) return stat.iconSlot;
-    if (!stat.icon) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsx(
-      DynamicIcon,
-      {
-        name: stat.icon,
-        size: 24,
-        className: "text-primary"
-      }
-    ) });
-  }, [statIconClassName]);
+  const renderIcon = useCallback(
+    (stat) => {
+      if (stat.iconSlot) return stat.iconSlot;
+      if (!stat.icon) return null;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
+            statIconClassName
+          ),
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
+        }
+      );
+    },
+    [statIconClassName]
+  );
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
+        className: cn(
+          "relative overflow-hidden rounded-xl border bg-background p-6",
+          stat.className,
+          statCardClassName
+        ),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            stat.label && /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.label && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "font-medium text-muted-foreground",
+                  statLabelClassName
+                ),
+                children: stat.label
+              }
+            ),
             stat.value && /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
             stat.growth && /* @__PURE__ */ jsxs(
               "p",
@@ -559,7 +577,15 @@ function StatsIconCards({
       },
       index
     ));
-  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  }, [
+    statsSlot,
+    stats,
+    statCardClassName,
+    statLabelClassName,
+    statValueClassName,
+    statGrowthClassName,
+    renderIcon
+  ]);
   const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsx(
     Section,
@@ -572,10 +598,37 @@ function StatsIconCards({
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-3 text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
       ] })
     }
   );

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-a7gKHzHy.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.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';
 
 /**

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-a7gKHzHy.js';
-import { A as ActionConfig } from './blocks-k17uluAz.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';
 
 /**

package/dist/stats-milestone-sidebar.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-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-milestone-sidebar.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-a7gKHzHy.js';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-number-ticker.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-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-number-ticker.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-a7gKHzHy.js';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-primary-secondary.cjs

@@ -550,8 +550,8 @@ function StatsPrimarySecondary({
   primarySlot,
   secondaryStats,
   secondaryStatsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -568,30 +568,77 @@ function StatsPrimarySecondary({
   const renderPrimaryBadge = React.useCallback(() => {
     if (primaryBadgeSlot) return primaryBadgeSlot;
     if (!primaryBadge) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: cn("ml-2 gap-1", primaryBadgeClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
-      primaryBadge
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Badge,
+      {
+        variant: "secondary",
+        className: cn("ml-2 gap-1", primaryBadgeClassName),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
+          primaryBadge
+        ]
+      }
+    );
   }, [primaryBadgeSlot, primaryBadge, primaryBadgeClassName]);
   const primaryContent = React.useMemo(() => {
     if (primarySlot) return primarySlot;
     if (!primaryValue) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", primaryClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-6xl font-bold leading-10", primaryValueClassName), children: [
-        primaryValue,
-        renderPrimaryBadge()
-      ] }),
-      primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-muted-foreground sm:mt-3", primaryDescriptionClassName), children: primaryDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          className: cn(
+            "text-6xl font-bold leading-10",
+            primaryValueClassName
+          ),
+          children: [
+            primaryValue,
+            renderPrimaryBadge()
+          ]
+        }
+      ),
+      primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "mt-2 text-muted-foreground sm:mt-3",
+            primaryDescriptionClassName
+          ),
+          children: primaryDescription
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
     ] }) });
-  }, [primarySlot, primaryValue, primaryClassName, primaryValueClassName, primaryDescription, primaryDescriptionClassName, renderPrimaryBadge]);
+  }, [
+    primarySlot,
+    primaryValue,
+    primaryClassName,
+    primaryValueClassName,
+    primaryDescription,
+    primaryDescriptionClassName,
+    renderPrimaryBadge
+  ]);
   const secondaryStatsContent = React.useMemo(() => {
     if (secondaryStatsSlot) return secondaryStatsSlot;
     if (!secondaryStats || secondaryStats.length === 0) return null;
     return secondaryStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: stat.className, children: [
       stat.value && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "mt-1 text-muted-foreground",
+            secondaryLabelClassName
+          ),
+          children: stat.label
+        }
+      )
     ] }, index));
-  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  }, [
+    secondaryStatsSlot,
+    secondaryStats,
+    secondaryValueClassName,
+    secondaryLabelClassName
+  ]);
   const hasPrimaryContent = !!(primarySlot || primaryValue);
   const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -603,10 +650,29 @@ function StatsPrimarySecondary({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-6 lg:grid-cols-12 lg:gap-12", containerClassName), children: [
-        hasPrimaryContent && primaryContent,
-        hasSecondaryContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12", secondaryClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent }) })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-center gap-6 lg:grid-cols-12 lg:gap-12",
+            containerClassName
+          ),
+          children: [
+            hasPrimaryContent && primaryContent,
+            hasSecondaryContent && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border",
+                  hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12",
+                  secondaryClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }

package/dist/stats-primary-secondary.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-a7gKHzHy.cjs';
-import './blocks-Cohq4eio.cjs';
+import './blocks-DP3Vofl4.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/stats-primary-secondary.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-a7gKHzHy.js';
-import './blocks-k17uluAz.js';
+import './blocks-XLPGq8A5.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**