@opensite/ui 0.5.2 → 0.5.4

package/dist/registry.cjs

@@ -76250,7 +76250,7 @@ function ProjectDetailParallaxScroll(props) {
 }
 function BannerPromoCta({
   message,
-  discount = "Up to 50% off",
+  discount,
   separator,
   actions,
   actionsSlot,
@@ -76262,11 +76262,18 @@ function BannerPromoCta({
   discountClassName,
   actionsClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76281,20 +76288,28 @@ function BannerPromoCta({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = React13.useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("hidden sm:inline", separatorClassName), children: "\xB7" });
-  };
+  }, [separator, separatorClassName]);
+  const messageContent = React13.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const discountContent = React13.useMemo(() => {
+    if (!discount) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: discountClassName, children: discount });
+  }, [discount, discountClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn("w-full bg-primary text-primary-foreground", className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-center text-sm", contentClassName), children: [
-        message && (typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: messageClassName, children: message })),
-        renderSeparator(),
-        discount && (typeof discount === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: discountClassName, children: discount }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: discountClassName, children: discount })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: renderActions() })
+        messageContent,
+        messageContent && discountContent && separatorContent,
+        discountContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent })
       ] }) })
     }
   );
@@ -76314,17 +76329,16 @@ function BannerCountdownSale({
   timeUnitClassName,
   separatorClassName
 }) {
-  const defaultEndTime = React13.useMemo(
-    () => new Date(Date.now() + 24 * 60 * 60 * 1e3),
-    []
-  );
-  const targetTime = endTime ?? defaultEndTime;
+  const targetTime = endTime;
   const [timeLeft, setTimeLeft] = React13.useState({
     hours: 0,
     minutes: 0,
     seconds: 0
   });
   React13.useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
     const calculateTimeLeft = () => {
       const now = (/* @__PURE__ */ new Date()).getTime();
       const target = targetTime.getTime();
@@ -76344,10 +76358,11 @@ function BannerCountdownSale({
     }, 1e3);
     return () => clearInterval(timer);
   }, [targetTime]);
-  const pad = (n) => n.toString().padStart(2, "0");
-  const renderDefaultTimer = () => {
+  const pad = React13.useCallback((n) => n.toString().padStart(2, "0"), []);
+  const timerContent = React13.useMemo(() => {
     if (timerSlot) return timerSlot;
     if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 font-mono text-lg font-bold", timerClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.hours) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClassName, children: ":" }),
@@ -76355,20 +76370,28 @@ function BannerCountdownSale({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: separatorClassName, children: ":" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded bg-destructive px-2 py-0.5", timeUnitClassName), children: pad(timeLeft.seconds) })
     ] });
-  };
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, timeUnitClassName, separatorClassName, pad, targetTime]);
+  const messageContent = React13.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
+  const descriptionContent = React13.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full bg-destructive text-white", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
-    message && (typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message })),
-    renderDefaultTimer(),
-    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+    messageContent,
+    timerContent,
+    descriptionContent
   ] }) }) });
 }
 function BannerDeliveryCountdown({
   icon,
-  iconName = "lucide/gift",
-  deliveryDate = "Dec 24",
+  iconName,
+  deliveryDate,
   cutoffTime,
-  prefixText = "Order within",
-  middleText = "for delivery by",
+  prefixText,
+  middleText,
   timerSlot,
   renderTimer,
   className,
@@ -76379,17 +76402,16 @@ function BannerDeliveryCountdown({
   timerClassName,
   deliveryDateClassName
 }) {
-  const defaultCutoffTime = React13.useMemo(
-    () => new Date(Date.now() + 4 * 60 * 60 * 1e3),
-    []
-  );
-  const targetTime = cutoffTime ?? defaultCutoffTime;
+  const targetTime = cutoffTime;
   const [timeLeft, setTimeLeft] = React13.useState({
     hours: 0,
     minutes: 0,
     seconds: 0
   });
   React13.useEffect(() => {
+    if (!targetTime) {
+      return;
+    }
     const calculateTimeLeft = () => {
       const now = (/* @__PURE__ */ new Date()).getTime();
       const target = targetTime.getTime();
@@ -76409,14 +76431,16 @@ function BannerDeliveryCountdown({
     }, 1e3);
     return () => clearInterval(timer);
   }, [targetTime]);
-  const pad = (n) => n.toString().padStart(2, "0");
-  const renderIcon = () => {
+  const pad = React13.useCallback((n) => n.toString().padStart(2, "0"), []);
+  const iconContent = React13.useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 16, className: iconClassName });
-  };
-  const renderDefaultTimer = () => {
+  }, [icon, iconName, iconClassName]);
+  const timerContent = React13.useMemo(() => {
     if (timerSlot) return timerSlot;
     if (renderTimer) return renderTimer(timeLeft);
+    if (!targetTime) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-mono font-bold", timerClassName), children: [
       pad(timeLeft.hours),
       ":",
@@ -76424,29 +76448,33 @@ function BannerDeliveryCountdown({
       ":",
       pad(timeLeft.seconds)
     ] });
-  };
+  }, [timerSlot, renderTimer, timeLeft, timerClassName, pad, targetTime]);
+  const deliveryDateContent = React13.useMemo(() => {
+    if (!deliveryDate) return null;
+    return typeof deliveryDate === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: deliveryDateClassName, children: deliveryDate });
+  }, [deliveryDate, deliveryDateClassName]);
+  const messageParts = React13.useMemo(() => {
+    return [prefixText, timerContent, middleText, deliveryDateContent].filter(
+      (part) => part !== null && part !== void 0
+    );
+  }, [prefixText, timerContent, middleText, deliveryDateContent]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full bg-accent text-accent-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
-    renderIcon(),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      prefixText,
-      " ",
-      renderDefaultTimer(),
-      " ",
-      middleText,
-      " ",
-      deliveryDate && (typeof deliveryDate === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-semibold", deliveryDateClassName), children: deliveryDate }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: deliveryDateClassName, children: deliveryDate }))
-    ] })
+    iconContent,
+    messageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs(React13__namespace.Fragment, { children: [
+      index > 0 ? " " : null,
+      part
+    ] }, index)) })
   ] }) }) }) });
 }
 function BannerAnnouncementDismissible({
   icon,
-  iconName = "mynaui/boat",
+  iconName,
   message,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76456,15 +76484,23 @@ function BannerAnnouncementDismissible({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = React13.useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React13.useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderActions = () => {
+  }, [onDismiss]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76480,23 +76516,35 @@ function BannerAnnouncementDismissible({
         index
       );
     });
-  };
-  const renderIcon = () => {
+  }, [actions, actionsSlot]);
+  const iconContent = React13.useMemo(() => {
     if (icon) return icon;
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 20, className: cn("shrink-0", iconClassName) });
-  };
-  const renderDismissIcon = () => {
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const dismissIconContent = React13.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const messageContent = React13.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
   if (!isVisible) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-background border-b", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
-      renderIcon(),
-      message && (typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium text-sm", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: messageClassName, children: message })),
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+      iconContent,
+      messageContent,
+      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
@@ -76507,8 +76555,8 @@ function BannerAnnouncementDismissible({
         asButton: true,
         className: cn("size-8", dismissButtonClassName),
         children: [
-          renderDismissIcon(),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+          dismissIconContent,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
         ]
       }
     )
@@ -76516,14 +76564,14 @@ function BannerAnnouncementDismissible({
 }
 function BannerPrivacyNotice({
   icon,
-  iconName = "mynaui/shield",
+  iconName,
   title,
   description,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76534,12 +76582,14 @@ function BannerPrivacyNotice({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = React13.useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React13.useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = React13.useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       DynamicIcon,
       {
@@ -76548,12 +76598,19 @@ function BannerPrivacyNotice({
         className: cn("mt-0.5 shrink-0", iconClassName)
       }
     );
-  };
-  const renderActions = () => {
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76568,11 +76625,19 @@ function BannerPrivacyNotice({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React13.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const titleContent = React13.useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = React13.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description });
+  }, [description, descriptionClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76585,11 +76650,11 @@ function BannerPrivacyNotice({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-4", contentClassName), children: [
-          renderIcon(),
+          iconContent,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: description })),
-            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+            titleContent,
+            descriptionContent,
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -76601,8 +76666,8 @@ function BannerPrivacyNotice({
             asButton: true,
             className: cn("size-8", dismissButtonClassName),
             children: [
-              renderDismissIcon(),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
             ]
           }
         )
@@ -76612,14 +76677,14 @@ function BannerPrivacyNotice({
 }
 function BannerSurveyIncentive({
   icon,
-  iconName = "mynaui/shopping-bag",
+  iconName,
   title,
   description,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76631,12 +76696,14 @@ function BannerSurveyIncentive({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = React13.useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React13.useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = React13.useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       DynamicIcon,
       {
@@ -76645,12 +76712,19 @@ function BannerSurveyIncentive({
         className: cn("shrink-0 hidden md:block", iconClassName)
       }
     );
-  };
-  const renderActions = () => {
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76666,24 +76740,32 @@ function BannerSurveyIncentive({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React13.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const titleContent = React13.useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = React13.useMemo(() => {
+    if (!description) return null;
+    return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: descriptionClassName, children: description });
+  }, [description, descriptionClassName]);
   if (!isVisible) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-background border-b text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex md:items-center justify-between max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", contentClassName), children: [
-      renderIcon(),
+      iconContent,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col md:flex-row gap-1", textClassName), children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClassName, children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: descriptionClassName, children: description }))
+        titleContent,
+        descriptionContent
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-2", actionsClassName), children: [
-      renderActions(),
+      actionsContent,
       /* @__PURE__ */ jsxRuntime.jsxs(
         Pressable,
         {
@@ -76693,8 +76775,8 @@ function BannerSurveyIncentive({
           asButton: true,
           className: cn("size-8", dismissButtonClassName),
           children: [
-            renderDismissIcon(),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+            dismissIconContent,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
           ]
         }
       )
@@ -76703,13 +76785,13 @@ function BannerSurveyIncentive({
 }
 function BannerSocialFollow({
   icon,
-  iconName = "mynaui/users",
+  iconName,
   message,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   iconClassName,
@@ -76718,19 +76800,35 @@ function BannerSocialFollow({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = React13.useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React13.useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = React13.useMemo(() => {
     if (icon) return icon;
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: iconName, size: 20, className: cn("shrink-0", iconClassName) });
-  };
-  const renderActions = () => {
+    if (!iconName) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicIcon,
+      {
+        name: iconName,
+        size: 20,
+        className: cn("shrink-0", iconClassName)
+      }
+    );
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76746,11 +76844,15 @@ function BannerSocialFollow({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React13.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const messageContent = React13.useMemo(() => {
+    if (!message) return null;
+    return typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: messageClassName, children: message });
+  }, [message, messageClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76762,9 +76864,9 @@ function BannerSocialFollow({
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-3 py-3 flex items-center justify-center text-left md:text-center gap-2", containerClassName), children: [
-        renderIcon(),
-        message && (typeof message === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", messageClassName), children: message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: messageClassName, children: message })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: renderActions() }),
+        iconContent,
+        messageContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,
           {
@@ -76774,8 +76876,8 @@ function BannerSocialFollow({
             asButton: true,
             className: cn("size-8", dismissButtonClassName),
             children: [
-              renderDismissIcon(),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
             ]
           }
         )
@@ -76785,14 +76887,14 @@ function BannerSocialFollow({
 }
 function BannerGdprRights({
   icon,
-  iconName = "mynaui/globe",
+  iconName,
   title,
   description,
   actions,
   actionsSlot,
   onDismiss,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   contentClassName,
@@ -76803,12 +76905,14 @@ function BannerGdprRights({
   dismissButtonClassName
 }) {
   const [isVisible, setIsVisible] = React13.useState(true);
-  const handleDismiss = () => {
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const handleDismiss = React13.useCallback(() => {
     setIsVisible(false);
     onDismiss?.();
-  };
-  const renderIcon = () => {
+  }, [onDismiss]);
+  const iconContent = React13.useMemo(() => {
     if (icon) return icon;
+    if (!iconName) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       DynamicIcon,
       {
@@ -76817,12 +76921,19 @@ function BannerGdprRights({
         className: cn("text-muted-foreground mt-0.5 shrink-0", iconClassName)
       }
     );
-  };
-  const renderActions = () => {
+  }, [icon, iconName, iconClassName]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76837,11 +76948,22 @@ function BannerGdprRights({
         index
       );
     });
-  };
-  const renderDismissIcon = () => {
+  }, [actions, actionsSlot]);
+  const dismissIconContent = React13.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const titleContent = React13.useMemo(() => {
+    if (!title) return null;
+    return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title });
+  }, [title, titleClassName]);
+  const descriptionContent = React13.useMemo(() => {
+    if (!description && !actionsContent) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: [
+      description,
+      actionsContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent })
+    ] });
+  }, [description, actionsContent, descriptionClassName, actionsClassName]);
   if (!isVisible) {
     return null;
   }
@@ -76854,13 +76976,10 @@ function BannerGdprRights({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", contentClassName), children: [
-          renderIcon(),
+          iconContent,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-semibold text-sm", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-sm text-muted-foreground mt-1", descriptionClassName), children: [
-              description,
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: renderActions() })
-            ] })
+            titleContent,
+            descriptionContent
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -76872,8 +76991,8 @@ function BannerGdprRights({
             asButton: true,
             className: cn("size-8", dismissButtonClassName),
             children: [
-              renderDismissIcon(),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
             ]
           }
         )
@@ -76882,8 +77001,8 @@ function BannerGdprRights({
   );
 }
 function BannerEventPromo({
-  eventName = "GeneriCon 2024",
-  eventDetails = "Join us in Denver from June 7 - 9 to see what's coming next.",
+  eventName,
+  eventDetails,
   separator,
   actions,
   actionsSlot,
@@ -76896,11 +77015,18 @@ function BannerEventPromo({
   eventDetailsClassName,
   actionsClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76916,8 +77042,8 @@ function BannerEventPromo({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = React13.useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -76928,28 +77054,36 @@ function BannerEventPromo({
         children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
       }
     );
-  };
+  }, [separator, separatorClassName]);
+  const eventNameContent = React13.useMemo(() => {
+    if (!eventName) return null;
+    return typeof eventName === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventNameClassName, children: eventName });
+  }, [eventName, eventNameClassName]);
+  const eventDetailsContent = React13.useMemo(() => {
+    if (!eventDetails) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails });
+  }, [eventDetails, eventDetailsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("bg-primary text-primary-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-x-6 p-4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap justify-between w-full items-center gap-x-4 gap-y-2", textClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-6", children: [
-      eventName && (typeof eventName === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", eventNameClassName), children: eventName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventNameClassName, children: eventName })),
-      renderSeparator(),
-      eventDetails && (typeof eventDetails === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails }))
+      eventNameContent,
+      eventNameContent && eventDetailsContent && separatorContent,
+      eventDetailsContent
     ] }),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
   ] }) }) }) });
 }
 function BannerFloatingOffer({
-  offerTitle = "Limited time offer",
-  offerDescription = "Get 50% off for your first month",
+  offerTitle,
+  offerDescription,
   separator,
   actions,
   actionsSlot,
   open,
-  defaultOpen = true,
+  defaultOpen,
   onOpenChange,
-  dismissible = false,
+  dismissible,
   dismissIcon,
-  dismissAriaLabel = "Dismiss banner",
+  dismissAriaLabel,
   className,
   containerClassName,
   textClassName,
@@ -76960,24 +77094,34 @@ function BannerFloatingOffer({
   dismissButtonClassName
 }) {
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React13.useState(defaultOpen);
+  const initialOpen = defaultOpen ?? true;
+  const [internalOpen, setInternalOpen] = React13.useState(initialOpen);
   const isVisible = isControlled ? open : internalOpen;
+  const dismissLabel = dismissAriaLabel ?? "Dismiss banner";
+  const isDismissible = dismissible ?? false;
   React13.useEffect(() => {
     if (!isControlled && defaultOpen !== internalOpen) {
-      setInternalOpen(defaultOpen);
+      setInternalOpen(initialOpen);
     }
-  }, [defaultOpen, isControlled, internalOpen]);
-  const handleDismiss = () => {
+  }, [defaultOpen, initialOpen, isControlled, internalOpen]);
+  const handleDismiss = React13.useCallback(() => {
     if (!isControlled) {
       setInternalOpen(false);
     }
     onOpenChange?.(false);
-  };
-  const renderActions = () => {
+  }, [isControlled, onOpenChange]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon: actionIcon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon: actionIcon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -76993,8 +77137,8 @@ function BannerFloatingOffer({
         index
       );
     });
-  };
-  const renderSeparator = () => {
+  }, [actions, actionsSlot]);
+  const separatorContent = React13.useMemo(() => {
     if (separator) return separator;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -77005,11 +77149,19 @@ function BannerFloatingOffer({
         children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 1, cy: 1, r: 1 })
       }
     );
-  };
-  const renderDismissIcon = () => {
+  }, [separator, separatorClassName]);
+  const dismissIconContent = React13.useMemo(() => {
     if (dismissIcon) return dismissIcon;
     return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "mynaui/x", size: 16 });
-  };
+  }, [dismissIcon]);
+  const offerTitleContent = React13.useMemo(() => {
+    if (!offerTitle) return null;
+    return typeof offerTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerTitleClassName, children: offerTitle });
+  }, [offerTitle, offerTitleClassName]);
+  const offerDescriptionContent = React13.useMemo(() => {
+    if (!offerDescription) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription });
+  }, [offerDescription, offerDescriptionClassName]);
   if (!isVisible) {
     return null;
   }
@@ -77022,13 +77174,13 @@ function BannerFloatingOffer({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("pointer-events-auto flex items-center justify-between gap-x-6 bg-primary px-6 py-2.5 sm:rounded-xl sm:py-3 sm:pl-4 sm:pr-3.5", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-sm leading-6 text-primary-foreground", textClassName), children: [
-          offerTitle && (typeof offerTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("strong", { className: cn("font-semibold", offerTitleClassName), children: offerTitle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerTitleClassName, children: offerTitle })),
-          renderSeparator(),
-          offerDescription && (typeof offerDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: offerDescriptionClassName, children: offerDescription }))
+          offerTitleContent,
+          offerTitleContent && offerDescriptionContent && separatorContent,
+          offerDescriptionContent
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", actionsClassName), children: [
-          renderActions(),
-          dismissible && /* @__PURE__ */ jsxRuntime.jsxs(
+          actionsContent,
+          isDismissible && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
               onClick: handleDismiss,
@@ -77037,8 +77189,8 @@ function BannerFloatingOffer({
               asButton: true,
               className: cn("size-8 text-primary-foreground hover:text-primary-foreground/80", dismissButtonClassName),
               children: [
-                renderDismissIcon(),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissAriaLabel })
+                dismissIconContent,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
               ]
             }
           )
@@ -84027,8 +84179,8 @@ function StatsSimpleGrid({
   statsSlot,
   actions,
   actionsSlot,
-  background = "muted",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84046,7 +84198,14 @@ function StatsSimpleGrid({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -84067,10 +84226,34 @@ function StatsSimpleGrid({
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", statItemClassName), children: [
-      stat.value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl",
+            statValueClassName
+          ),
+          children: stat.value
+        }
+      ),
+      stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "text-base leading-6 text-muted-foreground lg:text-lg",
+            statLabelClassName
+          ),
+          children: stat.label
+        }
+      )
     ] }, index));
-  }, [statsSlot, stats, statItemClassName, statValueClassName, statLabelClassName]);
+  }, [
+    statsSlot,
+    stats,
+    statItemClassName,
+    statValueClassName,
+    statLabelClassName
+  ]);
   const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
   const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -84082,13 +84265,49 @@ 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 })
-      ] })
+      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
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -84097,8 +84316,8 @@ function StatsIconCards({
   description,
   stats,
   statsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84114,28 +84333,46 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = React13.useCallback((stat) => {
-    if (stat.iconSlot) return stat.iconSlot;
-    if (!stat.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-      DynamicIcon,
-      {
-        name: stat.icon,
-        size: 24,
-        className: "text-primary"
-      }
-    ) });
-  }, [statIconClassName]);
+  const renderIcon = React13.useCallback(
+    (stat) => {
+      if (stat.iconSlot) return stat.iconSlot;
+      if (!stat.icon) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
+            statIconClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
+        }
+      );
+    },
+    [statIconClassName]
+  );
   const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
+        className: cn(
+          "relative overflow-hidden rounded-xl border bg-background p-6",
+          stat.className,
+          statCardClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "font-medium text-muted-foreground",
+                  statLabelClassName
+                ),
+                children: stat.label
+              }
+            ),
             stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
             stat.growth && /* @__PURE__ */ jsxRuntime.jsxs(
               "p",
@@ -84164,7 +84401,15 @@ function StatsIconCards({
       },
       index
     ));
-  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  }, [
+    statsSlot,
+    stats,
+    statCardClassName,
+    statLabelClassName,
+    statValueClassName,
+    statGrowthClassName,
+    renderIcon
+  ]);
   const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -84177,10 +84422,37 @@ function StatsIconCards({
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-3 text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+              statsClassName
+            ),
+            children: statsContent
+          }
+        )
       ] })
     }
   );
@@ -84193,8 +84465,8 @@ function StatsTimelineTabs({
   periods,
   tabsSlot,
   defaultPeriod,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84218,68 +84490,100 @@ function StatsTimelineTabs({
   const tabsContent = React13.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
-      periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: period.stats.map((stat, index) => {
-        const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
-              stat.className,
-              statCardClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-                stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/clock",
-                      size: 16,
-                      className: "mr-1 text-muted-foreground"
-                    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        defaultValue: effectiveDefaultPeriod,
+        className: cn("mt-8 w-full", tabsClassName),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
+          periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(
+            TabsContent,
+            {
+              value: period.id,
+              className: cn("mt-4", period.className),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "grid gap-6 md:grid-cols-2 lg:grid-cols-4",
+                    statsGridClassName
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
-                ] })
-              ] }),
-              stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "flex items-center rounded-full px-2 py-1 text-xs font-medium",
-                      isPositive ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400" : "bg-rose-50 text-rose-600 dark:bg-rose-950 dark:text-rose-400"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        DynamicIcon,
-                        {
-                          name: stat.trend === "up" ? "lucide/arrow-up-right" : "lucide/arrow-down-right",
-                          size: 12,
-                          className: "mr-1"
-                        }
-                      ),
-                      Math.abs(stat.change),
-                      "%"
-                    ]
-                  }
-                ),
-                stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
-                  "vs ",
-                  stat.previousLabel
-                ] })
-              ] })
-            ]
-          },
-          index
-        );
-      }) }) }, period.id))
-    ] });
-  }, [tabsSlot, periods, effectiveDefaultPeriod, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName]);
+                  children: period.stats.map((stat, index) => {
+                    const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "rounded-lg border bg-card p-6 transition-shadow hover:shadow-md",
+                          stat.className,
+                          statCardClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+                            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicIcon,
+                                {
+                                  name: "lucide/clock",
+                                  size: 16,
+                                  className: "mr-1 text-muted-foreground"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
+                            ] })
+                          ] }),
+                          stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center", children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              "div",
+                              {
+                                className: cn(
+                                  "flex items-center rounded-full px-2 py-1 text-xs font-medium",
+                                  isPositive ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400" : "bg-rose-50 text-rose-600 dark:bg-rose-950 dark:text-rose-400"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: stat.trend === "up" ? "lucide/arrow-up-right" : "lucide/arrow-down-right",
+                                      size: 12,
+                                      className: "mr-1"
+                                    }
+                                  ),
+                                  Math.abs(stat.change),
+                                  "%"
+                                ]
+                              }
+                            ),
+                            stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                              "vs ",
+                              stat.previousLabel
+                            ] })
+                          ] })
+                        ]
+                      },
+                      index
+                    );
+                  })
+                }
+              )
+            },
+            period.id
+          ))
+        ]
+      }
+    );
+  }, [
+    tabsSlot,
+    periods,
+    effectiveDefaultPeriod,
+    tabsClassName,
+    tabsListClassName,
+    statsGridClassName,
+    statCardClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   const hasTabsContent = !!(tabsSlot || periods && periods.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -84294,8 +84598,32 @@ function StatsTimelineTabs({
       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: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("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(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "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
+            }
+          ))
         ] }),
         hasTabsContent && tabsContent
       ] }) })
@@ -84310,8 +84638,8 @@ function StatsPrimarySecondary({
   primarySlot,
   secondaryStats,
   secondaryStatsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84328,30 +84656,77 @@ function StatsPrimarySecondary({
   const renderPrimaryBadge = React13.useCallback(() => {
     if (primaryBadgeSlot) return primaryBadgeSlot;
     if (!primaryBadge) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: cn("ml-2 gap-1", primaryBadgeClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
-      primaryBadge
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Badge,
+      {
+        variant: "secondary",
+        className: cn("ml-2 gap-1", primaryBadgeClassName),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
+          primaryBadge
+        ]
+      }
+    );
   }, [primaryBadgeSlot, primaryBadge, primaryBadgeClassName]);
   const primaryContent = React13.useMemo(() => {
     if (primarySlot) return primarySlot;
     if (!primaryValue) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", primaryClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-6xl font-bold leading-10", primaryValueClassName), children: [
-        primaryValue,
-        renderPrimaryBadge()
-      ] }),
-      primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-muted-foreground sm:mt-3", primaryDescriptionClassName), children: primaryDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          className: cn(
+            "text-6xl font-bold leading-10",
+            primaryValueClassName
+          ),
+          children: [
+            primaryValue,
+            renderPrimaryBadge()
+          ]
+        }
+      ),
+      primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "mt-2 text-muted-foreground sm:mt-3",
+            primaryDescriptionClassName
+          ),
+          children: primaryDescription
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
     ] }) });
-  }, [primarySlot, primaryValue, primaryClassName, primaryValueClassName, primaryDescription, primaryDescriptionClassName, renderPrimaryBadge]);
+  }, [
+    primarySlot,
+    primaryValue,
+    primaryClassName,
+    primaryValueClassName,
+    primaryDescription,
+    primaryDescriptionClassName,
+    renderPrimaryBadge
+  ]);
   const secondaryStatsContent = React13.useMemo(() => {
     if (secondaryStatsSlot) return secondaryStatsSlot;
     if (!secondaryStats || secondaryStats.length === 0) return null;
     return secondaryStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: stat.className, children: [
       stat.value && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "mt-1 text-muted-foreground",
+            secondaryLabelClassName
+          ),
+          children: stat.label
+        }
+      )
     ] }, index));
-  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  }, [
+    secondaryStatsSlot,
+    secondaryStats,
+    secondaryValueClassName,
+    secondaryLabelClassName
+  ]);
   const hasPrimaryContent = !!(primarySlot || primaryValue);
   const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -84363,10 +84738,29 @@ function StatsPrimarySecondary({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-6 lg:grid-cols-12 lg:gap-12", containerClassName), children: [
-        hasPrimaryContent && primaryContent,
-        hasSecondaryContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12", secondaryClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent }) })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-center gap-6 lg:grid-cols-12 lg:gap-12",
+            containerClassName
+          ),
+          children: [
+            hasPrimaryContent && primaryContent,
+            hasSecondaryContent && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border",
+                  hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12",
+                  secondaryClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -84385,8 +84779,8 @@ function StatsGrowthTimeline({
   futureSlot,
   actions,
   actionsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84409,14 +84803,7 @@ function StatsGrowthTimeline({
   const renderMilestoneIcon = React13.useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DynamicIcon,
-      {
-        name: milestone.icon,
-        size: 32,
-        className: "text-primary"
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: milestone.icon, size: 32, className: "text-primary" }) });
   }, []);
   const milestonesContent = React13.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
@@ -84451,18 +84838,35 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  }, [
+    milestonesSlot,
+    milestones,
+    timelineClassName,
+    milestoneClassName,
+    renderMilestoneIcon
+  ]);
   const currentStatsContent = React13.useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", 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 })),
-      /* @__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 })
-      ] }, index)) })
-    ] });
-  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("mt-24 rounded-lg bg-muted p-8", 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 })),
+          /* @__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 })
+          ] }, index)) })
+        ]
+      }
+    );
+  }, [
+    currentStatsSlot,
+    currentStats,
+    currentStatsHeading,
+    currentStatsClassName
+  ]);
   const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -84483,13 +84887,21 @@ function StatsGrowthTimeline({
   }, [actionsSlot, actions]);
   const futureContent = React13.useMemo(() => {
     if (futureSlot) return futureSlot;
-    if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
+    if (!futureHeading && !futureDescription && (!actions || actions.length === 0))
+      return null;
     return /* @__PURE__ */ 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
     ] });
-  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  }, [
+    futureSlot,
+    futureHeading,
+    futureDescription,
+    futureClassName,
+    actionsContent,
+    actions
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -84503,8 +84915,26 @@ function StatsGrowthTimeline({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
         hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
           badgeContent,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-3xl font-bold md:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-3xl text-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
         milestonesContent,
         currentStatsContent,
@@ -84807,8 +85237,8 @@ function StatsCircularProgress({
   categories,
   categoriesSlot,
   defaultCategory,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84844,40 +85274,95 @@ function StatsCircularProgress({
           className: "w-full rounded-md border bg-background px-3 py-2",
           children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, `select-${cat.id}`))
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: category, onValueChange: setCategory, className: cn("w-full", tabsClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, cat.id)) }) }),
-        categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: cat.id, className: cat.className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn("flex flex-col items-center justify-center rounded-xl border bg-card p-6", stat.className, statCardClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIndicator, { value: stat.value, size: 120 }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Tabs,
+        {
+          value: category,
+          onValueChange: setCategory,
+          className: cn("w-full", tabsClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-12 hidden justify-center md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: cat.id, children: typeof cat.name === "string" ? `${cat.name} Metrics` : cat.name }, cat.id)) }) }),
+            categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: cat.id, className: cat.className, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "grid gap-8 sm:grid-cols-2 lg:grid-cols-4",
+                  statsClassName
+                ),
+                children: cat.stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
                   {
                     className: cn(
-                      "text-2xl font-bold md:text-3xl",
-                      getColorClass(stat.value),
-                      statValueClassName
+                      "flex flex-col items-center justify-center rounded-xl border bg-card p-6",
+                      stat.className,
+                      statCardClassName
                     ),
                     children: [
-                      stat.value,
-                      stat.suffix
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-4 flex items-center justify-center", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          CircularProgressIndicator,
+                          {
+                            value: stat.value,
+                            size: 120
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "text-2xl font-bold md:text-3xl",
+                              getColorClass(stat.value),
+                              statValueClassName
+                            ),
+                            children: [
+                              stat.value,
+                              stat.suffix
+                            ]
+                          }
+                        ) })
+                      ] }),
+                      stat.label && /* @__PURE__ */ jsxRuntime.jsx(
+                        "h3",
+                        {
+                          className: cn(
+                            "text-center text-lg font-semibold md:text-xl",
+                            statLabelClassName
+                          ),
+                          children: stat.label
+                        }
+                      ),
+                      stat.info && /* @__PURE__ */ jsxRuntime.jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "mt-1 text-center text-xs text-muted-foreground md:text-sm",
+                            statInfoClassName
+                          ),
+                          children: stat.info
+                        }
+                      )
                     ]
-                  }
-                ) })
-              ] }),
-              stat.label && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              stat.info && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
-            ]
-          },
-          index
-        )) }) }, cat.id))
-      ] })
+                  },
+                  index
+                ))
+              }
+            ) }, cat.id))
+          ]
+        }
+      )
     ] });
-  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  }, [
+    categoriesSlot,
+    categories,
+    category,
+    tabsClassName,
+    statsClassName,
+    statCardClassName,
+    statValueClassName,
+    statLabelClassName,
+    statInfoClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -84891,8 +85376,32 @@ function StatsCircularProgress({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-6xl", 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("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName),
+              children: description
+            }
+          ))
         ] }),
         categoriesContent
       ] })
@@ -84904,8 +85413,8 @@ function StatsCardGroup({
   statsSlot,
   avatars,
   avatarsSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84919,44 +85428,50 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = React13.useCallback((stat) => {
-    if (stat.iconSlot) return stat.iconSlot;
-    if (!stat.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
-          statIconClassName
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
-      }
-    );
-  }, [statIconClassName]);
-  const renderAvatars = React13.useCallback((stat) => {
-    if (!stat.showAvatars) return null;
-    if (avatarsSlot) return avatarsSlot;
-    if (!avatars || avatars.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex -space-x-2", avatarsClassName), children: [
-      avatars.slice(0, 4).map((avatar, avatarIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
+  const renderIcon = React13.useCallback(
+    (stat) => {
+      if (stat.iconSlot) return stat.iconSlot;
+      if (!stat.icon) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          src: avatar.src,
-          alt: avatar.alt,
           className: cn(
-            "h-8 w-8 rounded-full border-2 border-background object-cover",
-            avatar.className
+            "mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10",
+            statIconClassName
           ),
-          optixFlowConfig
-        },
-        avatarIndex
-      )),
-      avatars.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-medium", children: [
-        "+",
-        avatars.length - 4
-      ] })
-    ] });
-  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
+        }
+      );
+    },
+    [statIconClassName]
+  );
+  const renderAvatars = React13.useCallback(
+    (stat) => {
+      if (!stat.showAvatars) return null;
+      if (avatarsSlot) return avatarsSlot;
+      if (!avatars || avatars.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex -space-x-2", avatarsClassName), children: [
+        avatars.slice(0, 4).map((avatar, avatarIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: avatar.src,
+            alt: avatar.alt,
+            className: cn(
+              "h-8 w-8 rounded-full border-2 border-background object-cover",
+              avatar.className
+            ),
+            optixFlowConfig
+          },
+          avatarIndex
+        )),
+        avatars.length > 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-medium", children: [
+          "+",
+          avatars.length - 4
+        ] })
+      ] });
+    },
+    [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]
+  );
   const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -84986,7 +85501,14 @@ function StatsCardGroup({
       },
       index
     ));
-  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
+  }, [
+    statsSlot,
+    stats,
+    statValueClassName,
+    statLabelClassName,
+    renderIcon,
+    renderAvatars
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -85036,17 +85558,38 @@ function AnimatedStatItem({
   const iconContent = React13.useMemo(() => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", iconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10",
+          iconClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" })
+      }
+    );
   }, [stat.iconSlot, stat.icon, iconClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    iconContent,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
-      stat.prefix,
-      count,
-      stat.suffix
-    ] }),
-    stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("flex flex-col items-center text-center", stat.className),
+      children: [
+        iconContent,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName),
+            children: [
+              stat.prefix,
+              count,
+              stat.suffix
+            ]
+          }
+        ),
+        stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+      ]
+    }
+  );
 }
 function StatsAnimatedCounter({
   heading,
@@ -85054,8 +85597,8 @@ function StatsAnimatedCounter({
   stats,
   statsSlot,
   animationDuration = 2e3,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -85102,7 +85645,15 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
+  }, [
+    statsSlot,
+    stats,
+    animationDuration,
+    isVisible,
+    statValueClassName,
+    statLabelClassName,
+    statIconClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -85112,13 +85663,47 @@ 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 })
-      ] })
+      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
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -85385,8 +85970,8 @@ function StatsBarComparison({
   comparisons,
   comparisonsSlot,
   animate = true,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -85429,29 +86014,64 @@ function StatsBarComparison({
   const comparisonsContent = React13.useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
     if (!comparisons || comparisons.length === 0) return null;
-    return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border bg-card p-6", group.className, groupCardClassName), children: [
-      group.title && (typeof group.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-6 text-lg font-semibold", groupTitleClassName), children: group.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-bold", barValueClassName), children: bar.displayValue })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-3 w-full overflow-hidden rounded-full bg-muted", barTrackClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "h-full rounded-full transition-all duration-1000 ease-out",
-              bar.color || "bg-primary"
-            ),
-            style: {
-              width: isVisible ? `${bar.value}%` : "0%",
-              transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
+    return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl border bg-card p-6",
+          group.className,
+          groupCardClassName
+        ),
+        children: [
+          group.title && (typeof group.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
+              children: group.title
             }
-          }
-        ) })
-      ] }, barIndex)) })
-    ] }, groupIndex));
-  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-bold", barValueClassName), children: bar.displayValue })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "h-3 w-full overflow-hidden rounded-full bg-muted",
+                  barTrackClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full rounded-full transition-all duration-1000 ease-out",
+                      bar.color || "bg-primary"
+                    ),
+                    style: {
+                      width: isVisible ? `${bar.value}%` : "0%",
+                      transitionDelay: `${groupIndex * 100 + barIndex * 50}ms`
+                    }
+                  }
+                )
+              }
+            )
+          ] }, barIndex)) })
+        ]
+      },
+      groupIndex
+    ));
+  }, [
+    comparisonsSlot,
+    comparisons,
+    isVisible,
+    groupCardClassName,
+    groupTitleClassName,
+    barLabelClassName,
+    barValueClassName,
+    barTrackClassName
+  ]);
   const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -85462,14 +86082,39 @@ 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 })
-      ] })
+      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 })
+          ]
+        }
+      )
     }
   );
 }
@@ -102488,8 +103133,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerPromoCta
   message="Summer Sale"
   discount="Up to 70% off"
-  link="/sale"
-  linkText="Shop Now"
+  actions={[{ label: "Shop Now", href: "/sale" }]}
 />`.trim()
   },
   "banner-countdown-sale": {
@@ -102558,10 +103202,9 @@ var BLOCK_REGISTRY = {
     component: BannerAnnouncementDismissible,
     props: "BannerAnnouncementDismissibleProps",
     exampleUsage: `<BannerAnnouncementDismissible
-  icon="mynaui/rocket"
+  iconName="mynaui/rocket"
   message="New feature: AI-powered analytics is now live!"
-  buttonText="Try It Now"
-  buttonLink="/features/analytics"
+  actions={[{ label: "Try It Now", href: "/features/analytics", variant: "secondary", size: "sm" }]}
   onDismiss={() => console.log('Banner dismissed')}
 />`.trim()
   },
@@ -102586,8 +103229,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerPrivacyNotice
   title="Privacy Policy Updated"
   description="We've made changes to how we handle your data."
-  linkText="Read More"
-  linkUrl="/privacy"
+  actions={[{ label: "Read More", href: "/privacy", variant: "link" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
@@ -102611,8 +103253,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerSurveyIncentive
   title="Share your feedback!"
   description="Complete our quick survey and receive a 15% discount code."
-  buttonText="Start Survey"
-  buttonLink="/survey"
+  actions={[{ label: "Start Survey", href: "/survey", size: "sm" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
@@ -102635,15 +103276,14 @@ var BLOCK_REGISTRY = {
     props: "BannerSocialFollowProps",
     exampleUsage: `<BannerSocialFollow
   message="Join our community of 50,000+ developers!"
-  buttonText="Follow Now"
-  buttonLink="https://twitter.com/example"
+  actions={[{ label: "Follow Now", href: "https://twitter.com/example", variant: "secondary", size: "sm" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
   "banner-gdpr-rights": {
     id: "banner-gdpr-rights",
     name: "Banner GDPR Rights",
-    description: "A bottom-positioned GDPR privacy rights notice with globe icon, title, description, and manage data link. Features a fixed bottom position with border-top styling. Includes a dismiss button to close the banner. Ideal for GDPR compliance, data privacy notices, and user rights information.",
+    description: "A bottom-positioned privacy rights notice with icon, title, description, and manage data link. Features a fixed bottom position with border-top styling. Includes a dismiss button to close the banner. Ideal for privacy notices, data policy updates, and user rights information.",
     semanticTags: [
       "banner",
       "gdpr",
@@ -102662,8 +103302,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerGdprRights
   title="Your Privacy Rights"
   description="You can request access to or deletion of your personal data at any time."
-  linkText="Manage Data"
-  linkUrl="/privacy/manage"
+  actions={[{ label: "Manage Data", href: "/privacy/manage", variant: "link" }]}
   onDismiss={() => console.log('Dismissed')}
 />`.trim()
   },
@@ -102687,8 +103326,7 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerEventPromo
   eventName="TechSummit 2024"
   eventDetails="Join us in San Francisco from Sept 15 - 17 for the biggest tech event of the year."
-  buttonText="Get Tickets"
-  buttonLink="/events/techsummit"
+  actions={[{ label: "Get Tickets", href: "/events/techsummit", variant: "ghost", size: "sm" }]}
 />`.trim()
   },
   "banner-floating-offer": {
@@ -102713,10 +103351,9 @@ var BLOCK_REGISTRY = {
     exampleUsage: `<BannerFloatingOffer
   offerTitle="Black Friday Special"
   offerDescription="Save 60% on annual plans - ends tonight!"
-  buttonText="Claim Offer"
-  buttonLink="/pricing"
+  actions={[{ label: "Claim Offer", href: "/pricing", variant: "secondary", size: "sm" }]}
   dismissible={true}
-  onDismiss={() => console.log('Dismissed')}
+  onOpenChange={(open) => console.log('Visibility:', open)}
 />`.trim()
   },
   // Industries blocks