@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/es/components/MainHeaderNavigation/globalNavStyles.js

@@ -7,7 +7,7 @@ import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 const LogoLink = styled.a `
     height: ${navMaxHeight};
     flex: 0 0 auto;
-`;
+`;
 const DesktopMenuContainer = styled.nav `
     display: none;
     flex-direction: column;
@@ -21,7 +21,7 @@ const DesktopMenuContainer = styled.nav `
         flex-direction: row;
         overflow: initial;
     }
-`;
+`;
 const MobileMenuButton = styled.button `
     font-family: inherit;
     border: 0;
@@ -45,7 +45,7 @@ const MobileMenuButton = styled.button `
             0px 0px 0px 4px ${theme.color.focus.dark};
         color: ${theme.color.text.black};
     }
-`;
+`;
 const HeaderIconContainer = styled.div `
     display: flex;
     height: ${navMaxHeight};
@@ -65,7 +65,7 @@ const HeaderIconContainer = styled.div `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
     }
-`;
+`;
 const MenuItem = styled.li `
     display: ${p => (p.isFeaturedItem ? 'grid' : 'flex')};
     align-items: center;
@@ -92,7 +92,7 @@ const MenuItem = styled.li `
             font-size: ${theme.fontSize.default};
         `}
     }
-`;
+`;
 const MenuLink = styled.a `
     overflow: visible;
     text-decoration: none;
@@ -105,7 +105,7 @@ const MenuLink = styled.a `
         text-decoration-skip-ink: auto;
         text-decoration-thickness: from-font;
     }
-`;
+`;
 const MenuLinkWithChildren = styled.button `
     line-height: ${theme.lineHeight.xs};
     text-align: left;
@@ -129,7 +129,7 @@ const MenuLinkWithChildren = styled.button `
         }
     }
 
-`;
+`;
 const MenuList = styled.ul `
     display: flex;
     max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
@@ -139,7 +139,7 @@ const MenuList = styled.ul `
     padding: 0;
     background-color: ${theme.color.background.white};
     transition: all 300ms ease-in-out;
-`;
+`;
 const FeaturedBlock = styled.li `
     background-color: ${theme.color.background.sand.E01};
     padding: ${getMultipliedSize(theme.base.baseHeight, 1)};

package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const BusinessMenu: () => React.JSX.Element | null;
+export default BusinessMenu;

package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -7,8 +7,8 @@ import NavContext from '../context/NavContext.js';
 const BusinessMenuLink = styled.a `
     color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
     display: block;
-    margin: ${p => !p.isMobileMenu
-    ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
+    margin: ${p => !p.isMobileMenu
+    ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
     : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};
     &:hover,
     &:focus {
@@ -16,11 +16,11 @@ const BusinessMenuLink = styled.a `
         color: ${theme.color.text.pink};
         outline: none;
     }
-`;
+`;
 const BusinessMenuItem = styled.li `
     display: flex;
     overflow: hidden;
-`;
+`;
 const BusinessMenuList = styled.ul `
     display: ${({ isMobileMenu }) => (!isMobileMenu ? 'inline-flex' : 'block')};
     align-items: center;
@@ -31,20 +31,20 @@ const BusinessMenuList = styled.ul `
     background-color: ${theme.color.background.white.default};
     font-size: ${({ isMobileMenu }) => (isMobileMenu ? theme.fontSize.default : theme.fontSize.s)};
     height: 100%;
-`;
-const BusinessMenu = () => {
-    var _a;
-    const { items, lang, isMobileMenu, resetMenuEvents } = useContext(NavContext);
-    const ref = useRef(null);
-    const currentBusinessId = items.businessId;
-    const businessMenuItems = (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items;
-    if (!(businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) ||
-        !currentBusinessId ||
-        (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
-        return null;
-    }
-    return (React__default.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
+`;
+const BusinessMenu = () => {
+    var _a;
+    const { items, lang, isMobileMenu, resetMenuEvents } = useContext(NavContext);
+    const ref = useRef(null);
+    const currentBusinessId = items.businessId;
+    const businessMenuItems = (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items;
+    if (!(businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) ||
+        !currentBusinessId ||
+        (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
+        return null;
+    }
+    return (React__default.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+        React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
 };
 
 export { BusinessMenu as default };

package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.d.ts

@@ -0,0 +1,3 @@
+import type { FunctionComponent } from 'react';
+declare const DesktopMenu: FunctionComponent;
+export default DesktopMenu;

package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.js

@@ -20,7 +20,7 @@ const fadeIn = keyframes `
         opacity: 1;
         transform: translateY(0px);
     }
-`;
+`;
 const fadeRight = keyframes `
     0% {
         opacity: 0;
@@ -30,19 +30,19 @@ const fadeRight = keyframes `
         opacity: 1;
         transform: translate(0px);
     }
-`;
+`;
 const fadeInAnimation = css `
     animation: ${fadeIn} 0.3s ease-in-out;
-`;
+`;
 const fadeRightAnimation = css `
     animation: ${fadeRight} 0.3s ease-in-out;
-`;
+`;
 const noAnimation = css `
     animation: none;
-`;
+`;
 const SubMenuListRight = styled.div `
-    display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
-    ? 'block'
+    display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
+    ? 'block'
     : 'none'};
     ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
     top: -${getMultipliedSize(theme.base.baseHeight, 2)};
@@ -55,7 +55,7 @@ const SubMenuListRight = styled.div `
     ${media.xl `
         width: ${subMenuWidthXl};
     `};
-`;
+`;
 const SubMenuItem = styled.li `
     display: block;
     position: relative;
@@ -74,7 +74,7 @@ const SubMenuItem = styled.li `
             }
         }
     }
-`;
+`;
 const DesktopMenuList = styled(MenuList) `
     ul {
         padding-left: 0;
@@ -105,7 +105,7 @@ const DesktopMenuList = styled(MenuList) `
         `};
     }
     margin-top: -2px;
-`;
+`;
 const DesktopMenuItem = styled(MenuItem) `
     &:first-child > ${MenuLinkWithChildren} {
         margin: 0 ${menuItemMargin};
@@ -142,15 +142,15 @@ const DesktopMenuItem = styled(MenuItem) `
             color: ${theme.color.text.pink};
         }
     }
-`;
+`;
 const SubMenuList = styled.div `
     position: absolute;
     left: -${getMultipliedSize(theme.base.baseHeight, 0.5)};
     display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
     z-index: ${({ navZIndex }) => navZIndex + 1};
     margin-top: 1px;
-    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
-    ? fadeInAnimation
+    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    ? fadeInAnimation
     : noAnimation};
 
     width: ${subMenuWidth};
@@ -161,91 +161,91 @@ const SubMenuList = styled.div `
         border-top-left-radius: 0;
         border-top-right-radius: 0;
     }
-`;
-const SubMenuLevel2 = ({ menuItem }) => {
-    const { lang, menuLevel, currentUrl } = useContext(NavContext);
-    // Handle the case where the submenu is not visible
-    const measureRef = useRef(null);
-    useEffect(() => {
-        const subNavArea = measureRef.current;
-        const handleOffSet = () => {
-            if (menuLevel.level2 === menuItem.id && measureRef.current) {
-                const offsetFix = window.innerHeight - subNavArea.getBoundingClientRect().bottom;
-                if (offsetFix < 0) {
-                    subNavArea.style.setProperty('--nav-item-overflow-fix', `${offsetFix}px`);
-                }
-            }
-        };
-        handleOffSet();
-    }, [menuLevel.level2, menuItem.id]);
-    return (React__default.createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
-        React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
-            React__default.createElement("ul", null, menuItem.pages.map((item, index) => {
-                const menuUrl = item.urls[lang];
-                return (React__default.createElement(SubMenuItem, { key: item.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
-                    React__default.createElement(LinkModifier, { menuItem: item, tabIndex: false })));
-            })))));
-};
-const SubMenuLevel1 = ({ menuItem }) => {
-    const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
-    const level1HasElements = Boolean(menuItem.pages.length);
-    const menuClick = (element) => (e) => {
-        e.preventDefault();
-        handleNavMenuClick(element.id, 'level2');
-    };
-    if (!level1HasElements) {
-        return null;
-    }
-    return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
-        React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
-            React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
-                const menuUrl = element.urls[lang];
-                if (element.pages.length) {
-                    return (React__default.createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                        React__default.createElement(MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-                            React__default.createElement("span", null, element.titles[lang]),
-                            React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" })),
-                        React__default.createElement(SubMenuLevel2, { menuItem: element })));
-                }
-                return (React__default.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                    React__default.createElement(LinkModifier, { menuItem: element, tabIndex: false })));
-            })))));
-};
-const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
-    const menuClickMain = (element) => (e) => {
-        e.preventDefault();
-        handleNavMenuClick(element.id, 'level1');
-    };
-    const menuUrl = menuItem.urls[lang];
-    return (React__default.createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
-        React__default.createElement(MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-            React__default.createElement("span", null, menuItem.titles[lang])),
-        React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
-};
-const DesktopMenu = () => {
-    var _a;
-    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = useContext(NavContext);
-    const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
-    const ref = useRef(null);
-    useOutsideClick(ref, () => {
-        if (menuLevel.level1 || menuLevel.level2) {
-            resetMenuEvents();
-        }
-    });
-    if (!mainNavigation.length) {
-        return null;
-    }
-    return (React__default.createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
-        var _a;
-        const menuHasChildren = !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
-        if (menuHasChildren) {
-            return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
-        }
-        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
-                isSelected(currentUrl, navElement.urls[lang]) },
-            React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
-    })));
+`;
+const SubMenuLevel2 = ({ menuItem }) => {
+    const { lang, menuLevel, currentUrl } = useContext(NavContext);
+    // Handle the case where the submenu is not visible
+    const measureRef = useRef(null);
+    useEffect(() => {
+        const subNavArea = measureRef.current;
+        const handleOffSet = () => {
+            if (menuLevel.level2 === menuItem.id && measureRef.current) {
+                const offsetFix = window.innerHeight - subNavArea.getBoundingClientRect().bottom;
+                if (offsetFix < 0) {
+                    subNavArea.style.setProperty('--nav-item-overflow-fix', `${offsetFix}px`);
+                }
+            }
+        };
+        handleOffSet();
+    }, [menuLevel.level2, menuItem.id]);
+    return (React__default.createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
+        React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
+            React__default.createElement("ul", null, menuItem.pages.map((item, index) => {
+                const menuUrl = item.urls[lang];
+                return (React__default.createElement(SubMenuItem, { key: item.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
+                    React__default.createElement(LinkModifier, { menuItem: item, tabIndex: false })));
+            })))));
+};
+const SubMenuLevel1 = ({ menuItem }) => {
+    const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
+    const level1HasElements = Boolean(menuItem.pages.length);
+    const menuClick = (element) => (e) => {
+        e.preventDefault();
+        handleNavMenuClick(element.id, 'level2');
+    };
+    if (!level1HasElements) {
+        return null;
+    }
+    return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
+        React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
+            React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
+                const menuUrl = element.urls[lang];
+                if (element.pages.length) {
+                    return (React__default.createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                        React__default.createElement(MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+                            React__default.createElement("span", null, element.titles[lang]),
+                            React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" })),
+                        React__default.createElement(SubMenuLevel2, { menuItem: element })));
+                }
+                return (React__default.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                    React__default.createElement(LinkModifier, { menuItem: element, tabIndex: false })));
+            })))));
+};
+const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
+    const { lang, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
+    const menuClickMain = (element) => (e) => {
+        e.preventDefault();
+        handleNavMenuClick(element.id, 'level1');
+    };
+    const menuUrl = menuItem.urls[lang];
+    return (React__default.createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
+        React__default.createElement(MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+            React__default.createElement("span", null, menuItem.titles[lang])),
+        React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
+};
+const DesktopMenu = () => {
+    var _a;
+    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = useContext(NavContext);
+    const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
+    const ref = useRef(null);
+    useOutsideClick(ref, () => {
+        if (menuLevel.level1 || menuLevel.level2) {
+            resetMenuEvents();
+        }
+    });
+    if (!mainNavigation.length) {
+        return null;
+    }
+    return (React__default.createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
+        var _a;
+        const menuHasChildren = !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
+        if (menuHasChildren) {
+            return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+        }
+        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
+                isSelected(currentUrl, navElement.urls[lang]) },
+            React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
+    })));
 };
 
 export { DesktopMenu as default };

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -0,0 +1,172 @@
+import React from 'react';
+import type { MainNavigationProps } from '../MainNavigation';
+export declare const IconContainer: import("styled-components").StyledComponent<"div", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, {
+    isActive?: boolean | undefined;
+    collapseSize: number;
+}, never>;
+declare const HeaderNavigationElements: ({ navElementProps, }: {
+    navElementProps: MainNavigationProps;
+}) => React.JSX.Element;
+export default HeaderNavigationElements;