@opensite/ui 0.4.7 → 0.4.9

package/dist/stats-icon-cards.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-icon-cards.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -454,11 +454,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -485,13 +487,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -520,7 +529,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  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(
@@ -531,8 +540,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -541,9 +550,9 @@ function StatsIconCards({
         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: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            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",
               {
                 className: cn(
@@ -570,7 +579,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -581,11 +591,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), 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 }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (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,13 +2,14 @@ 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-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 /**
- * A stat item with icon, value, label, and growth indicator
+ * A stat item with icon, value, label, and growth indicator.
+ * Used to display metrics with visual growth trends.
  */
 interface StatIconItem {
     /**
@@ -42,7 +43,8 @@ interface StatIconItem {
     className?: string;
 }
 /**
- * Props for the StatsIconCards component
+ * Props for the StatsIconCards component.
+ * A modern stats grid featuring bordered cards with icons, values, and growth indicators.
  */
 interface StatsIconCardsProps {
     /**

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

@@ -2,13 +2,14 @@ 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-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 /**
- * A stat item with icon, value, label, and growth indicator
+ * A stat item with icon, value, label, and growth indicator.
+ * Used to display metrics with visual growth trends.
  */
 interface StatIconItem {
     /**
@@ -42,7 +43,8 @@ interface StatIconItem {
     className?: string;
 }
 /**
- * Props for the StatsIconCards component
+ * Props for the StatsIconCards component.
+ * A modern stats grid featuring bordered cards with icons, values, and growth indicators.
  */
 interface StatsIconCardsProps {
     /**

package/dist/stats-icon-cards.js

@@ -1,11 +1,11 @@
 "use client";
+import * as React from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React from 'react';
-import React__default from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/stats/stats-icon-cards.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -433,11 +433,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -464,13 +466,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -499,7 +508,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  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(
@@ -510,8 +519,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -520,9 +529,9 @@ function StatsIconCards({
         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: [
-            /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxs(
+            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",
               {
                 className: cn(
@@ -549,7 +558,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -560,11 +570,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), 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 }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (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.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/stats/stats-impact-grid.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -929,11 +929,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -960,13 +962,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -980,12 +989,16 @@ function StatsImpactGrid({
   description,
   stats,
   statsSlot,
-  comparisonHeading = "How Does This Compare?",
-  comparisonDescription = "Our platform delivers results that are 4x better than industry averages across all key performance indicators.",
-  industryAverage = "24%",
-  platformValue = "89%",
+  comparisonHeading,
+  comparisonDescription,
+  baselineValue,
+  targetValue,
+  baselineLabel,
+  targetLabel,
+  baselinePercent,
+  targetPercent,
   comparisonSlot,
-  ctaHeading = "Ready to See These Results in Your Business?",
+  ctaHeading,
   actions,
   ctaSlot,
   background = "white",
@@ -1004,12 +1017,12 @@ function StatsImpactGrid({
   comparisonClassName,
   ctaClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStatIcon = (stat) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderStatIcon = React.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1020,45 +1033,88 @@ function StatsImpactGrid({
         className: stat.iconColor || "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, []);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3", statsGridClassName), children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("overflow-hidden border p-0", stat.className, statCardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
-      renderStatIcon(stat),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
-        stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
-        stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
-    ] }) }, stat.id)) });
-  };
-  const renderComparison = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          statsGridClassName
+        ),
+        children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
+          Card,
+          {
+            className: cn(
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
+            ] })
+          },
+          stat.id
+        ))
+      }
+    );
+  }, [statsSlot, stats, statsGridClassName, statCardClassName, renderStatIcon]);
+  const hasComparisonContent = React.useMemo(() => {
+    return !!(comparisonHeading || comparisonDescription || baselineValue || targetValue || baselineLabel || targetLabel);
+  }, [
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel
+  ]);
+  const comparisonContent = React.useMemo(() => {
     if (comparisonSlot) return comparisonSlot;
-    if (!comparisonHeading && !comparisonDescription && !industryAverage && !platformValue) return null;
+    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 bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2 md:gap-16", 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 })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        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 w-[24%] bg-muted-foreground" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Industry" })
+            /* @__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 w-[89%] bg-primary" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Our Platform" })
+            /* @__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 flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "INDUSTRY AVERAGE" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: industryAverage })
+      (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
+        baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm uppercase text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+        baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
@@ -1066,40 +1122,65 @@ function StatsImpactGrid({
             className: "text-primary"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-primary", children: "OUR PLATFORM" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: platformValue })
+        targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium uppercase text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
         ] })
       ] })
     ] }) });
-  };
-  const renderActions = () => {
+  }, [
+    comparisonSlot,
+    hasComparisonContent,
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel,
+    baselinePercent,
+    targetPercent,
+    comparisonClassName
+  ]);
+  const actionsContent = React.useMemo(() => {
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant || "default",
-        size: "lg",
-        asButton: true,
-        className: index === 0 ? "inline-flex items-center justify-center gap-2" : void 0,
-        children: [
-          action.label,
-          index === 0 && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      },
-      index
-    )) });
-  };
-  const renderCta = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          size: "lg",
+          asButton: true,
+          className: cn(
+            "inline-flex items-center justify-center gap-2",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        action.href || index
+      );
+    }) });
+  }, [actions]);
+  const ctaContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", ctaClassName), children: [
       ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: ctaHeading })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1110,16 +1191,34 @@ function StatsImpactGrid({
       patternClassName,
       className: cn("relative overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 to-background" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-background" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-            renderBadge(),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", 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-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          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-5xl",
+                  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-3xl text-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
           ] }),
-          renderStats(),
-          renderComparison(),
-          renderCta()
+          statsContent,
+          comparisonContent,
+          ctaContent
         ] })
       ]
     }