@dnanpm/styleguide 3.7.2 → 3.8.2

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

@@ -15,10 +15,6 @@ var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var LinkModifier = require('./LinkModifier.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const fadeIn = styled.keyframes `
     0% {
         opacity: 0;
@@ -48,13 +44,13 @@ const fadeRightAnimation = styled.css `
 const noAnimation = styled.css `
     animation: none;
 `;
-const SubMenuListRight = styled["default"].div `
+const SubMenuListRight = styled.default.div `
     display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
     ? 'block'
     : 'none'};
     ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
-    top: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+    top: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     position: absolute;
     width: ${navigation.subMenuWidth};
     left: 100%;
@@ -64,11 +60,11 @@ const SubMenuListRight = styled["default"].div `
         width: ${navigation.subMenuWidthXl};
     `};
 `;
-const SubMenuItem = styled["default"].li `
+const SubMenuItem = styled.default.li `
     display: block;
     position: relative;
     > a {
-        color: ${p => (p.isHighlighted ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+        color: ${p => (p.isHighlighted ? theme.default.color.text.pink : theme.default.color.text.black)};
         span {
             position: relative;
             &:after {
@@ -78,23 +74,23 @@ const SubMenuItem = styled["default"].li `
                 bottom: -6px;
                 left: 0;
                 border-bottom: 1px solid
-                    ${p => (p.isHighlighted ? theme["default"].color.default.pink : 'transparent')};
+                    ${p => (p.isHighlighted ? theme.default.color.default.pink : 'transparent')};
             }
         }
     }
 `;
-const DesktopMenuList = styled["default"](globalNavStyles.MenuList) `
+const DesktopMenuList = styled.default(globalNavStyles.MenuList) `
     ul {
         padding-left: 0;
 
         li {
             a,
             button {
-                line-height: ${theme["default"].lineHeight.s};
+                line-height: ${theme.default.lineHeight.s};
                 display: flex;
                 width: 100%;
                 align-items: center;
-                padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+                padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
                 justify-content: space-between;
             }
         }
@@ -107,14 +103,14 @@ const DesktopMenuList = styled["default"](globalNavStyles.MenuList) `
     }
     a,
     button {
-        font-size: ${theme["default"].fontSize.s};
+        font-size: ${theme.default.fontSize.s};
         ${styledUtils.media.xl `
-            font-size: ${theme["default"].fontSize.default};
+            font-size: ${theme.default.fontSize.default};
         `};
     }
     margin-top: -2px;
 `;
-const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
+const DesktopMenuItem = styled.default(globalNavStyles.MenuItem) `
     &:first-child > ${globalNavStyles.MenuLinkWithChildren} {
         margin: 0 ${navigation.menuItemMargin};
     }
@@ -123,23 +119,23 @@ const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
         width: auto;
         display: flex;
         padding: 0.75rem 0;
-        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.3)};
+        margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.3)};
         ${styledUtils.media.xl `
             margin: 0 ${navigation.menuItemMargin};
         `};
-        border-bottom: 3px solid ${theme["default"].color.default.white};
+        border-bottom: 3px solid ${theme.default.color.default.white};
         position: relative;
-        color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+        color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
         &:after {
             position: absolute;
             content: '';
             width: 100%;
             bottom: -4px;
-            border-bottom: 1px solid ${p => (p.isActive ? theme["default"].color.default.pink : 'transparent')};
+            border-bottom: 1px solid ${p => (p.isActive ? theme.default.color.default.pink : 'transparent')};
         }
         &:hover,
         &:focus {
-            border-bottom: 3px solid ${theme["default"].color.default.white};
+            border-bottom: 3px solid ${theme.default.color.default.white};
         }
     }
     &:hover,
@@ -147,13 +143,13 @@ const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
         > a,
         > button {
             cursor: pointer;
-            color: ${theme["default"].color.text.pink};
+            color: ${theme.default.color.text.pink};
         }
     }
 `;
-const SubMenuList = styled["default"].div `
+const SubMenuList = styled.default.div `
     position: absolute;
-    left: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+    left: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
     display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
     z-index: ${({ navZIndex }) => navZIndex + 1};
     margin-top: 1px;
@@ -171,7 +167,7 @@ const SubMenuList = styled["default"].div `
     }
 `;
 const SubMenuLevel2 = ({ menuItem }) => {
-    const { lang, menuLevel, currentUrl } = React.useContext(NavContext["default"]);
+    const { lang, menuLevel, currentUrl } = React.useContext(NavContext.default);
     // Handle the case where the submenu is not visible
     const measureRef = React.useRef(null);
     React.useEffect(() => {
@@ -186,16 +182,16 @@ const SubMenuLevel2 = ({ menuItem }) => {
         };
         handleOffSet();
     }, [menuLevel.level2, menuItem.id]);
-    return (React__default["default"].createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
-        React__default["default"].createElement(Box["default"], { elevation: "high", padding: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1) },
-            React__default["default"].createElement("ul", null, menuItem.pages.map((item, index) => {
+    return (React.createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
+        React.createElement(Box.default, { elevation: "high", padding: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1) },
+            React.createElement("ul", null, menuItem.pages.map((item, index) => {
                 const menuUrl = item.urls[lang];
-                return (React__default["default"].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
-                    React__default["default"].createElement(LinkModifier["default"], { menuItem: item, tabIndex: false })));
+                return (React.createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
+                    React.createElement(LinkModifier.default, { menuItem: item, tabIndex: false })));
             })))));
 };
 const SubMenuLevel1 = ({ menuItem }) => {
-    const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = React.useContext(NavContext["default"]);
+    const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = React.useContext(NavContext.default);
     const level1HasElements = Boolean(menuItem.pages.length);
     const menuClick = (element) => (e) => {
         e.preventDefault();
@@ -204,39 +200,39 @@ const SubMenuLevel1 = ({ menuItem }) => {
     if (!level1HasElements) {
         return null;
     }
-    return (React__default["default"].createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
-        React__default["default"].createElement(Box["default"], { elevation: "high", padding: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1) },
-            React__default["default"].createElement("ul", null, menuItem.pages.map((element, index) => {
+    return (React.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
+        React.createElement(Box.default, { elevation: "high", padding: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1) },
+            React.createElement("ul", null, menuItem.pages.map((element, index) => {
                 const menuUrl = element.urls[lang];
                 if (element.pages.length) {
-                    return (React__default["default"].createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                        React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-                            React__default["default"].createElement("span", null, element.titles[lang]),
-                            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronRight, size: "1rem" })),
-                        React__default["default"].createElement(SubMenuLevel2, { menuItem: element })));
+                    return (React.createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                        React.createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+                            React.createElement("span", null, element.titles[lang]),
+                            React.createElement(Icon.default, { icon: icons.ChevronRight, size: "1rem" })),
+                        React.createElement(SubMenuLevel2, { menuItem: element })));
                 }
-                return (React__default["default"].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                    React__default["default"].createElement(LinkModifier["default"], { menuItem: element, tabIndex: false })));
+                return (React.createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                    React.createElement(LinkModifier.default, { menuItem: element, tabIndex: false })));
             })))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang, menuLevel, handleNavMenuClick, currentUrl } = React.useContext(NavContext["default"]);
+    const { lang, menuLevel, handleNavMenuClick, currentUrl } = React.useContext(NavContext.default);
     const menuClickMain = (element) => (e) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
     const menuUrl = menuItem.urls[lang];
-    return (React__default["default"].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
-        React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-            React__default["default"].createElement("span", null, menuItem.titles[lang])),
-        React__default["default"].createElement(SubMenuLevel1, { menuItem: menuItem })));
+    return (React.createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
+        React.createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+            React.createElement("span", null, menuItem.titles[lang])),
+        React.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
     var _a;
-    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = React.useContext(NavContext["default"]);
+    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = React.useContext(NavContext.default);
     const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
     const ref = React.useRef(null);
-    useOutsideClick["default"](ref, () => {
+    useOutsideClick.default(ref, () => {
         if (menuLevel.level1 || menuLevel.level2) {
             resetMenuEvents();
         }
@@ -244,16 +240,16 @@ const DesktopMenu = () => {
     if (!mainNavigation.length) {
         return null;
     }
-    return (React__default["default"].createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
+    return (React.createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
         var _a;
         const menuHasChildren = !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
         if (menuHasChildren) {
-            return (React__default["default"].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default["default"].createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
+        return (React.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
                 LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
-            React__default["default"].createElement(LinkModifier["default"], { menuItem: navElement, tabIndex: false })));
+            React.createElement(LinkModifier.default, { menuItem: navElement, tabIndex: false })));
     })));
 };
 
-exports["default"] = DesktopMenu;
+exports.default = DesktopMenu;

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

@@ -163,7 +163,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         pill: string;
     };
 }, {
-    isActive?: boolean | undefined;
+    isActive?: boolean;
     collapseSize: number;
 }, never>;
 declare const HeaderNavigationElements: ({ navElementProps, }: {

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

@@ -19,20 +19,16 @@ var LoginTooltip = require('./LoginTooltip.js');
 var MinicartTooltip = require('./MinicartTooltip.js');
 var PageSearch = require('./PageSearch.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const DesktopMenuContainer = styled["default"].div `
+const DesktopMenuContainer = styled.default.div `
     height: 100%;
     display: none;
-    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    border-bottom: 1px solid ${theme.default.color.line.L03};
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: block;
-        padding-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+        padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
     }
 `;
-const IconContainer = styled["default"].div `
+const IconContainer = styled.default.div `
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -48,7 +44,7 @@ const IconContainer = styled["default"].div `
     }
     > span.dnasg-icon > svg,
     > span.dnasg-icon + span {
-        color: ${p => (p.isActive ? theme["default"].color.text.pink : 'inherit')};
+        color: ${p => (p.isActive ? theme.default.color.text.pink : 'inherit')};
     }
 
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -61,14 +57,14 @@ const IconContainer = styled["default"].div `
         }
     }
     @media (min-width: ${navigation.wideMenuBreakpoint}px) {
-        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.4)} 0
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+        margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.4)} 0
+            ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     }
 `;
-const HeaderIconContainer = styled["default"].div `
+const HeaderIconContainer = styled.default.div `
     display: flex;
     justify-content: flex-end;
-    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    border-bottom: 1px solid ${theme.default.color.line.L03};
     padding-right: 0;
     flex: 1 1 100%;
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -80,7 +76,7 @@ const HeaderIconContainer = styled["default"].div `
         }
     }
 `;
-const HeaderIconWrapper = styled["default"].div `
+const HeaderIconWrapper = styled.default.div `
     display: flex;
     flex: 1 1 100%;
     justify-content: space-between;
@@ -90,7 +86,7 @@ const HeaderIconWrapper = styled["default"].div `
         flex: 0 0 100%;
     }
 `;
-const MobileMenuButton = styled["default"].button `
+const MobileMenuButton = styled.default.button `
     display: block;
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
@@ -102,7 +98,7 @@ const MobileMenuButton = styled["default"].button `
     }
     &:focus,
     &:active {
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
     }
     font-size: 100%;
     font-family: inherit;
@@ -110,12 +106,12 @@ const MobileMenuButton = styled["default"].button `
     padding: 0;
     background: transparent;
 `;
-const MenuWrapper = styled["default"].div `
+const MenuWrapper = styled.default.div `
     height: 50%;
     white-space: nowrap;
     align-self: flex-end;
 `;
-const LogoContainer = styled["default"].div `
+const LogoContainer = styled.default.div `
     margin: 0;
     width: ${navigation.mobileLogoSize};
     height: ${navigation.mobileLogoSize};
@@ -124,45 +120,45 @@ const LogoContainer = styled["default"].div `
         height: ${navigation.desktopLogoSize};
     }
 `;
-const HeaderIconWrapperNoMargin = styled["default"].div `
+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 RenderDesktopMenu = ({ collapseSize }) => (React.createElement(DesktopMenuContainer, { collapseSize: collapseSize },
+    React.createElement(MenuWrapper, null,
+        React.createElement(BusinessMenu.default, null)),
+    React.createElement(MenuWrapper, null,
+        React.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 { 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 { handleToggleClick, isMobileMenuOpen } = React.useContext(NavContext.default);
+    return (React.createElement(HeaderIconContainer, { collapseSize: collapseSize },
+        React.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
+            languagesObject && languageSelectorActive && (React.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
+                React.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject }))),
+            isSearch && (React.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
+                React.createElement(PageSearch.default, { searchLabel: searchLabel }))),
+            isMinicart && (React.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
+                React.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
+            isLogin && (React.createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
+                React.createElement(LoginTooltip.default, { loginLabel: loginLabel }))),
+            React.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
+                React.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
+                    React.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 { 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 })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HeaderIconWrapperNoMargin, null,
+            React.createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
+                React.createElement(LogoContainer, { collapseSize: collapseSize },
+                    React.createElement(DnaLogo.default, { size: "100%" })))),
+        React.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
+        React.createElement(MenuFunctionality, { menuProps: navElementProps })));
 };
 
 exports.IconContainer = IconContainer;
-exports["default"] = HeaderNavigationElements;
+exports.default = HeaderNavigationElements;

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

@@ -12,27 +12,23 @@ var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const MenuItem = styled["default"](globalNavStyles.MenuLink) `
-    font-weight: ${theme["default"].fontWeight.medium};
-    margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} auto;
+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)
+const LangComponent = ({ currentLanguage, languagesObject }) => (React.createElement(React.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())))));
+    .map(([key, value]) => (React.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]);
+    const { isMobileMenu, navZIndex } = React.useContext(NavContext.default);
+    const LngComponent = React.useCallback(() => React.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())));
+    return (React.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
+        React.createElement(Icon.default, { icon: icons.Globe, size: "2rem" }),
+        React.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 
-exports["default"] = LanguageSelector;
+exports.default = LanguageSelector;

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

@@ -6,10 +6,6 @@ var React = require('react');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
     if (currentUrl && linkUrl) {
         let url = linkUrl;
@@ -22,17 +18,17 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 const LinkModifier = ({ menuItem, tabIndex }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext["default"]);
+    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.createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
+            React.createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined },
+                React.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])));
+    return (React.createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
+        React.createElement("span", null, menuItem.titles[lang])));
 };
 
-exports["default"] = LinkModifier;
+exports.default = LinkModifier;
 exports.isSelected = isSelected;

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

@@ -8,16 +8,12 @@ var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-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 { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext.default);
+    return (React.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
+        React.createElement(Icon.default, { icon: icons.User, size: "2rem" }),
+        React.createElement("span", { "data-testid": "header-login-label" }, loginLabel)));
 };
 
-exports["default"] = LoginTooltip;
+exports.default = LoginTooltip;

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

@@ -13,15 +13,11 @@ var Box = require('../../Box/Box.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const Container = styled["default"].div `
+const Container = styled.default.div `
     width: 100%;
 `;
-const Tooltip = styled["default"].div `
-    min-height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5)};
+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;
@@ -44,23 +40,23 @@ const Tooltip = styled["default"].div `
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
-const TooltipBox = styled["default"](Box["default"]) `
+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 `
+const Caret = styled.default.div `
     position: absolute;
     z-index: ${p => p.zIndex + 1};
     top: ${navigation.mobileNavMaxHeight};
     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};
+    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)};
+    margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.85)};
     ${styledUtils.media.md `
         top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
     `};
@@ -69,12 +65,12 @@ const Caret = styled["default"].div `
         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 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"]();
+    useDocHeight.default();
     React.useEffect(() => {
         setTooltipItems({
             minicart: showMinicart,
@@ -88,17 +84,17 @@ const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', cont
             setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
         });
     };
-    useCloseOutsideOrElementClicked["default"]({ ref, closeWhenTagClicked }, () => {
+    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 }))))));
+    return (React.createElement(Container, { ref: ref },
+        React.createElement(MainNavTooltipMenuExportedStyles.default, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
+        tooltipItems[globalStateKey] && React.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+        tooltipItems[globalStateKey] && ContentComponent && (React.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+            React.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
+                React.createElement(ContentComponent, { mobileView: isMobileMenu }))))));
 };
 
-exports["default"] = MainNavTooltipMenu;
+exports.default = MainNavTooltipMenu;