@opensite/ui 3.4.9 → 3.5.0

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

@@ -1254,7 +1254,7 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -1309,6 +1309,7 @@ var NavbarEnterpriseMega = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-enterprise-mega",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(

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

@@ -1231,7 +1231,7 @@ var NavbarEnterpriseMega = ({
   actions,
   actionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
-  background,
+  background = "white",
   spacing,
   pattern,
   patternOpacity,
@@ -1286,6 +1286,7 @@ var NavbarEnterpriseMega = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-enterprise-mega",
         background,
         spacing: spacingOverride ?? spacing,
         className: cn(

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 };

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

@@ -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 };

package/dist/navbar-feature-grid.js

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

package/dist/navbar-floating-pill.cjs

@@ -699,7 +699,7 @@ var NavbarFloatingPill = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-floating-pill",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-floating-pill.d.cts

@@ -23,6 +23,20 @@ interface NavItem {
  * Props for the NavbarFloatingPill component
  */
 interface NavbarFloatingPillProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    items?: NavItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarFloatingPillRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -106,6 +120,6 @@ interface NavbarFloatingPillProps {
  * animations and a collapsible mobile menu. Perfect for landing pages and modern marketing
  * sites where the navbar should float over hero content.
  */
-declare const NavbarFloatingPill: ({ sectionId, logo, logoSlot, logoClassName, items, menuSlot, authActions, authActionsSlot, className, containerClassName, pillWrapperClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFloatingPillProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFloatingPill: ({ sectionId, logo, logoSlot, logoClassName, items, menuSlot, authActions, authActionsSlot, className, containerClassName, pillWrapperClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFloatingPillRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFloatingPill, type NavbarFloatingPillProps };

package/dist/navbar-floating-pill.d.ts

@@ -23,6 +23,20 @@ interface NavItem {
  * Props for the NavbarFloatingPill component
  */
 interface NavbarFloatingPillProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    items?: NavItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarFloatingPillRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -106,6 +120,6 @@ interface NavbarFloatingPillProps {
  * animations and a collapsible mobile menu. Perfect for landing pages and modern marketing
  * sites where the navbar should float over hero content.
  */
-declare const NavbarFloatingPill: ({ sectionId, logo, logoSlot, logoClassName, items, menuSlot, authActions, authActionsSlot, className, containerClassName, pillWrapperClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFloatingPillProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFloatingPill: ({ sectionId, logo, logoSlot, logoClassName, items, menuSlot, authActions, authActionsSlot, className, containerClassName, pillWrapperClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFloatingPillRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFloatingPill, type NavbarFloatingPillProps };

package/dist/navbar-floating-pill.js

@@ -677,7 +677,7 @@ var NavbarFloatingPill = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-floating-pill",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-fullscreen-menu.cjs

@@ -649,6 +649,7 @@ var NavbarFullscreenMenu = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-fullscreen-menu",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,

package/dist/navbar-fullscreen-menu.d.cts

@@ -28,6 +28,20 @@ interface NavbarFullscreenMenuSocialLink {
  * Props for the NavbarFullscreenMenu component
  */
 interface NavbarFullscreenMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Menu items for fullscreen navigation
+       */
+    menuItems?: MenuItem[];
+    /**
+       * Social links displayed at bottom of fullscreen menu
+       */
+    socialLinks?: NavbarFullscreenMenuSocialLink[];
+}
+interface NavbarFullscreenMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -113,6 +127,6 @@ interface NavbarFullscreenMenuProps {
  * on hover. Social links appear at the bottom with staggered animations. Uses Framer Motion
  * for smooth transitions. Perfect for creative agencies, portfolios, and artistic websites.
  */
-declare const NavbarFullscreenMenu: ({ logo, logoSlot, logoClassName, menuItems, menuSlot, socialLinks, socialLinksSlot, className, containerClassName, headerClassName, overlayClassName, menuItemsClassName, socialLinksClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFullscreenMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFullscreenMenu: ({ logo, logoSlot, logoClassName, menuItems, menuSlot, socialLinks, socialLinksSlot, className, containerClassName, headerClassName, overlayClassName, menuItemsClassName, socialLinksClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFullscreenMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFullscreenMenu, type NavbarFullscreenMenuProps };

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

@@ -28,6 +28,20 @@ interface NavbarFullscreenMenuSocialLink {
  * Props for the NavbarFullscreenMenu component
  */
 interface NavbarFullscreenMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Menu items for fullscreen navigation
+       */
+    menuItems?: MenuItem[];
+    /**
+       * Social links displayed at bottom of fullscreen menu
+       */
+    socialLinks?: NavbarFullscreenMenuSocialLink[];
+}
+interface NavbarFullscreenMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -113,6 +127,6 @@ interface NavbarFullscreenMenuProps {
  * on hover. Social links appear at the bottom with staggered animations. Uses Framer Motion
  * for smooth transitions. Perfect for creative agencies, portfolios, and artistic websites.
  */
-declare const NavbarFullscreenMenu: ({ logo, logoSlot, logoClassName, menuItems, menuSlot, socialLinks, socialLinksSlot, className, containerClassName, headerClassName, overlayClassName, menuItemsClassName, socialLinksClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFullscreenMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFullscreenMenu: ({ logo, logoSlot, logoClassName, menuItems, menuSlot, socialLinks, socialLinksSlot, className, containerClassName, headerClassName, overlayClassName, menuItemsClassName, socialLinksClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFullscreenMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFullscreenMenu, type NavbarFullscreenMenuProps };

package/dist/navbar-fullscreen-menu.js

@@ -628,6 +628,7 @@ var NavbarFullscreenMenu = ({
     /* @__PURE__ */ jsx(
       Section,
       {
+        id: "navbar-fullscreen-menu",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,

package/dist/navbar-icon-links.cjs

@@ -787,7 +787,7 @@ var NavbarIconLinks = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-icon-links",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-icon-links.d.cts

@@ -21,6 +21,20 @@ interface NavItem {
  * Props for the NavbarIconLinks component
  */
 interface NavbarIconLinksProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation items with icons
+       */
+    navItems?: NavItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarIconLinksRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -106,6 +120,6 @@ interface NavbarIconLinksProps {
  * Ideal for dashboards, admin panels, and applications where users are familiar
  * with the navigation structure.
  */
-declare const NavbarIconLinks: ({ sectionId, logo, logoSlot, logoClassName, navItems, navItemsSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarIconLinksProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarIconLinks: ({ sectionId, logo, logoSlot, logoClassName, navItems, navItemsSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarIconLinksRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarIconLinks, type NavbarIconLinksProps };

package/dist/navbar-icon-links.d.ts

@@ -21,6 +21,20 @@ interface NavItem {
  * Props for the NavbarIconLinks component
  */
 interface NavbarIconLinksProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation items with icons
+       */
+    navItems?: NavItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarIconLinksRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -106,6 +120,6 @@ interface NavbarIconLinksProps {
  * Ideal for dashboards, admin panels, and applications where users are familiar
  * with the navigation structure.
  */
-declare const NavbarIconLinks: ({ sectionId, logo, logoSlot, logoClassName, navItems, navItemsSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarIconLinksProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarIconLinks: ({ sectionId, logo, logoSlot, logoClassName, navItems, navItemsSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarIconLinksRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarIconLinks, type NavbarIconLinksProps };

package/dist/navbar-icon-links.js

@@ -764,7 +764,7 @@ var NavbarIconLinks = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-icon-links",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-image-preview.cjs

@@ -882,7 +882,7 @@ var NavbarImagePreview = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-image-preview",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-image-preview.d.cts

@@ -30,6 +30,20 @@ interface SocialLink {
  * Props for the NavbarImagePreview component
  */
 interface NavbarImagePreviewProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    navigation?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarImagePreviewRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -129,6 +143,6 @@ interface NavbarImagePreviewProps {
  * Mobile view uses a full-screen dark overlay with categorized link columns and
  * social links. Ideal for content-rich sites where visual previews enhance navigation.
  */
-declare const NavbarImagePreview: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, mobileNavigation, mobileNavigationSlot, authActions, authActionsSlot, socialLinks, socialLinksSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarImagePreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarImagePreview: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, mobileNavigation, mobileNavigationSlot, authActions, authActionsSlot, socialLinks, socialLinksSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarImagePreviewRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarImagePreview, type NavbarImagePreviewProps };

package/dist/navbar-image-preview.d.ts

@@ -30,6 +30,20 @@ interface SocialLink {
  * Props for the NavbarImagePreview component
  */
 interface NavbarImagePreviewProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu items
+       */
+    navigation?: MenuItem[];
+    /**
+       * Authentication action configurations
+       */
+    authActions?: ActionConfig[];
+}
+interface NavbarImagePreviewRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -129,6 +143,6 @@ interface NavbarImagePreviewProps {
  * Mobile view uses a full-screen dark overlay with categorized link columns and
  * social links. Ideal for content-rich sites where visual previews enhance navigation.
  */
-declare const NavbarImagePreview: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, mobileNavigation, mobileNavigationSlot, authActions, authActionsSlot, socialLinks, socialLinksSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarImagePreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarImagePreview: ({ sectionId, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, mobileNavigation, mobileNavigationSlot, authActions, authActionsSlot, socialLinks, socialLinksSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarImagePreviewRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarImagePreview, type NavbarImagePreviewProps };

package/dist/navbar-image-preview.js

@@ -859,7 +859,7 @@ var NavbarImagePreview = ({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      id: sectionId,
+      id: "navbar-image-preview",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-mega-menu.cjs

@@ -1060,7 +1060,7 @@ var NavbarMegaMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-mega-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

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

@@ -14,6 +14,20 @@ import '@opensite/hooks/usePlatformFromUrl';
  * Props for the NavbarMegaMenu component
  */
 interface NavbarMegaMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu links with optional dropdown groups
+       */
+    menuLinks?: IMenuLink[];
+    /**
+       * Actions rendered on the right side (desktop) and bottom (mobile)
+       */
+    actions?: ActionConfig[];
+}
+interface NavbarMegaMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -93,6 +107,6 @@ interface NavbarMegaMenuProps {
  * Includes a full-screen mobile menu with slide-in submenus for each category.
  * Ideal for enterprise applications and complex product offerings.
  */
-declare const NavbarMegaMenu: ({ sectionId, className, containerClassName, navClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMegaMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarMegaMenu: ({ sectionId, className, containerClassName, navClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMegaMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { IMenuLink, LogoConfig, NavbarMegaMenu, type NavbarMegaMenuProps };

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

@@ -14,6 +14,20 @@ import '@opensite/hooks/usePlatformFromUrl';
  * Props for the NavbarMegaMenu component
  */
 interface NavbarMegaMenuProps {
+    /**
+       * Logo configuration
+       */
+    logo?: LogoConfig;
+    /**
+       * Navigation menu links with optional dropdown groups
+       */
+    menuLinks?: IMenuLink[];
+    /**
+       * Actions rendered on the right side (desktop) and bottom (mobile)
+       */
+    actions?: ActionConfig[];
+}
+interface NavbarMegaMenuRuntimeProps {
     /**
      * Additional CSS classes for the section
      */
@@ -93,6 +107,6 @@ interface NavbarMegaMenuProps {
  * Includes a full-screen mobile menu with slide-in submenus for each category.
  * Ideal for enterprise applications and complex product offerings.
  */
-declare const NavbarMegaMenu: ({ sectionId, className, containerClassName, navClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMegaMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarMegaMenu: ({ sectionId, className, containerClassName, navClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMegaMenuRuntimeProps) => react_jsx_runtime.JSX.Element;
 
 export { IMenuLink, LogoConfig, NavbarMegaMenu, type NavbarMegaMenuProps };

package/dist/navbar-mega-menu.js

@@ -1037,7 +1037,7 @@ var NavbarMegaMenu = ({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      id: sectionId,
+      id: "navbar-mega-menu",
       background,
       spacing: spacingOverride ?? spacing,
       className: sectionClasses,

package/dist/navbar-multi-column-groups.cjs

@@ -861,6 +861,7 @@ var NavbarMultiColumnGroups = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
+        id: "navbar-multi-column-groups",
         background,
         spacing: spacingOverride ?? spacing,
         className: sectionClasses,