@opensite/ui 3.4.8 → 3.5.0

package/dist/navbar-dropdown-menu.d.ts

@@ -24,6 +24,20 @@ interface MenuItem {
  * Props for the NavbarDropdownMenu component
  */
 interface NavbarDropdownMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarDropdownMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -110,6 +124,6 @@ interface NavbarDropdownMenuProps {
  * menu with accordion navigation on mobile. Includes login and signup call-to-action buttons.
  * The dropdown menus display icons and descriptions for each submenu item.
  */
-declare const NavbarDropdownMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarDropdownMenu: ({ sectionId, logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDropdownMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarDropdownMenu, type NavbarDropdownMenuProps };

package/dist/navbar-dropdown-menu.js

@@ -747,10 +747,10 @@ var SubMenuLink = ({
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
-      className: "flex min-w-80 flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted",
+      className: "flex min-w-80 flex-row items-center gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted",
       href: item.url,
       children: [
-        item.icon && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
+        item.icon && /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: item.title }),
           item.description && /* @__PURE__ */ jsx("p", { className: "text-sm leading-snug text-muted-foreground", children: item.description })
@@ -865,7 +865,7 @@ var NavbarDropdownMenu = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-dropdown-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-education-platform.cjs

@@ -869,6 +869,7 @@ var NavbarEducationPlatform = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-education-platform",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,

package/dist/navbar-education-platform.d.cts

@@ -59,6 +59,20 @@ interface MenuItem {
  * Props for the NavbarEducationPlatform component
  */
 interface NavbarEducationPlatformProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items - can be simple links or dropdowns with grouped links
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarEducationPlatformRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -153,6 +167,6 @@ interface NavbarEducationPlatformProps {
  * Mobile view uses accordion navigation with the shared NavbarMobileMenu component.
  * Ideal for e-learning platforms, course management systems, and educational technology products.
  */
-declare const NavbarEducationPlatform: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menu, menuSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEducationPlatformProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEducationPlatform: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menu, menuSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEducationPlatformRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarEducationPlatform, type NavbarEducationPlatformProps };

package/dist/navbar-education-platform.d.ts

@@ -59,6 +59,20 @@ interface MenuItem {
  * Props for the NavbarEducationPlatform component
  */
 interface NavbarEducationPlatformProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items - can be simple links or dropdowns with grouped links
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarEducationPlatformRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -153,6 +167,6 @@ interface NavbarEducationPlatformProps {
  * Mobile view uses accordion navigation with the shared NavbarMobileMenu component.
  * Ideal for e-learning platforms, course management systems, and educational technology products.
  */
-declare const NavbarEducationPlatform: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menu, menuSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEducationPlatformProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEducationPlatform: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menu, menuSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEducationPlatformRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarEducationPlatform, type NavbarEducationPlatformProps };

package/dist/navbar-education-platform.js

@@ -845,6 +845,7 @@ var NavbarEducationPlatform = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-education-platform",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,

package/dist/navbar-enterprise-mega.cjs

@@ -768,17 +768,17 @@ var SolutionsMenu = ({
   platformItems,
   featuredHeroCard,
   optixFlowConfig
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-[1200px] grid-cols-2 gap-4", children: [
-  featuredHeroCard && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+}) => {
+  const featuredCard = featuredHeroCard ? /* @__PURE__ */ jsxRuntime.jsxs(
     pressable.Pressable,
     {
       href: featuredHeroCard.href,
       className: cn(
-        "group flex h-full flex-col overflow-hidden rounded-lg text-primary-foreground",
+        "group flex h-full min-h-[420px] flex-col overflow-hidden rounded-lg text-primary-foreground",
         featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-between p-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col justify-between p-5", children: [
           featuredHeroCard.subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 text-xs font-medium tracking-wider uppercase", children: featuredHeroCard.subtitle }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-base font-semibold", children: [
@@ -795,7 +795,7 @@ var SolutionsMenu = ({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-primary-foreground/85", children: featuredHeroCard.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: featuredHeroCard.image,
@@ -806,35 +806,42 @@ var SolutionsMenu = ({
         ) })
       ]
     }
-  ) }),
-  platformItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-1", children: [
+  ) : null;
+  const platformSection = platformItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Developer Platform" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: platformItems.map((technology) => /* @__PURE__ */ jsxRuntime.jsxs(
       NavigationMenuLink,
       {
         href: technology.href,
-        className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
+        className: "group !flex !w-full min-w-0 items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: technology.icon, size: 16, className: "shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: technology.icon,
+              size: 16,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 text-sm font-medium", children: technology.title })
         ]
       },
       technology.id
     )) })
-  ] }),
-  solutionCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 mt-2 grid grid-cols-4 gap-3", children: solutionCards.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ] }) : null;
+  const solutionSection = solutionCards.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: solutionCards.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "col-span-1 flex w-full flex-col rounded-lg border border-border p-4",
+      className: "flex min-w-0 flex-col rounded-lg border border-border p-4",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
           pressable.Pressable,
           {
             href: solution.href,
-            className: "group flex flex-col text-left",
+            className: "group flex min-w-0 flex-col text-left",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-sm font-medium", children: solution.title }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "min-w-0 break-words text-sm font-medium", children: solution.title }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
@@ -844,7 +851,7 @@ var SolutionsMenu = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: solution.description })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 break-words text-xs text-muted-foreground", children: solution.description })
             ]
           }
         ) }),
@@ -852,10 +859,17 @@ var SolutionsMenu = ({
           NavigationMenuLink,
           {
             href: subpage.href,
-            className: "group !flex !w-full items-center gap-2 rounded-lg p-2 text-left hover:bg-muted",
+            className: "group !flex !w-full min-w-0 items-center gap-2 rounded-lg p-2 text-left hover:bg-muted",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: subpage.icon, size: 14, className: "shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 text-sm font-medium", children: subpage.title })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: subpage.icon,
+                  size: 14,
+                  className: "shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 break-words text-sm font-medium", children: subpage.title })
             ]
           },
           subpage.id
@@ -863,8 +877,69 @@ var SolutionsMenu = ({
       ]
     },
     solution.id
-  )) })
-] });
+  )) }) : null;
+  if (featuredCard) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-[1200px] max-w-[calc(100vw-4rem)] grid-cols-[minmax(380px,1fr)_minmax(360px,0.95fr)] gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: featuredCard }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
+        platformSection,
+        solutionSection
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-[1200px] max-w-[calc(100vw-4rem)] grid-cols-2 gap-4", children: [
+    platformSection,
+    solutionCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 grid grid-cols-4 gap-3", children: solutionCards.map((solution) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex min-w-0 flex-col rounded-lg border border-border p-4",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            pressable.Pressable,
+            {
+              href: solution.href,
+              className: "group flex min-w-0 flex-col text-left",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "min-w-0 break-words text-sm font-medium", children: solution.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/arrow-right",
+                      size: 14,
+                      className: "shrink-0 transition-transform group-hover:translate-x-1"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 break-words text-xs text-muted-foreground", children: solution.description })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("menu", { className: "mt-3 grid gap-2", children: solution.subpages.map((subpage) => /* @__PURE__ */ jsxRuntime.jsxs(
+            NavigationMenuLink,
+            {
+              href: subpage.href,
+              className: "group !flex !w-full min-w-0 items-center gap-2 rounded-lg p-2 text-left hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: subpage.icon,
+                    size: 14,
+                    className: "shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 break-words text-sm font-medium", children: subpage.title })
+              ]
+            },
+            subpage.id
+          )) })
+        ]
+      },
+      solution.id
+    )) })
+  ] });
+};
 var ProductsMenu = ({
   productCategories,
   featuredHeroCard,
@@ -1179,7 +1254,7 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -1234,6 +1309,7 @@ var NavbarEnterpriseMega = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-enterprise-mega",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -1343,7 +1419,7 @@ var DesktopMenuItem = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-4!", children: renderDropdownContent(
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "max-h-[calc(100vh-6rem)] overflow-y-auto rounded-xl! border-0! p-4!", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) })

package/dist/navbar-enterprise-mega.d.cts

@@ -209,6 +209,20 @@ interface IMenuLink {
  * Props for the NavbarEnterpriseMega component
  */
 interface NavbarEnterpriseMegaProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu links with mega menu configurations
+       */
+    menuLinks?: IMenuLink[];
+    /**
+       * Action configurations (e.g., login, signup buttons)
+       */
+    actions?: ActionConfig[];
+}
+interface NavbarEnterpriseMegaRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -288,6 +302,6 @@ interface NavbarEnterpriseMegaProps {
  * cards. Each menu spans full width with rich content layouts. Mobile view uses a full-screen sheet
  * with accordion navigation. Ideal for large enterprise SaaS platforms and B2B software companies.
  */
-declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { type IFeatureCategory, type IFeatureItem, type IFeaturedHeroCard, ILinkItem, type ILocationItem, type IMenuLink, IMenuLinkGroup, type IPartnerCard, type IProductCategory, type IProductItem, type IRegionItem, type IResourceItem, type ISolutionCard, type ISubpageItem, type ITechnologyItem, type ITopicGroup, type ITopicItem, LogoConfig, type MegaMenuLayout, NavbarEnterpriseMega, type NavbarEnterpriseMegaProps };

package/dist/navbar-enterprise-mega.d.ts

@@ -209,6 +209,20 @@ interface IMenuLink {
  * Props for the NavbarEnterpriseMega component
  */
 interface NavbarEnterpriseMegaProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu links with mega menu configurations
+       */
+    menuLinks?: IMenuLink[];
+    /**
+       * Action configurations (e.g., login, signup buttons)
+       */
+    actions?: ActionConfig[];
+}
+interface NavbarEnterpriseMegaRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -288,6 +302,6 @@ interface NavbarEnterpriseMegaProps {
  * cards. Each menu spans full width with rich content layouts. Mobile view uses a full-screen sheet
  * with accordion navigation. Ideal for large enterprise SaaS platforms and B2B software companies.
  */
-declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { type IFeatureCategory, type IFeatureItem, type IFeaturedHeroCard, ILinkItem, type ILocationItem, type IMenuLink, IMenuLinkGroup, type IPartnerCard, type IProductCategory, type IProductItem, type IRegionItem, type IResourceItem, type ISolutionCard, type ISubpageItem, type ITechnologyItem, type ITopicGroup, type ITopicItem, LogoConfig, type MegaMenuLayout, NavbarEnterpriseMega, type NavbarEnterpriseMegaProps };

package/dist/navbar-enterprise-mega.js

@@ -745,17 +745,17 @@ var SolutionsMenu = ({
   platformItems,
   featuredHeroCard,
   optixFlowConfig
-}) => /* @__PURE__ */ jsxs("div", { className: "grid w-[1200px] grid-cols-2 gap-4", children: [
-  featuredHeroCard && /* @__PURE__ */ jsx("div", { className: "col-span-1", children: /* @__PURE__ */ jsxs(
+}) => {
+  const featuredCard = featuredHeroCard ? /* @__PURE__ */ jsxs(
     Pressable,
     {
       href: featuredHeroCard.href,
       className: cn(
-        "group flex h-full flex-col overflow-hidden rounded-lg text-primary-foreground",
+        "group flex h-full min-h-[420px] flex-col overflow-hidden rounded-lg text-primary-foreground",
         featuredHeroCard.variant === "accent" ? "bg-accent text-accent-foreground" : "bg-primary"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between p-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col justify-between p-5", children: [
           featuredHeroCard.subtitle && /* @__PURE__ */ jsx("span", { className: "mb-2 text-xs font-medium tracking-wider uppercase", children: featuredHeroCard.subtitle }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-base font-semibold", children: [
@@ -772,7 +772,7 @@ var SolutionsMenu = ({
             /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-primary-foreground/85", children: featuredHeroCard.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
           Img,
           {
             src: featuredHeroCard.image,
@@ -783,35 +783,42 @@ var SolutionsMenu = ({
         ) })
       ]
     }
-  ) }),
-  platformItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-1", children: [
+  ) : null;
+  const platformSection = platformItems.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsx("div", { className: "mb-3 text-left", children: /* @__PURE__ */ jsx("strong", { className: "text-xs font-medium tracking-wider text-muted-foreground uppercase", children: "Developer Platform" }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: platformItems.map((technology) => /* @__PURE__ */ jsxs(
       NavigationMenuLink,
       {
         href: technology.href,
-        className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
+        className: "group !flex !w-full min-w-0 items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: technology.icon, size: 16, className: "shrink-0" }),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: technology.icon,
+              size: 16,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-sm font-medium", children: technology.title })
         ]
       },
       technology.id
     )) })
-  ] }),
-  solutionCards.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-span-2 mt-2 grid grid-cols-4 gap-3", children: solutionCards.map((solution) => /* @__PURE__ */ jsxs(
+  ] }) : null;
+  const solutionSection = solutionCards.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: solutionCards.map((solution) => /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "col-span-1 flex w-full flex-col rounded-lg border border-border p-4",
+      className: "flex min-w-0 flex-col rounded-lg border border-border p-4",
       children: [
         /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-3", children: /* @__PURE__ */ jsxs(
           Pressable,
           {
             href: solution.href,
-            className: "group flex flex-col text-left",
+            className: "group flex min-w-0 flex-col text-left",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx("strong", { className: "text-sm font-medium", children: solution.title }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsx("strong", { className: "min-w-0 break-words text-sm font-medium", children: solution.title }),
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
@@ -821,7 +828,7 @@ var SolutionsMenu = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: solution.description })
+              /* @__PURE__ */ jsx("p", { className: "mt-1 break-words text-xs text-muted-foreground", children: solution.description })
             ]
           }
         ) }),
@@ -829,10 +836,17 @@ var SolutionsMenu = ({
           NavigationMenuLink,
           {
             href: subpage.href,
-            className: "group !flex !w-full items-center gap-2 rounded-lg p-2 text-left hover:bg-muted",
+            className: "group !flex !w-full min-w-0 items-center gap-2 rounded-lg p-2 text-left hover:bg-muted",
             children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: subpage.icon, size: 14, className: "shrink-0" }),
-              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-sm font-medium", children: subpage.title })
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: subpage.icon,
+                  size: 14,
+                  className: "shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words text-sm font-medium", children: subpage.title })
             ]
           },
           subpage.id
@@ -840,8 +854,69 @@ var SolutionsMenu = ({
       ]
     },
     solution.id
-  )) })
-] });
+  )) }) : null;
+  if (featuredCard) {
+    return /* @__PURE__ */ jsxs("div", { className: "grid w-[1200px] max-w-[calc(100vw-4rem)] grid-cols-[minmax(380px,1fr)_minmax(360px,0.95fr)] gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: featuredCard }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
+        platformSection,
+        solutionSection
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-[1200px] max-w-[calc(100vw-4rem)] grid-cols-2 gap-4", children: [
+    platformSection,
+    solutionCards.length > 0 && /* @__PURE__ */ jsx("div", { className: "col-span-2 grid grid-cols-4 gap-3", children: solutionCards.map((solution) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex min-w-0 flex-col rounded-lg border border-border p-4",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-3", children: /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              href: solution.href,
+              className: "group flex min-w-0 flex-col text-left",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsx("strong", { className: "min-w-0 break-words text-sm font-medium", children: solution.title }),
+                  /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/arrow-right",
+                      size: 14,
+                      className: "shrink-0 transition-transform group-hover:translate-x-1"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 break-words text-xs text-muted-foreground", children: solution.description })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("menu", { className: "mt-3 grid gap-2", children: solution.subpages.map((subpage) => /* @__PURE__ */ jsxs(
+            NavigationMenuLink,
+            {
+              href: subpage.href,
+              className: "group !flex !w-full min-w-0 items-center gap-2 rounded-lg p-2 text-left hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: subpage.icon,
+                    size: 14,
+                    className: "shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 break-words text-sm font-medium", children: subpage.title })
+              ]
+            },
+            subpage.id
+          )) })
+        ]
+      },
+      solution.id
+    )) })
+  ] });
+};
 var ProductsMenu = ({
   productCategories,
   featuredHeroCard,
@@ -1156,7 +1231,7 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -1211,6 +1286,7 @@ var NavbarEnterpriseMega = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-enterprise-mega",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(
@@ -1320,7 +1396,7 @@ var DesktopMenuItem = ({
   if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: item.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-xl! border-0! p-4!", children: renderDropdownContent(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "max-h-[calc(100vh-6rem)] overflow-y-auto rounded-xl! border-0! p-4!", children: renderDropdownContent(
         { ...item, layout: effectiveLayout },
         optixFlowConfig
       ) })

package/dist/navbar-feature-grid.cjs

@@ -816,7 +816,7 @@ var NavbarFeatureGrid = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-feature-grid",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-feature-grid.d.cts

@@ -22,6 +22,24 @@ interface MenuItem {
  * Props for the NavbarFeatureGrid component
  */
 interface NavbarFeatureGridProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Features for Features dropdown
+       */
+    features?: FeatureItem[];
+    /**
+       * Additional menu items (simple links without dropdowns)
+       */
+    menu?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarFeatureGridRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -105,6 +123,6 @@ interface NavbarFeatureGridProps {
  * view uses a top-sliding sheet with accordion navigation. Ideal for SaaS applications
  * with multiple feature categories.
  */
-declare const NavbarFeatureGrid: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, features, menu, authActions, authActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFeatureGridProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFeatureGrid: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, features, menu, authActions, authActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFeatureGridRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFeatureGrid, type NavbarFeatureGridProps };