@dnanpm/styleguide 3.2.0 → 3.3.1

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -1,169 +1,169 @@
-declare const TooltipWrapper: import("styled-components").StyledComponent<"button", {
-    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;
-    };
-}, {
-    collapseSize: number;
-    isHighlighted?: boolean | undefined;
-    isLoggedIn?: boolean | undefined;
-}, never>;
-export default TooltipWrapper;
-export { TooltipWrapper };
+declare const TooltipWrapper: import("styled-components").StyledComponent<"button", {
+    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;
+    };
+}, {
+    collapseSize: number;
+    isHighlighted?: boolean | undefined;
+    isLoggedIn?: boolean | undefined;
+}, never>;
+export default TooltipWrapper;
+export { TooltipWrapper };

package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-interface MinicartTooltipProps {
-    minicartAmount: number;
-    minicartLabel?: string;
-}
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
-export default MinicartTooltip;
+import React from 'react';
+interface MinicartTooltipProps {
+    minicartAmount: number;
+    minicartLabel?: string;
+}
+declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
+export default MinicartTooltip;

package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js

@@ -1,19 +1,18 @@
+import { Cart } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
 import theme from '../../../themes/theme.js';
+import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import Icon from '../../Icon/Icon.js';
-import 'tslib';
-import hlCart from '../../Icons/hlCart.js';
 import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 
-const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: hlCart, size: navIconSize }),
-        React__default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
+    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
+        React__default.createElement(Icon, { icon: Cart, size: navIconSize }),
+        React__default.createElement("span", null, minicartLabel),
+        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
 };
 
 export { MinicartTooltip as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/MobileMenu.d.ts

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

package/build/es/components/MainHeaderNavigation/ChildComponents/MobileMenu.js

@@ -1,3 +1,4 @@
+import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
 import React__default, { useContext, useRef, useMemo } from 'react';
 import { useSpring, animated } from 'react-spring';
 import styled from '../../../themes/styled.js';
@@ -5,9 +6,6 @@ import theme from '../../../themes/theme.js';
 import { menuLevelsAmount, navMaxHeight, mobileNavMaxWidth, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
-import 'tslib';
-import hlChevronLeft from '../../Icons/hlChevronLeft.js';
-import hlChevronRight from '../../Icons/hlChevronRight.js';
 import MobileMenuContext from '../context/MobileMenuContext.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
@@ -19,9 +17,9 @@ const MobileMenuWrapper = styled.div `
         border: 0;
         background: transparent;
     }
-`;
-const mobileMenu = `calc(100vh - ${headerMaxHeight})`;
-const MenuLinkBackLink = styled(MenuLink) ``;
+`;
+const mobileMenu = `calc(100vh - ${headerMaxHeight})`;
+const MenuLinkBackLink = styled(MenuLink) ``;
 const MobileMenuContainer = styled.div `
     width: 100%;
     position: absolute;
@@ -90,99 +88,99 @@ const MobileMenuContainer = styled.div `
             height: auto;
         }
     }
-`;
-const useTabNavigationDisabled = (scrollPosition, indexLevel) => scrollPosition !== indexLevel;
-const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = useContext(NavContext);
-    const levels = {
-        level1Items,
-        level2Items,
-    };
-    const menuElementLevel = `level${currentLevel - 1}Items`;
-    const menuElements = levels[menuElementLevel];
-    const mobileMenuBackClick = () => {
-        handleNavMenuClick(null, `level${currentLevel - 1}Mobile`);
-    };
-    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
-    const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React__default.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default.createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default.createElement(Icon, { icon: hlChevronLeft, size: "1rem" }),
-            backLink.titles[lang])));
-};
-const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
-    var _a;
-    const { handleNavMenuClick, menuLevel, lang, currentUrl } = useContext(NavContext);
-    const { mobileMenuRef } = useContext(MobileMenuContext);
-    const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
-    const indexLevel = currentLevel - 1;
-    const tabNavigationDisabled = useTabNavigationDisabled(menuLevel.scrollPosition, indexLevel);
-    const menuUrl = menuItem.urls[lang] || '';
-    const mobileMenuClick = (element) => (e) => {
-        var _a, _b;
-        (_b = (_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === null || _b === void 0 ? void 0 : _b.call(_a, {
-            top: 0,
-            left: 0,
-            behavior: 'smooth',
-        });
-        e.preventDefault();
-        handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
-    };
-    const renderMenuItem = (children) => (React__default.createElement(MenuItem, { key: menuItem.id, role: "presentation", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) }, children));
-    if (hasChildren && currentLevel < 3) {
-        return renderMenuItem(React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled ? -1 : undefined },
-            menuItem.titles[lang],
-            React__default.createElement(Icon, { icon: hlChevronRight, size: "1.5rem", color: theme.color.default.pink })));
-    }
-    return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
-};
-const SubMenuMobile = ({ currentLevel, menuItem }) => {
-    const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
-    const indexLevel = currentLevel - 1;
-    const { collapseSize, menuLevel: { scrollPosition }, } = useContext(NavContext);
-    const tabNavigationDisabled = useTabNavigationDisabled(scrollPosition, indexLevel);
-    if (!menuItem.pages.length) {
-        return null;
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, tabIndex: tabNavigationDisabled }))))),
-        menuItem.pages
-            .filter(subMenuItem => !featuredItems.includes(subMenuItem))
-            .map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
-};
-const NavigationMenuMobile = () => {
-    const { items, menuLevel, level1Items, level2Items } = useContext(NavContext);
-    const { mainNavigation } = items;
-    if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
-        return null;
-    }
-    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
-        React__default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
-    return (React__default.createElement(React__default.Fragment, null,
-        renderMenuList(0, 1, mainNavigation),
-        menuLevel.level1Mobile !== null &&
-            renderMenuList(1, 2, level1Items[menuLevel.level1Mobile]),
-        menuLevel.level2Mobile !== null &&
-            renderMenuList(2, 3, level2Items[menuLevel.level2Mobile])));
-};
-const RenderMobileMenu = () => {
-    const { menuLevel, isMobileMenuOpen } = useContext(NavContext);
-    const mobileMenuRef = useRef(null);
-    const slidingMenuAnimation = useSpring({
-        transform: `translateX(${(menuLevel.scrollPosition / menuLevelsAmount) * -100}%)`,
-    });
-    const mobileMenuContext = useMemo(() => ({
-        mobileMenuRef,
-    }), [mobileMenuRef]);
-    if (!isMobileMenuOpen) {
-        return null;
-    }
-    return (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React__default.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
-            React__default.createElement(MobileMenuWrapper, null,
-                React__default.createElement(animated.div, { style: slidingMenuAnimation },
-                    React__default.createElement(NavigationMenuMobile, null))))));
+`;
+const useTabNavigationDisabled = (scrollPosition, indexLevel) => scrollPosition !== indexLevel;
+const MenuItemBackLink = ({ currentLevel }) => {
+    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = useContext(NavContext);
+    const levels = {
+        level1Items,
+        level2Items,
+    };
+    const menuElementLevel = `level${currentLevel - 1}Items`;
+    const menuElements = levels[menuElementLevel];
+    const mobileMenuBackClick = () => {
+        handleNavMenuClick(null, `level${currentLevel - 1}Mobile`);
+    };
+    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
+    const backLink = getBackLink(menuElements, currentLevel - 1);
+    return (React__default.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
+        React__default.createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default.createElement(Icon, { icon: ChevronLeft, size: "1rem" }),
+            backLink.titles[lang])));
+};
+const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
+    var _a;
+    const { handleNavMenuClick, menuLevel, lang, currentUrl } = useContext(NavContext);
+    const { mobileMenuRef } = useContext(MobileMenuContext);
+    const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
+    const indexLevel = currentLevel - 1;
+    const tabNavigationDisabled = useTabNavigationDisabled(menuLevel.scrollPosition, indexLevel);
+    const menuUrl = menuItem.urls[lang] || '';
+    const mobileMenuClick = (element) => (e) => {
+        var _a, _b;
+        (_b = (_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            top: 0,
+            left: 0,
+            behavior: 'smooth',
+        });
+        e.preventDefault();
+        handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
+    };
+    const renderMenuItem = (children) => (React__default.createElement(MenuItem, { key: menuItem.id, role: "presentation", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) }, children));
+    if (hasChildren && currentLevel < 3) {
+        return renderMenuItem(React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled ? -1 : undefined },
+            menuItem.titles[lang],
+            React__default.createElement(Icon, { icon: ChevronRight, color: theme.color.default.pink })));
+    }
+    return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
+};
+const SubMenuMobile = ({ currentLevel, menuItem }) => {
+    const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
+    const indexLevel = currentLevel - 1;
+    const { collapseSize, menuLevel: { scrollPosition }, } = useContext(NavContext);
+    const tabNavigationDisabled = useTabNavigationDisabled(scrollPosition, indexLevel);
+    if (!menuItem.pages.length) {
+        return null;
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
+        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, tabIndex: tabNavigationDisabled }))))),
+        menuItem.pages
+            .filter(subMenuItem => !featuredItems.includes(subMenuItem))
+            .map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
+};
+const NavigationMenuMobile = () => {
+    const { items, menuLevel, level1Items, level2Items } = useContext(NavContext);
+    const { mainNavigation } = items;
+    if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
+        return null;
+    }
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
+        React__default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
+    return (React__default.createElement(React__default.Fragment, null,
+        renderMenuList(0, 1, mainNavigation),
+        menuLevel.level1Mobile !== null &&
+            renderMenuList(1, 2, level1Items[menuLevel.level1Mobile]),
+        menuLevel.level2Mobile !== null &&
+            renderMenuList(2, 3, level2Items[menuLevel.level2Mobile])));
+};
+const RenderMobileMenu = () => {
+    const { menuLevel, isMobileMenuOpen } = useContext(NavContext);
+    const mobileMenuRef = useRef(null);
+    const slidingMenuAnimation = useSpring({
+        transform: `translateX(${(menuLevel.scrollPosition / menuLevelsAmount) * -100}%)`,
+    });
+    const mobileMenuContext = useMemo(() => ({
+        mobileMenuRef,
+    }), [mobileMenuRef]);
+    if (!isMobileMenuOpen) {
+        return null;
+    }
+    return (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
+        React__default.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
+            React__default.createElement(MobileMenuWrapper, null,
+                React__default.createElement(animated.div, { style: slidingMenuAnimation },
+                    React__default.createElement(NavigationMenuMobile, null))))));
 };
 
 export { RenderMobileMenu as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/PageSearch.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-interface PageSearchProps {
-    searchLabel?: string;
-}
-declare const PageSearch: ({ searchLabel }: PageSearchProps) => React.JSX.Element;
-export default PageSearch;
+import React from 'react';
+interface PageSearchProps {
+    searchLabel?: string;
+}
+declare const PageSearch: ({ searchLabel }: PageSearchProps) => React.JSX.Element;
+export default PageSearch;

package/build/es/components/MainHeaderNavigation/ChildComponents/PageSearch.js

@@ -1,16 +1,15 @@
+import { Search } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
+import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import Icon from '../../Icon/Icon.js';
-import 'tslib';
-import hlMagnifyingGlass from '../../Icons/hlMagnifyingGlass.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 
-const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent: SearchComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: hlMagnifyingGlass, size: navIconSize }),
-        React__default.createElement("span", null, searchLabel)));
+const PageSearch = ({ searchLabel }) => {
+    const { navZIndex, searchComponent: SearchComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+        React__default.createElement(Icon, { icon: Search, size: navIconSize }),
+        React__default.createElement("span", null, searchLabel)));
 };
 
 export { PageSearch as default };