@opensite/ui 0.4.8 → 0.5.0

package/dist/registry.js

@@ -333,7 +333,8 @@ function PatternBackground({
   );
 }
 var backgroundStyles = {
-  white: "bg-background text-foreground",
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
   gray: "bg-muted/30 text-foreground",
   dark: "bg-foreground text-background",
   transparent: "bg-transparent text-foreground",
@@ -357,11 +358,13 @@ var Section = React13__default.forwardRef(
     children,
     className,
     style,
-    background = "transparent",
+    background = "default",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -388,13 +391,20 @@ var Section = React13__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -41011,7 +41021,14 @@ function HeroFloatingImages({
           "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
           zoomIndicatorClassName
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsx(DynamicIcon, { name: zoomIconName, size: 20, className: "text-gray-900" }) })
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: zoomIconName,
+            size: 20,
+            className: "text-gray-900"
+          }
+        ) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -41135,8 +41152,12 @@ function HeroFloatingImages({
     featuredImageContent,
     secondaryImagesContent
   ]);
-  const hasContent = children !== void 0 && children !== null;
-  const hasGallery = imagesSlot || images && images.length > 0;
+  const hasContent = useMemo(() => {
+    return children !== void 0 && children !== null;
+  }, [children]);
+  const hasGallery = useMemo(() => {
+    return imagesSlot || images && images.length > 0;
+  }, [imagesSlot, images]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -41144,15 +41165,12 @@ function HeroFloatingImages({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn("relative flex items-center justify-center", className),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(
-              "grid gap-12 lg:grid-cols-2 lg:gap-16",
-              gridClassName
-            ),
+            className: cn("grid gap-12 lg:grid-cols-2 lg:gap-16", gridClassName),
             children: [
               hasContent ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
               hasGallery ? galleryContent : null
@@ -49985,6 +50003,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
     // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
@@ -49995,8 +50014,12 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     ),
     // Navigation wrapper classes (for border and shadow)
     navWrapperClasses: cn(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -50143,6 +50166,8 @@ var NavbarDropdownMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -50153,7 +50178,9 @@ var NavbarDropdownMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -50201,7 +50228,7 @@ var NavbarDropdownMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50355,6 +50382,8 @@ var NavbarCenteredMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -50365,7 +50394,9 @@ var NavbarCenteredMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -50414,7 +50445,7 @@ var NavbarCenteredMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50676,11 +50707,12 @@ var NavbarMegaMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses: baseNavWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   const navWrapperClasses = cn(
     "flex w-full items-center justify-between gap-12 py-4",
-    baseNavWrapperClasses,
     layoutVariant === "floatingBar" && "pr-4 pl-8"
   );
   return /* @__PURE__ */ jsx(
@@ -50691,7 +50723,9 @@ var NavbarMegaMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
         {
           className: cn(
@@ -50837,7 +50871,7 @@ var NavbarMegaMenu = ({
             )
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -50931,6 +50965,8 @@ var NavbarEnterpriseMega = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -50945,12 +50981,13 @@ var NavbarEnterpriseMega = ({
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between gap-8",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -51001,7 +51038,7 @@ var NavbarEnterpriseMega = ({
               ] })
             ]
           }
-        ) }) })
+        ) }) }) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -51733,6 +51770,8 @@ var NavbarFeatureGrid = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -51743,111 +51782,119 @@ var NavbarFeatureGrid = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsx(
-          NavigationMenu,
-          {
-            className: cn("hidden lg:block", navigationMenuClassName),
-            children: /* @__PURE__ */ jsxs(NavigationMenuList, { children: [
-              /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Features" }),
-                /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
-                  NavigationMenuLink,
-                  {
-                    href: feature.href,
-                    className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                    children: /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                    ] })
-                  },
-                  index
-                )) }) })
-              ] }),
-              /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Products"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Resources"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Contact"
-                }
-              ) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-4 lg:flex",
-              actionsClassName
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn("flex items-center justify-between", navClassName),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:block", navigationMenuClassName),
+                children: /* @__PURE__ */ jsxs(NavigationMenuList, { children: [
+                  /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+                    /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: "Features" }),
+                    /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
+                      NavigationMenuLink,
+                      {
+                        href: feature.href,
+                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                        children: /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                        ] })
+                      },
+                      index
+                    )) }) })
+                  ] }),
+                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Products"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Resources"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Contact"
+                    }
+                  ) })
+                ] })
+              }
             ),
-            children: renderAuthActions()
-          }
-        ),
-        /* @__PURE__ */ jsxs(Sheet, { children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              onClick: () => {
-              },
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
-            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
-              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
-                /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
-                /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: feature.href,
-                    className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                    children: /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                    ] })
-                  },
-                  index
-                )) }) })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-                /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
-                /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
-                /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "hidden items-center gap-4 lg:flex",
+                  actionsClassName
+                ),
+                children: renderAuthActions()
+              }
+            ),
+            /* @__PURE__ */ jsxs(Sheet, { children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  className: cn("mt-6 flex flex-col gap-4", actionsClassName),
-                  children: renderAuthActions()
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => {
+                  },
+                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
                 }
-              )
+              ) }),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
+                /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
+                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
+                    /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
+                    /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: feature.href,
+                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                        children: /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                        ] })
+                      },
+                      index
+                    )) }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
+                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
+                    /* @__PURE__ */ jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
+                      children: renderAuthActions()
+                    }
+                  )
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] }) }) })
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -51937,6 +51984,8 @@ var NavbarFloatingPill = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -51947,7 +51996,9 @@ var NavbarFloatingPill = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn(
@@ -51955,7 +52006,7 @@ var NavbarFloatingPill = ({
             navWrapperClasses
           ),
           children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
@@ -52033,7 +52084,7 @@ var NavbarFloatingPill = ({
                   ] })
                 ]
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -52108,7 +52159,7 @@ var NavbarFloatingPill = ({
             )
           ]
         }
-      ) }) })
+      ) })
     }
   );
 };
@@ -52424,6 +52475,8 @@ var NavbarPlatformResources = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -52434,156 +52487,164 @@ var NavbarPlatformResources = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(NavigationMenu, { className: cn("min-w-full", navigationMenuClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
-          renderLogo(),
-          /* @__PURE__ */ jsx(
-            NavigationMenuList,
-            {
-              className: cn("hidden lg:flex", navigationMenuListClassName),
-              children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxs(
-                    NavigationMenuItem,
-                    {
-                      children: [
-                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
-                        renderDropdownContent3(link)
-                      ]
-                    },
-                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                  );
-                }
-                if (!link.href) {
-                  return null;
-                }
-                return /* @__PURE__ */ jsx(
-                  NavigationMenuItem,
-                  {
-                    children: /* @__PURE__ */ jsx(
-                      NavigationMenuLink,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        NavigationMenu,
+        {
+          className: cn("min-w-full", navigationMenuClassName),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx(
+                NavigationMenuList,
+                {
+                  className: cn("hidden lg:flex", navigationMenuListClassName),
+                  children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxs(
+                        NavigationMenuItem,
+                        {
+                          children: [
+                            /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
+                            renderDropdownContent3(link)
+                          ]
+                        },
+                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                      );
+                    }
+                    if (!link.href) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      NavigationMenuItem,
                       {
-                        href: link.href,
-                        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-accent-foreground",
-                        children: link.label
-                      }
-                    )
-                  },
-                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "hidden items-center gap-4 lg:flex",
-                actionsClassName
-              ),
-              children: renderActions()
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              "aria-label": "Main Menu",
-              onClick: () => setOpen(!open),
-              children: [
-                !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
-                open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
-              ]
-            }
-          ) })
-        ] }),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-              mobileMenuClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxs(
-                    AccordionItem,
-                    {
-                      value: `menu-${index}`,
-                      className: "border-b-2 border-dashed",
-                      children: [
-                        /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
-                        /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
-                          Pressable,
+                        children: /* @__PURE__ */ jsx(
+                          NavigationMenuLink,
                           {
-                            href: getLinkUrl(item),
-                            className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
-                            children: [
-                              item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
-                                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__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
-                                DynamicIcon,
-                                {
-                                  name: item.iconName,
-                                  size: 16
-                                }
-                              ) : null }),
-                              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-                                item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
-                              ] })
-                            ]
-                          },
-                          `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
-                        )) }) })
-                      ]
-                    },
-                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                  );
-                }
-                if (!link.href) {
-                  return null;
+                            href: link.href,
+                            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-accent-foreground",
+                            children: link.label
+                          }
+                        )
+                      },
+                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                    );
+                  })
                 }
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "border-b-2 border-dashed",
-                    children: /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: link.href,
-                        className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
-                        children: link.label
-                      }
-                    )
-                  },
-                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                );
-              }) }),
+              ),
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn(
-                    "mx-8 mt-auto flex flex-col gap-4 py-12",
+                    "hidden items-center gap-4 lg:flex",
                     actionsClassName
                   ),
                   children: renderActions()
                 }
-              )
-            ]
-          }
-        )
-      ] }) }) })
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  "aria-label": "Main Menu",
+                  onClick: () => setOpen(!open),
+                  children: [
+                    !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
+                    open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                  ]
+                }
+              ) })
+            ] }),
+            open && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
+                  mobileMenuClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxs(
+                        AccordionItem,
+                        {
+                          value: `menu-${index}`,
+                          className: "border-b-2 border-dashed",
+                          children: [
+                            /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                              Pressable,
+                              {
+                                href: getLinkUrl(item),
+                                className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
+                                children: [
+                                  item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+                                    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__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 16
+                                    }
+                                  ) : null }),
+                                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
+                                    item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
+                                  ] })
+                                ]
+                              },
+                              `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
+                            )) }) })
+                          ]
+                        },
+                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                      );
+                    }
+                    if (!link.href) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "border-b-2 border-dashed",
+                        children: /* @__PURE__ */ jsx(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
+                            children: link.label
+                          }
+                        )
+                      },
+                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mx-8 mt-auto flex flex-col gap-4 py-12",
+                        actionsClassName
+                      ),
+                      children: renderActions()
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -52722,6 +52783,8 @@ var NavbarImagePreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -52732,6 +52795,8 @@ var NavbarImagePreview = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -52741,7 +52806,7 @@ var NavbarImagePreview = ({
               containerWrapperClasses
             ),
             ref: navRef,
-            children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
               "div",
               {
                 className: cn(
@@ -52775,7 +52840,7 @@ var NavbarImagePreview = ({
                   ] })
                 ]
               }
-            ) })
+            ) }) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -53104,6 +53169,8 @@ var NavbarDarkIcons = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -53114,13 +53181,14 @@ var NavbarDarkIcons = ({
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -53163,7 +53231,7 @@ var NavbarDarkIcons = ({
               ] })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu3,
           {
@@ -53460,11 +53528,12 @@ var NavbarAnimatedPreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses: baseNavWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   const navWrapperClasses = cn(
     "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
-    baseNavWrapperClasses,
     navigationMenuClassName
   );
   return /* @__PURE__ */ jsx(
@@ -53478,7 +53547,9 @@ var NavbarAnimatedPreview = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -53528,7 +53599,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -54017,6 +54088,8 @@ var NavbarMultiColumnGroups = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -54027,8 +54100,10 @@ var NavbarMultiColumnGroups = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -54083,7 +54158,7 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu5,
           {
@@ -54325,6 +54400,8 @@ var NavbarSidebarMobile = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -54335,10 +54412,15 @@ var NavbarSidebarMobile = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -54460,7 +54542,7 @@ var NavbarSidebarMobile = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -54632,6 +54714,8 @@ var NavbarTransparentOverlay = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -54642,16 +54726,19 @@ var NavbarTransparentOverlay = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx(
           "nav",
           {
             className: cn(
               "fixed top-0 left-0 z-50 w-full transition-all duration-300",
               isScrolled ? "bg-background/95 shadow-sm backdrop-blur-sm" : "bg-transparent",
+              navWrapperClasses,
               navClassName
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+            children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
               /* @__PURE__ */ jsx(
                 NavigationMenu,
@@ -54709,9 +54796,9 @@ var NavbarTransparentOverlay = ({
                   ]
                 }
               )
-            ] })
+            ] }) })
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -54832,6 +54919,8 @@ var NavbarEducationPlatform = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -54845,11 +54934,16 @@ var NavbarEducationPlatform = ({
       ),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
-            className: cn("flex items-center justify-between py-4", navWrapperClasses, navClassName),
+            className: cn(
+              "flex items-center justify-between py-4",
+              navClassName
+            ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-9", children: [
                 renderLogo(),
@@ -55040,7 +55134,7 @@ var NavbarEducationPlatform = ({
               )
             ]
           }
-        ) }) }),
+        ) }) }) }),
         isOpen && /* @__PURE__ */ jsx(
           "div",
           {
@@ -55336,6 +55430,8 @@ var NavbarStickyCompact = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55350,7 +55446,9 @@ var NavbarStickyCompact = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn(
@@ -55406,7 +55504,7 @@ var NavbarStickyCompact = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -55532,6 +55630,8 @@ var NavbarSearchFocused = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55542,10 +55642,15 @@ var NavbarSearchFocused = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName),
+          className: cn(
+            "flex items-center gap-4 py-3 lg:gap-8",
+            navClassName
+          ),
           children: [
             renderLogo(),
             /* @__PURE__ */ jsx(
@@ -55610,7 +55715,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -55812,6 +55917,8 @@ var NavbarSimpleLinks = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55822,56 +55929,67 @@ var NavbarSimpleLinks = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsx(
-          NavigationMenu,
-          {
-            className: cn("hidden lg:block", navigationMenuClassName),
-            children: /* @__PURE__ */ jsxs(
-              NavigationMenuList,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn(
+            "flex items-center justify-between",
+            navClassName
+          ),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:block", navigationMenuClassName),
+                children: /* @__PURE__ */ jsxs(
+                  NavigationMenuList,
+                  {
+                    ref: menuRef,
+                    className: cn(
+                      "flex items-center gap-6 rounded-4xl px-8 py-3",
+                      menuListClassName
+                    ),
+                    children: [
+                      renderNavItems(),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: indicatorRef,
+                          className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                          children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MobileNav,
+              {
+                navItems: navItems ?? [],
+                activeItem,
+                setActiveItem,
+                actions,
+                actionsSlot
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                ref: menuRef,
                 className: cn(
-                  "flex items-center gap-6 rounded-4xl px-8 py-3",
-                  menuListClassName
+                  "hidden items-center gap-2 lg:flex",
+                  actionsClassName
                 ),
-                children: [
-                  renderNavItems(),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ref: indicatorRef,
-                      className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                      children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                    }
-                  )
-                ]
+                children: renderActions()
               }
             )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MobileNav,
-          {
-            navItems: navItems ?? [],
-            activeItem,
-            setActiveItem,
-            actions,
-            actionsSlot
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-2 lg:flex",
-              actionsClassName
-            ),
-            children: renderActions()
-          }
-        )
-      ] }) }) })
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -55988,6 +56106,8 @@ var NavbarSplitCta = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -55998,10 +56118,15 @@ var NavbarSplitCta = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -56111,7 +56236,7 @@ var NavbarSplitCta = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56203,6 +56328,8 @@ var NavbarIconLinks = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -56213,10 +56340,15 @@ var NavbarIconLinks = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-3", navWrapperClasses, navClassName),
+          className: cn(
+            "flex items-center justify-between py-3",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
               renderLogo(),
@@ -56310,7 +56442,7 @@ var NavbarIconLinks = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56498,6 +56630,8 @@ var NavbarTabbedSections = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -56508,10 +56642,15 @@ var NavbarTabbedSections = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -56561,7 +56700,7 @@ var NavbarTabbedSections = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56654,6 +56793,8 @@ var NavbarFullscreenMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -56664,13 +56805,14 @@ var NavbarFullscreenMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex items-center justify-between px-6 py-6",
-              navWrapperClasses,
               headerClassName
             ),
             children: [
@@ -56726,7 +56868,7 @@ var NavbarFullscreenMenu = ({
             ] })
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -83860,7 +84002,7 @@ function StatsSimpleGrid({
   statValueClassName,
   statLabelClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -83880,15 +84022,17 @@ function StatsSimpleGrid({
         index
       );
     });
-  };
-  const renderStats = () => {
+  }, [actionsSlot, actions]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("w-full", statItemClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
+      stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
     ] }, index));
-  };
+  }, [statsSlot, stats, statItemClassName, statValueClassName, statLabelClassName]);
+  const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
+  const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -83899,11 +84043,11 @@ function StatsSimpleGrid({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start text-left", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: actionsContent })
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16", statsClassName), children: renderStats() })
+        hasStatsContent && /* @__PURE__ */ jsx("div", { className: cn("grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -83930,7 +84074,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsx(
@@ -83941,8 +84085,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -83951,9 +84095,9 @@ function StatsIconCards({
         className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxs(
+            stat.label && /* @__PURE__ */ jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.value && /* @__PURE__ */ jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
+            stat.growth && /* @__PURE__ */ jsxs(
               "p",
               {
                 className: cn(
@@ -83980,7 +84124,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -83991,11 +84136,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -84007,7 +84152,7 @@ function StatsTimelineTabs({
   description,
   periods,
   tabsSlot,
-  defaultPeriod = "monthly",
+  defaultPeriod,
   background = "white",
   spacing = "lg",
   pattern,
@@ -84024,15 +84169,16 @@ function StatsTimelineTabs({
   statsGridClassName,
   statCardClassName
 }) {
-  const renderBadge = () => {
+  const effectiveDefaultPeriod = defaultPeriod || (periods && periods.length > 0 ? periods[0].id : "");
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-2", badgeClassName), children: badge });
-  };
-  const renderTabs = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
+    return /* @__PURE__ */ jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
       /* @__PURE__ */ jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
       periods.map((period) => /* @__PURE__ */ jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ 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;
@@ -84046,7 +84192,7 @@ function StatsTimelineTabs({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                stat.label && /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: stat.label }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsx(
                     DynamicIcon,
@@ -84059,7 +84205,7 @@ function StatsTimelineTabs({
                   /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+              stat.value && /* @__PURE__ */ jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
               /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center", children: [
                 /* @__PURE__ */ jsxs(
                   "div",
@@ -84082,7 +84228,7 @@ function StatsTimelineTabs({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                stat.previousLabel && /* @__PURE__ */ jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                   "vs ",
                   stat.previousLabel
                 ] })
@@ -84093,7 +84239,9 @@ function StatsTimelineTabs({
         );
       }) }) }, period.id))
     ] });
-  };
+  }, [tabsSlot, periods, effectiveDefaultPeriod, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
+  const hasTabsContent = !!(tabsSlot || periods && periods.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84104,21 +84252,21 @@ function StatsTimelineTabs({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderTabs()
+        hasTabsContent && tabsContent
       ] }) })
     }
   );
 }
 function StatsPrimarySecondary({
-  primaryValue = "92%",
-  primaryBadge = "+7% this month",
+  primaryValue,
+  primaryBadge,
   primaryBadgeSlot,
-  primaryDescription = "of U.S. adults have bought from businesses using our platform",
+  primaryDescription,
   primarySlot,
   secondaryStats,
   secondaryStatsSlot,
@@ -84137,16 +84285,17 @@ function StatsPrimarySecondary({
   secondaryValueClassName,
   secondaryLabelClassName
 }) {
-  const renderPrimaryBadge = () => {
+  const renderPrimaryBadge = useCallback(() => {
     if (primaryBadgeSlot) return primaryBadgeSlot;
     if (!primaryBadge) return null;
     return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: cn("ml-2 gap-1", primaryBadgeClassName), children: [
       /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
       primaryBadge
     ] });
-  };
-  const renderPrimary = () => {
+  }, [primaryBadgeSlot, primaryBadge, primaryBadgeClassName]);
+  const primaryContent = useMemo(() => {
     if (primarySlot) return primarySlot;
+    if (!primaryValue) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", primaryClassName), children: /* @__PURE__ */ jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
       /* @__PURE__ */ jsxs("p", { className: cn("text-6xl font-bold leading-10", primaryValueClassName), children: [
         primaryValue,
@@ -84154,15 +84303,17 @@ function StatsPrimarySecondary({
       ] }),
       primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-muted-foreground sm:mt-3", primaryDescriptionClassName), children: primaryDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
     ] }) });
-  };
-  const renderSecondaryStats = () => {
+  }, [primarySlot, primaryValue, primaryClassName, primaryValueClassName, primaryDescription, primaryDescriptionClassName, renderPrimaryBadge]);
+  const secondaryStatsContent = useMemo(() => {
     if (secondaryStatsSlot) return secondaryStatsSlot;
     if (!secondaryStats || secondaryStats.length === 0) return null;
     return secondaryStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: stat.className, children: [
-      /* @__PURE__ */ jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
+      stat.label && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
     ] }, index));
-  };
+  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  const hasPrimaryContent = !!(primarySlot || primaryValue);
+  const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84173,8 +84324,8 @@ function StatsPrimarySecondary({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("grid items-center gap-6 lg:grid-cols-12 lg:gap-12", containerClassName), children: [
-        renderPrimary(),
-        /* @__PURE__ */ jsx("div", { className: cn("relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", secondaryClassName), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: renderSecondaryStats() }) })
+        hasPrimaryContent && primaryContent,
+        hasSecondaryContent && /* @__PURE__ */ jsx("div", { className: cn("relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12", secondaryClassName), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent }) })
       ] })
     }
   );
@@ -84188,9 +84339,9 @@ function StatsGrowthTimeline({
   milestonesSlot,
   currentStats,
   currentStatsSlot,
-  currentStatsHeading = "Where We Are Today",
-  futureHeading = "The Future Is Even Brighter",
-  futureDescription = "We're just getting started. Our roadmap includes expansion to new markets, enhanced product offerings, and continued innovation to serve our growing customer base.",
+  currentStatsHeading,
+  futureHeading,
+  futureDescription,
   futureSlot,
   actions,
   actionsSlot,
@@ -84210,12 +84361,12 @@ function StatsGrowthTimeline({
   currentStatsClassName,
   futureClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderMilestoneIcon = (milestone) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderMilestoneIcon = useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(
@@ -84226,8 +84377,8 @@ function StatsGrowthTimeline({
         className: "text-primary"
       }
     ) });
-  };
-  const renderMilestones = () => {
+  }, []);
+  const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-24", timelineClassName), children: [
@@ -84243,14 +84394,14 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
+              milestone.year && /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-9 w-20 items-center justify-center rounded-full bg-muted text-sm font-semibold", children: milestone.year }),
               milestone.title && (typeof milestone.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: milestone.description })),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
+              milestone.metric && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
+                  milestone.metric.label && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
             ] }),
@@ -84260,19 +84411,19 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  };
-  const renderCurrentStats = () => {
+  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  const currentStatsContent = useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName), children: [
       currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("text-center", stat.className), children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+        stat.label && /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
       ] }, index)) })
     ] });
-  };
-  const renderActions = () => {
+  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -84289,16 +84440,17 @@ function StatsGrowthTimeline({
       },
       index
     ));
-  };
-  const renderFuture = () => {
+  }, [actionsSlot, actions]);
+  const futureContent = useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84309,14 +84461,14 @@ function StatsGrowthTimeline({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
-        renderMilestones(),
-        renderCurrentStats(),
-        renderFuture()
+        milestonesContent,
+        currentStatsContent,
+        futureContent
       ] })
     }
   );
@@ -84624,7 +84776,7 @@ function StatsCircularProgress({
   description,
   categories,
   categoriesSlot,
-  defaultCategory = "business",
+  defaultCategory,
   background = "white",
   spacing = "lg",
   pattern,
@@ -84643,13 +84795,14 @@ function StatsCircularProgress({
   statLabelClassName,
   statInfoClassName
 }) {
-  const [category, setCategory] = React13.useState(defaultCategory);
-  const renderBadge = () => {
+  const effectiveDefaultCategory = defaultCategory || (categories && categories.length > 0 ? categories[0].id : "");
+  const [category, setCategory] = React13.useState(effectiveDefaultCategory);
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderCategories = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -84686,15 +84839,16 @@ function StatsCircularProgress({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
+              stat.label && /* @__PURE__ */ jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
+              stat.info && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
             ]
           },
           index
         )) }) }, cat.id))
       ] })
     ] });
-  };
+  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84705,12 +84859,12 @@ function StatsCircularProgress({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderCategories()
+        categoriesContent
       ] })
     }
   );
@@ -84735,7 +84889,7 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx(
@@ -84748,8 +84902,8 @@ function StatsCardGroup({
         children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
       }
     );
-  };
-  const renderAvatars = (stat) => {
+  }, [statIconClassName]);
+  const renderAvatars = useCallback((stat) => {
     if (!stat.showAvatars) return null;
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -84772,8 +84926,8 @@ function StatsCardGroup({
         avatars.length - 4
       ] })
     ] });
-  };
-  const renderStats = () => {
+  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxs(
@@ -84796,13 +84950,13 @@ function StatsCardGroup({
               children: stat.value
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
+          stat.label && /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84812,7 +84966,7 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: renderStats() }) }) })
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
     }
   );
 }
@@ -84849,19 +85003,19 @@ function AnimatedStatItem({
   iconClassName
 }) {
   const count = useAnimatedCounter(stat.value, duration, isVisible);
-  const renderIcon = () => {
+  const iconContent = useMemo(() => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", iconClassName), children: /* @__PURE__ */ jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" }) });
-  };
+  }, [stat.iconSlot, stat.icon, iconClassName]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    renderIcon(),
+    iconContent,
     /* @__PURE__ */ jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
       stat.prefix,
       count,
       stat.suffix
     ] }),
-    /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+    stat.label && /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
   ] });
 }
 function StatsAnimatedCounter({
@@ -84902,7 +85056,8 @@ function StatsAnimatedCounter({
     }
     return () => observer.disconnect();
   }, []);
-  const renderStats = () => {
+  const hasHeaderContent = !!(heading || description);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -84917,7 +85072,7 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -84928,11 +85083,11 @@ function StatsAnimatedCounter({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -85035,12 +85190,12 @@ function StatsNumberTicker({
     }
     return () => observer.disconnect();
   }, []);
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStats = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsx(
@@ -85056,7 +85211,8 @@ function StatsNumberTicker({
       },
       index
     )) });
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -85067,12 +85223,12 @@ function StatsNumberTicker({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderStats()
+        statsContent
       ] })
     }
   );
@@ -85099,8 +85255,9 @@ function StatsMilestoneSidebar({
   milestoneTitleClassName,
   milestoneDescriptionClassName
 }) {
-  const renderSidebar = () => {
+  const sidebarContent = useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
+    if (!heading && !description) return null;
     return /* @__PURE__ */ jsxs("div", { className: "lg:sticky lg:top-24", children: [
       heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
         "h2",
@@ -85123,8 +85280,8 @@ function StatsMilestoneSidebar({
         }
       ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  };
-  const renderMilestones = () => {
+  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  const milestonesContent = useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-8", milestonesClassName), children: milestones.map((milestone, index) => /* @__PURE__ */ jsxs(
@@ -85137,7 +85294,7 @@ function StatsMilestoneSidebar({
         ),
         children: [
           /* @__PURE__ */ jsx("div", { className: "absolute -left-[9px] top-0 h-4 w-4 rounded-full border-2 border-primary bg-background" }),
-          /* @__PURE__ */ jsx(
+          milestone.year && /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
@@ -85171,7 +85328,9 @@ function StatsMilestoneSidebar({
       },
       index
     )) });
-  };
+  }, [milestonesSlot, milestones, milestonesClassName, milestoneItemClassName, milestoneYearClassName, milestoneTitleClassName, milestoneDescriptionClassName]);
+  const hasSidebarContent = !!(sidebarSlot || heading || description);
+  const hasMilestonesContent = !!(milestonesSlot || milestones && milestones.length > 0);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -85182,8 +85341,8 @@ function StatsMilestoneSidebar({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: renderSidebar() }),
-        /* @__PURE__ */ jsx("div", { className: "lg:col-span-8", children: renderMilestones() })
+        hasSidebarContent && /* @__PURE__ */ jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
+        hasMilestonesContent && /* @__PURE__ */ jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
       ] }) })
     }
   );
@@ -85232,12 +85391,12 @@ function StatsBarComparison({
     }
     return () => observer.disconnect();
   }, [animate]);
-  const renderBadge = () => {
+  const badgeContent = useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderComparisons = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const comparisonsContent = useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
     if (!comparisons || comparisons.length === 0) return null;
     return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border bg-card p-6", group.className, groupCardClassName), children: [
@@ -85262,7 +85421,8 @@ function StatsBarComparison({
         ) })
       ] }, barIndex)) })
     ] }, groupIndex));
-  };
+  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -85273,12 +85433,12 @@ function StatsBarComparison({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: renderComparisons() })
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
       ] })
     }
   );