@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -4,36 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var useCloseOutsideOrElementClicked = require('../../../hooks/useCloseOutsideOrElementClicked.js');
+var useDocHeight = require('../../../hooks/useDocHeight.js');
 var styled = require('../../../themes/styled.js');
-var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
-var colors = require('../../../themes/themeComponents/colors.js');
+var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
+var Box = require('../../Box/Box.js');
 var NavContext = require('../context/NavContext.js');
-var useDocHeight = require('../../../hooks/useDocHeight.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Selector = styled['default'].div `
-    color: ${p => (p.showDropdown ? p.activeColor : p.color)};
-    cursor: pointer;
-    text-align: center;
-`;
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     width: 100%;
 `;
-const Tooltip = styled['default'].div `
-    background-color: ${p => p.theme.color.white};
-    min-height: 3rem;
-    overflow-y: ${({ overflowY }) => (overflowY ? 'auto' : 'none')};
+const Tooltip = styled["default"].div `
+    min-height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5)};
     max-height: calc(var(--vh100, 100vh) - ${navigation.mobileNavMaxHeight});
     width: 100%;
     position: absolute;
     right: 0;
     top: ${navigation.mobileNavMaxHeight};
-    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
     z-index: ${p => p.zIndex};
     display: flex;
     flex-direction: row;
@@ -51,41 +43,24 @@ const Tooltip = styled['default'].div `
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
-const TailShadowNav = styled['default'].div `
-    position: absolute;
-    width: 0.25rem;
-    height: 0.25rem;
-    margin-top: -5px;
-    margin-right: 8.5px;
-    z-index: ${p => p.zIndex + 1};
-    background-color: transparent;
-    box-shadow: 0 0 5px 0 ${p => p.theme.color.black};
-    top: ${navigation.mobileNavMaxHeight};
-    left: auto;
-    right: auto;
-    margin-left: 1.75rem;
-    ${styledUtils.media.md `
-        top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
-    `};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(var(--vh100, 100vh) - ${navigation.desktopNavMaxHeight});
-        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 TailNav = styled['default'].div `
+const Caret = styled["default"].div `
     position: absolute;
-    width: 0;
-    height: 0;
-    margin-top: -17.5px;
     z-index: ${p => p.zIndex + 1};
-    border: 10px solid transparent;
-    border-right-color: white;
-    transform: rotate(90deg);
     top: ${navigation.mobileNavMaxHeight};
-    margin-left: 1.25rem;
-    left: auto;
-    right: auto;
-    ${() => styledUtils.media.md `
+    transform: translate3d(50%, -50%, 0) rotate(-45deg);
+    width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};
+    background-color: ${theme["default"].color.default.white};
+    border: 1px solid ${theme["default"].color.line.L03};
+    border-width: 1px 1px 0 0;
+    margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.85)};
+    ${styledUtils.media.md `
         top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -93,11 +68,11 @@ const TailNav = styled['default'].div `
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
-const MainNavTooltipMenu = ({ className, activeColor = colors['default'].hotPink, color = colors['default'].text, children, zIndex = '1', tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], overflowY = true, globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = breakpoints['default'].xs, }) => {
-    const { isMobileMenu, tooltipItems, setTooltipItems, collapseSize, resetMenuEvents, showMinicart, showLoginTooltip, } = React__default['default'].useContext(NavContext['default']);
+const MainNavTooltipMenu = ({ children, zIndex = '1', tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme["default"].breakpoints.xs, }) => {
+    const { isMobileMenu, tooltipItems, setTooltipItems, collapseSize, resetMenuEvents, showMinicart, showLoginTooltip, } = React__default["default"].useContext(NavContext["default"]);
     const ref = React.useRef(null);
     useDocHeight.useDocHeight();
-    React__default['default'].useEffect(() => {
+    React__default["default"].useEffect(() => {
         setTooltipItems({
             minicart: showMinicart,
             login: showLoginTooltip,
@@ -111,18 +86,17 @@ const MainNavTooltipMenu = ({ className, activeColor = colors['default'].hotPink
             });
         });
     };
-    useCloseOutsideOrElementClicked['default']({ ref, closeWhenTagClicked }, () => {
+    useCloseOutsideOrElementClicked["default"]({ ref, closeWhenTagClicked }, () => {
         if (tooltipItems[globalStateString]) {
             setTooltipItems(Object.assign(Object.assign({}, tooltipItems), { [globalStateString]: false }));
         }
     });
-    return (React__default['default'].createElement(Container, { className: className, ref: ref },
-        React__default['default'].createElement(Selector, { onClick: ContentComponent ? toggleState : undefined, showDropdown: tooltipItems[globalStateString], activeColor: activeColor, color: ContentComponent ? color : colors['default'].gray40 }, children),
-        tooltipItems[globalStateString] && (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(TailShadowNav, { zIndex: zIndex, collapseSize: collapseSize }),
-            React__default['default'].createElement(TailNav, { zIndex: zIndex, collapseSize: collapseSize }))),
-        tooltipItems[globalStateString] && ContentComponent && (React__default['default'].createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, overflowY: overflowY, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
-            React__default['default'].createElement(ContentComponent, { mobileView: isMobileMenu })))));
+    return (React__default["default"].createElement(Container, { ref: ref },
+        React__default["default"].createElement("div", { onClick: ContentComponent ? toggleState : undefined }, children),
+        tooltipItems[globalStateString] && (React__default["default"].createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize })),
+        tooltipItems[globalStateString] && 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;
+exports["default"] = MainNavTooltipMenu;

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

@@ -10,36 +10,92 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
         };
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        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;
@@ -97,7 +153,14 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     collapseSize: number;
-    isComponent?: boolean | undefined;
+    isHighlighted?: boolean | undefined;
 }, never>;

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

@@ -3,41 +3,41 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('../../../themes/styled.js');
+var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 
-const TooltipWrapper = styled['default'].button `
+const TooltipWrapper = styled["default"].button `
+    position: relative;
     border: none;
     margin: 0;
     padding: 0;
     width: auto;
     overflow: visible;
     background: transparent;
-    color: inherit;
+    color: ${p => (p.isHighlighted ? theme["default"].color.text.pink : 'inherit')};
     font: inherit;
     line-height: normal;
     -webkit-font-smoothing: inherit;
     -moz-osx-font-smoothing: inherit;
     -webkit-appearance: none;
     width: 100%;
-    cursor: ${p => (p.isComponent ? 'pointer' : 'default')};
+    cursor: pointer;
     &:hover {
         span.dnasg-icon > svg,
         > span {
-            color: ${p => p.theme.color.text};
+            color: ${theme["default"].color.text.black};
         }
     }
     &:active,
     &:focus {
         span.dnasg-icon > svg,
         > span {
-            color: ${p => (p.isComponent ? p.theme.color.hotPink : p.theme.color.gray40)};
+            color: ${theme["default"].color.text.pink};
         }
     }
     span.dnasg-icon > svg {
         align-content: center;
         display: flex;
-        height: 2em;
-        width: 2em;
         @media (min-width: ${p => p.collapseSize + 1}px) {
             height: 1.625em;
             width: 1.625em;
@@ -49,14 +49,13 @@ const TooltipWrapper = styled['default'].button `
         display: none;
         @media (min-width: ${p => p.collapseSize + 1}px) {
             display: block;
-            margin-top: 5px;
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
             max-width: ${navigation.IconContainerWidth};
         }
-        font-size: ${p => p.theme.fontSize.xs};
-        font-weight: ${p => p.theme.fontWeight.book};
+        font-size: ${theme["default"].fontSize.xs};
+        font-weight: ${theme["default"].fontWeight.book};
     }
 `;
 

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

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('../../../themes/styled.js');
-var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
-var colors = require('../../../themes/themeComponents/colors.js');
+var theme = require('../../../themes/theme.js');
 var Icon = require('../../Icon/Icon.js');
 require('tslib');
 var hlCart = require('../../Icons/hlCart.js');
@@ -18,22 +16,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const MinicartAmount = styled['default'](NotificationBadge.NotificationBadge) `
-    right: auto;
-    top: auto;
-    margin-top: -2.2rem;
-    margin-left: 2.4rem;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        margin-top: -3.1rem;
-    }
-`;
 const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const { navZIndex, minicartComponent: MinicartComponent, collapseSize, } = React__default['default'].useContext(NavContext['default']);
-    return (React__default['default'].createElement(MainNavTooltipMenu['default'], { zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, contentWidth: "35rem", tooltipRight: "5rem", overflowY: false, contentComponent: MinicartComponent, globalStateString: "minicart", fullWidthBreakpoint: breakpoints['default'].md, closeWhenTagClicked: ['a', 'button'] },
-        React__default['default'].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(MinicartComponent) },
-            React__default['default'].createElement(Icon['default'], { icon: hlCart['default'], size: "2rem" }),
-            React__default['default'].createElement("span", null, minicartLabel),
-            minicartAmount > 0 && (React__default['default'].createElement(MinicartAmount, { collapseSize: collapseSize, "data-testid": "header-minicart-amount" }, minicartAmount)))));
+    const globalStateString = 'minicart';
+    const { navZIndex, minicartComponent: MinicartComponent, collapseSize, tooltipItems, } = React__default["default"].useContext(NavContext["default"]);
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: (navZIndex + 1).toString(), contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme["default"].breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
+        React__default["default"].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] },
+            React__default["default"].createElement(Icon["default"], { icon: hlCart["default"], 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;
+exports["default"] = MinicartTooltip;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactSpring = require('react-spring');
 var styled = require('../../../themes/styled.js');
+var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
@@ -21,34 +22,31 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const MobileMenuWrapper = styled['default'].div `
+const MobileMenuWrapper = styled["default"].div `
     width: ${100 * navigation.menuLevelsAmount}%;
 `;
 const mobileMenuWithRibbon = `calc(100vh - ${navigation.mobileNavMaxHeight} - ${navigation.ribbonHeight})`;
 const mobileMenuNoRibbon = `calc(100vh - ${navigation.mobileNavMaxHeight})`;
-const MobileMenuContainer = styled['default'].div `
+const MobileMenuContainer = styled["default"].div `
     width: 100%;
     position: absolute;
     top: ${navigation.mobileNavMaxHeight};
-    ${styledUtils.media.md `
-        top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
-    `};
     left: 0;
     overflow: hidden;
     overflow-y: auto;
     transition: max-height 0.2s ease-in-out;
-    background: ${p => p.theme.color.white};
+    background: ${theme["default"].color.background.white.default};
     max-height: ${mobileMenuNoRibbon};
     height: ${mobileMenuNoRibbon};
     ${styledUtils.media.md `
+        top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
         max-height: ${mobileMenuWithRibbon};
         height: ${mobileMenuWithRibbon};
     `};
 `;
-const MenuLinkBackLink = styled['default'](globalNavStyles.MenuLink) ``;
-const MobileMenu = styled['default'].div `
-    width: 100%;
-    background: ${p => p.theme.color.white};
+const MenuLinkBackLink = styled["default"](globalNavStyles.MenuLink) ``;
+const MobileMenu = styled["default"].div `
+    background: ${theme["default"].color.background.white.default};
     ${globalNavStyles.MenuList} {
         display: block;
         float: left;
@@ -58,16 +56,15 @@ const MobileMenu = styled['default'].div `
         ${styledUtils.media.md `
             min-height: ${mobileMenuWithRibbon};
         `};
-        background: ${p => p.theme.color.grayBg};
         &:first-of-type {
-            background: ${p => p.theme.color.white};
+            background: ${theme["default"].color.background.white.default};
             > ${globalNavStyles.MenuItem} > ${globalNavStyles.MenuLink} {
-                font-weight: ${p => p.theme.fontWeight.bold};
-                border-bottom: 1px solid ${p => p.theme.color.grayWhite};
+                font-weight: ${theme["default"].fontWeight.medium};
+                border-bottom: 1px solid ${theme["default"].color.line.L04};
             }
         }
         &:not(:first-of-type) {
-            background: ${p => p.theme.color.grayBg};
+            background: ${theme["default"].color.background.sand.default};
         }
 
         ${globalNavStyles.MenuItem} {
@@ -78,21 +75,24 @@ const MobileMenu = styled['default'].div `
         }
     }
     ${globalNavStyles.MenuLink}, ${globalNavStyles.MenuLinkWithChildren} {
-        line-height: 1.4rem;
-        padding: 1.25rem 1rem 1.25rem 1.25rem;
-        font-size: ${p => p.theme.fontSize.l};
+        line-height: ${theme["default"].lineHeight.default};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.75)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.75)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        font-size: ${theme["default"].fontSize.default};
         display: flex;
         flex-grow: 1;
         align-items: center;
         justify-content: space-between;
     }
     ${MenuLinkBackLink} {
-        font-weight: ${p => p.theme.fontWeight.bold};
-        background: ${p => p.theme.color.white};
-        color: ${p => p.theme.color.hotPink};
+        font-weight: ${theme["default"].fontWeight.medium};
+        background: ${theme["default"].color.background.white.default};
+        color: ${theme["default"].color.text.pink};
         justify-content: flex-start;
         span.dnasg-icon {
-            margin-left: -0.5rem;
+            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
         }
     }
     ${globalNavStyles.MenuLink}:hover {
@@ -100,7 +100,7 @@ const MobileMenu = styled['default'].div `
     }
 `;
 const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang: language, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext['default']);
+    const { handleNavMenuClick, lang: language, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext["default"]);
     const levels = {
         level1Items,
         level2Items,
@@ -113,14 +113,14 @@ const MenuItemBackLink = ({ currentLevel }) => {
     };
     const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
     const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default['default'].createElement(MenuLinkBackLink, { role: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default['default'].createElement(Icon['default'], { icon: hlChevronLeft['default'], position: "left" }),
+    return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
+        React__default["default"].createElement(MenuLinkBackLink, { role: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default["default"].createElement(Icon["default"], { icon: hlChevronLeft["default"], size: "1rem" }),
             backLink.titles[language])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
-    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang: language, currentUrl, } = React.useContext(NavContext['default']);
-    const { mobileMenuRef } = React.useContext(MobileMenuContext['default']);
+    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang: language, currentUrl, } = React.useContext(NavContext["default"]);
+    const { mobileMenuRef } = React.useContext(MobileMenuContext["default"]);
     const hasChildren = menuItem.pages && menuItem.pages.length;
     const indexLevel = currentLevel - 1;
     const tabNavigationDisabled = () => scrollPosition !== indexLevel;
@@ -137,54 +137,54 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
     if (hasChildren && currentLevel < 3) {
-        return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl) },
-            React__default['default'].createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
+        return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl) },
+            React__default["default"].createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
                 menuItem.titles[language],
-                React__default['default'].createElement(Icon['default'], { icon: hlChevronRight['default'] }))));
+                React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1rem" }))));
     }
-    return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) },
-        React__default['default'].createElement(LinkModifier['default'], { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));
+    return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) },
+        React__default["default"].createElement(LinkModifier["default"], { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));
 };
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const navElements = menuItem.pages;
     if (!navElements.length) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        currentLevel > 1 && React__default['default'].createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        navElements.map((subMenuItem, index) => (React__default['default'].createElement(CreateSubMenuItem, { menuItem: subMenuItem, currentLevel: currentLevel, key: subMenuItem.id, itemIndex: index })))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        currentLevel > 1 && React__default["default"].createElement(MenuItemBackLink, { currentLevel: currentLevel }),
+        navElements.map((subMenuItem, index) => (React__default["default"].createElement(CreateSubMenuItem, { menuItem: subMenuItem, currentLevel: currentLevel, key: subMenuItem.id, itemIndex: index })))));
 };
 const NavigationMenuMobile = () => {
-    const { items: data, menuLevel, level1Items, level2Items } = React.useContext(NavContext['default']);
+    const { items: data, menuLevel, level1Items, level2Items } = React.useContext(NavContext["default"]);
     const { mainNavigation } = data;
     if (!mainNavigation.pages.length) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 0, "aria-disabled": menuLevel.scrollPosition !== 0, "data-testid": "mobile-nav-menu-level-1", isInView: menuLevel.scrollPosition === 0 },
-            React__default['default'].createElement(SubMenuMobile, { currentLevel: 1, menuItem: mainNavigation }),
-            React__default['default'].createElement(globalNavStyles.MenuItem, { key: "business-item", "aria-hidden": menuLevel.scrollPosition !== 0, role: "menuitem" },
-                React__default['default'].createElement(BusinessMenu['default'], null))),
-        menuLevel.level1Mobile !== null && (React__default['default'].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 1, "aria-disabled": menuLevel.scrollPosition !== 1, "data-testid": "mobile-nav-menu-level-2", isInView: menuLevel.scrollPosition === 1 },
-            React__default['default'].createElement(SubMenuMobile, { currentLevel: 2, menuItem: level1Items[menuLevel.level1Mobile] }))),
-        menuLevel.level2Mobile !== null && (React__default['default'].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 2, "aria-disabled": menuLevel.scrollPosition !== 2, "data-testid": "mobile-nav-menu-level-3", isInView: menuLevel.scrollPosition === 2 },
-            React__default['default'].createElement(SubMenuMobile, { currentLevel: 3, menuItem: level2Items[menuLevel.level2Mobile] })))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 0, "aria-disabled": menuLevel.scrollPosition !== 0, "data-testid": "mobile-nav-menu-level-1", isInView: menuLevel.scrollPosition === 0 },
+            React__default["default"].createElement(SubMenuMobile, { currentLevel: 1, menuItem: mainNavigation }),
+            React__default["default"].createElement(globalNavStyles.MenuItem, { key: "business-item", "aria-hidden": menuLevel.scrollPosition !== 0, role: "menuitem" },
+                React__default["default"].createElement(BusinessMenu["default"], null))),
+        menuLevel.level1Mobile !== null && (React__default["default"].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 1, "aria-disabled": menuLevel.scrollPosition !== 1, "data-testid": "mobile-nav-menu-level-2", isInView: menuLevel.scrollPosition === 1 },
+            React__default["default"].createElement(SubMenuMobile, { currentLevel: 2, menuItem: level1Items[menuLevel.level1Mobile] }))),
+        menuLevel.level2Mobile !== null && (React__default["default"].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 2, "aria-disabled": menuLevel.scrollPosition !== 2, "data-testid": "mobile-nav-menu-level-3", isInView: menuLevel.scrollPosition === 2 },
+            React__default["default"].createElement(SubMenuMobile, { currentLevel: 3, menuItem: level2Items[menuLevel.level2Mobile] })))));
 };
 const RenderMobileMenu = () => {
-    const { menuLevel, isMobileMenuOpen } = React.useContext(NavContext['default']);
-    const mobileMenuRef = React__default['default'].useRef(null);
+    const { menuLevel, isMobileMenuOpen } = React.useContext(NavContext["default"]);
+    const mobileMenuRef = React__default["default"].useRef(null);
     const slidingMenuAnimation = reactSpring.useSpring({
         transform: `translateX(${(menuLevel.scrollPosition / navigation.menuLevelsAmount) * -100}%)`,
     });
     const mobileMenuContext = {
         mobileMenuRef,
     };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, isMobileMenuOpen && (React__default['default'].createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React__default['default'].createElement(MobileMenuContext['default'].Provider, { value: mobileMenuContext },
-            React__default['default'].createElement(MobileMenu, null,
-                React__default['default'].createElement(MobileMenuWrapper, null,
-                    React__default['default'].createElement(reactSpring.animated.div, { style: slidingMenuAnimation },
-                        React__default['default'].createElement(NavigationMenuMobile, null)))))))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, isMobileMenuOpen && (React__default["default"].createElement(MobileMenuContainer, { ref: mobileMenuRef },
+        React__default["default"].createElement(MobileMenuContext["default"].Provider, { value: mobileMenuContext },
+            React__default["default"].createElement(MobileMenu, null,
+                React__default["default"].createElement(MobileMenuWrapper, null,
+                    React__default["default"].createElement(reactSpring.animated.div, { style: slidingMenuAnimation },
+                        React__default["default"].createElement(NavigationMenuMobile, null)))))))));
 };
 
-exports.default = RenderMobileMenu;
+exports["default"] = RenderMobileMenu;