@dnanpm/styleguide 3.3.1 → 3.5.0

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

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

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

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

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

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

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

@@ -5,29 +5,29 @@ import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 
-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, showIcon }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
-    const menuItemLink = menuItem.urls[lang] || '';
-    const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1rem", color: theme.color.default.pink })),
-        React__default.createElement("span", null, menuItem.titles[lang])));
-    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        const NextJSLinkComponent = nextJSLinkComponent;
-        return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink }, MenuLinkComponent));
-    }
-    return MenuLinkComponent;
+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, showIcon }) => {
+    const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
+    const menuItemLink = menuItem.urls[lang] || '';
+    const isExternalLink = menuItem.target === '_blank';
+    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1rem", color: theme.color.default.pink })),
+        React__default.createElement("span", null, menuItem.titles[lang])));
+    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
+        const NextJSLinkComponent = nextJSLinkComponent;
+        return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink }, MenuLinkComponent));
+    }
+    return MenuLinkComponent;
 };
 
 export { LinkModifier as default, isSelected };

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

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

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

@@ -5,11 +5,11 @@ import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Icon, { icon: User, size: navIconSize }),
-        React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
+const LoginTooltip = ({ isLogged, loginLabel }) => {
+    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { icon: User, size: navIconSize }),
+        React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };
 
 export { LoginTooltip as default };

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

@@ -1,193 +1,193 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-export interface MainNavTooltipMenuProps {
-    /** Aria-label for screen readers in mobile */
-    ariaLabel?: string;
-    /** Tooltip menu content */
-    children?: ReactNode;
-    /** Overlap other elements */
-    zIndex?: number;
-    /** Tooltip position from right. Default: 1.25rem */
-    tooltipRight?: string;
-    /** Mandatory Component provided as login content */
-    contentComponent?: ReactNode | boolean;
-    /** 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;
-}
-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;
-            };
-        };
-        /** This will define the global state object string. mandatory */
-        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 MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
-export default MainNavTooltipMenu;
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface MainNavTooltipMenuProps {
+    /** Aria-label for screen readers in mobile */
+    ariaLabel?: string;
+    /** Tooltip menu content */
+    children?: ReactNode;
+    /** Overlap other elements */
+    zIndex?: number;
+    /** Tooltip position from right. Default: 1.25rem */
+    tooltipRight?: string;
+    /** Mandatory Component provided as login content */
+    contentComponent?: ReactNode | boolean;
+    /** 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;
+}
+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;
+            };
+        };
+        /** This will define the global state object string. mandatory */
+        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 MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
+export default MainNavTooltipMenu;

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

@@ -35,7 +35,7 @@ const IconContainer = styled.div `
             display: block;
         }
     }
-`;
+`;
 const Tooltip = styled.div `
     min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
     // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
@@ -52,13 +52,13 @@ const Tooltip = styled.div `
         width: ${p => p.contentWidth};
         right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
     }
-`;
+`;
 const TooltipBox = styled(Box) `
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
     min-height: inherit;
     max-height: inherit;
-`;
+`;
 const Caret = styled.div `
     position: absolute;
     z-index: ${p => p.zIndex + 1};
@@ -74,39 +74,39 @@ const Caret = styled.div `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
     }
-`;
-const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
-    const ref = useRef(null);
-    const globalStateKey = globalStateString;
-    const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
-    const ContentComponent = contentComponent;
-    useDocHeight();
-    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({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateKey]) {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
-        }
-    });
-    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
-        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-            React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
-                React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
-                    React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
+`;
+const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
+    const ref = useRef(null);
+    const globalStateKey = globalStateString;
+    const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
+    const ContentComponent = contentComponent;
+    useDocHeight();
+    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({ ref, closeWhenTagClicked }, () => {
+        if (tooltipItems[globalStateKey]) {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
+        }
+    });
+    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+            React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+                React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
+                    React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
 };
 
 export { IconContainer, MainNavTooltipMenu as default };