@dnanpm/styleguide 4.0.0 → 4.0.1

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

@@ -6,9 +6,7 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styledComponents = require('styled-components');
 var theme = require('../../../themes/theme.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
@@ -16,22 +14,25 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MenuItem = styledComponents.styled(globalNavStyles.MenuLink) `
+const MenuWrapper = styledComponents.styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
+        ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
     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)
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.default.createElement(MenuWrapper, 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())))));
+    .map(([key, value]) => (React__default.default.createElement(globalNavStyles.MenuLink, { key: `language-${key}`, href: value }, key.toUpperCase())))));
 const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLabel, }) => {
-    const { isMobileMenu, navZIndex } = React.useContext(NavContext.default);
     const LngComponent = React.useCallback(() => (React__default.default.createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
     if (Object.keys(languagesObject).length < 2) {
         return null;
     }
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default.default.createElement(icons.Globe, { size: navigation.navIconSize }),
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: "auto" },
+        React__default.default.createElement(icons.Globe, null),
         React__default.default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

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

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

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

@@ -6,8 +6,6 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     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 */
@@ -27,5 +25,5 @@ export declare const IconContainer: import("styled-components/dist/types").IStyl
     $isActive?: boolean;
     $collapseSize: number;
 }>> & string;
-declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
+declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

@@ -49,9 +49,7 @@ const Tooltip = styledComponents.styled.div `
     min-height: ${styledUtils.getMultipliedSize(theme.default.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.
     max-height: calc(var(--vh100, 100vh) - ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 12)});
-    width: 100%;
     position: absolute;
-    right: 0;
     top: ${navigation.navMaxHeight};
     z-index: ${p => p.$zIndex};
     display: flex;
@@ -85,8 +83,8 @@ const Caret = styledComponents.styled.div `
     }
 `;
 const MainNavTooltipMenu = (_a) => {
-    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.default.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = tslib.__rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext.default);
+    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.default.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem' } = _a, props = tslib.__rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight"]);
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, navZIndex, } = React.useContext(NavContext.default);
     const ref = React.useRef(null);
     const globalStateKey = globalStateString;
     const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
@@ -113,8 +111,8 @@ const MainNavTooltipMenu = (_a) => {
     return (React__default.default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
         globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], "$isLoggedIn": isLoginItemAndLoggedIn, "$collapseSize": collapseSize, "$isHighlighted": tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
         tooltipItems[globalStateKey] && ContentComponent && (React__default.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(Caret, { "$zIndex": zIndex, "$collapseSize": collapseSize }),
-            React__default.default.createElement(Tooltip, { "$zIndex": zIndex, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
+            React__default.default.createElement(Caret, { "$zIndex": navZIndex + 1, "$collapseSize": collapseSize }),
+            React__default.default.createElement(Tooltip, { "$zIndex": navZIndex + 1, "$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 })))))));
 };

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

@@ -6,19 +6,15 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var theme = require('../../../themes/theme.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
-var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
-    const { navZIndex } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.default.createElement(icons.Cart, null),
-        React__default.default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
-        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
-};
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => (React__default.default.createElement(MainNavTooltipMenu.default, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem" },
+    React__default.default.createElement(icons.Cart, null),
+    React__default.default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
+    minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 
 exports.default = MinicartTooltip;

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

@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+    const { searchComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0" },
         React__default.default.createElement(icons.Search, null),
         React__default.default.createElement("span", null, searchLabel)));
 };

package/build/cjs/components/Tooltip/Tooltip.js

@@ -108,7 +108,7 @@ const Tooltip = (_a) => {
         scroll: true,
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500 },
             React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position, "aria-hidden": true }))),
         React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };

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

@@ -1,29 +1,30 @@
 import { Globe } from '@dnanpm/icons';
-import React__default, { useContext, useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MenuItem = styled(MenuLink) `
+const MenuWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    margin: ${getMultipliedSize(theme.base.baseHeight, 2)}
+        ${getMultipliedSize(theme.base.baseHeight, 3)};
     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)
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.createElement(MenuWrapper, null, Object.entries(languagesObject)
     .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React__default.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+    .map(([key, value]) => (React__default.createElement(MenuLink, { 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(Globe, { size: navIconSize }),
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: "auto" },
+        React__default.createElement(Globe, null),
         React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

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

@@ -4,8 +4,8 @@ import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, 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,
+    const { isMobileMenu, loginComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem' }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(User, null),
         React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };

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

@@ -6,8 +6,6 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     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 */
@@ -27,5 +25,5 @@ export declare const IconContainer: import("styled-components/dist/types").IStyl
     $isActive?: boolean;
     $collapseSize: number;
 }>> & string;
-declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
+declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

@@ -41,9 +41,7 @@ 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.
     max-height: calc(var(--vh100, 100vh) - ${getMultipliedSize(theme.base.baseHeight, 12)});
-    width: 100%;
     position: absolute;
-    right: 0;
     top: ${navMaxHeight};
     z-index: ${p => p.$zIndex};
     display: flex;
@@ -77,8 +75,8 @@ const Caret = styled.div `
     }
 `;
 const MainNavTooltipMenu = (_a) => {
-    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
+    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem' } = _a, props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight"]);
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, navZIndex, } = useContext(NavContext);
     const ref = useRef(null);
     const globalStateKey = globalStateString;
     const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
@@ -105,8 +103,8 @@ const MainNavTooltipMenu = (_a) => {
     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, "aria-expanded": tooltipItems[globalStateKey], "$isLoggedIn": isLoginItemAndLoggedIn, "$collapseSize": collapseSize, "$isHighlighted": tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (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(Caret, { "$zIndex": navZIndex + 1, "$collapseSize": collapseSize }),
+            React__default.createElement(Tooltip, { "$zIndex": navZIndex + 1, "$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 })))))));
 };

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

@@ -1,16 +1,12 @@
 import { Cart } from '@dnanpm/icons';
-import React__default, { useContext } from 'react';
+import React__default from 'react';
 import theme from '../../../themes/theme.js';
 import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
-import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
-    const { navZIndex } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.createElement(Cart, null),
-        React__default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
-        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
-};
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => (React__default.createElement(MainNavTooltipMenu, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem" },
+    React__default.createElement(Cart, null),
+    React__default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
+    minicartAmount > 0 && (React__default.createElement(NotificationBadge, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 
 export { MinicartTooltip as default };

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

@@ -4,8 +4,8 @@ import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, 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 },
+    const { 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" },
         React__default.createElement(Search, null),
         React__default.createElement("span", null, searchLabel)));
 };

package/build/es/components/Tooltip/Tooltip.js

@@ -100,7 +100,7 @@ const Tooltip = (_a) => {
         scroll: true,
     };
     return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500 },
             React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position, "aria-hidden": true }))),
         React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v4.0.0",
+    "version": "v4.0.1",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -66,14 +66,14 @@
         "@types/react-modal": "^3.13.1",
         "@types/resize-observer-browser": "^0.1.8",
         "@typescript-eslint/eslint-plugin": "^8.46.4",
-        "@typescript-eslint/parser": "^8.46.4",
+        "@typescript-eslint/parser": "^8.48.0",
         "babel-loader": "^9.2.1",
         "cross-env": "^10.0.0",
         "css-loader": "^6.11.0",
         "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-jsdoc": "^61.2.0",
+        "eslint-plugin-jsdoc": "^61.4.1",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.0.1",
@@ -96,7 +96,7 @@
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
-        "webpack": "^5.102.1"
+        "webpack": "^5.103.0"
     },
     "dependencies": {
         "ramda": "^0.32.0",
@@ -104,7 +104,7 @@
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",
-        "react-tooltip": "^5.28.1"
+        "react-tooltip": "^5.30.0"
     },
     "peerDependencies": {
         "@dnanpm/icons": "^2.x",