@dnanpm/styleguide 3.9.0 → 3.9.1

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

@@ -19,6 +19,10 @@ var LoginTooltip = require('./LoginTooltip.js');
 var MinicartTooltip = require('./MinicartTooltip.js');
 var PageSearch = require('./PageSearch.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const DesktopMenuContainer = styled.default.div `
     height: 100%;
     display: none;
@@ -123,41 +127,41 @@ const LogoContainer = styled.default.div `
 const HeaderIconWrapperNoMargin = styled.default.div `
     margin: 0;
 `;
-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 RenderDesktopMenu = ({ collapseSize }) => (React__default.default.createElement(DesktopMenuContainer, { collapseSize: collapseSize },
+    React__default.default.createElement(MenuWrapper, null,
+        React__default.default.createElement(BusinessMenu.default, null)),
+    React__default.default.createElement(MenuWrapper, null,
+        React__default.default.createElement(DesktopMenu.default, null))));
 const MenuFunctionality = ({ menuProps }) => {
     var _a;
     const { collapseSize = breakpoints.default.md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
     const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
     const { handleToggleClick, isMobileMenuOpen } = React.useContext(NavContext.default);
-    return (React.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" }))))));
+    return (React__default.default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
+        React__default.default.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
+            languagesObject && languageSelectorActive && (React__default.default.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
+                React__default.default.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject }))),
+            isSearch && (React__default.default.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
+                React__default.default.createElement(PageSearch.default, { searchLabel: searchLabel }))),
+            isMinicart && (React__default.default.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
+                React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
+            isLogin && (React__default.default.createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
+                React__default.default.createElement(LoginTooltip.default, { loginLabel: loginLabel }))),
+            React__default.default.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
+                React__default.default.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
+                    React__default.default.createElement(Icon.default, { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: "2rem" }))))));
 };
 const HeaderNavigationElements = ({ navElementProps, }) => {
     var _a;
     const { collapseSize = breakpoints.default.md, items, language = 'fi' } = navElementProps;
     const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
-    return (React.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 })));
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(HeaderIconWrapperNoMargin, null,
+            React__default.default.createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
+                React__default.default.createElement(LogoContainer, { collapseSize: collapseSize },
+                    React__default.default.createElement(DnaLogo.default, { size: "100%" })))),
+        React__default.default.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
+        React__default.default.createElement(MenuFunctionality, { menuProps: navElementProps })));
 };
 
 exports.IconContainer = IconContainer;

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

@@ -12,23 +12,27 @@ var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.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 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.createElement(React.Fragment, null, Object.entries(languagesObject)
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.default.createElement(React__default.default.Fragment, null, Object.entries(languagesObject)
     .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+    .map(([key, value]) => (React__default.default.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
 const LanguageSelector = ({ currentLanguage, languagesObject }) => {
     const { isMobileMenu, navZIndex } = React.useContext(NavContext.default);
-    const LngComponent = React.useCallback(() => React.createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
+    const LngComponent = React.useCallback(() => React__default.default.createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
     if (Object.keys(languagesObject).length < 2) {
         return null;
     }
-    return (React.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())));
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
+        React__default.default.createElement(Icon.default, { icon: icons.Globe, size: "2rem" }),
+        React__default.default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 
 exports.default = LanguageSelector;

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

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

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

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

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

@@ -13,6 +13,10 @@ var Box = require('../../Box/Box.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Container = styled.default.div `
     width: 100%;
 `;
@@ -89,12 +93,12 @@ const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', cont
             setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
         }
     });
-    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 }))))));
+    return (React__default.default.createElement(Container, { ref: ref },
+        React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
+        tooltipItems[globalStateKey] && React__default.default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default.default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+            React__default.default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
+                React__default.default.createElement(ContentComponent, { mobileView: isMobileMenu }))))));
 };
 
 exports.default = MainNavTooltipMenu;

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

@@ -10,13 +10,17 @@ 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, minicartLabel }) => {
     const globalStateString = 'minicart';
     const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext.default);
-    return (React.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.default.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
-        React.createElement(Icon.default, { icon: icons.Cart, size: "2rem" }),
-        React.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React.createElement(NotificationBadge.default, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.default.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
+        React__default.default.createElement(Icon.default, { icon: icons.Cart, size: "2rem" }),
+        React__default.default.createElement("span", null, minicartLabel),
+        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
 };
 
 exports.default = MinicartTooltip;

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

@@ -16,6 +16,10 @@ var globalNavStyles = require('../globalNavStyles.js');
 var BusinessMenu = require('./BusinessMenu.js');
 var LinkModifier = require('./LinkModifier.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const MobileMenuWrapper = styled.default.div `
     width: ${100 * navigation.menuLevelsAmount}%;
 `;
@@ -107,9 +111,9 @@ const MenuItemBackLink = ({ currentLevel }) => {
     };
     const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
     const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React.createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React.createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React.createElement(Icon.default, { icon: icons.ChevronLeft, size: "1rem" }),
+    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: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default.default.createElement(Icon.default, { icon: icons.ChevronLeft, size: "1rem" }),
             backLink.titles[lang])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
@@ -133,22 +137,22 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
     if (hasChildren && currentLevel < 3) {
-        return (React.createElement(globalNavStyles.MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl) },
-            React.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[lang],
-                React.createElement(Icon.default, { icon: icons.ChevronRight, size: "1rem" }))));
+                React__default.default.createElement(Icon.default, { icon: icons.ChevronRight, size: "1rem" }))));
     }
-    return (React.createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) },
-        React.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 null;
     }
-    return (React.createElement(React.Fragment, null,
-        currentLevel > 1 && React.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        navElements.map((subMenuItem, index) => (React.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, menuLevel, level1Items, level2Items } = React.useContext(NavContext.default);
@@ -156,15 +160,15 @@ const NavigationMenuMobile = () => {
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.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.createElement(SubMenuMobile, { currentLevel: 1, menuItem: mainNavigation }),
-            React.createElement(globalNavStyles.MenuItem, { key: "business-item", "aria-hidden": menuLevel.scrollPosition !== 0, role: "menuitem" },
-                React.createElement(BusinessMenu.default, null))),
-        menuLevel.level1Mobile !== null && (React.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.createElement(SubMenuMobile, { currentLevel: 2, menuItem: level1Items[menuLevel.level1Mobile] }))),
-        menuLevel.level2Mobile !== null && (React.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.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);
@@ -178,12 +182,12 @@ const RenderMobileMenu = () => {
     if (!isMobileMenuOpen) {
         return null;
     }
-    return (React.createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React.createElement(MobileMenuContext.default.Provider, { value: mobileMenuContext },
-            React.createElement(MobileMenu, null,
-                React.createElement(MobileMenuWrapper, null,
-                    React.createElement(reactSpring.animated.div, { style: slidingMenuAnimation },
-                        React.createElement(NavigationMenuMobile, null)))))));
+    return (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;

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

@@ -8,12 +8,16 @@ var Icon = require('../../Icon/Icon.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 PageSearch = ({ searchLabel }) => {
     const globalStateString = 'search';
     const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext.default);
-    return (React.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
-        React.createElement(Icon.default, { icon: icons.Search, size: "2rem" }),
-        React.createElement("span", null, searchLabel)));
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
+        React__default.default.createElement(Icon.default, { icon: icons.Search, size: "2rem" }),
+        React__default.default.createElement("span", null, searchLabel)));
 };
 
 exports.default = PageSearch;

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

@@ -9,6 +9,10 @@ var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const RibbonContainer = styled.default.div `
     display: none;
     ${styledUtils.media.md `
@@ -58,13 +62,13 @@ const RibbonColumn = styled.default.div `
         }
     }
 `;
-const Ribbon = ({ ribbonData, lang = 'fi' }) => (React.createElement(RibbonContainer, null,
-    React.createElement(RibbonItems, null, ribbonData.map(ribbon => (React.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
-        ribbon.ribbonLink[lang] && (React.createElement("a", { href: ribbon.ribbonLink[lang] },
-            React.createElement(Icon.default, { name: ribbon.ribbonIcon, size: "1rem" }),
-            React.createElement("span", null, ribbon.ribbonTexts[lang]))),
-        !ribbon.ribbonLink[lang] && (React.createElement(React.Fragment, null,
-            React.createElement(Icon.default, { name: ribbon.ribbonIcon, size: "1rem" }),
-            React.createElement("span", null, ribbon.ribbonTexts[lang])))))))));
+const Ribbon = ({ ribbonData, lang = 'fi' }) => (React__default.default.createElement(RibbonContainer, null,
+    React__default.default.createElement(RibbonItems, null, ribbonData.map(ribbon => (React__default.default.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
+        ribbon.ribbonLink[lang] && (React__default.default.createElement("a", { href: ribbon.ribbonLink[lang] },
+            React__default.default.createElement(Icon.default, { name: ribbon.ribbonIcon, size: "1rem" }),
+            React__default.default.createElement("span", null, ribbon.ribbonTexts[lang]))),
+        !ribbon.ribbonLink[lang] && (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(Icon.default, { name: ribbon.ribbonIcon, size: "1rem" }),
+            React__default.default.createElement("span", null, ribbon.ribbonTexts[lang])))))))));
 
 exports.default = Ribbon;

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

@@ -16,6 +16,10 @@ var MobileMenu = require('./ChildComponents/MobileMenu.js');
 var Ribbon = require('./ChildComponents/Ribbon.js');
 var NavContext = require('./context/NavContext.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const GlobalStyle = styled.createGlobalStyle `
     body.overflow-hidden {
         overflow: hidden;
@@ -300,16 +304,16 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
             setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
         }
     }, undefined, false, 200);
-    return (React.createElement(React.Fragment, null,
-        isPageOverlay && React.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
-            React.createElement(NavContext.default.Provider, { value: navigationContext },
-                React.createElement(GlobalStyle, null),
-                !items.mainNavigation && notificationText && (React.createElement(Notification.default, { type: "info" }, notificationText)),
-                ribbon && ribbonData && React.createElement(Ribbon.default, { ribbonData: ribbonData, lang: language }),
-                React.createElement(NavigationWrapper, { collapseSize: collapseSize },
-                    React.createElement(HeaderNavigationElements.default, { navElementProps: props }),
-                    isMobile && React.createElement(MobileMenu.default, null))))));
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        isPageOverlay && React__default.default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
+        React__default.default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
+            React__default.default.createElement(NavContext.default.Provider, { value: navigationContext },
+                React__default.default.createElement(GlobalStyle, null),
+                !items.mainNavigation && notificationText && (React__default.default.createElement(Notification.default, { type: "info" }, notificationText)),
+                ribbon && ribbonData && React__default.default.createElement(Ribbon.default, { ribbonData: ribbonData, lang: language }),
+                React__default.default.createElement(NavigationWrapper, { collapseSize: collapseSize },
+                    React__default.default.createElement(HeaderNavigationElements.default, { navElementProps: props }),
+                    isMobile && React__default.default.createElement(MobileMenu.default, null))))));
 };
 
 exports.default = MainNavigation;

package/build/cjs/components/Modal/Modal.js

@@ -13,12 +13,17 @@ var Box = require('../Box/Box.js');
 var ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ReactModal__default = /*#__PURE__*/_interopDefaultCompat(ReactModal);
+
 const GlobalStyle = styled.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
 `;
-const StyledReactModal = styled.default(ReactModal) `
+const StyledReactModal = styled.default(ReactModal__default.default) `
     position: relative;
     width: 100vw;
     height: 100dvh;
@@ -66,22 +71,22 @@ const StyledContent = styled.default.div `
 const Title = styled.default.h2 `
     margin: 0 auto ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
 `;
-const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
+const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
     var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
-    return (React.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
+    return (React__default.default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Modal = (_a) => {
     var { appElement = '#__next', maxWidth = '37.5rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "maxWidth", "closeButton", "isClosable", 'data-testid']);
-    ReactModal.setAppElement(appElement);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
-            React.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
-                closeButton && isClosable && (React.createElement(ButtonClose.default, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React.createElement(Icon.default, { icon: icons.Close }))),
-                props.title && React.createElement(Title, null, props.title),
+    ReactModal__default.default.setAppElement(appElement);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
+            React__default.default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
+                closeButton && isClosable && (React__default.default.createElement(ButtonClose.default, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
+                    React__default.default.createElement(Icon.default, { icon: icons.Close }))),
+                props.title && React__default.default.createElement(Title, null, props.title),
                 props.children)),
-        React.createElement(GlobalStyle, null)));
+        React__default.default.createElement(GlobalStyle, null)));
 };
 
 exports.default = Modal;

package/build/cjs/components/Notification/Notification.js

@@ -10,13 +10,18 @@ var theme = require('../../themes/theme.js');
 var ButtonClose = require('../ButtonClose/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
 const iconsMap = {
     info: icons.Info,
     success: icons.Check,
     warning: icons.Warning,
     error: icons.Error,
 };
-const NotificationWrapper = styled.div `
+const NotificationWrapper = styled__default.default.div `
     display: flex;
     gap: 1rem;
     line-height: ${theme.default.lineHeight.default};
@@ -25,30 +30,30 @@ const NotificationWrapper = styled.div `
     border-radius: ${theme.default.radius.s};
     border: 2px solid ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const IconWrapper = styled.div `
+const IconWrapper = styled__default.default.div `
     display: flex;
     align-items: center;
     padding: 0.5rem;
     background-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const ContentWrapper = styled.span `
+const ContentWrapper = styled__default.default.span `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
 `;
-const ButtonCloseStyled = styled(ButtonClose.default) `
+const ButtonCloseStyled = styled__default.default(ButtonClose.default) `
     position: static;
     margin: auto 0.5rem;
 `;
 /** @visibleName Notification */
 const Notification = (_a) => {
     var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    return !props.dismissed ? (React.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
-        React.createElement(IconWrapper, { "$type": type },
-            React.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.default.white })),
-        React.createElement(ContentWrapper, null, props.children),
-        props.closeButton && (React.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
-            React.createElement(Icon.default, { icon: icons.Close, color: "currentColor" }))))) : null;
+    return !props.dismissed ? (React__default.default.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
+        React__default.default.createElement(IconWrapper, { "$type": type },
+            React__default.default.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.default.white })),
+        React__default.default.createElement(ContentWrapper, null, props.children),
+        props.closeButton && (React__default.default.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
+            React__default.default.createElement(Icon.default, { icon: icons.Close, color: "currentColor" }))))) : null;
 };
 
 exports.default = Notification;

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -7,6 +7,10 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const NotificationBadgeElement = styled.default.div `
     display: flex;
     justify-content: center;
@@ -25,7 +29,7 @@ const NotificationBadgeElement = styled.default.div `
 /** @visibleName Notification Badge */
 const NotificationBadge = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports.default = NotificationBadge;

package/build/cjs/components/Overlay/Overlay.js

@@ -8,6 +8,10 @@ var reactDom = require('react-dom');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 const Element = styled.default.div `
     position: fixed;
     top: 0;
@@ -35,8 +39,8 @@ const Overlay = (_a) => {
         ? document.querySelector(portalContainerSelector)
         : null;
     const appElement = document.querySelector(appElementSelector);
-    const overlayElement = (React.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId },
-        React.createElement("div", { ref: contentRef, tabIndex: -1 }, props.children)));
+    const overlayElement = (React__default.default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId },
+        React__default.default.createElement("div", { ref: contentRef, tabIndex: -1 }, props.children)));
     React.useEffect(() => {
         if (preventBodyScroll) {
             document.body.style.setProperty('overflow', 'hidden');