@geotab/zenith 1.26.5 → 1.26.6-beta.1

package/dist/list/listItem/listItem.js

@@ -15,7 +15,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useIconSize_1 = require("../../utils/theme/useIconSize");
 const iconChevronRight_1 = require("../../icons/iconChevronRight");
 const isActiveElement_1 = require("../utils/isActiveElement");
-const ListItem = ({ id, className, image, name, secondary, status, actions, onClick, link, onDragStart }) => {
+const ListItem = ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item");
     const iconSize = (0, useIconSize_1.useIconSize)();
@@ -67,6 +67,6 @@ const ListItem = ({ id, className, image, name, secondary, status, actions, onCl
     }, [isDndElement, link, onClick]);
     const clickableClassName = (0, react_1.useMemo)(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (0, jsx_runtime_1.jsxs)("li", { id: id, className: (0, classNames_1.classNames)(["zen-list-item", driveClassName || "", clickableClassName, className || ""]), onClick: handleClick, ref: itemRef, children: [onDragStart ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__dnd", onPointerDown: onDragStart, children: (0, jsx_runtime_1.jsx)(iconGrab_1.IconGrab, { size: "large" }) }) : null, image ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__image", children: image }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-list-item__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__name", children: name }), (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__secondary", children: secondary })] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__status", children: status }) : null, renderActions(), onClick || link ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__click", onClick: onClick, link: link, children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-list-item__click-icon" }) }) : null] });
+    return (0, jsx_runtime_1.jsxs)("li", { id: id, className: (0, classNames_1.classNames)(["zen-list-item", driveClassName || "", clickableClassName, className || ""]), onClick: handleClick, ref: itemRef, children: [onDragStart ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__dnd", onPointerDown: onDragStart, children: (0, jsx_runtime_1.jsx)(iconGrab_1.IconGrab, { size: "large" }) }) : null, image ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__image", children: image }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-list-item__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__name", children: name }), (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__secondary", children: secondary })] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__status", children: status }) : null, renderActions(), onClick || link ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__click", onClick: onClick, link: link, target: target, children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-list-item__click-icon" }) }) : null] });
 };
 exports.ListItem = ListItem;

package/dist/menu/controlledMenu.d.ts

@@ -16,6 +16,7 @@ export interface IControlledMenu extends IZenComponentProps {
     alignment?: TAlignment;
     ariaLabel?: string;
     ariaLabelledby?: string;
+    listClassName?: string;
 }
 type TControlledMenu = FC<IControlledMenu> & {
     Item: FC<IMenuControlledItem>;

package/dist/menu/controlledMenu.js

@@ -23,7 +23,7 @@ const utils_1 = require("../commonHelpers/utils");
 const pathProvider_1 = require("./contexts/pathProvider");
 const menuSeparator_1 = require("./components/menuSeparator");
 // eslint-disable-next-line react/prop-types
-const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", paddingX = 0, paddingY = 0, alignment }) => {
+const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const memoizedOnChange = (0, react_1.useCallback)(setIsOpen, [setIsOpen]);
@@ -143,7 +143,7 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
             }
         }
     };
-    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { onKeyDown: onKeyDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name, icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
+    const renderMenuList = () => (0, jsx_runtime_1.jsx)("div", { onKeyDown: onKeyDown, className: (0, classNames_1.classNames)(["zen-action-list", className]), children: (0, jsx_runtime_1.jsxs)("ul", { role: "menu", className: (0, classNames_1.classNames)(["zen-menu-item", className, listClassName]), children: [parent ? (0, jsx_runtime_1.jsx)(menuButton_1.MenuButton, { id: "root", name: parent.props.name, icon: iconArrowLeft_1.IconArrowLeft, onClick: closeBranch, hasChildren: false, disabled: false }, "root") : null, content] }) });
     const hideMenu = (0, react_1.useCallback)(() => {
         closeBranch();
         setIsOpen(false);

package/dist/nav/context/nav.context.d.ts

@@ -2,6 +2,10 @@
 export interface INavContext {
     collapsed: boolean;
     onCollapseToggle?: (isCollapsed: boolean) => void;
+    searchTerm?: string;
+    onSearch?: (searchTerm: string) => void;
+    searchOpen?: boolean;
+    onSearchToggle?: (isOpen: boolean) => void;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.

package/dist/nav/context/nav.context.js

@@ -7,7 +7,11 @@ const react_1 = require("react");
  */
 exports.NavContext = (0, react_1.createContext)({
     collapsed: false,
-    onCollapseToggle: undefined
+    onCollapseToggle: undefined,
+    searchTerm: "",
+    onSearch: undefined,
+    searchOpen: false,
+    onSearchToggle: undefined
 });
 /**
  * @beta This component is not fully ready yet and may change in future releases.

package/dist/nav/nav.d.ts

@@ -5,6 +5,7 @@ export interface INav extends IZenComponentProps {
     mobileBarContainer: HTMLElement | null;
     collapsed?: boolean;
     onCollapseToggle?: (isCollapsed: boolean) => void;
+    onMenuVisibilityToggle?: (isOpen: boolean) => void;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.

package/dist/nav/nav.js

@@ -12,6 +12,7 @@ const useResize_1 = require("../commonHelpers/hooks/useResize");
 const react_dom_1 = require("react-dom");
 const navMobileBar_1 = require("./navMobileBar/navMobileBar");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const focusableSelector_1 = require("../utils/focusableSelector");
 const NavContent = ({ children }) => {
     const contentRef = (0, react_1.useRef)(null);
     const [hasScrollbar, setHasScrollbar] = (0, react_1.useState)(false);
@@ -39,9 +40,8 @@ const NavContent = ({ children }) => {
     }, true);
     (0, react_1.useEffect)(() => {
         // Initial check
-        setHasOverlayScrollbar((0, navUtils_1.detectOverlayScrollbar)());
-        handleScroll();
-    }, [handleScroll]);
+        handleResize();
+    }, [handleResize]);
     return (0, jsx_runtime_1.jsx)("div", { ref: contentRef, onScroll: handleScroll, className: (0, classNames_1.classNames)([
             "zen-nav__content",
             showTopShadow ? "zen-nav__content--show-top-shadow" : "",
@@ -53,9 +53,24 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-const Nav = ({ children, className, collapsed = false, onCollapseToggle, mobileBarContainer }) => {
+const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer }) => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, react_1.useState)(false);
+    const menuRef = (0, react_1.useRef)(null);
+    const [isSearchOpen, setIsSearchOpen] = (0, react_1.useState)(false);
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const isMobile = (0, useMobile_1.useMobile)();
+    const prevIsMobileRef = (0, react_1.useRef)();
+    // Focus the first active element inside the Nav when mobile menu opens
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (isMobile && isMobileMenuOpen && menuRef.current) {
+            const currentFocus = document.activeElement;
+            // If focused element is not inside the nav, focus the first focusable element
+            if (!currentFocus.closest(".zen-nav")) {
+                (_a = menuRef.current.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    }, [isMobile, isMobileMenuOpen]);
     const childrenArray = react_1.Children.toArray(children);
     const header = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavHeader"; });
     const sections = childrenArray.filter(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavSection"; });
@@ -67,13 +82,48 @@ const Nav = ({ children, className, collapsed = false, onCollapseToggle, mobileB
     const primaryFooter = footer && (0, navUtils_1.filterPrimaryNavItems)(footer, false);
     const footerToRender = isMobile ? secondaryFooter : footer;
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => (0, navUtils_1.collectNavItems)(e));
-    return (0, jsx_runtime_1.jsxs)(nav_context_1.NavContext.Provider, { value: { collapsed, onCollapseToggle }, children: [(!isMobile || isMobileMenuOpen)
-                ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav", isMobile ? "zen-nav--mobile" : "", className || ""]), children: [header && !isMobile ? (0, react_1.cloneElement)(header, Object.assign(Object.assign({}, header.props), { className: (0, classNames_1.classNames)(["zen-nav__header", header.props.className || ""]) })) : null, (0, jsx_runtime_1.jsx)(NavContent, { children: sectionsToRender.map((section, index) => {
+    const onSearchOpen = (0, react_1.useCallback)((isOpen) => {
+        isOpen && onCollapseToggle && onCollapseToggle(false);
+        setIsSearchOpen(isOpen || isMobile);
+    }, [onCollapseToggle, setIsSearchOpen, isMobile]);
+    const onMobileMenuToggle = (0, react_1.useCallback)(() => {
+        setIsMobileMenuOpen(!isMobileMenuOpen);
+        onMenuVisibilityToggle === null || onMenuVisibilityToggle === void 0 ? void 0 : onMenuVisibilityToggle(!isMobileMenuOpen);
+    }, [isMobileMenuOpen, setIsMobileMenuOpen, onMenuVisibilityToggle]);
+    (0, react_1.useEffect)(() => {
+        const wasMobile = prevIsMobileRef.current;
+        prevIsMobileRef.current = isMobile;
+        // Close mobile menu when switching to desktop
+        if (wasMobile && !isMobile) {
+            setIsMobileMenuOpen(false);
+        }
+        // Close search input when collapsed
+        if (collapsed) {
+            setIsSearchOpen(false);
+            return;
+        }
+        // If menu is expanded open search if there is a search term
+        if (searchTerm.trim() !== "") {
+            setIsSearchOpen(true);
+            return;
+        }
+        // Always show search input on mobile
+        if (isMobile) {
+            setIsSearchOpen(true);
+            return;
+        }
+        // When switching from mobile to desktop, close search if term is empty
+        if (wasMobile && !searchTerm.trim()) {
+            setIsSearchOpen(false);
+        }
+    }, [collapsed, setIsSearchOpen, setIsMobileMenuOpen, searchTerm, isMobile]);
+    return (0, jsx_runtime_1.jsxs)(nav_context_1.NavContext.Provider, { value: { collapsed, onCollapseToggle, searchOpen: isSearchOpen, onSearchToggle: onSearchOpen, searchTerm, onSearch: setSearchTerm }, children: [(!isMobile || isMobileMenuOpen)
+                ? (0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: (0, classNames_1.classNames)(["zen-nav", isMobile ? "zen-nav--mobile" : "", collapsed ? "zen-nav--collapsed" : "", className || ""]), children: [header ? (0, react_1.cloneElement)(header, Object.assign(Object.assign({}, header.props), { className: (0, classNames_1.classNames)(["zen-nav__header", header.props.className || ""]) })) : null, (0, jsx_runtime_1.jsx)(NavContent, { children: sectionsToRender.map((section, index) => {
                                 const sectionKey = (0, generateId_1.generateId)();
                                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, react_1.cloneElement)(section, {
                                             className: (0, classNames_1.classNames)(["zen-nav__section", section.props.className || ""])
                                         }), isMobile || index < sectionsToRender.length - 1 ? (0, jsx_runtime_1.jsx)(navDivider_1.NavDivider, {}) : null] }, sectionKey));
                             }) }), footerToRender] })
-                : null, mobileBarContainer && isMobile && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(navMobileBar_1.NavMobileBar, { onMenuToggle: () => setIsMobileMenuOpen(!isMobileMenuOpen), isMenuOpen: isMobileMenuOpen, children: primaryItems }), mobileBarContainer)] });
+                : null, mobileBarContainer && isMobile && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(navMobileBar_1.NavMobileBar, { onMenuToggle: onMobileMenuToggle, isMenuOpen: isMobileMenuOpen, children: primaryItems }), mobileBarContainer)] });
 };
 exports.Nav = Nav;

package/dist/nav/navFooter/navFooter.js

@@ -44,9 +44,10 @@ const NavFooterBottom = ({ className, children }) => {
                     className: (0, classNames_1.classNames)([
                         childElement.props.className || "",
                         "zen-nav-footer__button"
-                    ])
+                    ]),
+                    menuAlignment: "right-bottom"
                 });
-            }), (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: "zen-nav-footer__button", title: translate("Edit Navigation"), collapsed: !isMobile, primaryIcon: iconEdit_1.IconEdit, onClick: () => onEditNavClick && onEditNavClick() }, "help-button"), isMobile ? null : (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: "zen-nav-footer__button", title: collapsed ? translate("Expand") : translate("Collapse"), collapsed: !isMobile, primaryIcon: collapsed ? iconNavigationFooterCollapsed_1.IconNavigationFooterCollapsed : iconNavigationFooterExpanded_1.IconNavigationFooterExpanded, onClick: () => onCollapseToggle && onCollapseToggle(!collapsed) }, "collapse-button")] });
+            }), (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: "zen-nav-footer__button", title: translate("Edit Navigation"), collapsed: !isMobile, primaryIcon: iconEdit_1.IconEdit, onClick: () => onEditNavClick && onEditNavClick(), menuAlignment: "right-bottom" }, "help-button"), isMobile ? null : (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { className: "zen-nav-footer__button", title: collapsed ? translate("Expand Navigation") : translate("Collapse Navigation"), collapsed: !isMobile, primaryIcon: collapsed ? iconNavigationFooterCollapsed_1.IconNavigationFooterCollapsed : iconNavigationFooterExpanded_1.IconNavigationFooterExpanded, onClick: () => onCollapseToggle && onCollapseToggle(!collapsed), menuAlignment: "right-bottom" }, "collapse-button")] });
 };
 NavFooterBottom.displayName = "NavFooterBottom";
 /**

package/dist/nav/navFooter/navFooterAction/navFooterAction.js

@@ -18,7 +18,8 @@ const NavFooterAction = ({ children }) => {
     if (!filteredItems.length) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { primaryIcon: iconSettings4_1.IconSettings4, title: translate("Configure"), children: filteredItems });
+    // TODO: set menuAlignment value to "right-bottom" when positioning is fixed
+    return (0, jsx_runtime_1.jsx)(navItem_1.NavItem, { primaryIcon: iconSettings4_1.IconSettings4, title: translate("Configure"), menuAlignment: "right-bottom", children: filteredItems });
 };
 exports.NavFooterAction = NavFooterAction;
 exports.NavFooterAction.displayName = "NavFooterAction";

package/dist/nav/navHeader/navHeader.d.ts

@@ -1,13 +1,19 @@
 import "./navHeader.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC, ReactElement, ReactNode } from "react";
+import { INavHeaderSearch } from "./navHeaderSearch/navHeaderSearch";
 export interface INavHeader extends Omit<IZenComponentProps, "children"> {
     logo: string | ReactNode;
     collapsedLogo?: string | ReactNode;
+    logoLink?: string;
     imgTitle: string;
-    children?: ReactElement<INavHeaderActions>;
+    children?: ReactElement<INavHeaderActions> | ReactElement<INavHeaderSearch> | (ReactElement<INavHeaderActions> | ReactElement<INavHeaderSearch>)[];
+    onSearch?: (searchTerm: string) => void;
 }
-declare const NavHeaderAction: FC<import("../../menu/components/menuItem").IMenuControlledItem>;
+declare const NavHeaderAction: {
+    (props: import("../navItem/navItem").ILinkNavItem | import("../navItem/navItem").IButtonNavItem): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 interface INavHeaderActions extends Omit<IZenComponentProps, "children"> {
     title: string;
     children: ReactElement<typeof NavHeaderAction> | ReactElement<typeof NavHeaderAction>[];
@@ -17,6 +23,10 @@ interface INavHeaderActions extends Omit<IZenComponentProps, "children"> {
  */
 export declare const NavHeader: FC<INavHeader> & {
     Actions: FC<INavHeaderActions>;
-    Action: FC<import("../../menu/components/menuItem").IMenuControlledItem>;
+    Action: {
+        (props: import("../navItem/navItem").ILinkNavItem | import("../navItem/navItem").IButtonNavItem): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Search: FC<INavHeaderSearch>;
 };
 export {};

package/dist/nav/navHeader/navHeader.js

@@ -11,24 +11,43 @@ const iconClose_1 = require("../../icons/iconClose");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const nav_context_1 = require("../context/nav.context");
 const navUtils_1 = require("../utils/navUtils");
-const NavHeaderComponent = ({ className, logo, imgTitle, collapsedLogo, children }) => {
-    const { collapsed } = (0, nav_context_1.useNavContext)();
+const navHeaderSearch_1 = require("./navHeaderSearch/navHeaderSearch");
+const navItem_1 = require("../navItem/navItem");
+const NavHeaderComponent = ({ className, logo, logoLink, imgTitle, collapsedLogo, children }) => {
+    const { collapsed, searchOpen } = (0, nav_context_1.useNavContext)();
     const isLogoImageString = (0, react_1.useMemo)(() => (0, navUtils_1.isImageUrl)(logo), [logo]);
     const isCollapsedLogoImageString = (0, react_1.useMemo)(() => (0, navUtils_1.isImageUrl)(collapsedLogo), [collapsedLogo]);
-    const logoElement = isLogoImageString ? (0, jsx_runtime_1.jsx)("img", { src: logo, alt: imgTitle }) : logo;
-    const logoCollapsedElement = isCollapsedLogoImageString ? (0, jsx_runtime_1.jsx)("img", { src: collapsedLogo, alt: imgTitle }) : collapsedLogo;
-    const logoToRender = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", className || ""]), children: [logoToRender, children] });
+    const logoElement = isLogoImageString ? (0, jsx_runtime_1.jsx)("img", { className: "zen-nav-header__logo-image", src: logo, alt: imgTitle }) : logo;
+    const logoCollapsedElement = isCollapsedLogoImageString ? (0, jsx_runtime_1.jsx)("img", { className: "zen-nav-header__logo-image", src: collapsedLogo, alt: imgTitle }) : collapsedLogo;
+    const logoImage = collapsed && collapsedLogo ? logoCollapsedElement : logoElement;
+    const logoToRender = logoImage && logoLink ? (0, jsx_runtime_1.jsx)("a", { href: logoLink, className: "zen-nav-header__logo-link", children: logoImage }) : logoImage;
+    const navChildren = react_1.Children.toArray(children).map(actions => {
+        const childrenActions = actions.props.children;
+        const validChildren = react_1.Children.toArray(childrenActions)
+            .filter(child => {
+            const element = child;
+            return element.type && element.type.displayName === "NavItem";
+        })
+            .map(child => (0, react_1.cloneElement)(child, {
+            className: (0, classNames_1.classNames)([
+                "zen-nav-item--level-2",
+                child.props.className || ""
+            ]),
+            collapsed: false
+        }));
+        return (0, react_1.cloneElement)(actions, Object.assign(Object.assign({}, actions.props), { children: validChildren }));
+    });
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header", collapsed ? "zen-nav-header--collapsed" : "", searchOpen ? "zen-nav-header--mode-search" : "", className || ""]), children: [searchOpen ? null : logoToRender, (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-header__controls", children: navChildren })] });
 };
-const NavHeaderAction = controlledMenu_1.ControlledMenu.Item;
+const NavHeaderAction = navItem_1.NavItem;
 const NavHeaderActions = ({ title, className, children }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const isMobile = (0, useMobile_1.useMobile)();
     const triggerRef = (0, react_1.useRef)(null);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__actions", className || ""]), children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "primary", title: title, className: "zen-nav-header__actions-icon", icon: isOpen && !isMobile ? iconClose_1.IconClose : iconPlus_1.IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen) }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: "right-top", paddingX: 8, paddingY: 8, children: children })] });
+    return (0, jsx_runtime_1.jsx)(navItem_1.NavItemContext.Provider, { value: { parentLevel: 2 }, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header__actions", className || ""]), children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "primary", title: title, className: "zen-nav-header__actions-icon", icon: isOpen && !isMobile ? iconClose_1.IconClose : iconPlus_1.IconPlus, iconSize: "large", ref: triggerRef, onClick: () => setIsOpen(!isOpen) }), (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: title, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, alignment: "right-top", paddingX: 8, paddingY: 8, className: (0, classNames_1.classNames)(["zen-nav-l2-popup  zen-nav-l2-popup--narrow", isMobile ? "zen-nav-l2-popup--mobile" : ""]), listClassName: (0, classNames_1.classNames)(["zen-nav-l2-popup__list", isMobile ? "zen-nav-l2-popup__list--mobile" : ""]), children: children })] }) });
 };
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-exports.NavHeader = Object.assign(NavHeaderComponent, { Actions: NavHeaderActions, Action: NavHeaderAction });
+exports.NavHeader = Object.assign(NavHeaderComponent, { Actions: NavHeaderActions, Action: NavHeaderAction, Search: navHeaderSearch_1.NavHeaderSearch });
 exports.NavHeader.displayName = "NavHeader";

package/dist/nav/navHeader/navHeaderSearch/navHeaderSearch.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
+import "./navHeaderSearch.less";
+export interface INavHeaderSearch extends IZenComponentProps {
+    onSearch?: (searchTerm: string) => void;
+}
+export declare const NavHeaderSearch: React.FC<INavHeaderSearch>;

package/dist/nav/navHeader/navHeaderSearch/navHeaderSearch.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavHeaderSearch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
+const nav_context_1 = require("../../context/nav.context");
+const useLanguage_1 = require("../../../utils/localization/useLanguage");
+const useDebounce_1 = require("../../../commonHelpers/hooks/useDebounce");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const textIconButton_1 = require("../../../textIconButton/textIconButton");
+const iconSearch_1 = require("../../../icons/iconSearch");
+const searchInput_1 = require("../../../searchInput/searchInput");
+const NavHeaderSearch = ({ className, onSearch }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const { searchOpen, onSearchToggle, searchTerm = "", onSearch: contextOnSearch } = (0, nav_context_1.useNavContext)();
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const onSearchCallback = (0, react_1.useCallback)((term) => {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(term);
+    }, [onSearch]);
+    const debouncedSearch = (0, useDebounce_1.useDebounce)(onSearchCallback);
+    const handleChange = (0, react_1.useCallback)((term) => {
+        contextOnSearch === null || contextOnSearch === void 0 ? void 0 : contextOnSearch(term);
+        debouncedSearch(term);
+    }, [debouncedSearch, contextOnSearch]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        // On desktop, close search if term is empty
+        if (!isMobile && !searchTerm.trim()) {
+            onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+        }
+    }, [isMobile, searchTerm, onSearchToggle]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === "Escape") {
+            handleChange("");
+            onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(false);
+        }
+    }, [handleChange, onSearchToggle]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-nav-header-search", className || ""]), children: [!searchOpen && !isMobile ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-nav-header-search__button", icon: iconSearch_1.IconSearch, onClick: () => onSearchToggle === null || onSearchToggle === void 0 ? void 0 : onSearchToggle(true), title: translate("Search") }) : null, searchOpen || isMobile ? (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { autoFocus: true, ariaLabel: translate("Search"), value: searchTerm, placeholder: translate("Search"), className: "zen-nav-header-search__input", onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown }) : null] });
+};
+exports.NavHeaderSearch = NavHeaderSearch;

package/dist/nav/navItem/navItem.d.ts

@@ -2,6 +2,7 @@ import "./navItem.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC, ReactNode } from "react";
 import { IIcon } from "../../icons/icon";
+import { TAlignment } from "../../absolute/absolute";
 interface INavItemCommon extends IZenComponentProps {
     title: string;
     primaryIcon?: FC<IIcon> | ReactNode;
@@ -20,7 +21,11 @@ export interface ILinkNavItem extends INavItemCommon {
 }
 export interface IButtonNavItem extends INavItemCommon {
     onClick?: () => void;
+    menuAlignment?: TAlignment;
 }
+export declare const NavItemContext: import("react").Context<{
+    parentLevel?: number | undefined;
+}>;
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */

package/dist/nav/navItem/navItem.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavItem = void 0;
+exports.NavItem = exports.NavItemContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const react_1 = require("react");
@@ -23,18 +23,23 @@ const controlledMenu_1 = require("../../menu/controlledMenu");
 const nav_context_1 = require("../context/nav.context");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const ICON_SIZE = "huge";
+const SUBMENU_ICON_SIZE = "large";
+// Context for tracking parent level for nested navigation items
+exports.NavItemContext = (0, react_1.createContext)({ parentLevel: 0 });
 const isLinkNavItem = (item) => !!item.link;
-const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, children }) => {
+const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed, hasSubmenu, iconClass, level = 1, children }) => {
     const primaryIconRef = (0, react_1.useRef)(null);
     const PrimaryIconComponent = typeof primaryIcon === "function" ? primaryIcon : null;
     const SecondaryIconComponent = secondaryIcon;
-    const primaryIconComponent = primaryIcon ? ((0, jsx_runtime_1.jsx)("span", { ref: primaryIconRef, className: (0, classNames_1.classNames)(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: ICON_SIZE }) : primaryIcon })) : null;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: ICON_SIZE }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) : null] }));
+    const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
+    const primaryIconComponent = primaryIcon ? ((0, jsx_runtime_1.jsx)("span", { ref: primaryIconRef, className: (0, classNames_1.classNames)(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
 const LinkNavItem = (_a) => {
     var { className, title, collapsed, active, link, isExternalLink, tabIndex } = _a, rest = __rest(_a, ["className", "title", "collapsed", "active", "link", "isExternalLink", "tabIndex"]);
     const isMobile = (0, useMobile_1.useMobile)();
-    const item = (0, jsx_runtime_1.jsx)("a", { href: link, "aria-label": collapsed ? title : undefined, target: isExternalLink ? "_blank" : undefined, rel: isExternalLink ? "noopener noreferrer" : undefined, tabIndex: tabIndex, role: "menuitem", className: (0, classNames_1.classNames)([
+    const { parentLevel = 1 } = (0, react_1.useContext)(exports.NavItemContext);
+    const item = (0, jsx_runtime_1.jsx)("a", { href: link, "aria-label": title, title: title, target: isExternalLink ? "_blank" : undefined, rel: isExternalLink ? "noopener noreferrer" : undefined, tabIndex: tabIndex, role: "menuitem", className: (0, classNames_1.classNames)([
             "zen-link--light",
             "zen-nav-item",
             "zen-nav-item--link",
@@ -42,13 +47,14 @@ const LinkNavItem = (_a) => {
             collapsed ? "zen-nav-item--collapsed" : "",
             active ? "zen-nav-item--active" : "",
             className || ""
-        ]), children: (0, jsx_runtime_1.jsxs)(NavItemContent, Object.assign({ title: title, collapsed: collapsed }, rest, { children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? (0, jsx_runtime_1.jsx)(iconOpen2_1.IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) });
+        ]), children: (0, jsx_runtime_1.jsxs)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: parentLevel + 1 }, rest, { children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? (0, jsx_runtime_1.jsx)(iconOpen2_1.IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) });
     return collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: item, alignment: "right", children: title })) : item;
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
-    var { className, title, onClick, collapsed, active, children, tabIndex } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex"]);
+    var { className, title, onClick, collapsed, active, children, tabIndex, menuAlignment = "right-top" } = _a, rest = __rest(_a, ["className", "title", "onClick", "collapsed", "active", "children", "tabIndex", "menuAlignment"]);
     const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
+    const { parentLevel = 1 } = (0, react_1.useContext)(exports.NavItemContext);
     const triggerRef = (0, react_1.useRef)(null);
     const validChildren = react_1.Children.toArray(children).filter(child => {
         const element = child;
@@ -71,16 +77,22 @@ const ButtonNavItem = (_a) => {
             setMenuOpen(prevOpen => !prevOpen);
         }
     };
+    const onMenuL2Click = (itemProps) => {
+        var _a;
+        setMenuOpen(false);
+        !isLinkNavItem(itemProps) && ((_a = itemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(itemProps));
+    };
     const isMobile = (0, useMobile_1.useMobile)();
-    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { ref: triggerRef, "aria-label": collapsed ? title : undefined, tabIndex: tabIndex, role: "menuitem", className: (0, classNames_1.classNames)([
+    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: "menuitem", className: (0, classNames_1.classNames)([
             "zen-nav-item",
             "zen-nav-item--button",
             isMobile ? "zen-nav-item--mobile" : "",
             collapsed ? "zen-nav-item--collapsed" : "",
             active ? "zen-nav-item--active" : "",
             hasNestedItems ? "zen-nav-item--has-nested" : "",
+            hasNestedItems && menuOpen ? "zen-nav-item--active" : "",
             className || ""
-        ]), onClick: handleClick, onKeyDown: handleKeyPress, children: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+        ]), onClick: handleClick, onKeyDown: handleKeyPress, children: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: parentLevel + 1 }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: buttonElement, alignment: "right", children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to ensure only 1 level of nesting by removing children from nested NavItems
@@ -89,12 +101,12 @@ const ButtonNavItem = (_a) => {
             if (child && typeof child === "object" && "props" in child) {
                 // If this child has its own children, remove them to enforce 1-level nesting
                 if (childElement.props.children) {
-                    return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), { children: undefined, collapsed: false }));
+                    return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), { className: (0, classNames_1.classNames)(["zen-nav-item--level-2", isMobile ? "zen-nav-item--level-2--mobile" : "", childElement.props.className || ""]), children: undefined, collapsed: false, onClick: () => onMenuL2Click(childElement.props) }));
                 }
             }
-            return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), { children: undefined, collapsed: false })); // Enforce submenu items are not collapsed it not set explicitely
+            return (0, react_1.cloneElement)(childElement, Object.assign(Object.assign({}, childElement.props), { className: (0, classNames_1.classNames)(["zen-nav-item--level-2", isMobile ? "zen-nav-item--level-2--mobile" : "", childElement.props.className || ""]), children: undefined, collapsed: false, onClick: () => onMenuL2Click(childElement.props) })); // Enforce submenu items are not collapsed if not set explicitly
         });
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: "right", children: processedChildren })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext.Provider, { value: { parentLevel: parentLevel + 1 }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)(["zen-nav-l2-popup", isMobile ? "zen-nav-l2-popup--mobile" : ""]), listClassName: (0, classNames_1.classNames)(["zen-nav-l2-popup__list", isMobile ? "zen-nav-l2-popup__list--mobile" : ""]), children: processedChildren }) })] }));
     }
     return trigger;
 };

package/dist/nav/navMobileBar/navMobileBar.js

@@ -8,6 +8,7 @@ const navItem_1 = require("../navItem/navItem");
 const iconMenu_1 = require("../../icons/iconMenu");
 const iconClose_1 = require("../../icons/iconClose");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
+const generateId_1 = require("../../commonHelpers/generateId");
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
@@ -23,7 +24,8 @@ const NavMobileBar = ({ className, children, isMenuOpen, onMenuToggle }) => {
     }).map(child => {
         const element = child;
         const existingClassName = element.props.className || "";
-        return (0, react_1.cloneElement)(element, Object.assign(Object.assign({}, element.props), { collapsed: true, className: (0, classNames_1.classNames)([
+        const key = (0, generateId_1.generateId)();
+        return (0, react_1.cloneElement)(element, Object.assign(Object.assign({}, element.props), { key, collapsed: true, className: (0, classNames_1.classNames)([
                 existingClassName,
                 "zen-nav-item--mobile-bar"
             ]) }));

package/dist/nav/storyHelpers/storyDecorator.d.ts

@@ -30,4 +30,5 @@ export declare const navDecorators: {
      */
     withoutStyles: Decorator;
 };
+export declare const SearchDecorator: (Story: any, context: any) => import("react/jsx-runtime").JSX.Element;
 export declare const navContainerDecorator: Decorator;

package/dist/nav/storyHelpers/storyDecorator.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.navContainerDecorator = exports.navDecorators = exports.createNavContainerDecorator = void 0;
+exports.navContainerDecorator = exports.SearchDecorator = exports.navDecorators = exports.createNavContainerDecorator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const nav_context_1 = require("../context/nav.context");
@@ -9,8 +9,10 @@ const createNavContainerDecorator = (options = {}) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const DecoratorStory = (Story, context) => {
         const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(collapsed);
+        const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+        const [isSearchOpen, setIsSearchOpen] = (0, react_1.useState)(false);
         const [isMobile, setIsMobile] = (0, react_1.useState)(false);
-        const isCollapsedState = !isMobile && isCollapsed;
+        const isCollapsedState = !isMobile && isCollapsed && !isSearchOpen;
         const containerWidth = isMobile ? "100%" : isCollapsedState ? collapsedWidth : expandedWidth;
         return ((0, jsx_runtime_1.jsx)("div", { className: withoutStyles ? "" : "zen-shadow-dropdown-default", style: {
                 maxWidth: "100%",
@@ -23,7 +25,11 @@ const createNavContainerDecorator = (options = {}) => {
                 alignItems: withoutStyles ? undefined : (isCollapsedState ? "center" : "normal")
             }, children: (0, jsx_runtime_1.jsx)(nav_context_1.NavContext.Provider, { value: {
                     collapsed: !!isCollapsedState,
-                    onCollapseToggle: setIsCollapsed
+                    onCollapseToggle: setIsCollapsed,
+                    searchOpen: isSearchOpen,
+                    onSearchToggle: setIsSearchOpen,
+                    searchTerm,
+                    onSearch: setSearchTerm
                 }, children: (0, jsx_runtime_1.jsx)(Story, { args: Object.assign(Object.assign({}, context.args), { setIsMobile,
                         setIsCollapsed, collapsed: isCollapsedState }) }) }) }));
     };
@@ -58,4 +64,16 @@ exports.navDecorators = {
         withoutStyles: true
     })
 };
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const SearchDecorator = (Story, context) => {
+    var _a;
+    const loggerRef = (0, react_1.useRef)(null);
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Story, { args: Object.assign(Object.assign({}, context.args), { onSearch: term => {
+                        if (loggerRef.current) {
+                            loggerRef.current.innerText = term;
+                        }
+                    } }) }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: "10px 0" }, children: ["Search term: ", (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: "bold" }, ref: loggerRef, children: (_a = loggerRef.current) === null || _a === void 0 ? void 0 : _a.innerText })] })] });
+};
+exports.SearchDecorator = SearchDecorator;
 exports.navContainerDecorator = exports.navDecorators.withParameters;

package/dist/nav/utils/navUtils.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { IButtonNavItem, ILinkNavItem } from "../navItem/navItem";
-export declare const navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ3IiBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMTQ3IDE5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNTYuNDg2MSA3LjMxMzA4SDQ3LjE2MzJWOC42MTkzSDU0LjAyNjFDNTQuMTA1MiA5LjAwNjUgNTQuMTQ1MiA5LjI1OTk3IDU0LjE0NTIgOS4zNzIzOUM1NC4xNDUyIDEwLjg0MiA1My44NDEgMTEuNzYxIDUzLjI0MTQgMTIuMTAzN0M1Mi42MzU1IDEyLjQ1MDYgNTEuMDE5NyAxMi42MjYxIDQ4LjQzODcgMTIuNjI2MUM0NS4wNTk3IDEyLjYyNjEgNDIuOTUzNyAxMi40NDA0IDQyLjE3OTYgMTIuMDczOEM0MS40MTQxIDExLjcxMTkgNDEuMDI2MiAxMC43MTc1IDQxLjAyNjIgOS4xMTczNkw0MS4wMTA2IDcuMjc4MDRMNDEuMDQyIDUuNTY5NDVDNDEuMDQyIDMuOTkzNjEgNDEuMzkxMyAyLjk5NjkyIDQyLjA3OTggMi42MDY4NkM0Mi43NzUgMi4yMTMwNyA0NC41NDI1IDIuMDEzMzkgNDcuMzMzMSAyLjAxMzM5QzUwLjM1NjggMi4wMTMzOSA1Mi4yNTE2IDIuMTM4MTIgNTIuOTY1IDIuMzgzNThDNTMuNjY0MyAyLjYyNDc0IDU0LjAxODkgMy4yNjc5OCA1NC4wMTg5IDQuMjk1MjdWNC42NTU3M0g1Ni40OTA5VjQuMTI1MzRDNTYuNDkwOSAyLjY4NjM5IDU1Ljk0NTEgMS43NDUzNCA1NC44NjkgMS4zMjgzOUM1My44MDQzIDAuOTE2MTUyIDUxLjQxMjMgMC43MDcwMzEgNDcuNzU5NCAwLjcwNzAzMUM0NC4xMTQ3IDAuNzA3MDMxIDQxLjY1NDkgMS4wMjYyOSA0MC40NDc3IDEuNjU1OEMzOS4yMzMyIDIuMjg5ODkgMzguNjE3NCAzLjU4MDk0IDM4LjYxNzQgNS40OTMwN0wzOC42MDE2IDYuNjM1NjVMMzguNjE3NCA4LjUzMjQ4QzM4LjYxNzQgMTAuODA3MiAzOS4xNzEzIDEyLjI5MzEgNDAuMjYzOSAxMi45NDkyQzQxLjM1MDYgMTMuNjAxMyA0My44MjQ0IDEzLjkzMjEgNDcuNjE3MiAxMy45MzIxQzUxLjYyOTYgMTMuOTMyMSA1NC4xNDg0IDEzLjY1MjcgNTUuMTA0MSAxMy4xMDA3QzU2LjA2NjEgMTIuNTQ1IDU2LjU1NCAxMS4wODQgNTYuNTU0IDguNzU5MDVDNTYuNTU0IDguMTU4NDMgNTYuNTMyNyA3LjY4Mzg0IDU2LjQ5MDMgNy4zNDgyN0w1Ni40ODYxIDcuMzEzMDhaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik01OC44NTk0IDEzLjgwMDZINzIuNzk5NVYxMi40OTQ0SDYxLjM3ODhWNy43NjEwMUg3Mi4zMjU2VjYuNDU0OTNINjEuMzc4OFYyLjE0NjA2SDcyLjc5OTVWMC44Mzk4NDRINTguODU5NFYxMy44MDA2WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNOTEuNTU2NiAxLjc4MTY3QzkwLjUzMiAxLjA2ODc3IDg3Ljk1MDkgMC43MDcwMzEgODMuODg0OSAwLjcwNzAzMUM4MC4zNjY5IDAuNzA3MDMxIDc3LjkyODIgMS4wMjQ0MyA3Ni42MzgzIDEuNjUwNjVDNzUuMzM4NyAyLjI4MTQ1IDc0LjY4IDMuNDcyODEgNzQuNjggNS4xOTA2OUw3NC42NDg0IDYuNDA5MDhWNy4zMTQ5NEM3NC42NDg0IDEwLjI3NzIgNzUuMTU2MyAxMi4xNDIyIDc2LjE1NzQgMTIuODU3NEM3Ny4xNTYxIDEzLjU3MDQgNzkuNzU2IDEzLjkzMjEgODMuODg0OSAxMy45MzIxQzg4LjAzNTUgMTMuOTMyMSA5MC42MzggMTMuNTY3NSA5MS42MjA5IDEyLjg0NzZDOTIuNjA2MyAxMi4xMjYgOTMuMTA2IDEwLjIwNzMgOTMuMTA2IDcuMTQ1MTZDOTMuMTA2IDQuMzAxODUgOTIuNTg0OSAyLjQ5NzQzIDkxLjU1NjYgMS43ODE2N1pNNzcuOTEwNiAyLjY4MzI0Qzc4LjQ3OTEgMi4yMzg4MiA4MC40ODM3IDIuMDEzMjUgODMuODY5NCAyLjAxMzI1Qzg2LjgxNzUgMi4wMTMyNSA4OC43MTM0IDIuMjA1NDkgODkuNTA0MSAyLjU4NDU0QzkwLjI4NTggMi45NTkzIDkwLjY4MTQgMy44NTg1OCA5MC42ODE0IDUuMjU4Mkw5MC42OTczIDYuNDc1MDJWNy4zMTUwOEM5MC42OTczIDkuOTUxODQgOTAuNDEwMSAxMS41MTM0IDg5Ljg0MzggMTEuOTU2MkM4OS4yNzUzIDEyLjQwMDkgODcuMjY1MSAxMi42MjYxIDgzLjg2OTQgMTIuNjI2MUM4MC40ODM3IDEyLjYyNjEgNzguNDc5IDEyLjQwMTEgNzcuOTEwNiAxMS45NTYyQzc3LjM0NDQgMTEuNTEzMiA3Ny4wNTcxIDkuOTUxNyA3Ny4wNTcxIDcuMzE1MDhDNzcuMDU3MSA0LjY4NDQ4IDc3LjM0NDQgMy4xMjYwOCA3Ny45MTA2IDIuNjgzMjRaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik0xMTAuNjAxIDAuODM5ODQ0SDk0LjA4NTlWMi4yNjg2NUgxMDEuMTE2VjEzLjgwMDZIMTAzLjYzNVYyLjI2ODY1SDExMC42MDFWMC44Mzk4NDRaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik0xMTkuNTAzIDAuODM5ODQ0SDExNi4wNDFMMTA4LjA5NCAxMy44MDA2SDExMC43NjhMMTEyLjQyNiAxMS4wNzM1SDEyMy4yOTFMMTI0Ljk2NSAxMy44MDA2SDEyNy42MDlMMTE5LjUxNiAwLjg1OTg2OUwxMTkuNTAzIDAuODM5ODQ0Wk0xMjIuNTMyIDkuODk5NDJIMTEzLjE2OUwxMTcuODIgMi4xNTAzNUwxMjIuNTMyIDkuODk5NDJaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik0xNDMuMTk0IDcuMDA0MzRDMTQ0Ljk2MiA2LjYwNzQxIDE0NS44NTcgNS42OTM0IDE0NS44NTcgNC4yODYxOUMxNDUuODU3IDIuODc0NyAxNDUuNDM4IDEuOTM1OCAxNDQuNjEyIDEuNDk2MjRDMTQzLjc5MiAxLjA2MDU1IDE0Mi4wMzkgMC44Mzk4NDQgMTM5LjQwMSAwLjgzOTg0NEgxMjkuODE2VjEzLjgwMDZIMTQwLjQyN0MxNDIuNjU4IDEzLjgwMDYgMTQ0LjI0OCAxMy41MTkgMTQ1LjE1MSAxMi45NjMzQzE0Ni4wNiAxMi40MDQ2IDE0Ni41MjEgMTEuNDI1MiAxNDYuNTIxIDEwLjA1MjNDMTQ2LjUyMSA4LjM3OTc5IDE0NS40MDIgNy4zNTQ3OCAxNDMuMTk0IDcuMDA0MzRaTTE0Mi41OTUgNi4wNzI0NUMxNDIuMDE5IDYuMzU3NTIgMTQwLjcwNSA2LjUwMTg1IDEzOC42OSA2LjUwMTg1SDEzMi4zMzZWMi4xNDU5MkgxMzkuMzUzQzE0MS4wNzUgMi4xNDU5MiAxNDIuMjAzIDIuMjcyOTQgMTQyLjcwNSAyLjUyMzI1QzE0My4xOTkgMi43Njk1NiAxNDMuNDQ4IDMuMzI0NDEgMTQzLjQ0OCA0LjE3MzA1QzE0My40NDkgNS4xNTMgMTQzLjE2MiA1Ljc5MjA5IDE0Mi41OTUgNi4wNzI0NVpNMTMyLjMzNiA3LjgwNzkySDEzOC41NjRDMTQxLjExNCA3LjgwNzkyIDE0Mi42OTcgNy45Mzg1MiAxNDMuMjY4IDguMTk1NTVDMTQzLjgyOCA4LjQ0ODQ1IDE0NC4xMTIgOS4xNDkxOSAxNDQuMTEyIDEwLjI3ODVDMTQ0LjExMiAxMS4xODMzIDE0My44MyAxMS43ODMyIDE0My4yNzQgMTIuMDYwM0MxNDIuNzA5IDEyLjM0MjIgMTQxLjQ5MSAxMi40ODUzIDEzOS42NTQgMTIuNDg1M0wxMzcuNDU4IDEyLjQ5NDNIMTMyLjMzNlY3LjgwNzkyWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjgzMzg1SDMuNTU4NDlWMi4zMjQ1OUM0LjE2NyAxLjcxMjM5IDQuODQzOTkgMS4yNTUzOCA1LjU4NjggMC45NTMxNDNDNi4zMzEwMiAwLjY1MTE5MSA3LjE0MTIxIDAuNSA4LjAyMDIgMC41QzguOTA2NyAwLjUgOS43MDcwNSAwLjY5ODk2NSAxMC40MTk4IDEuMDk2MThDMTEuMTMzNCAxLjQ5MzY4IDExLjcwNzIgMi4wNzQyNyAxMi4xNDI1IDIuODM3MzhDMTIuNzA3NyAyLjA3NDI3IDEzLjQwMDggMS40OTM2OCAxNC4yMjMgMS4wOTYxOEMxNS4wNDUyIDAuNjk4OTY1IDE1Ljk0MjggMC41IDE2LjkxNzEgMC41QzE3LjkyNSAwLjUgMTguODEyNiAwLjcxNDU1NiAxOS41NzczIDEuMTQzOTZDMjAuMzQzMyAxLjU3MzM1IDIwLjg5MyAyLjEzMzc4IDIxLjIyODUgMi44MjU2NUMyMS41NjM0IDMuNTE3MjQgMjEuNzMwNCA0LjY0MjIzIDIxLjczMDQgNi4yMDA0OFYxMy44MDg4SDE4LjE0NTVWNy4yMjYyQzE4LjE0NTUgNS43NTUzNSAxNy45NDU3IDQuNzU5MzcgMTcuNTQ1OSA0LjIzODg2QzE3LjE0NjMgMy43MTc5MiAxNi41NDY1IDMuNDU3NzMgMTUuNzQ2OSAzLjQ1NzczQzE1LjEzODcgMy40NTc3MyAxNC41OTM2IDMuNjE2NjUgMTQuMTEwOSAzLjkzNDQ4QzEzLjYyODkgNC4yNTI1OSAxMy4yNzAyIDQuNjkxNzIgMTMuMDM1NSA1LjI1MjI4QzEyLjgwMSA1LjgxMjg1IDEyLjY4MzggNi43MTMxMyAxMi42ODM4IDcuOTUzMjZWMTMuODA4N0g5LjA5ODg1VjcuNTI0MjlDOS4wOTg4NSA2LjM2MzU0IDkuMDA1NjcgNS41MjI3NyA4LjgxNzU4IDUuMDAyMTFDOC42MzA1OSA0LjQ4MTE3IDguMzQ5MzIgNC4wOTM2OCA3Ljk3NTY0IDMuODM5MjFDNy42MDA4OCAzLjU4NDYxIDcuMTQ4MjUgMy40NTc3MyA2LjYxNjUxIDMuNDU3NzNDNi4wMjM2MyAzLjQ1NzczIDUuNDg1NjQgMy42MTg2NSA1LjAwMjUyIDMuOTQwNjNDNC41MTg3OCA0LjI2Mjc1IDQuMTU3MyA0LjcxMzYgMy45MTgyNSA1LjI5NDE5QzMuNjc4MSA1Ljg3NDUgMy41NTg0OSA2Ljc4ODc5IDMuNTU4NDkgOC4wMzcyM1YxMy44MDg4SDBWMC44MzM4NVoiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTIyLjQxNDEgMC44MzM5ODRIMjYuMDUwN0wyOS43MzQ4IDguOTc1MjZMMzMuODAwNCAwLjgzMzk4NEgzNy40NDczTDI4LjU2NDcgMTguNTU1OEgyNC44ODk3TDI3LjgwNTEgMTIuODQxNEwyMi40MTQxIDAuODMzOTg0WiIgZmlsbD0iIzAwNzhEMyIvPgo8L3N2Zz4K";
+export declare const navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIzIiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTIzIDE1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDcuNDE3OCA1LjY2MDFIMzkuNTkxNVY2Ljc0NTI2SDQ1LjM1MjdDNDUuNDE5MiA3LjA2NjkzIDQ1LjQ1MjggNy4yNzc1IDQ1LjQ1MjggNy4zNzA5QzQ1LjQ1MjggOC41OTE3NyA0NS4xOTczIDkuMzU1MjUgNDQuNjk0IDkuNjM5OTdDNDQuMTg1NCA5LjkyODEzIDQyLjgyODkgMTAuMDczOSA0MC42NjIzIDEwLjA3MzlDMzcuODI1NyAxMC4wNzM5IDM2LjA1NzggOS45MTk3IDM1LjQwNzkgOS42MTUxNEMzNC43NjUzIDkuMzE0NDkgMzQuNDM5NyA4LjQ4ODM4IDM0LjQzOTcgNy4xNTkwM0wzNC40MjY2IDUuNjMwOThMMzQuNDUzIDQuMjExNTVDMzQuNDUzIDIuOTAyNCAzNC43NDYyIDIuMDc0MzkgMzUuMzI0MiAxLjc1MDMzQzM1LjkwNzcgMS40MjMxOSAzNy4zOTE1IDEuMjU3MzEgMzkuNzM0MiAxLjI1NzMxQzQyLjI3MjQgMS4yNTczMSA0My44NjMxIDEuMzYwOTMgNDQuNDYyIDEuNTY0ODRDNDUuMDQ5IDEuNzY1MTkgNDUuMzQ2NyAyLjI5OTU3IDQ1LjM0NjcgMy4xNTMwMVYzLjQ1MjQ2SDQ3LjQyMTlWMy4wMTE4NEM0Ny40MjE5IDEuODE2NCA0Ni45NjM3IDEuMDM0NjIgNDYuMDYwMyAwLjY4ODIyN0M0NS4xNjY1IDAuMzQ1NzU4IDQzLjE1ODUgMC4xNzIwMjggNDAuMDkyIDAuMTcyMDI4QzM3LjAzMjQgMC4xNzIwMjggMzQuOTY3NSAwLjQzNzI1NyAzMy45NTQxIDAuOTYwMjMxQzMyLjkzNDUgMS40ODcwMSAzMi40MTc2IDIuNTU5NTcgMzIuNDE3NiA0LjE0ODFMMzIuNDA0MyA1LjA5NzMyTDMyLjQxNzYgNi42NzMxM0MzMi40MTc2IDguNTYyODkgMzIuODgyNiA5Ljc5NzMgMzMuNzk5NyAxMC4zNDI0QzM0LjcxMjEgMTAuODg0MSAzNi43ODg3IDExLjE1OSAzOS45NzI3IDExLjE1OUM0My4zNDA5IDExLjE1OSA0NS40NTU0IDEwLjkyNjggNDYuMjU3NyAxMC40NjgyQzQ3LjA2NTMgMTAuMDA2NiA0Ny40NzQ4IDguNzkyODMgNDcuNDc0OCA2Ljg2MTM2QzQ3LjQ3NDggNi4zNjIzOSA0Ny40NTY5IDUuOTY4MTEgNDcuNDIxNCA1LjY4OTMzTDQ3LjQxNzggNS42NjAxWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNNDkuNDEyMSAxMS4wNDk4SDYxLjExNDVWOS45NjQ2M0g1MS41MjcxVjYuMDMyMjlINjAuNzE2NlY0Ljk0NzI1SDUxLjUyNzFWMS4zNjc2SDYxLjExNDVWMC4yODI0NEg0OS40MTIxVjExLjA0OThaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik03Ni44NTk5IDEuMDY0OEM3NS45OTk4IDAuNDcyNTUgNzMuODMzIDAuMTcyMDI4IDcwLjQxOTcgMC4xNzIwMjhDNjcuNDY2NSAwLjE3MjAyOCA2NS40MTkyIDAuNDM1NzEzIDY0LjMzNjQgMC45NTU5NTNDNjMuMjQ1NSAxLjQ4IDYyLjY5MjUgMi40Njk3MyA2Mi42OTI1IDMuODk2ODlMNjIuNjY2IDQuOTA5MDlWNS42NjE2NEM2Mi42NjYgOC4xMjI2MiA2My4wOTIzIDkuNjcxOTQgNjMuOTMyNyAxMC4yNjYxQzY0Ljc3MTEgMTAuODU4NSA2Ni45NTM3IDExLjE1OSA3MC40MTk3IDExLjE1OUM3My45MDQgMTEuMTU5IDc2LjA4ODggMTAuODU2MSA3Ni45MTM5IDEwLjI1OEM3Ny43NDExIDkuNjU4NTEgNzguMTYwNiA4LjA2NDUyIDc4LjE2MDYgNS41MjA1OUM3OC4xNjA2IDMuMTU4NDggNzcuNzIzMSAxLjY1OTQzIDc2Ljg1OTkgMS4wNjQ4Wk02NS40MDQ1IDEuODEzNzlDNjUuODgxOCAxLjQ0NDU4IDY3LjU2NDUgMS4yNTcxOSA3MC40MDY3IDEuMjU3MTlDNzIuODgxNiAxLjI1NzE5IDc0LjQ3MzEgMS40MTY5IDc1LjEzNjkgMS43MzE4Qzc1Ljc5MzEgMi4wNDMxMyA3Ni4xMjUyIDIuNzkwMjIgNzYuMTI1MiAzLjk1Mjk4TDc2LjEzODYgNC45NjM4N1Y1LjY2MTc2Qzc2LjEzODYgNy44NTIyOCA3NS44OTc1IDkuMTQ5NTYgNzUuNDIyMSA5LjUxNzQ2Qzc0Ljk0NDggOS44ODY5IDczLjI1NzQgMTAuMDczOSA3MC40MDY3IDEwLjA3MzlDNjcuNTY0NSAxMC4wNzM5IDY1Ljg4MTYgOS44ODcwMiA2NS40MDQ1IDkuNTE3NDZDNjQuOTI5MiA5LjE0OTQ0IDY0LjY4ODEgNy44NTIxNiA2NC42ODgxIDUuNjYxNzZDNjQuNjg4MSAzLjQ3NjM1IDY0LjkyOTIgMi4xODE2OSA2NS40MDQ1IDEuODEzNzlaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik05Mi44NDYzIDAuMjgyNDRINzguOTgyNFYxLjQ2OTQ0SDg0Ljg4MzVWMTEuMDQ5OEg4Ni45OTg2VjEuNDY5NDRIOTIuODQ2M1YwLjI4MjQ0WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMTAwLjMxOCAwLjI4MjQ0SDk3LjQxMTVMOTAuNzQwMiAxMS4wNDk4SDkyLjk4NTRMOTQuMzc3NCA4Ljc4NDE3SDEwMy40OThMMTA0LjkwMyAxMS4wNDk4SDEwNy4xMjJMMTAwLjMyOSAwLjI5OTA3NkwxMDAuMzE4IDAuMjgyNDRaTTEwMi44NjEgNy44MDg4MUg5NS4wMDFMOTguOTA0OCAxLjM3MTE3TDEwMi44NjEgNy44MDg4MVoiIGZpbGw9IiMyNTQ3N0IiLz4KPHBhdGggZD0iTTEyMC4yMDcgNS40MDM2OEMxMjEuNjkxIDUuMDczOTMgMTIyLjQ0MiA0LjMxNDYgMTIyLjQ0MiAzLjE0NTU0QzEyMi40NDIgMS45NzI5MiAxMjIuMDkxIDEuMTkyOTIgMTIxLjM5NyAwLjgyNzc1NEMxMjAuNzA5IDAuNDY1Nzk2IDExOS4yMzcgMC4yODI0NCAxMTcuMDIyIDAuMjgyNDRIMTA4Ljk3N1YxMS4wNDk4SDExNy44ODRDMTE5Ljc1NyAxMS4wNDk4IDEyMS4wOTEgMTAuODE1OCAxMjEuODUgMTAuMzU0MkMxMjIuNjEzIDkuODkwMDEgMTIzIDkuMDc2MzggMTIzIDcuOTM1ODRDMTIzIDYuNTQ2MzYgMTIyLjA2IDUuNjk0ODIgMTIwLjIwNyA1LjQwMzY4Wk0xMTkuNzA0IDQuNjI5NUMxMTkuMjIgNC44NjYzMyAxMTguMTE4IDQuOTg2MjMgMTE2LjQyNiA0Ljk4NjIzSDExMS4wOTJWMS4zNjc0OEgxMTYuOTgzQzExOC40MjggMS4zNjc0OCAxMTkuMzc1IDEuNDczIDExOS43OTYgMS42ODA5NkMxMjAuMjExIDEuODg1NTggMTIwLjQyIDIuMzQ2NTMgMTIwLjQyIDMuMDUxNTVDMTIwLjQyIDMuODY1NjYgMTIwLjE4IDQuMzk2NTkgMTE5LjcwNCA0LjYyOTVaTTExMS4wOTIgNi4wNzEyN0gxMTYuMzJDMTE4LjQ2MSA2LjA3MTI3IDExOS43ODkgNi4xNzk3NiAxMjAuMjY5IDYuMzkzM0MxMjAuNzM5IDYuNjAzMzkgMTIwLjk3OCA3LjE4NTU1IDEyMC45NzggOC4xMjM3MUMxMjAuOTc4IDguODc1NDMgMTIwLjc0MSA5LjM3MzgxIDEyMC4yNzQgOS42MDM5OUMxMTkuOCA5LjgzODIgMTE4Ljc3NyA5Ljk1NzAzIDExNy4yMzUgOS45NTcwM0wxMTUuMzkxIDkuOTY0NTJIMTExLjA5MlY2LjA3MTI3WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjI3NzM1MUgyLjk4NzI1VjEuNTE1OEMzLjQ5ODA3IDEuMDA3MjEgNC4wNjYzOCAwLjYyNzU0NCA0LjY4OTk1IDAuMzc2NDU1QzUuMzE0NyAwLjEyNTYwNCA1Ljk5NDg0IDAgNi43MzI3MiAwQzcuNDc2OTEgMCA4LjE0ODc4IDAuMTY1MjkzIDguNzQ3MTQgMC40OTUyODZDOS4zNDYxNyAwLjgyNTUxNiA5LjgyNzg2IDEuMzA3ODUgMTAuMTkzMyAxLjk0MTgxQzEwLjY2NzcgMS4zMDc4NSAxMS4yNDk2IDAuODI1NTE2IDExLjkzOTggMC40OTUyODZDMTIuNjMgMC4xNjUyOTMgMTMuMzgzNSAwIDE0LjIwMTQgMEMxNS4wNDc1IDAgMTUuNzkyNiAwLjE3ODI0NiAxNi40MzQ2IDAuNTM0OTc1QzE3LjA3NzYgMC44OTE3MDQgMTcuNTM5IDEuMzU3MjggMTcuODIwNyAxLjkzMjA3QzE4LjEwMTggMi41MDY2MSAxOC4yNDIgMy40NDEyMSAxOC4yNDIgNC43MzU3NVYxMS4wNTY1SDE1LjIzMjZWNS41ODc4OUMxNS4yMzI2IDQuMzY1OTUgMTUuMDY0OSAzLjUzODU0IDE0LjcyOTIgMy4xMDYxMUMxNC4zOTM4IDIuNjczMzMgMTMuODkwMyAyLjQ1NzE4IDEzLjIxOTEgMi40NTcxOEMxMi43MDg1IDIuNDU3MTggMTIuMjUwOSAyLjU4OTIgMTEuODQ1NyAyLjg1MzI0QzExLjQ0MSAzLjExNzUyIDExLjE0IDMuNDgyMzMgMTAuOTQzIDMuOTQ4MDNDMTAuNzQ2MSA0LjQxMzcyIDEwLjY0NzYgNS4xNjE2NCAxMC42NDc2IDYuMTkxOVYxMS4wNTY0SDcuNjM4MjJWNS44MzU1M0M3LjYzODIyIDQuODcxMjIgNy41NTk5OSA0LjE3MjczIDcuNDAyMSAzLjc0MDE5QzcuMjQ1MTIgMy4zMDc0MSA3LjAwOSAyLjk4NTUgNi42OTUzMiAyLjc3NDFDNi4zODA3MSAyLjU2MjU4IDYuMDAwNzQgMi40NTcxOCA1LjU1NDM2IDIuNDU3MThDNS4wNTY2NiAyLjQ1NzE4IDQuNjA1MDMgMi41OTA4NiA0LjE5OTQ3IDIuODU4MzVDMy43OTMzOCAzLjEyNTk2IDMuNDg5OTMgMy41MDA1MSAzLjI4OTI1IDMuOTgyODRDMy4wODc2NSA0LjQ2NDk0IDIuOTg3MjUgNS4yMjQ1IDIuOTg3MjUgNi4yNjE2NlYxMS4wNTY1SDBWMC4yNzczNTFaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0xOC44MTg0IDAuMjc3MzY3SDIxLjg3MTJMMjQuOTYzOSA3LjA0MDg1TDI4LjM3NjkgMC4yNzczNjdIMzEuNDM4M0wyMy45ODE2IDE1SDIwLjg5NjZMMjMuMzQ0IDEwLjI1MjdMMTguODE4NCAwLjI3NzM2N1oiIGZpbGw9IiMwMDc4RDMiLz4KPC9zdmc+Cg==";
 export declare const navHeaderImageCollapsed = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDM4IDEzIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE1LjE5OTcgMC4yMjU0NTdIMTcuNjAyOEwyMC4wMzczIDYuMDk0TDIyLjcyNCAwLjIyNTQ1N0gyNS4xMzM5TDE5LjI2NDEgMTNIMTYuODM1NkwxOC43NjIyIDguODgwODhMMTUuMTk5NyAwLjIyNTQ1N1oiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTAuMzg2NzE5IDAuMjQwNjUySDIuNzM4MjVWMS4zMTUyM0MzLjE0MDM2IDAuODczOTM1IDMuNTg3NzMgMC41NDQ1MDggNC4wNzg2IDAuMzI2NjQzQzQuNTcwMzkgMC4xMDg5ODQgNS4xMDU3OSAwIDUuNjg2NjUgMEM2LjI3MjQ2IDAgNi44MDEzNSAwLjE0MzQyMiA3LjI3MjM4IDAuNDI5NzVDNy43NDM5MiAwLjcxNjI4NCA4LjEyMzEgMS4xMzQ4IDguNDEwNzQgMS42ODQ4N0M4Ljc4NDI0IDEuMTM0OCA5LjI0MjI1IDAuNzE2Mjg0IDkuNzg1NiAwLjQyOTc1QzEwLjMyODkgMC4xNDM0MjIgMTAuOTIyMSAwIDExLjU2NTkgMEMxMi4yMzIgMCAxMi44MTg1IDAuMTU0NjYgMTMuMzIzOCAwLjQ2NDE4OEMxMy44MyAwLjc3MzcxNSAxNC4xOTMzIDEuMTc3NjkgMTQuNDE1IDEuNjc2NDJDMTQuNjM2MyAyLjE3NDk0IDE0Ljc0NjYgMi45ODU4NyAxNC43NDY2IDQuMTA5MTJWOS41OTM0OEgxMi4zNzc3VjQuODQ4NUMxMi4zNzc3IDMuNzg4MjUgMTIuMjQ1NiAzLjA3MDMyIDExLjk4MTQgMi42OTUxMUMxMS43MTczIDIuMzE5NiAxMS4zMjEgMi4xMzIwNSAxMC43OTI2IDIuMTMyMDVDMTAuMzkwNyAyLjEzMjA1IDEwLjAzMDUgMi4yNDY2IDkuNzExNTIgMi40NzU3QzkuMzkyOTkgMi43MDUwMSA5LjE1NTk4IDMuMDIxNTUgOS4wMDA4OSAzLjQyNTYzQzguODQ1OTIgMy44Mjk3IDguNzY4NDMgNC40Nzg2NiA4Ljc2ODQzIDUuMzcyNTlWOS41OTMzOEg2LjM5OTQ0VjUuMDYzMzhDNi4zOTk0NCA0LjIyNjY2IDYuMzM3ODYgMy42MjA2IDYuMjEzNTcgMy4yNDUyOUM2LjA5IDIuODY5NzggNS45MDQxMyAyLjU5MDQ2IDUuNjU3MiAyLjQwNzAzQzUuNDA5NTQgMi4yMjM1IDUuMTEwNDQgMi4xMzIwNSA0Ljc1OTA1IDIuMTMyMDVDNC4zNjcyNyAyLjEzMjA1IDQuMDExNzUgMi4yNDgwNCAzLjY5MjUgMi40ODAxNEMzLjM3MjgzIDIuNzEyMzMgMy4xMzM5NiAzLjAzNzMzIDIuOTc1OTggMy40NTU4NEMyLjgxNzI5IDMuODc0MTQgMi43MzgyNSA0LjUzMzIgMi43MzgyNSA1LjQzMzEyVjkuNTkzNDhIMC4zODY3MTlWMC4yNDA2NTJaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0zNy41Njg1IDQuODc0NjhIMzEuNDA3N1Y1LjgxNjI2SDM1Ljk0MjlDMzUuOTk1MiA2LjA5NTM3IDM2LjAyMTYgNi4yNzgwNyAzNi4wMjE2IDYuMzU5MTJDMzYuMDIxNiA3LjQxODQ0IDM1LjgyMDYgOC4wODA5IDM1LjQyNDMgOC4zMjc5NEMzNS4wMjQgOC41Nzc5OCAzMy45NTYyIDguNzA0NDkgMzIuMjUwNiA4LjcwNDQ5QzMwLjAxNzcgOC43MDQ0OSAyOC42MjYgOC41NzA2NiAyOC4xMTQ0IDguMzA2MzlDMjcuNjA4NiA4LjA0NTUzIDI3LjM1MjMgNy4zMjg3MyAyNy4zNTIzIDYuMTc1MjhMMjcuMzQxOSA0Ljg0OTQyTDI3LjM2MjcgMy42MTc4MUMyNy4zNjI3IDIuNDgxODggMjcuNTkzNSAxLjc2MzQzIDI4LjA0ODUgMS40ODIyNkMyOC41MDc5IDEuMTk4NDEgMjkuNjc1OSAxLjA1NDQ3IDMxLjUyIDEuMDU0NDdDMzMuNTE4MSAxLjA1NDQ3IDM0Ljc3MDIgMS4xNDQzOCAzNS4yNDE3IDEuMzIxMzFDMzUuNzAzOCAxLjQ5NTE1IDM1LjkzODEgMS45NTg4MiAzNS45MzgxIDIuNjk5MzNWMi45NTkxNkgzNy41NzE3VjIuNTc2ODRDMzcuNTcxNyAxLjUzOTU5IDM3LjIxMSAwLjg2MTI0NiAzNi40OTk5IDAuNTYwNjlDMzUuNzk2MyAwLjI2MzUzNSAzNC4yMTU2IDAuMTEyNzkzIDMxLjgwMTcgMC4xMTI3OTNDMjkuMzkzMiAwLjExMjc5MyAyNy43Njc3IDAuMzQyOTI4IDI2Ljk3IDAuNzk2NzAxQzI2LjE2NzQgMS4yNTM3NyAyNS43NjA0IDIuMTg0NDIgMjUuNzYwNCAzLjU2Mjc1TDI1Ljc1IDQuMzg2MzdMMjUuNzYwNCA1Ljc1MzY3QzI1Ljc2MDQgNy4zOTMzOCAyNi4xMjY1IDguNDY0NDYgMjYuODQ4NSA4LjkzNzQxQzI3LjU2NjYgOS40MDc0NyAyOS4yMDE0IDkuNjQ1OTYgMzEuNzA3OCA5LjY0NTk2QzM0LjM1OTIgOS42NDU5NiAzNi4wMjM3IDkuNDQ0NDkgMzYuNjU1MyA5LjA0NjZDMzcuMjkxIDguNjQ2MDMgMzcuNjEzMyA3LjU5Mjg5IDM3LjYxMzMgNS45MTY5OUMzNy42MTMzIDUuNDg0MDUgMzcuNTk5MyA1LjE0MTk0IDM3LjU3MTMgNC45MDAwNUwzNy41Njg1IDQuODc0NjhaIiBmaWxsPSIjMjU0NzdCIi8+Cjwvc3ZnPg==";
 export declare const detectOverlayScrollbar: () => boolean;
 export declare function isImageUrl(str?: string | ReactNode): boolean;