@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -31,7 +31,7 @@ const DesktopMenuContainer = styled["default"].div `
         display: block;
         padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
     }
-`;
+`;
 const IconContainer = styled["default"].div `
     margin: 0;
     display: flex;
@@ -64,7 +64,7 @@ const IconContainer = styled["default"].div `
         margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.4)} 0
             ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
     }
-`;
+`;
 const HeaderIconContainer = styled["default"].div `
     display: flex;
     justify-content: flex-end;
@@ -79,7 +79,7 @@ const HeaderIconContainer = styled["default"].div `
             outline: none;
         }
     }
-`;
+`;
 const HeaderIconWrapper = styled["default"].div `
     display: flex;
     flex: 1 1 100%;
@@ -89,7 +89,7 @@ const HeaderIconWrapper = styled["default"].div `
         justify-content: flex-end;
         flex: 0 0 100%;
     }
-`;
+`;
 const MobileMenuButton = styled["default"].button `
     display: block;
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -109,12 +109,12 @@ const MobileMenuButton = styled["default"].button `
     border: 0;
     padding: 0;
     background: transparent;
-`;
+`;
 const MenuWrapper = styled["default"].div `
     height: 50%;
     white-space: nowrap;
     align-self: flex-end;
-`;
+`;
 const LogoContainer = styled["default"].div `
     margin: 0;
     width: ${navigation.mobileLogoSize};
@@ -123,45 +123,45 @@ const LogoContainer = styled["default"].div `
         width: ${navigation.desktopLogoSize};
         height: ${navigation.desktopLogoSize};
     }
-`;
+`;
 const HeaderIconWrapperNoMargin = styled["default"].div `
     margin: 0;
-`;
-const RenderDesktopMenu = ({ collapseSize }) => (React__default["default"].createElement(DesktopMenuContainer, { collapseSize: collapseSize },
-    React__default["default"].createElement(MenuWrapper, null,
-        React__default["default"].createElement(BusinessMenu["default"], null)),
-    React__default["default"].createElement(MenuWrapper, null,
-        React__default["default"].createElement(DesktopMenu["default"], null))));
-const MenuFunctionality = ({ menuProps }) => {
-    var _a;
-    const { collapseSize = breakpoints["default"].md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
-    const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
-    const { handleToggleClick, isMobileMenuOpen } = React.useContext(NavContext["default"]);
-    return (React__default["default"].createElement(HeaderIconContainer, { collapseSize: collapseSize },
-        React__default["default"].createElement(HeaderIconWrapper, { collapseSize: collapseSize },
-            languagesObject && languageSelectorActive && (React__default["default"].createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
-                React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: language, languagesObject: languagesObject }))),
-            isSearch && (React__default["default"].createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
-                React__default["default"].createElement(PageSearch["default"], { searchLabel: searchLabel }))),
-            isMinicart && (React__default["default"].createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
-                React__default["default"].createElement(MinicartTooltip["default"], { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
-            isLogin && (React__default["default"].createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
-                React__default["default"].createElement(LoginTooltip["default"], { loginLabel: loginLabel }))),
-            React__default["default"].createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
-                React__default["default"].createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
-                    React__default["default"].createElement(Icon["default"], { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: "2rem" }))))));
-};
-const HeaderNavigationElements = ({ navElementProps, }) => {
-    var _a;
-    const { collapseSize = breakpoints["default"].md, items, language = 'fi' } = navElementProps;
-    const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(HeaderIconWrapperNoMargin, null,
-            React__default["default"].createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
-                React__default["default"].createElement(LogoContainer, { collapseSize: collapseSize },
-                    React__default["default"].createElement(DnaLogo["default"], { size: "100%" })))),
-        React__default["default"].createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
-        React__default["default"].createElement(MenuFunctionality, { menuProps: navElementProps })));
+`;
+const RenderDesktopMenu = ({ collapseSize }) => (React__default["default"].createElement(DesktopMenuContainer, { collapseSize: collapseSize },
+    React__default["default"].createElement(MenuWrapper, null,
+        React__default["default"].createElement(BusinessMenu["default"], null)),
+    React__default["default"].createElement(MenuWrapper, null,
+        React__default["default"].createElement(DesktopMenu["default"], null))));
+const MenuFunctionality = ({ menuProps }) => {
+    var _a;
+    const { collapseSize = breakpoints["default"].md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
+    const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
+    const { handleToggleClick, isMobileMenuOpen } = React.useContext(NavContext["default"]);
+    return (React__default["default"].createElement(HeaderIconContainer, { collapseSize: collapseSize },
+        React__default["default"].createElement(HeaderIconWrapper, { collapseSize: collapseSize },
+            languagesObject && languageSelectorActive && (React__default["default"].createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
+                React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: language, languagesObject: languagesObject }))),
+            isSearch && (React__default["default"].createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
+                React__default["default"].createElement(PageSearch["default"], { searchLabel: searchLabel }))),
+            isMinicart && (React__default["default"].createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
+                React__default["default"].createElement(MinicartTooltip["default"], { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
+            isLogin && (React__default["default"].createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
+                React__default["default"].createElement(LoginTooltip["default"], { loginLabel: loginLabel }))),
+            React__default["default"].createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
+                React__default["default"].createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: "2rem" }))))));
+};
+const HeaderNavigationElements = ({ navElementProps, }) => {
+    var _a;
+    const { collapseSize = breakpoints["default"].md, items, language = 'fi' } = navElementProps;
+    const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(HeaderIconWrapperNoMargin, null,
+            React__default["default"].createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
+                React__default["default"].createElement(LogoContainer, { collapseSize: collapseSize },
+                    React__default["default"].createElement(DnaLogo["default"], { size: "100%" })))),
+        React__default["default"].createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
+        React__default["default"].createElement(MenuFunctionality, { menuProps: navElementProps })));
 };
 
 exports.IconContainer = IconContainer;

package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { LanguageSelectorProps } from '../types/globalNavProps';
+declare const LanguageSelector: ({ currentLanguage, languagesObject }: LanguageSelectorProps) => React.JSX.Element | null;
+export default LanguageSelector;

package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -20,19 +20,19 @@ const MenuItem = styled["default"](globalNavStyles.MenuLink) `
     font-weight: ${theme["default"].fontWeight.medium};
     margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} auto;
     text-align: center;
-`;
-const LangComponent = ({ currentLanguage, languagesObject }) => (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(languagesObject)
-    .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React__default["default"].createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
-const LanguageSelector = ({ currentLanguage, languagesObject }) => {
-    const { isMobileMenu, navZIndex } = React.useContext(NavContext["default"]);
-    const LngComponent = React.useCallback(() => React__default["default"].createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
-    if (Object.keys(languagesObject).length < 2) {
-        return null;
-    }
-    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
-        React__default["default"].createElement(Icon["default"], { icon: icons.Globe, size: "2rem" }),
-        React__default["default"].createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
+`;
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(languagesObject)
+    .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
+    .map(([key, value]) => (React__default["default"].createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+const LanguageSelector = ({ currentLanguage, languagesObject }) => {
+    const { isMobileMenu, navZIndex } = React.useContext(NavContext["default"]);
+    const LngComponent = React.useCallback(() => React__default["default"].createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
+    if (Object.keys(languagesObject).length < 2) {
+        return null;
+    }
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
+        React__default["default"].createElement(Icon["default"], { icon: icons.Globe, size: "2rem" }),
+        React__default["default"].createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 
 exports["default"] = LanguageSelector;

package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MenuLevelItem } from '../types/globalNavProps';
+interface LinkModifierProps {
+    menuItem: MenuLevelItem;
+    tabIndex: boolean;
+}
+export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
+declare const LinkModifier: ({ menuItem, tabIndex }: LinkModifierProps) => React.JSX.Element;
+export default LinkModifier;

package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.js

@@ -10,28 +10,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
-    if (currentUrl && linkUrl) {
-        let url = linkUrl;
-        if (url.includes('http')) {
-            url = url.replace(/^.*\/\/[^/]+/, '');
-        }
-        return exactMatch ? url === currentUrl : currentUrl.includes(url);
-    }
-    return false;
-};
-const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-const LinkModifier = ({ menuItem, tabIndex }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext["default"]);
-    const menuItemLink = menuItem.urls[lang] || '';
-    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        const NextJSLinkComponent = nextJSLinkComponent;
-        return (React__default["default"].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
-            React__default["default"].createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined },
-                React__default["default"].createElement("span", null, menuItem.titles[lang]))));
-    }
-    return (React__default["default"].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
-        React__default["default"].createElement("span", null, menuItem.titles[lang])));
+const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
+    if (currentUrl && linkUrl) {
+        let url = linkUrl;
+        if (url.includes('http')) {
+            url = url.replace(/^.*\/\/[^/]+/, '');
+        }
+        return exactMatch ? url === currentUrl : currentUrl.includes(url);
+    }
+    return false;
+};
+const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
+const LinkModifier = ({ menuItem, tabIndex }) => {
+    const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext["default"]);
+    const menuItemLink = menuItem.urls[lang] || '';
+    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
+        const NextJSLinkComponent = nextJSLinkComponent;
+        return (React__default["default"].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
+            React__default["default"].createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined },
+                React__default["default"].createElement("span", null, menuItem.titles[lang]))));
+    }
+    return (React__default["default"].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
+        React__default["default"].createElement("span", null, menuItem.titles[lang])));
 };
 
 exports["default"] = LinkModifier;

package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.d.ts

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

package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.js

@@ -12,12 +12,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const LoginTooltip = ({ loginLabel }) => {
-    const globalStateString = 'login';
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext["default"]);
-    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
-        React__default["default"].createElement(Icon["default"], { icon: icons.User, size: "2rem" }),
-        React__default["default"].createElement("span", { "data-testid": "header-login-label" }, loginLabel)));
+const LoginTooltip = ({ loginLabel }) => {
+    const globalStateString = 'login';
+    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext["default"]);
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
+        React__default["default"].createElement(Icon["default"], { icon: icons.User, size: "2rem" }),
+        React__default["default"].createElement("span", { "data-testid": "header-login-label" }, loginLabel)));
 };
 
 exports["default"] = LoginTooltip;

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface MainNavTooltipMenuProps {
+    /** Tooltip menu content */
+    children?: ReactNode;
+    /** Overlap other elements */
+    zIndex?: number;
+    /** Tooltip position from right. Default: 1.25rem */
+    tooltipRight?: string;
+    /** Component provided for tooltip content */
+    contentComponent?: ReactNode | boolean | undefined;
+    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
+    closeWhenTagClicked?: string[];
+    /** Width of the opened menu content. default 20rem. */
+    contentWidth?: string;
+    /** This will define the global state object string. mandatory */
+    globalStateString: string;
+    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
+    fullWidthDesktop?: boolean;
+    /** Adjust menu to be full width after this number. default xs (480). */
+    fullWidthBreakpoint?: number;
+}
+declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => React.JSX.Element;
+export default MainNavTooltipMenu;

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Container = styled["default"].div `
     width: 100%;
-`;
+`;
 const Tooltip = styled["default"].div `
     min-height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5)};
     max-height: calc(var(--vh100, 100vh) - ${navigation.mobileNavMaxHeight});
@@ -43,13 +43,13 @@ const Tooltip = styled["default"].div `
         max-height: calc(var(--vh100, 100vh) - (${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight}));
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
-`;
+`;
 const TooltipBox = styled["default"](Box["default"]) `
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
     min-height: inherit;
     max-height: inherit;
-`;
+`;
 const Caret = styled["default"].div `
     position: absolute;
     z-index: ${p => p.zIndex + 1};
@@ -68,37 +68,37 @@ const Caret = styled["default"].div `
         max-height: calc(var(--vh100, 100vh) - ${navigation.desktopNavMaxHeight});
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
-`;
-const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme["default"].breakpoints.xs, }) => {
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext["default"]);
-    const ref = React.useRef(null);
-    const globalStateKey = globalStateString;
-    const ContentComponent = contentComponent;
-    useDocHeight["default"]();
-    React.useEffect(() => {
-        setTooltipItems({
-            minicart: showMinicart,
-            login: showLoginTooltip,
-            search: false,
-        });
-    }, [showMinicart, showLoginTooltip, setTooltipItems]);
-    const toggleState = () => {
-        resetMenuEvents();
-        setTimeout(() => {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
-        });
-    };
-    useCloseOutsideOrElementClicked["default"]({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateKey]) {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
-        }
-    });
-    return (React__default["default"].createElement(Container, { ref: ref },
-        React__default["default"].createElement(MainNavTooltipMenuExportedStyles["default"], { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
-        tooltipItems[globalStateKey] && React__default["default"].createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-        tooltipItems[globalStateKey] && ContentComponent && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
-            React__default["default"].createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
-                React__default["default"].createElement(ContentComponent, { mobileView: isMobileMenu }))))));
+`;
+const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme["default"].breakpoints.xs, }) => {
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext["default"]);
+    const ref = React.useRef(null);
+    const globalStateKey = globalStateString;
+    const ContentComponent = contentComponent;
+    useDocHeight["default"]();
+    React.useEffect(() => {
+        setTooltipItems({
+            minicart: showMinicart,
+            login: showLoginTooltip,
+            search: false,
+        });
+    }, [showMinicart, showLoginTooltip, setTooltipItems]);
+    const toggleState = () => {
+        resetMenuEvents();
+        setTimeout(() => {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
+        });
+    };
+    useCloseOutsideOrElementClicked["default"]({ ref, closeWhenTagClicked }, () => {
+        if (tooltipItems[globalStateKey]) {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
+        }
+    });
+    return (React__default["default"].createElement(Container, { ref: ref },
+        React__default["default"].createElement(MainNavTooltipMenuExportedStyles["default"], { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
+        tooltipItems[globalStateKey] && React__default["default"].createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+            React__default["default"].createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
+                React__default["default"].createElement(ContentComponent, { mobileView: isMobileMenu }))))));
 };
 
 exports["default"] = MainNavTooltipMenu;

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -0,0 +1,168 @@
+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;
+}, never>;
+export default TooltipWrapper;
+export { TooltipWrapper };

package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts

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

package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.js

@@ -14,13 +14,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const globalStateString = 'minicart';
-    const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext["default"]);
-    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme["default"].breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
-        React__default["default"].createElement(Icon["default"], { icon: icons.Cart, size: "2rem" }),
-        React__default["default"].createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default["default"].createElement(NotificationBadge["default"], { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
+    const globalStateString = 'minicart';
+    const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext["default"]);
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme["default"].breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
+        React__default["default"].createElement(Icon["default"], { icon: icons.Cart, size: "2rem" }),
+        React__default["default"].createElement("span", null, minicartLabel),
+        minicartAmount > 0 && (React__default["default"].createElement(NotificationBadge["default"], { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
 };
 
 exports["default"] = MinicartTooltip;

package/build/cjs/components/MainNavigation/ChildComponents/MobileMenu.d.ts

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