@opensite/ui 1.5.9 → 1.6.1

package/dist/registry.cjs

@@ -22749,7 +22749,10 @@ var BrandAttribution = ({
   }
   const { prefix = "", anchorText, href, suffix = "" } = options[optionIndex];
   const ContainerEl = variant;
-  const trackedHref = buildTrackedHref(href);
+  const [trackedHref, setTrackedHref] = React52__namespace.useState(href);
+  React52__namespace.useEffect(() => {
+    setTrackedHref(buildTrackedHref(href));
+  }, [href]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ContainerEl, { className: containerClassName, children: [
     prefix,
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -93997,12 +94000,12 @@ function StatsSimpleGrid({
   actions,
   actionsSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   actionsClassName,
@@ -94082,49 +94085,41 @@ function StatsSimpleGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-start text-left",
-            containerClassName
-          ),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col justify-start gap-2 sm:flex-row",
-                    actionsClassName
-                  ),
-                  children: actionsContent
-                }
-              )
-            ] }),
-            hasStatsContent && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16",
-                  statsClassName
-                ),
-                children: statsContent
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start text-left"), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-120 lg:max-w-148 lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col justify-start gap-2 sm:flex-row",
+                actionsClassName
+              ),
+              children: actionsContent
+            }
+          )
+        ] }),
+        hasStatsContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
+      ] })
     }
   );
 }
@@ -94134,12 +94129,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,
@@ -94237,7 +94232,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",
@@ -94283,12 +94279,12 @@ function StatsTimelineTabs({
   tabsSlot,
   defaultPeriod,
   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,
@@ -94415,7 +94411,8 @@ function StatsTimelineTabs({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6", children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -94459,12 +94456,12 @@ function StatsPrimarySecondary({
   secondaryStats,
   secondaryStatsSlot,
   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",
   primaryClassName,
   primaryValueClassName,
   primaryBadgeClassName,
@@ -94491,7 +94488,7 @@ function StatsPrimarySecondary({
   const primaryContent = React52.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: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4 mb-8", primaryClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "p",
         {
@@ -94558,29 +94555,21 @@ 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 })
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", 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 })
+          }
+        )
+      ] })
     }
   );
 }
@@ -94600,12 +94589,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,
@@ -94641,11 +94630,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: [
@@ -94743,7 +94738,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(
@@ -94794,12 +94790,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,
@@ -94874,50 +94870,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,
@@ -94981,7 +94983,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(
@@ -95075,12 +95078,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,
@@ -95213,7 +95216,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(
@@ -95254,12 +95258,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,
@@ -95304,14 +95308,20 @@ function StatsCardGroup({
           },
           avatarIndex
         )),
-        avatars.length > 4 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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]
@@ -95362,12 +95372,19 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        "rounded-xl border p-8",
-        getNestedCardBg(background, "card"),
-        getNestedCardTextColor(background),
-        cardClassName
-      ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-xl border p-8",
+            getNestedCardBg(background, "card"),
+            getNestedCardTextColor(background),
+            cardClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent })
+        }
+      ) })
     }
   );
 }
@@ -95447,12 +95464,12 @@ function StatsAnimatedCounter({
   statsSlot,
   animationDuration = 2e3,
   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,
@@ -95512,47 +95529,41 @@ function StatsAnimatedCounter({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-5xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-              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 }))
-            ] }),
-            (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
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          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 }))
+        ] }),
+        (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
+          }
+        )
+      ] })
     }
   );
 }
@@ -95602,22 +95613,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,
@@ -95628,12 +95668,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,
@@ -95669,21 +95709,41 @@ function StatsNumberTicker({
   const statsContent = React52.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,
@@ -95694,11 +95754,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
       ] })
@@ -95712,12 +95791,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,
@@ -95752,7 +95831,13 @@ function StatsMilestoneSidebar({
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  }, [
+    sidebarSlot,
+    heading,
+    description,
+    headingClassName,
+    descriptionClassName
+  ]);
   const milestonesContent = React52.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -95800,7 +95885,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(
@@ -95812,9 +95905,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
+          }
+        )
       ] }) })
     }
   );
@@ -95828,12 +95928,12 @@ function StatsBarComparison({
   comparisonsSlot,
   animate = true,
   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,
@@ -95943,39 +96043,33 @@ function StatsBarComparison({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-4xl", containerClassName),
-          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 }))
-            ] }),
-            (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
-          ]
-        }
-      )
+      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 }))
+        ] }),
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
+      ] })
     }
   );
 }