@opensite/ui 3.3.1 → 3.3.3

package/dist/registry.cjs

@@ -27166,7 +27166,7 @@ function FeatureCapabilitiesGrid({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 pt-6 px-6 pb-0", children: [
               iconContent && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -27182,31 +27182,13 @@ function FeatureCapabilitiesGrid({
                 {
                   href: item.href,
                   className: "flex-1 h-full flex items-center",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "h3",
-                      {
-                        className: cn("text-lg font-medium", item.titleClassName),
-                        children: item.title
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: cn("text-lg font-medium", item.titleClassName),
-                        children: item.title
-                      }
-                    )),
-                    item.badge && /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
-                          item.badgeClassName
-                        ),
-                        children: item.badge
-                      }
-                    )
-                  ] })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: cn("text-lg font-medium", item.titleClassName),
+                      children: item.title
+                    }
+                  ) : item.title) })
                 }
               )
             ] }),
@@ -27248,13 +27230,7 @@ function FeatureCapabilitiesGrid({
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("text-sm tracking-widest", eyebrowClassName),
-              children: eyebrow
-            }
-          )),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : eyebrow),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -27264,16 +27240,7 @@ function FeatureCapabilitiesGrid({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "text-4xl font-semibold sm:text-5xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ))
+          ) : heading)
         ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -50088,36 +50055,6 @@ function HeroImageSlider({
   privacyNoticeClassName,
   gridClassName
 }) {
-  const renderActions = React30.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        asButton,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        pressable.Pressable,
-        {
-          asButton: asButton ?? false,
-          variant: "link",
-          className: cn("text-primary p-0 h-auto", actionClassName),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderContent = React30.useMemo(() => {
     if (contentSlot) return contentSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -50158,16 +50095,14 @@ function HeroImageSlider({
               children: description
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }) : null,
-          actionsSlot || actions && actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BlockActions,
             {
-              className: cn(
-                "mt-6 flex flex-col items-start gap-3 sm:flex-row",
-                actionsClassName
-              ),
-              children: renderActions
+              actions,
+              actionsSlot,
+              actionsClassName
             }
-          ) : null
+          )
         ]
       }
     );
@@ -50182,8 +50117,7 @@ function HeroImageSlider({
     eyebrowClassName,
     headingClassName,
     descriptionClassName,
-    actionsClassName,
-    renderActions
+    actionsClassName
   ]);
   const hasForm = formEngineSetup !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -50211,7 +50145,7 @@ function HeroImageSlider({
               "bg-linear-to-r from-black/70 via-black/50 to-black/30",
               overlayClassName
             ),
-            className: "min-h-full w-full rounded-none border-none shadow-none",
+            className: "min-h-full w-full rounded-none md:rounded-2xl border-none shadow-none md:shadow-xl overflow-hidden",
             imageClassName: cn("scale-[1.02]", imageClassName),
             optixFlowConfig
           }
@@ -59580,7 +59514,7 @@ function HeroConversationIntelligence({
   imageSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity,
   patternClassName,
@@ -59633,7 +59567,7 @@ function HeroConversationIntelligence({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex max-w-220 flex-col gap-7",
+              "relative z-10 mx-auto flex max-w-full md:max-w-220 flex-col items-center gap-7",
               contentClassName
             ),
             children: [
@@ -59656,13 +59590,13 @@ function HeroConversationIntelligence({
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {
                   actions,
                   actionsSlot,
-                  actionsClassName
+                  actionsClassName: cn(actionsClassName, "justify-center")
                 }
               )
             ]
@@ -63616,11 +63550,20 @@ var NavbarMegaMenu = ({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        pressable.Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   };
   const {
@@ -97395,6 +97338,7 @@ function StatsGrowthTimeline({
   futureSlot,
   actions,
   actionsSlot,
+  actionsClassName,
   background,
   pattern,
   patternOpacity,
@@ -97441,19 +97385,18 @@ function StatsGrowthTimeline({
                 "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)
+                    "bg-muted text-muted-foreground",
+                    "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
                   ),
                   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.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
+              milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
               milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
                   milestone.metric.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
@@ -97479,16 +97422,15 @@ function StatsGrowthTimeline({
       "div",
       {
         className: cn(
-          "mt-24 rounded-lg p-8",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background),
+          "p-6 md:p-12 bg-card text-card-foreground",
+          "mt-24 rounded-lg border border-border shadow-md",
           currentStatsClassName
         ),
         children: [
-          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
+          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", stat.className), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
+            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
           ] }, index)) })
         ]
       }
@@ -97500,39 +97442,29 @@ function StatsGrowthTimeline({
     currentStatsHeading,
     currentStatsClassName
   ]);
-  const actionsContent = React30.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      pressable.Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant,
-        className: "inline-flex items-center font-medium text-primary hover:underline",
-        children: [
-          action.label,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      index
-    ));
-  }, [actionsSlot, actions]);
   const futureContent = React30.useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
       return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: futureHeading })),
-      futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      actionsContent
+      futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BlockActions,
+        {
+          actions,
+          actionsSlot,
+          actionsClassName
+        }
+      )
     ] });
   }, [
     futureSlot,
     futureHeading,
     futureDescription,
     futureClassName,
-    actionsContent,
+    actionsSlot,
+    actionsClassName,
     actions
   ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -97569,7 +97501,7 @@ function StatsGrowthTimeline({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          ) : description)
         ] }),
         milestonesContent,
         currentStatsContent,

package/dist/registry.js

@@ -27126,7 +27126,7 @@ function FeatureCapabilitiesGrid({
               /* @__PURE__ */ jsx("div", { className: "absolute -left-2 -bottom-2 h-3 w-3 bg-background" }),
               /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -bottom-2 h-3 w-3 bg-background" })
             ] }),
-            /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 p-6", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { className: "relative z-10 flex flex-row items-start gap-3 pt-6 px-6 pb-0", children: [
               iconContent && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -27142,31 +27142,13 @@ function FeatureCapabilitiesGrid({
                 {
                   href: item.href,
                   className: "flex-1 h-full flex items-center",
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
-                      "h3",
-                      {
-                        className: cn("text-lg font-medium", item.titleClassName),
-                        children: item.title
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn("text-lg font-medium", item.titleClassName),
-                        children: item.title
-                      }
-                    )),
-                    item.badge && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
-                          item.badgeClassName
-                        ),
-                        children: item.badge
-                      }
-                    )
-                  ] })
+                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
+                    "h3",
+                    {
+                      className: cn("text-lg font-medium", item.titleClassName),
+                      children: item.title
+                    }
+                  ) : item.title) })
                 }
               )
             ] }),
@@ -27208,13 +27190,7 @@ function FeatureCapabilitiesGrid({
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("text-sm tracking-widest", eyebrowClassName),
-              children: eyebrow
-            }
-          )),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : eyebrow),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
@@ -27224,16 +27200,7 @@ function FeatureCapabilitiesGrid({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "text-4xl font-semibold sm:text-5xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ))
+          ) : heading)
         ] }) : null,
         /* @__PURE__ */ jsx(
           "div",
@@ -50048,36 +50015,6 @@ function HeroImageSlider({
   privacyNoticeClassName,
   gridClassName
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        asButton,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: asButton ?? false,
-          variant: "link",
-          className: cn("text-primary p-0 h-auto", actionClassName),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   const renderContent = useMemo(() => {
     if (contentSlot) return contentSlot;
     return /* @__PURE__ */ jsxs(
@@ -50118,16 +50055,14 @@ function HeroImageSlider({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description }) : null,
-          actionsSlot || actions && actions.length > 0 ? /* @__PURE__ */ jsx(
-            "div",
+          /* @__PURE__ */ jsx(
+            BlockActions,
             {
-              className: cn(
-                "mt-6 flex flex-col items-start gap-3 sm:flex-row",
-                actionsClassName
-              ),
-              children: renderActions
+              actions,
+              actionsSlot,
+              actionsClassName
             }
-          ) : null
+          )
         ]
       }
     );
@@ -50142,8 +50077,7 @@ function HeroImageSlider({
     eyebrowClassName,
     headingClassName,
     descriptionClassName,
-    actionsClassName,
-    renderActions
+    actionsClassName
   ]);
   const hasForm = formEngineSetup !== void 0;
   return /* @__PURE__ */ jsxs(
@@ -50171,7 +50105,7 @@ function HeroImageSlider({
               "bg-linear-to-r from-black/70 via-black/50 to-black/30",
               overlayClassName
             ),
-            className: "min-h-full w-full rounded-none border-none shadow-none",
+            className: "min-h-full w-full rounded-none md:rounded-2xl border-none shadow-none md:shadow-xl overflow-hidden",
             imageClassName: cn("scale-[1.02]", imageClassName),
             optixFlowConfig
           }
@@ -59540,7 +59474,7 @@ function HeroConversationIntelligence({
   imageSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity,
   patternClassName,
@@ -59593,7 +59527,7 @@ function HeroConversationIntelligence({
           "div",
           {
             className: cn(
-              "relative z-10 mx-auto flex max-w-220 flex-col gap-7",
+              "relative z-10 mx-auto flex max-w-full md:max-w-220 flex-col items-center gap-7",
               contentClassName
             ),
             children: [
@@ -59616,13 +59550,13 @@ function HeroConversationIntelligence({
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
                   actions,
                   actionsSlot,
-                  actionsClassName
+                  actionsClassName: cn(actionsClassName, "justify-center")
                 }
               )
             ]
@@ -63576,11 +63510,20 @@ var NavbarMegaMenu = ({
         className: actionClassName,
         ...pressableProps
       } = action;
-      return /* @__PURE__ */ jsx(Pressable, { className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) }, index);
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
     });
   };
   const {
@@ -97355,6 +97298,7 @@ function StatsGrowthTimeline({
   futureSlot,
   actions,
   actionsSlot,
+  actionsClassName,
   background,
   pattern,
   patternOpacity,
@@ -97401,19 +97345,18 @@ function StatsGrowthTimeline({
                 "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)
+                    "bg-muted text-muted-foreground",
+                    "mb-4 inline-flex h-fit py-2 w-fit px-4 items-center justify-center rounded-full text-sm font-semibold"
                   ),
                   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.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : milestone.title),
+              milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : milestone.description),
               milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
+                  /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-primary", children: milestone.metric.value }),
                   milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
@@ -97439,16 +97382,15 @@ function StatsGrowthTimeline({
       "div",
       {
         className: cn(
-          "mt-24 rounded-lg p-8",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background),
+          "p-6 md:p-12 bg-card text-card-foreground",
+          "mt-24 rounded-lg border border-border shadow-md",
           currentStatsClassName
         ),
         children: [
-          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
+          currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-12 text-center text-4xl lg:text-5xl font-bold", children: currentStatsHeading }) : currentStatsHeading),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-            stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-primary md:text-3xl xl:text-4xl", children: stat.value }),
+            stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-balance text-sm", children: stat.label })
           ] }, index)) })
         ]
       }
@@ -97460,39 +97402,29 @@ function StatsGrowthTimeline({
     currentStatsHeading,
     currentStatsClassName
   ]);
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant,
-        className: "inline-flex items-center font-medium text-primary hover:underline",
-        children: [
-          action.label,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      index
-    ));
-  }, [actionsSlot, actions]);
   const futureContent = useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
       return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
-      futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      actionsContent
+      futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-full md:max-w-lg text-balance", children: futureDescription }) : futureDescription),
+      /* @__PURE__ */ jsx(
+        BlockActions,
+        {
+          actions,
+          actionsSlot,
+          actionsClassName
+        }
+      )
     ] });
   }, [
     futureSlot,
     futureHeading,
     futureDescription,
     futureClassName,
-    actionsContent,
+    actionsSlot,
+    actionsClassName,
     actions
   ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
@@ -97529,7 +97461,7 @@ function StatsGrowthTimeline({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          ) : description)
         ] }),
         milestonesContent,
         currentStatsContent,