@opensite/ui 0.4.7 → 0.4.8

package/dist/registry.cjs

@@ -397,7 +397,7 @@ var Section = React13__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
@@ -40983,88 +40983,200 @@ function HeroSplitIconCards({
     }
   );
 }
-var Swirls = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "absolute left-0 top-0 -translate-x-1/3 -translate-y-1/3 text-primary/10",
-      width: "600",
-      height: "600",
-      viewBox: "0 0 600 600",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M515.266 181.33C377.943 51.564 128.537 136.256 50.8123 293.565C-26.9127 450.874 125.728 600 125.728 600",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "absolute bottom-0 right-0 translate-x-1/4 translate-y-1/4 text-primary/10",
-      width: "700",
-      height: "700",
-      viewBox: "0 0 700 700",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M26.8838 528.274C193.934 689.816 480.051 637.218 594.397 451.983C708.742 266.748 543.953 2.22235 543.953 2.22235",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  )
-] });
 function HeroFloatingImages({
-  heading,
-  description,
+  children,
   images,
   imagesSlot,
-  showSwirls = true,
-  backgroundSlot,
-  background = "white",
-  spacing = "lg",
+  zoomIconName = "lucide/zoom-in",
+  enableLightbox = true,
+  background,
+  spacing,
   pattern,
   patternOpacity,
   className,
+  gridClassName,
   contentClassName,
-  headingClassName,
-  descriptionClassName,
-  imagesClassName,
+  galleryClassName,
+  featuredImageClassName,
+  secondaryImageClassName,
+  imageClassName,
+  zoomIndicatorClassName,
   optixFlowConfig
 }) {
-  const renderBackground = () => {
-    if (backgroundSlot) return backgroundSlot;
-    if (!showSwirls) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0", children: /* @__PURE__ */ jsxRuntime.jsx(Swirls, {}) });
-  };
-  const renderImages = () => {
+  const [lightboxOpen, setLightboxOpen] = React13.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React13.useState(0);
+  const { featuredImage, secondaryImages } = React13.useMemo(() => {
+    if (!images || images.length === 0) {
+      return { featuredImage: void 0, secondaryImages: [] };
+    }
+    const featured = images.find((img) => img.featured) ?? images[0];
+    const secondary = images.filter((img) => img !== featured);
+    return { featuredImage: featured, secondaryImages: secondary };
+  }, [images]);
+  const lightboxItems = React13.useMemo(() => {
+    if (!images || images.length === 0) return [];
+    const orderedImages = featuredImage ? [featuredImage, ...secondaryImages] : secondaryImages;
+    return orderedImages.map((img, index) => ({
+      id: `hero-gallery-${index}-${img.src.slice(-12)}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt
+    }));
+  }, [images, featuredImage, secondaryImages]);
+  const handleImageClick = React13.useCallback(
+    (index) => {
+      if (!enableLightbox) return;
+      setLightboxIndex(index);
+      setLightboxOpen(true);
+    },
+    [enableLightbox]
+  );
+  const handleLightboxClose = React13.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
+  const handleImageKeyDown = React13.useCallback(
+    (e, index) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleImageClick(index);
+      }
+    },
+    [handleImageClick]
+  );
+  const zoomIndicator = React13.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+          zoomIndicatorClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20, className: "text-gray-900" }) })
+      }
+    ),
+    [zoomIconName, zoomIndicatorClassName]
+  );
+  const featuredImageContent = React13.useMemo(() => {
+    if (!featuredImage) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "group relative col-span-2 aspect-[4/3] overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
+          featuredImageClassName
+        ),
+        onClick: () => handleImageClick(0),
+        onKeyDown: (e) => handleImageKeyDown(e, 0),
+        "aria-label": `View ${featuredImage.alt} in lightbox`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: featuredImage.src,
+              alt: featuredImage.alt,
+              className: cn(
+                "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105",
+                imageClassName,
+                featuredImage.className
+              ),
+              optixFlowConfig
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+          enableLightbox && zoomIndicator
+        ]
+      }
+    );
+  }, [
+    featuredImage,
+    featuredImageClassName,
+    imageClassName,
+    optixFlowConfig,
+    enableLightbox,
+    zoomIndicator,
+    handleImageClick,
+    handleImageKeyDown
+  ]);
+  const secondaryImagesContent = React13.useMemo(() => {
+    if (secondaryImages.length === 0) return null;
+    return secondaryImages.map((image, index) => {
+      const lightboxIndex2 = index + 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "group relative aspect-square overflow-hidden rounded-2xl",
+            secondaryImageClassName
+          ),
+          onClick: () => handleImageClick(lightboxIndex2),
+          onKeyDown: (e) => handleImageKeyDown(e, lightboxIndex2),
+          "aria-label": `View ${image.alt} in lightbox`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/20" }),
+            enableLightbox && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                  zoomIndicatorClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: zoomIconName,
+                    size: 16,
+                    className: "text-gray-900"
+                  }
+                ) })
+              }
+            )
+          ]
+        },
+        `secondary-${index}-${image.src.slice(-8)}`
+      );
+    });
+  }, [
+    secondaryImages,
+    secondaryImageClassName,
+    imageClassName,
+    optixFlowConfig,
+    enableLightbox,
+    zoomIconName,
+    zoomIndicatorClassName,
+    handleImageClick,
+    handleImageKeyDown
+  ]);
+  const galleryContent = React13.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: image.src,
-        alt: image.alt,
-        className: cn("absolute w-32 h-32 md:w-48 md:h-48 rounded-lg shadow-lg object-contain", image.className),
-        style: { animationDelay: `${index * 300}ms` },
-        optixFlowConfig
-      },
-      `${image.alt}-${index}`
-    )) });
-  };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4", galleryClassName), children: [
+      featuredImageContent,
+      secondaryImagesContent
+    ] });
+  }, [
+    imagesSlot,
+    images,
+    galleryClassName,
+    featuredImageContent,
+    secondaryImagesContent
+  ]);
+  const hasContent = children !== void 0 && children !== null;
+  const hasGallery = imagesSlot || images && images.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -41072,53 +41184,36 @@ function HeroFloatingImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "relative flex min-h-[60vh] items-center justify-center overflow-hidden py-20 md:min-h-[80vh] md:py-32",
-        className
-      ),
+      className,
       children: [
-        renderBackground(),
-        renderImages(),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "relative z-20 mx-auto max-w-2xl px-4 text-center",
-              contentClassName
+              "grid gap-12 lg:grid-cols-2 lg:gap-16",
+              gridClassName
             ),
             children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "text-4xl font-bold tracking-tight text-primary sm:text-5xl md:text-6xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-6 text-lg leading-8 text-muted-foreground",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasGallery ? galleryContent : null
             ]
           }
-        )
+        ),
+        enableLightbox && lightboxOpen && lightboxItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            onClose: handleLightboxClose,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              counter: true,
+              closeButton: true,
+              captions: true
+            }
+          }
+        ) : null
       ]
     }
   );
@@ -49707,7 +49802,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4",
         className
       ),
       ...props
@@ -49728,7 +49823,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max gap-1 items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -49743,7 +49838,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
@@ -49807,7 +49901,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
+        "group inline-flex h-auto w-max items-center justify-center rounded-md bg-transparent px-3 py-2 text-sm font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
         className
       ),
       ...props
@@ -49921,20 +50015,21 @@ function SheetDescription({
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
   const isFloatingBar = layoutVariant === "floatingBar";
   const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  const isContainerizedLinks = layoutVariant === "fullScreenContainerizedLinks";
   return {
-    // Section wrapper classes
+    // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
       isFloatingBar ? "sticky top-4" : "top-0",
       customClasses?.className
     ),
-    // Outer container wrapper (only for floating bar)
+    // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
-    // Inner container classes
+    // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
     innerContainerClasses: cn(
-      !isFloatingBar && !isFullWidthLinks && "container",
+      isContainerizedLinks && "container",
       isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
       customClasses?.containerClassName
     ),
@@ -49972,14 +50067,7 @@ var renderMenuItem = (item, optixFlowConfig) => {
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "bg-popover text-popover-foreground", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink, { item: subItem, optixFlowConfig }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    NavigationMenuLink,
-    {
-      href: item.url,
-      className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground",
-      children: item.title
-    }
-  ) }, item.title);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem = (item, optixFlowConfig) => {
   if (item.items) {
@@ -50198,14 +50286,7 @@ var renderMenuItem2 = (item) => {
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "origin-top-center relative top-11 w-full overflow-hidden rounded-md border bg-popover shadow data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:absolute md:left-1/2 md:w-80 md:-translate-x-1/2", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink2, { item: subItem }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    NavigationMenuLink,
-    {
-      href: item.url,
-      className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground",
-      children: item.title
-    }
-  ) }, item.title);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem2 = (item) => {
   if (item.items) {
@@ -50452,11 +50533,11 @@ var DesktopMenuItem = ({
   if (layout === "simple-grid" && link.links) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenuLink,
         {
           href: getLinkUrl(item),
-          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
+          className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
           children: [
             item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
@@ -50468,7 +50549,7 @@ var DesktopMenuItem = ({
               }
             ) }),
             !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
             ] })
@@ -50481,13 +50562,22 @@ var DesktopMenuItem = ({
   if (layout === "list-with-icons" && link.links) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenuLink,
         {
           href: getLinkUrl(item),
-          className: "flex items-start gap-3 rounded-lg p-3 hover:bg-muted",
+          className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
           children: [
-            (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
+            item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: item.image,
+                alt: typeof item.label === "string" ? item.label : "Menu item",
+                className: "h-full w-full object-cover object-center",
+                optixFlowConfig
+              }
+            ) }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
@@ -50498,14 +50588,7 @@ var DesktopMenuItem = ({
     ] }, `desktop-menu-item-${index}`);
   }
   if (link.href) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      NavigationMenuLink,
-      {
-        href: link.href,
-        className: "inline-flex h-auto items-center justify-center px-0 py-0 text-sm font-normal text-foreground/60 transition-colors hover:text-foreground focus:text-foreground",
-        children: link.label
-      }
-    ) }, `desktop-menu-item-${index}`);
+    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: link.href, children: link.label }) }, `desktop-menu-item-${index}`);
   }
   return null;
 };
@@ -50698,14 +50781,7 @@ var NavbarMegaMenu = ({
                     if (!link.href) {
                       return null;
                     }
-                    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                      NavigationMenuLink,
-                      {
-                        href: link.href,
-                        className: "inline-flex h-auto items-center justify-center px-0 py-0 text-sm font-normal text-foreground/60 transition-colors hover:text-foreground focus:text-foreground",
-                        children: link.label
-                      }
-                    ) }, `menu-link-${index}`);
+                    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: link.href, children: link.label }) }, `menu-link-${index}`);
                   })
                 }
               ),
@@ -55735,7 +55811,10 @@ var NavbarSimpleLinks = ({
       {
         "data-nav-item": item.name,
         onClick: () => setActiveItem(item.name),
-        className: `relative cursor-pointer rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted ${activeItem === item.name ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+        className: cn(
+          "cursor-pointer font-medium",
+          activeItem === item.name && "text-foreground"
+        ),
         children: item.name
       }
     ) }) }, item.name));
@@ -84289,12 +84368,16 @@ function StatsImpactGrid({
   description,
   stats,
   statsSlot,
-  comparisonHeading = "How Does This Compare?",
-  comparisonDescription = "Our platform delivers results that are 4x better than industry averages across all key performance indicators.",
-  industryAverage = "24%",
-  platformValue = "89%",
+  comparisonHeading,
+  comparisonDescription,
+  baselineValue,
+  targetValue,
+  baselineLabel,
+  targetLabel,
+  baselinePercent,
+  targetPercent,
   comparisonSlot,
-  ctaHeading = "Ready to See These Results in Your Business?",
+  ctaHeading,
   actions,
   ctaSlot,
   background = "white",
@@ -84313,12 +84396,12 @@ function StatsImpactGrid({
   comparisonClassName,
   ctaClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStatIcon = (stat) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderStatIcon = React13.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -84329,45 +84412,88 @@ function StatsImpactGrid({
         className: stat.iconColor || "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, []);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3", statsGridClassName), children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("overflow-hidden border p-0", stat.className, statCardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
-      renderStatIcon(stat),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
-        stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
-        stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
-      stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
-    ] }) }, stat.id)) });
-  };
-  const renderComparison = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+          statsGridClassName
+        ),
+        children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
+          Card,
+          {
+            className: cn(
+              "overflow-hidden border p-0",
+              stat.className,
+              statCardClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 md:p-8", children: [
+              renderStatIcon(stat),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-end", children: [
+                stat.prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 mr-1 text-2xl font-bold", children: stat.prefix }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-4xl font-bold tracking-tight md:text-5xl", children: stat.value }),
+                stat.suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 ml-1 text-2xl font-bold", children: stat.suffix })
+              ] }),
+              stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl font-semibold", children: stat.label }),
+              stat.description && (typeof stat.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: stat.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: stat.description }))
+            ] })
+          },
+          stat.id
+        ))
+      }
+    );
+  }, [statsSlot, stats, statsGridClassName, statCardClassName, renderStatIcon]);
+  const hasComparisonContent = React13.useMemo(() => {
+    return !!(comparisonHeading || comparisonDescription || baselineValue || targetValue || baselineLabel || targetLabel);
+  }, [
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel
+  ]);
+  const comparisonContent = React13.useMemo(() => {
     if (comparisonSlot) return comparisonSlot;
-    if (!comparisonHeading && !comparisonDescription && !industryAverage && !platformValue) return null;
+    if (!hasComparisonContent) return null;
+    const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 rounded-xl bg-muted p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2 md:gap-16", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: comparisonHeading })),
         comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: comparisonDescription })),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[24%] bg-muted-foreground" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Industry" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-muted-foreground",
+                style: { width: `${baselinePercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-[89%] bg-primary" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: "Our Platform" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full bg-primary",
+                style: { width: `${targetPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "INDUSTRY AVERAGE" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: industryAverage })
+      (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:border-l md:pl-16 md:text-left", children: [
+        baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm uppercase text-muted-foreground", children: baselineLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+        baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center md:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
             name: "lucide/arrow-up-right",
@@ -84375,40 +84501,65 @@ function StatsImpactGrid({
             className: "text-primary"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-primary", children: "OUR PLATFORM" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: platformValue })
+        targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium uppercase text-primary", children: targetLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
         ] })
       ] })
     ] }) });
-  };
-  const renderActions = () => {
+  }, [
+    comparisonSlot,
+    hasComparisonContent,
+    comparisonHeading,
+    comparisonDescription,
+    baselineValue,
+    targetValue,
+    baselineLabel,
+    targetLabel,
+    baselinePercent,
+    targetPercent,
+    comparisonClassName
+  ]);
+  const actionsContent = React13.useMemo(() => {
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant || "default",
-        size: "lg",
-        asButton: true,
-        className: index === 0 ? "inline-flex items-center justify-center gap-2" : void 0,
-        children: [
-          action.label,
-          index === 0 && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      },
-      index
-    )) });
-  };
-  const renderCta = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-4", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          size: "lg",
+          asButton: true,
+          className: cn(
+            "inline-flex items-center justify-center gap-2",
+            actionClassName
+          ),
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        action.href || index
+      );
+    }) });
+  }, [actions]);
+  const ctaContent = React13.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", ctaClassName), children: [
       ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6", children: ctaHeading })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -84419,16 +84570,34 @@ function StatsImpactGrid({
       patternClassName,
       className: cn("relative overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 to-background" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-br from-primary/5 to-background" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-            renderBadge(),
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
+          hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+            badgeContent,
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "mb-4 text-3xl font-bold md:text-5xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto max-w-3xl text-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
           ] }),
-          renderStats(),
-          renderComparison(),
-          renderCta()
+          statsContent,
+          comparisonContent,
+          ctaContent
         ] })
       ]
     }
@@ -84609,14 +84778,16 @@ function StatsCardGroup({
   const renderIcon = (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,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        name: stat.icon,
-        size: 24,
-        className: "text-primary"
+        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" })
       }
-    ) });
+    );
   };
   const renderAvatars = (stat) => {
     if (!stat.showAvatars) return null;
@@ -84628,7 +84799,10 @@ function StatsCardGroup({
         {
           src: avatar.src,
           alt: avatar.alt,
-          className: cn("h-8 w-8 rounded-full border-2 border-background object-cover", avatar.className),
+          className: cn(
+            "h-8 w-8 rounded-full border-2 border-background object-cover",
+            avatar.className
+          ),
           optixFlowConfig
         },
         avatarIndex
@@ -84652,7 +84826,16 @@ function StatsCardGroup({
         ),
         children: [
           renderIcon(stat),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-3xl font-bold md:text-4xl", statValueClassName), children: stat.value }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mb-2 text-3xl font-bold md:text-4xl",
+                statValueClassName
+              ),
+              children: stat.value
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
@@ -84940,8 +85123,8 @@ function StatsMilestoneSidebar({
   sidebarSlot,
   milestones,
   milestonesSlot,
-  background = "white",
-  spacing = "lg",
+  background,
+  spacing,
   pattern,
   patternOpacity,
   patternClassName,
@@ -84959,8 +85142,26 @@ function StatsMilestoneSidebar({
   const renderSidebar = () => {
     if (sidebarSlot) return sidebarSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:sticky lg:top-24", 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("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+      heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          className: cn(
+            "mb-4 text-3xl font-bold md:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+      description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: cn(
+            "text-lg text-muted-foreground",
+            descriptionClassName
+          ),
+          children: description
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
     ] });
   };
   const renderMilestones = () => {
@@ -84976,9 +85177,36 @@ function StatsMilestoneSidebar({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-[9px] top-0 h-4 w-4 rounded-full border-2 border-primary bg-background" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3 inline-flex rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary", milestoneYearClassName), children: milestone.year }),
-          milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-bold", milestoneTitleClassName), children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
-          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", milestoneDescriptionClassName), children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mb-3 inline-flex rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary",
+                milestoneYearClassName
+              ),
+              children: milestone.year
+            }
+          ),
+          milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn(
+                "mb-2 text-xl font-bold",
+                milestoneTitleClassName
+              ),
+              children: milestone.title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", milestoneTitleClassName), children: milestone.title })),
+          milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-muted-foreground",
+                milestoneDescriptionClassName
+              ),
+              children: milestone.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: milestoneDescriptionClassName, children: milestone.description }))
         ]
       },
       index