@opensite/ui 0.4.8 → 0.4.9

package/dist/registry.cjs

@@ -402,6 +402,8 @@ var Section = React13__namespace.default.forwardRef(
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -428,13 +430,20 @@ var Section = React13__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -41051,7 +41060,14 @@ function HeroFloatingImages({
           "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
           zoomIndicatorClassName
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: zoomIconName, size: 20, className: "text-gray-900" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-white/90 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: zoomIconName,
+            size: 20,
+            className: "text-gray-900"
+          }
+        ) })
       }
     ),
     [zoomIconName, zoomIndicatorClassName]
@@ -41175,8 +41191,12 @@ function HeroFloatingImages({
     featuredImageContent,
     secondaryImagesContent
   ]);
-  const hasContent = children !== void 0 && children !== null;
-  const hasGallery = imagesSlot || images && images.length > 0;
+  const hasContent = React13.useMemo(() => {
+    return children !== void 0 && children !== null;
+  }, [children]);
+  const hasGallery = React13.useMemo(() => {
+    return imagesSlot || images && images.length > 0;
+  }, [imagesSlot, images]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -41184,15 +41204,12 @@ function HeroFloatingImages({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn("relative flex items-center justify-center", className),
       children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
               hasGallery ? galleryContent : null
@@ -50025,6 +50042,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)
@@ -50035,8 +50053,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
   };
@@ -50183,6 +50205,8 @@ var NavbarDropdownMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -50193,7 +50217,9 @@ var NavbarDropdownMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
@@ -50241,7 +50267,7 @@ var NavbarDropdownMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50395,6 +50421,8 @@ var NavbarCenteredMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -50405,7 +50433,9 @@ var NavbarCenteredMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
@@ -50454,7 +50484,7 @@ var NavbarCenteredMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -50716,11 +50746,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__ */ jsxRuntime.jsx(
@@ -50731,7 +50762,9 @@ var NavbarMegaMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenu,
         {
           className: cn(
@@ -50877,7 +50910,7 @@ var NavbarMegaMenu = ({
             )
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -50971,6 +51004,8 @@ var NavbarEnterpriseMega = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(React13.Fragment, { children: [
@@ -50985,12 +51020,13 @@ var NavbarEnterpriseMega = ({
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between gap-8",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -51041,7 +51077,7 @@ var NavbarEnterpriseMega = ({
               ] })
             ]
           }
-        ) }) })
+        ) }) }) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -51773,6 +51809,8 @@ var NavbarFeatureGrid = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -51783,111 +51821,119 @@ var NavbarFeatureGrid = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          NavigationMenu,
-          {
-            className: cn("hidden lg:block", navigationMenuClassName),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuList, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { children: "Features" }),
-                /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  NavigationMenuLink,
-                  {
-                    href: feature.href,
-                    className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                    ] })
-                  },
-                  index
-                )) }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Products"
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Resources"
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                NavigationMenuLink,
-                {
-                  href: "#",
-                  className: navigationMenuTriggerStyle(),
-                  children: "Contact"
-                }
-              ) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-4 lg:flex",
-              actionsClassName
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "nav",
+        {
+          className: cn("flex items-center justify-between", navClassName),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:block", navigationMenuClassName),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuList, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { children: "Features" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-[600px] grid-cols-2 p-3", children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      NavigationMenuLink,
+                      {
+                        href: feature.href,
+                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                        ] })
+                      },
+                      index
+                    )) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Products"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Resources"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    NavigationMenuLink,
+                    {
+                      href: "#",
+                      className: navigationMenuTriggerStyle(),
+                      children: "Contact"
+                    }
+                  ) })
+                ] })
+              }
             ),
-            children: renderAuthActions()
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              onClick: () => {
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
-                /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  Pressable,
-                  {
-                    href: feature.href,
-                    className: "rounded-md p-3 transition-colors hover:bg-muted/70",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
-                    ] })
-                  },
-                  index
-                )) }) })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "hidden items-center gap-4 lg:flex",
+                  actionsClassName
+                ),
+                children: renderAuthActions()
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
                 {
-                  className: cn("mt-6 flex flex-col gap-4", actionsClassName),
-                  children: renderAuthActions()
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => {
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
                 }
-              )
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "top", className: "max-h-screen overflow-auto", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "mt-4 mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "solutions", className: "border-none", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: "Features" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2", children: features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        href: feature.href,
+                        className: "rounded-md p-3 transition-colors hover:bg-muted/70",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: feature.title }),
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+                        ] })
+                      },
+                      index
+                    )) }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Templates" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Blog" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", className: "font-medium", children: "Pricing" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
+                      children: renderAuthActions()
+                    }
+                  )
+                ] })
+              ] })
             ] })
-          ] })
-        ] })
-      ] }) }) })
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -51977,6 +52023,8 @@ var NavbarFloatingPill = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -51987,7 +52035,9 @@ var NavbarFloatingPill = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "nav",
         {
           className: cn(
@@ -51995,7 +52045,7 @@ var NavbarFloatingPill = ({
             navWrapperClasses
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: cn(
@@ -52073,7 +52123,7 @@ var NavbarFloatingPill = ({
                   ] })
                 ]
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -52148,7 +52198,7 @@ var NavbarFloatingPill = ({
             )
           ]
         }
-      ) }) })
+      ) })
     }
   );
 };
@@ -52464,6 +52514,8 @@ var NavbarPlatformResources = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -52474,156 +52526,164 @@ var NavbarPlatformResources = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu, { className: cn("min-w-full", navigationMenuClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
-          renderLogo(),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            NavigationMenuList,
-            {
-              className: cn("hidden lg:flex", navigationMenuListClassName),
-              children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    NavigationMenuItem,
-                    {
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  NavigationMenuItem,
-                  {
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      NavigationMenuLink,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        NavigationMenu,
+        {
+          className: cn("min-w-full", navigationMenuClassName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
+              renderLogo(),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenuList,
+                {
+                  className: cn("hidden lg:flex", navigationMenuListClassName),
+                  children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        NavigationMenuItem,
+                        {
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "hidden items-center gap-4 lg:flex",
-                actionsClassName
-              ),
-              children: renderActions()
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              "aria-label": "Main Menu",
-              onClick: () => setOpen(!open),
-              children: [
-                !open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
-                open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
-              ]
-            }
-          ) })
-        ] }),
-        open && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    AccordionItem,
-                    {
-                      value: `menu-${index}`,
-                      className: "border-b-2 border-dashed",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
-                        /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-                          Pressable,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          NavigationMenuLink,
                           {
-                            href: getLinkUrl(item),
-                            className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
-                            children: [
-                              item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                img.Img,
-                                {
-                                  src: item.image,
-                                  alt: typeof item.label === "string" ? item.label : "Menu item",
-                                  className: "h-full w-full object-cover object-center",
-                                  optixFlowConfig
-                                }
-                              ) }),
-                              !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-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__ */ jsxRuntime.jsx(
-                                DynamicIcon,
-                                {
-                                  name: item.iconName,
-                                  size: 16
-                                }
-                              ) : null }),
-                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-                                item.description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "border-b-2 border-dashed",
-                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  "aria-label": "Main Menu",
+                  onClick: () => setOpen(!open),
+                  children: [
+                    !open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
+                    open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                  ]
+                }
+              ) })
+            ] }),
+            open && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        AccordionItem,
+                        {
+                          value: `menu-${index}`,
+                          className: "border-b-2 border-dashed",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                              Pressable,
+                              {
+                                href: getLinkUrl(item),
+                                className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
+                                children: [
+                                  item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    img.Img,
+                                    {
+                                      src: item.image,
+                                      alt: typeof item.label === "string" ? item.label : "Menu item",
+                                      className: "h-full w-full object-cover object-center",
+                                      optixFlowConfig
+                                    }
+                                  ) }),
+                                  !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-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__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 16
+                                    }
+                                  ) : null }),
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
+                                    item.description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "border-b-2 border-dashed",
+                        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mx-8 mt-auto flex flex-col gap-4 py-12",
+                        actionsClassName
+                      ),
+                      children: renderActions()
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -52762,6 +52822,8 @@ var NavbarImagePreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -52772,6 +52834,8 @@ var NavbarImagePreview = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -52781,7 +52845,7 @@ var NavbarImagePreview = ({
               containerWrapperClasses
             ),
             ref: navRef,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: cn(
@@ -52815,7 +52879,7 @@ var NavbarImagePreview = ({
                   ] })
                 ]
               }
-            ) })
+            ) }) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -53144,6 +53208,8 @@ var NavbarDarkIcons = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -53154,13 +53220,14 @@ var NavbarDarkIcons = ({
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -53203,7 +53270,7 @@ var NavbarDarkIcons = ({
               ] })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNavigationMenu3,
           {
@@ -53500,11 +53567,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__ */ jsxRuntime.jsx(
@@ -53518,7 +53586,9 @@ var NavbarAnimatedPreview = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -53568,7 +53638,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -54057,6 +54127,8 @@ var NavbarMultiColumnGroups = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -54067,8 +54139,10 @@ var NavbarMultiColumnGroups = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -54123,7 +54197,7 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNavigationMenu5,
           {
@@ -54365,6 +54439,8 @@ var NavbarSidebarMobile = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -54375,10 +54451,15 @@ var NavbarSidebarMobile = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -54500,7 +54581,7 @@ var NavbarSidebarMobile = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -54672,6 +54753,8 @@ var NavbarTransparentOverlay = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -54682,16 +54765,19 @@ var NavbarTransparentOverlay = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
               renderLogo(),
               /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenu,
@@ -54749,9 +54835,9 @@ var NavbarTransparentOverlay = ({
                   ]
                 }
               )
-            ] })
+            ] }) })
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -54872,6 +54958,8 @@ var NavbarEducationPlatform = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -54885,11 +54973,16 @@ var NavbarEducationPlatform = ({
       ),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-9", children: [
                 renderLogo(),
@@ -55080,7 +55173,7 @@ var NavbarEducationPlatform = ({
               )
             ]
           }
-        ) }) }),
+        ) }) }) }),
         isOpen && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -55376,6 +55469,8 @@ var NavbarStickyCompact = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -55390,7 +55485,9 @@ var NavbarStickyCompact = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "nav",
         {
           className: cn(
@@ -55446,7 +55543,7 @@ var NavbarStickyCompact = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -55572,6 +55669,8 @@ var NavbarSearchFocused = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -55582,10 +55681,15 @@ var NavbarSearchFocused = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -55650,7 +55754,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -55852,6 +55956,8 @@ var NavbarSimpleLinks = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -55862,56 +55968,67 @@ var NavbarSimpleLinks = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
-        renderLogo(),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          NavigationMenu,
-          {
-            className: cn("hidden lg:block", navigationMenuClassName),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              NavigationMenuList,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "nav",
+        {
+          className: cn(
+            "flex items-center justify-between",
+            navClassName
+          ),
+          children: [
+            renderLogo(),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationMenu,
+              {
+                className: cn("hidden lg:block", navigationMenuClassName),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  NavigationMenuList,
+                  {
+                    ref: menuRef,
+                    className: cn(
+                      "flex items-center gap-6 rounded-4xl px-8 py-3",
+                      menuListClassName
+                    ),
+                    children: [
+                      renderNavItems(),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          ref: indicatorRef,
+                          className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MobileNav,
+              {
+                navItems: navItems ?? [],
+                activeItem,
+                setActiveItem,
+                actions,
+                actionsSlot
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      ref: indicatorRef,
-                      className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                    }
-                  )
-                ]
+                children: renderActions()
               }
             )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MobileNav,
-          {
-            navItems: navItems ?? [],
-            activeItem,
-            setActiveItem,
-            actions,
-            actionsSlot
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "hidden items-center gap-2 lg:flex",
-              actionsClassName
-            ),
-            children: renderActions()
-          }
-        )
-      ] }) }) })
+          ]
+        }
+      ) }) }) })
     }
   );
 };
@@ -56028,6 +56145,8 @@ var NavbarSplitCta = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -56038,10 +56157,15 @@ var NavbarSplitCta = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -56151,7 +56275,7 @@ var NavbarSplitCta = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56243,6 +56367,8 @@ var NavbarIconLinks = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -56253,10 +56379,15 @@ var NavbarIconLinks = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
               renderLogo(),
@@ -56350,7 +56481,7 @@ var NavbarIconLinks = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56538,6 +56669,8 @@ var NavbarTabbedSections = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -56548,10 +56681,15 @@ var NavbarTabbedSections = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "nav",
         {
-          className: cn("flex items-center justify-between py-4", navClassName),
+          className: cn(
+            "flex items-center justify-between py-4",
+            navClassName
+          ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
               renderLogo(),
@@ -56601,7 +56739,7 @@ var NavbarTabbedSections = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };
@@ -56694,6 +56832,8 @@ var NavbarFullscreenMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -56704,13 +56844,14 @@ var NavbarFullscreenMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
             className: cn(
               "flex items-center justify-between px-6 py-6",
-              navWrapperClasses,
               headerClassName
             ),
             children: [
@@ -56766,7 +56907,7 @@ var NavbarFullscreenMenu = ({
             ] })
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };
@@ -83900,7 +84041,7 @@ function StatsSimpleGrid({
   statValueClassName,
   statLabelClassName
 }) {
-  const renderActions = () => {
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -83920,15 +84061,17 @@ function StatsSimpleGrid({
         index
       );
     });
-  };
-  const renderStats = () => {
+  }, [actionsSlot, actions]);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", statItemClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-4xl font-semibold sm:text-4xl lg:text-5xl", statValueClassName), children: stat.value }),
+      stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-base leading-6 text-muted-foreground lg:text-lg", statLabelClassName), children: stat.label })
     ] }, index));
-  };
+  }, [statsSlot, stats, statItemClassName, statValueClassName, statLabelClassName]);
+  const hasHeaderContent = !!(heading || actionsSlot || actions && actions.length > 0);
+  const hasStatsContent = !!(statsSlot || stats && stats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -83939,11 +84082,11 @@ function StatsSimpleGrid({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start text-left", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 w-full md:mb-16", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-8 w-full max-w-[24rem] text-3xl font-bold text-pretty sm:text-4xl md:max-w-[30rem] lg:max-w-[37rem] lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: renderActions() })
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-start gap-2 sm:flex-row", actionsClassName), children: actionsContent })
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16", statsClassName), children: renderStats() })
+        hasStatsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid w-full grid-cols-2 gap-12 sm:w-fit sm:grid-cols-4 lg:gap-16", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -83970,7 +84113,7 @@ function StatsIconCards({
   statGrowthClassName,
   statIconClassName
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = React13.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", statIconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -83981,8 +84124,8 @@ function StatsIconCards({
         className: "text-primary"
       }
     ) });
-  };
-  const renderStats = () => {
+  }, [statIconClassName]);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -83991,9 +84134,9 @@ function StatsIconCards({
         className: cn("relative overflow-hidden rounded-xl border bg-background p-6", stat.className, statCardClassName),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium text-muted-foreground", statLabelClassName), children: stat.label }),
+            stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-4 text-4xl font-bold", statValueClassName), children: stat.value }),
+            stat.growth && /* @__PURE__ */ jsxRuntime.jsxs(
               "p",
               {
                 className: cn(
@@ -84020,7 +84163,8 @@ function StatsIconCards({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statCardClassName, statLabelClassName, statValueClassName, statGrowthClassName, renderIcon]);
+  const hasHeaderContent = !!(heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84031,11 +84175,11 @@ function StatsIconCards({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-3 text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -84047,7 +84191,7 @@ function StatsTimelineTabs({
   description,
   periods,
   tabsSlot,
-  defaultPeriod = "monthly",
+  defaultPeriod,
   background = "white",
   spacing = "lg",
   pattern,
@@ -84064,15 +84208,16 @@ function StatsTimelineTabs({
   statsGridClassName,
   statCardClassName
 }) {
-  const renderBadge = () => {
+  const effectiveDefaultPeriod = defaultPeriod || (periods && periods.length > 0 ? periods[0].id : "");
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-2", badgeClassName), children: badge });
-  };
-  const renderTabs = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const tabsContent = React13.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!periods || periods.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: defaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: effectiveDefaultPeriod, className: cn("mt-8 w-full", tabsClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: tabsListClassName, children: periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: period.id, children: period.label }, period.id)) }) }),
       periods.map((period) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: period.id, className: cn("mt-4", period.className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: period.stats.map((stat, index) => {
         const isPositive = stat.trend === "up" && !stat.inversePositive || stat.trend === "down" && stat.inversePositive;
@@ -84086,7 +84231,7 @@ function StatsTimelineTabs({
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
+                stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: stat.label }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
@@ -84099,7 +84244,7 @@ function StatsTimelineTabs({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: period.label })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
+              stat.value && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-3xl font-bold", children: stat.value }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
@@ -84122,7 +84267,7 @@ function StatsTimelineTabs({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
+                stat.previousLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ml-2 text-sm text-muted-foreground", children: [
                   "vs ",
                   stat.previousLabel
                 ] })
@@ -84133,7 +84278,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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84144,21 +84291,21 @@ function StatsTimelineTabs({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        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,
@@ -84177,16 +84324,17 @@ function StatsPrimarySecondary({
   secondaryValueClassName,
   secondaryLabelClassName
 }) {
-  const renderPrimaryBadge = () => {
+  const renderPrimaryBadge = React13.useCallback(() => {
     if (primaryBadgeSlot) return primaryBadgeSlot;
     if (!primaryBadge) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: cn("ml-2 gap-1", primaryBadgeClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/badge-check", size: 16, className: "shrink-0" }),
       primaryBadge
     ] });
-  };
-  const renderPrimary = () => {
+  }, [primaryBadgeSlot, primaryBadge, primaryBadgeClassName]);
+  const primaryContent = React13.useMemo(() => {
     if (primarySlot) return primarySlot;
+    if (!primaryValue) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", primaryClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pe-6 xl:pe-12", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-6xl font-bold leading-10", primaryValueClassName), children: [
         primaryValue,
@@ -84194,15 +84342,17 @@ function StatsPrimarySecondary({
       ] }),
       primaryDescription && (typeof primaryDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-muted-foreground sm:mt-3", primaryDescriptionClassName), children: primaryDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 sm:mt-3", primaryDescriptionClassName), children: primaryDescription }))
     ] }) });
-  };
-  const renderSecondaryStats = () => {
+  }, [primarySlot, primaryValue, primaryClassName, primaryValueClassName, primaryDescription, primaryDescriptionClassName, renderPrimaryBadge]);
+  const secondaryStatsContent = React13.useMemo(() => {
     if (secondaryStatsSlot) return secondaryStatsSlot;
     if (!secondaryStats || secondaryStats.length === 0) return null;
     return secondaryStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: stat.className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
+      stat.value && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-3xl font-semibold", secondaryValueClassName), children: stat.value }),
+      stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground", secondaryLabelClassName), children: stat.label })
     ] }, index));
-  };
+  }, [secondaryStatsSlot, secondaryStats, secondaryValueClassName, secondaryLabelClassName]);
+  const hasPrimaryContent = !!(primarySlot || primaryValue);
+  const hasSecondaryContent = !!(secondaryStatsSlot || secondaryStats && secondaryStats.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84213,8 +84363,8 @@ function StatsPrimarySecondary({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid items-center gap-6 lg:grid-cols-12 lg:gap-12", containerClassName), children: [
-        renderPrimary(),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("relative lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-border", hasPrimaryContent ? "lg:col-span-8" : "lg:col-span-12", secondaryClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3", children: secondaryStatsContent }) })
       ] })
     }
   );
@@ -84228,9 +84378,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,
@@ -84250,12 +84400,12 @@ function StatsGrowthTimeline({
   currentStatsClassName,
   futureClassName
 }) {
-  const renderBadge = () => {
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderMilestoneIcon = (milestone) => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const renderMilestoneIcon = React13.useCallback((milestone) => {
     if (milestone.iconSlot) return milestone.iconSlot;
     if (!milestone.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -84266,8 +84416,8 @@ function StatsGrowthTimeline({
         className: "text-primary"
       }
     ) });
-  };
-  const renderMilestones = () => {
+  }, []);
+  const milestonesContent = React13.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-24", timelineClassName), children: [
@@ -84283,14 +84433,14 @@ function StatsGrowthTimeline({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-6 flex flex-col items-start md:ml-0 md:w-1/2 md:px-8", children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold", children: milestone.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: milestone.title })),
               milestone.description && (typeof milestone.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground", children: milestone.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: milestone.description })),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
+              milestone.metric && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-background p-4 shadow-sm", children: [
                 renderMilestoneIcon(milestone),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold text-primary", children: milestone.metric.value }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
+                  milestone.metric.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: milestone.metric.label })
                 ] })
               ] })
             ] }),
@@ -84300,19 +84450,19 @@ function StatsGrowthTimeline({
         milestone.id
       )) })
     ] });
-  };
-  const renderCurrentStats = () => {
+  }, [milestonesSlot, milestones, timelineClassName, milestoneClassName, renderMilestoneIcon]);
+  const currentStatsContent = React13.useMemo(() => {
     if (currentStatsSlot) return currentStatsSlot;
     if (!currentStats || currentStats.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-24 rounded-lg bg-muted p-8", currentStatsClassName), children: [
       currentStatsHeading && (typeof currentStatsHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-center text-2xl font-bold", children: currentStatsHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 text-center", children: currentStatsHeading })),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: currentStats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", stat.className), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-3xl font-bold text-primary md:text-4xl", children: stat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
+        stat.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-muted-foreground", children: stat.label })
       ] }, index)) })
     ] });
-  };
-  const renderActions = () => {
+  }, [currentStatsSlot, currentStats, currentStatsHeading, currentStatsClassName]);
+  const actionsContent = React13.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -84329,16 +84479,17 @@ function StatsGrowthTimeline({
       },
       index
     ));
-  };
-  const renderFuture = () => {
+  }, [actionsSlot, actions]);
+  const futureContent = React13.useMemo(() => {
     if (futureSlot) return futureSlot;
     if (!futureHeading && !futureDescription && (!actions || actions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 text-center", futureClassName), children: [
       futureHeading && (typeof futureHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: futureHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: futureHeading })),
       futureDescription && (typeof futureDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mb-8 max-w-2xl text-muted-foreground", children: futureDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-8 max-w-2xl", children: futureDescription })),
-      renderActions()
+      actionsContent
     ] });
-  };
+  }, [futureSlot, futureHeading, futureDescription, futureClassName, actionsContent, actions]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84349,14 +84500,14 @@ function StatsGrowthTimeline({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-3xl", descriptionClassName), children: description }))
         ] }),
-        renderMilestones(),
-        renderCurrentStats(),
-        renderFuture()
+        milestonesContent,
+        currentStatsContent,
+        futureContent
       ] })
     }
   );
@@ -84664,7 +84815,7 @@ function StatsCircularProgress({
   description,
   categories,
   categoriesSlot,
-  defaultCategory = "business",
+  defaultCategory,
   background = "white",
   spacing = "lg",
   pattern,
@@ -84683,13 +84834,14 @@ function StatsCircularProgress({
   statLabelClassName,
   statInfoClassName
 }) {
-  const [category, setCategory] = React13__namespace.useState(defaultCategory);
-  const renderBadge = () => {
+  const effectiveDefaultCategory = defaultCategory || (categories && categories.length > 0 ? categories[0].id : "");
+  const [category, setCategory] = React13__namespace.useState(effectiveDefaultCategory);
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderCategories = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const categoriesContent = React13.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -84726,15 +84878,16 @@ function StatsCircularProgress({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
+              stat.label && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-center text-lg font-semibold md:text-xl", statLabelClassName), children: stat.label }),
+              stat.info && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-center text-xs text-muted-foreground md:text-sm", statInfoClassName), children: stat.info })
             ]
           },
           index
         )) }) }, cat.id))
       ] })
     ] });
-  };
+  }, [categoriesSlot, categories, category, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84745,12 +84898,12 @@ function StatsCircularProgress({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderCategories()
+        categoriesContent
       ] })
     }
   );
@@ -84775,7 +84928,7 @@ function StatsCardGroup({
   avatarsClassName,
   optixFlowConfig
 }) {
-  const renderIcon = (stat) => {
+  const renderIcon = React13.useCallback((stat) => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -84788,8 +84941,8 @@ function StatsCardGroup({
         children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 24, className: "text-primary" })
       }
     );
-  };
-  const renderAvatars = (stat) => {
+  }, [statIconClassName]);
+  const renderAvatars = React13.useCallback((stat) => {
     if (!stat.showAvatars) return null;
     if (avatarsSlot) return avatarsSlot;
     if (!avatars || avatars.length === 0) return null;
@@ -84812,8 +84965,8 @@ function StatsCardGroup({
         avatars.length - 4
       ] })
     ] });
-  };
-  const renderStats = () => {
+  }, [avatarsSlot, avatars, avatarsClassName, optixFlowConfig]);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -84836,13 +84989,13 @@ function StatsCardGroup({
               children: stat.value
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
+          stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-muted-foreground", statLabelClassName), children: stat.label }),
           renderAvatars(stat)
         ]
       },
       index
     ));
-  };
+  }, [statsSlot, stats, statValueClassName, statLabelClassName, renderIcon, renderAvatars]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84852,7 +85005,7 @@ function StatsCardGroup({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: renderStats() }) }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-4xl", containerClassName), children: (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-xl border bg-card p-8", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 md:grid-cols-3", statsClassName), children: statsContent }) }) })
     }
   );
 }
@@ -84889,19 +85042,19 @@ function AnimatedStatItem({
   iconClassName
 }) {
   const count = useAnimatedCounter(stat.value, duration, isVisible);
-  const renderIcon = () => {
+  const iconContent = React13.useMemo(() => {
     if (stat.iconSlot) return stat.iconSlot;
     if (!stat.icon) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", iconClassName), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon, size: 28, className: "text-primary" }) });
-  };
+  }, [stat.iconSlot, stat.icon, iconClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center text-center", stat.className), children: [
-    renderIcon(),
+    iconContent,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-2 text-4xl font-bold md:text-5xl", valueClassName), children: [
       stat.prefix,
       count,
       stat.suffix
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
+    stat.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", labelClassName), children: stat.label })
   ] });
 }
 function StatsAnimatedCounter({
@@ -84942,7 +85095,8 @@ function StatsAnimatedCounter({
     }
     return () => observer.disconnect();
   }, []);
-  const renderStats = () => {
+  const hasHeaderContent = !!(heading || description);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -84957,7 +85111,7 @@ function StatsAnimatedCounter({
       },
       index
     ));
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statValueClassName, statLabelClassName, statIconClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -84968,11 +85122,11 @@ function StatsAnimatedCounter({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", contentClassName), children: [
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: renderStats() })
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 sm:grid-cols-2 lg:grid-cols-4", statsClassName), children: statsContent })
       ] })
     }
   );
@@ -85075,12 +85229,12 @@ function StatsNumberTicker({
     }
     return () => observer.disconnect();
   }, []);
-  const renderBadge = () => {
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderStats = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const statsContent = React13.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", statsGridClassName), children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -85096,7 +85250,8 @@ function StatsNumberTicker({
       },
       index
     )) });
-  };
+  }, [statsSlot, stats, animationDuration, isVisible, statsGridClassName, statCardClassName, statValueClassName, statLabelClassName, statDescriptionClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -85107,12 +85262,12 @@ function StatsNumberTicker({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-5xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        renderStats()
+        statsContent
       ] })
     }
   );
@@ -85139,8 +85294,9 @@ function StatsMilestoneSidebar({
   milestoneTitleClassName,
   milestoneDescriptionClassName
 }) {
-  const renderSidebar = () => {
+  const sidebarContent = React13.useMemo(() => {
     if (sidebarSlot) return sidebarSlot;
+    if (!heading && !description) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:sticky lg:top-24", children: [
       heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
         "h2",
@@ -85163,8 +85319,8 @@ function StatsMilestoneSidebar({
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
     ] });
-  };
-  const renderMilestones = () => {
+  }, [sidebarSlot, heading, description, headingClassName, descriptionClassName]);
+  const milestonesContent = React13.useMemo(() => {
     if (milestonesSlot) return milestonesSlot;
     if (!milestones || milestones.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-8", milestonesClassName), children: milestones.map((milestone, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -85177,7 +85333,7 @@ function StatsMilestoneSidebar({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-[9px] top-0 h-4 w-4 rounded-full border-2 border-primary bg-background" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          milestone.year && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
@@ -85211,7 +85367,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__ */ jsxRuntime.jsx(
     Section,
     {
@@ -85222,8 +85380,8 @@ function StatsMilestoneSidebar({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-6xl", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-12 lg:gap-16", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: renderSidebar() }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-8", children: renderMilestones() })
+        hasSidebarContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:col-span-4", sidebarClassName), children: sidebarContent }),
+        hasMilestonesContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: hasSidebarContent ? "lg:col-span-8" : "lg:col-span-12", children: milestonesContent })
       ] }) })
     }
   );
@@ -85272,12 +85430,12 @@ function StatsBarComparison({
     }
     return () => observer.disconnect();
   }, [animate]);
-  const renderBadge = () => {
+  const badgeContent = React13.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     if (!badge) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
-  };
-  const renderComparisons = () => {
+  }, [badgeSlot, badge, badgeClassName]);
+  const comparisonsContent = React13.useMemo(() => {
     if (comparisonsSlot) return comparisonsSlot;
     if (!comparisons || comparisons.length === 0) return null;
     return comparisons.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-xl border bg-card p-6", group.className, groupCardClassName), children: [
@@ -85302,7 +85460,8 @@ function StatsBarComparison({
         ) })
       ] }, barIndex)) })
     ] }, groupIndex));
-  };
+  }, [comparisonsSlot, comparisons, isVisible, groupCardClassName, groupTitleClassName, barLabelClassName, barValueClassName, barTrackClassName]);
+  const hasHeaderContent = !!(badge || badgeSlot || heading || description);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -85313,12 +85472,12 @@ function StatsBarComparison({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: sectionRef, className: cn("mx-auto max-w-4xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          renderBadge(),
+        hasHeaderContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+          badgeContent,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: renderComparisons() })
+        (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
       ] })
     }
   );