@opensite/ui 1.5.8 → 1.6.0

package/dist/registry.js

@@ -3592,7 +3592,15 @@ function AboutNetworkSpotlight({
     if (highlightsSlot) return highlightsSlot;
     if (!highlights || highlights.length === 0) return null;
     return /* @__PURE__ */ jsx("ul", { className: cn("mt-6 space-y-3", highlightsClassName), children: highlights.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 text-background/80", children: [
-      /* @__PURE__ */ jsx("span", { className: cn("mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary/20", getAccentColor(background)), children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 }) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "mt-1 flex size-fit p-2 items-center justify-center rounded-full bg-primary text-primary-foreground"
+          ),
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 })
+        }
+      ),
       /* @__PURE__ */ jsx("span", { children: item })
     ] }, index)) });
   }, [highlightsSlot, highlights, highlightsClassName]);
@@ -3608,11 +3616,20 @@ function AboutNetworkSpotlight({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, asButton: true, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          className: actionClassName,
+          asButton: true,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   }, [actionsSlot, actions]);
   const spotlightCardContent = useMemo(() => {
@@ -3623,14 +3640,21 @@ function AboutNetworkSpotlight({
       {
         className: cn(
           "rounded-2xl border bg-foreground/80 p-5 backdrop-blur-sm",
-          getBorderColor(background, "accent"),
           spotlightCardClassName
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full text-primary-foreground", getAccentColor(background)), children: spotlightCard.icon }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex size-fit p-2 items-center justify-center rounded-full bg-primary text-primary-foreground"
+                ),
+                children: spotlightCard.icon
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { children: [
-              typeof spotlightCard.label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-bold uppercase tracking-[0.2em]", getAccentColor(background)), children: spotlightCard.label }) : spotlightCard.label,
+              typeof spotlightCard.label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-bold uppercase tracking-[0.2em]"), children: spotlightCard.label }) : spotlightCard.label,
               typeof spotlightCard.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-background", children: spotlightCard.title }) : spotlightCard.title
             ] })
           ] }),
@@ -3690,7 +3714,6 @@ function AboutNetworkSpotlight({
                     {
                       className: cn(
                         "text-sm font-semibold uppercase tracking-[0.2em]",
-                        getAccentColor(background),
                         eyebrowClassName
                       ),
                       children: eyebrow
@@ -22686,7 +22709,10 @@ var BrandAttribution = ({
   }
   const { prefix = "", anchorText, href, suffix = "" } = options[optionIndex];
   const ContainerEl = variant;
-  const trackedHref = buildTrackedHref(href);
+  const [trackedHref, setTrackedHref] = React52.useState(href);
+  React52.useEffect(() => {
+    setTrackedHref(buildTrackedHref(href));
+  }, [href]);
   return /* @__PURE__ */ jsxs(ContainerEl, { className: containerClassName, children: [
     prefix,
     /* @__PURE__ */ jsx(
@@ -57484,8 +57510,8 @@ function HeroEventRegistration({
   locationSublabel,
   locationSlot,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6  sm:px-0 md:px-0 lg:px-0",
+  spacing = "py-20 md:py-32",
   pattern,
   patternOpacity,
   className,
@@ -57537,39 +57563,25 @@ function HeroEventRegistration({
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 gap-4 pt-4", statsClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-      /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: stat.label })
+      /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
     ] }, index)) });
   }, [statsSlot, stats, statsClassName]);
   const renderLocation = useMemo(() => {
     if (locationSlot) return locationSlot;
     if (!locationLabel && !locationSublabel) return null;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card p-4 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
-            "flex h-12 w-12 items-center justify-center rounded-full",
-            `${getAccentColor(background)}/10`
+            "flex h-12 w-12 items-center justify-center rounded-full text-card-foreground"
           ),
-          children: /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: "lucide/map-pin",
-              size: 24,
-              className: getAccentColor(background)
-            }
-          )
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/map-pin", size: 24 })
         }
       ),
       /* @__PURE__ */ jsxs("div", { children: [
         locationLabel && (typeof locationLabel === "string" ? /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: locationLabel }) : locationLabel),
-        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("text-sm", getTextColor(background, "muted")),
-            children: locationSublabel
-          }
-        ) : locationSublabel)
+        locationSublabel && (typeof locationSublabel === "string" ? /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: locationSublabel }) : locationSublabel)
       ] })
     ] }) });
   }, [locationSlot, locationLabel, locationSublabel]);
@@ -57620,17 +57632,7 @@ function HeroEventRegistration({
               children: heading
             }
           )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions,
           renderStats
         ] }),
@@ -93958,12 +93960,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,
@@ -94043,49 +94045,41 @@ function StatsSimpleGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col items-start text-left",
-            containerClassName
-          ),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ jsx("div", { className: headingClassName, children: heading })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col justify-start gap-2 sm:flex-row",
-                    actionsClassName
-                  ),
-                  children: actionsContent
-                }
-              )
-            ] }),
-            hasStatsContent && /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex flex-col items-start text-left"), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ 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__ */ jsx("div", { className: headingClassName, children: heading })),
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex flex-col justify-start gap-2 sm:flex-row",
+                actionsClassName
+              ),
+              children: actionsContent
+            }
+          )
+        ] }),
+        hasStatsContent && /* @__PURE__ */ 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
+          }
+        )
+      ] })
     }
   );
 }
@@ -94095,12 +94089,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,
@@ -94198,7 +94192,8 @@ function StatsIconCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
@@ -94244,12 +94239,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,
@@ -94376,7 +94371,8 @@ function StatsTimelineTabs({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -94420,12 +94416,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,
@@ -94519,29 +94515,21 @@ function StatsPrimarySecondary({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "grid items-center gap-6 lg:grid-cols-12 lg:gap-12",
-            containerClassName
-          ),
-          children: [
-            hasPrimaryContent && primaryContent,
-            hasSecondaryContent && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "relative", children: [
+        hasPrimaryContent && primaryContent,
+        hasSecondaryContent && /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
+          }
+        )
+      ] })
     }
   );
 }
@@ -94561,12 +94549,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,
@@ -94602,11 +94590,17 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              milestone.year && /* @__PURE__ */ jsx("div", { className: cn(
-                "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
-                getNestedCardBg(background, "muted"),
-                getNestedCardTextColor(background)
-              ), children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full text-sm font-semibold",
+                    getNestedCardBg(background, "muted"),
+                    getNestedCardTextColor(background)
+                  ),
+                  children: milestone.year
+                }
+              ),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
               milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
@@ -94704,7 +94698,8 @@ function StatsGrowthTimeline({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -94755,12 +94750,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,
@@ -94835,50 +94830,56 @@ function StatsImpactGrid({
     if (comparisonSlot) return comparisonSlot;
     if (!hasComparisonContent) return null;
     const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
-    return /* @__PURE__ */ jsx("div", { className: cn(
-      "mb-16 rounded-xl p-8",
-      getNestedCardBg(background, "muted"),
-      getNestedCardTextColor(background),
-      comparisonClassName
-    ), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: comparisonHeading })),
-        comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: comparisonDescription })),
-        hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-full bg-muted-foreground",
-                style: { width: `${baselinePercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mb-16 rounded-xl p-8",
+          getNestedCardBg(background, "muted"),
+          getNestedCardTextColor(background),
+          comparisonClassName
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: comparisonHeading })),
+            comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsx("div", { className: "mb-6", children: comparisonDescription })),
+            hasProgressBars && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full bg-muted-foreground",
+                    style: { width: `${baselinePercent}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-full bg-primary",
+                    style: { width: `${targetPercent}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-full bg-primary",
-                style: { width: `${targetPercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
-          ] })
-        ] })
-      ] }),
-      (baselineValue || targetValue) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        baselineValue && /* @__PURE__ */ jsxs("div", { children: [
-          baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
-          /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
-        ] }),
-        baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
-        targetValue && /* @__PURE__ */ jsxs("div", { children: [
-          targetLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
-          /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+          (baselineValue || targetValue) && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            baselineValue && /* @__PURE__ */ jsxs("div", { children: [
+              baselineLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold", children: baselineValue })
+            ] }),
+            baselineValue && targetValue && /* @__PURE__ */ jsx("div", { className: "h-px bg-border" }),
+            targetValue && /* @__PURE__ */ jsxs("div", { children: [
+              targetLabel && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+            ] })
+          ] }) })
         ] })
-      ] }) })
-    ] }) });
+      }
+    );
   }, [
     comparisonSlot,
     hasComparisonContent,
@@ -94942,7 +94943,8 @@ function StatsImpactGrid({
       patternOpacity,
       patternClassName,
       className: cn("relative overflow-hidden", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -95036,12 +95038,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,
@@ -95174,7 +95176,8 @@ function StatsCircularProgress({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -95215,12 +95218,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,
@@ -95265,14 +95268,20 @@ function StatsCardGroup({
           },
           avatarIndex
         )),
-        avatars.length > 4 && /* @__PURE__ */ jsxs("div", { className: cn(
-          "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background)
-        ), children: [
-          "+",
-          avatars.length - 4
-        ] })
+        avatars.length > 4 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background text-xs font-medium",
+              getNestedCardBg(background, "muted"),
+              getNestedCardTextColor(background)
+            ),
+            children: [
+              "+",
+              avatars.length - 4
+            ]
+          }
+        )
       ] });
     },
     [avatarsSlot, avatars, background, avatarsClassName, optixFlowConfig]
@@ -95323,12 +95332,19 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn(
-        "rounded-xl border p-8",
-        getNestedCardBg(background, "card"),
-        getNestedCardTextColor(background),
-        cardClassName
-      ), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-xl border p-8",
+            getNestedCardBg(background, "card"),
+            getNestedCardTextColor(background),
+            cardClassName
+          ),
+          children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent })
+        }
+      ) })
     }
   );
 }
@@ -95408,12 +95424,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,
@@ -95473,47 +95489,41 @@ function StatsAnimatedCounter({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-5xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-4 text-3xl font-bold md:text-4xl",
-                    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-2xl text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", 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
-              }
-            )
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                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-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", 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
+          }
+        )
+      ] })
     }
   );
 }
@@ -95563,22 +95573,51 @@ function TickerStatItem({
   descriptionClassName
 }) {
   const decimals = stat.value % 1 !== 0 ? 1 : 0;
-  const displayValue = useNumberTicker(stat.value, duration, isVisible, decimals);
-  return /* @__PURE__ */ jsxs("div", { className: cn(
-    "rounded-xl border p-6 transition-shadow hover:shadow-md",
-    getNestedCardBg(background, "card"),
-    getNestedCardTextColor(background),
-    stat.className,
-    cardClassName
-  ), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("mb-2 text-4xl font-bold tabular-nums md:text-5xl", valueClassName), children: [
-      stat.prefix,
-      displayValue,
-      stat.suffix
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-lg font-semibold", labelClassName), children: stat.label }),
-    stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: stat.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", descriptionClassName), children: stat.description }))
-  ] });
+  const displayValue = useNumberTicker(
+    stat.value,
+    duration,
+    isVisible,
+    decimals
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border p-6 transition-shadow hover:shadow-md",
+        getNestedCardBg(background, "card"),
+        getNestedCardTextColor(background),
+        stat.className,
+        cardClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-2 text-4xl font-bold tabular-nums md:text-5xl",
+              valueClassName
+            ),
+            children: [
+              stat.prefix,
+              displayValue,
+              stat.suffix
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-lg font-semibold", labelClassName), children: stat.label }),
+        stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-sm text-muted-foreground",
+              descriptionClassName
+            ),
+            children: stat.description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("text-sm", descriptionClassName), children: stat.description }))
+      ]
+    }
+  );
 }
 function StatsNumberTicker({
   badge,
@@ -95589,12 +95628,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,
@@ -95630,21 +95669,41 @@ function StatsNumberTicker({
   const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsx(
-      TickerStatItem,
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx(
     Section,
@@ -95655,11 +95714,30 @@ function StatsNumberTicker({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
         hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", 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-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                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-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
         statsContent
       ] })
@@ -95673,12 +95751,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,
@@ -95713,7 +95791,13 @@ function StatsMilestoneSidebar({
         }
       ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  }, [
+    sidebarSlot,
+    heading,
+    description,
+    headingClassName,
+    descriptionClassName
+  ]);
   const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
@@ -95761,7 +95845,15 @@ function StatsMilestoneSidebar({
       },
       index
     )) });
-  }, [milestonesSlot, milestones, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName]);
+  }, [
+    milestonesSlot,
+    milestones,
+    milestonesClassName,
+    milestoneItemClassName,
+    milestoneYearClassName,
+    milestoneTitleClassName,
+    milestoneDescriptionClassName
+  ]);
   const hasSidebarContent = !!(sidebarSlot || heading || description);
   const hasMilestonesContent = !!(milestonesSlot || milestones && milestones.length > 0);
   return /* @__PURE__ */ jsx(
@@ -95773,9 +95865,16 @@ function StatsMilestoneSidebar({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
         hasSidebarContent && /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
-        hasMilestonesContent && /* @__PURE__ */ jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
+        hasMilestonesContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12",
+            children: milestonesContent
+          }
+        )
       ] }) })
     }
   );
@@ -95789,12 +95888,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,
@@ -95904,39 +96003,33 @@ function StatsBarComparison({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: sectionRef,
-          className: cn("mx-auto max-w-4xl", containerClassName),
-          children: [
-            hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-              badgeContent,
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-4 text-3xl font-bold md:text-4xl",
-                    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-2xl text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
-            ] }),
-            (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
-          ]
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: "relative", children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-4xl",
+                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-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
+        ] }),
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
+      ] })
     }
   );
 }