@dnanpm/styleguide 3.8.1 → 3.8.2

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

@@ -162,7 +162,7 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
     };
 }, {
     collapseSize: number;
-    isHighlighted?: boolean | undefined;
+    isHighlighted?: boolean;
 }, never>;
 export default TooltipWrapper;
 export { TooltipWrapper };

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

@@ -6,14 +6,14 @@ 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;
     overflow: visible;
     background: transparent;
-    color: ${p => (p.isHighlighted ? theme["default"].color.text.pink : 'inherit')};
+    color: ${p => (p.isHighlighted ? theme.default.color.text.pink : 'inherit')};
     font: inherit;
     line-height: normal;
     -webkit-font-smoothing: inherit;
@@ -24,14 +24,14 @@ const TooltipWrapper = styled["default"].button `
     &:hover {
         span.dnasg-icon > svg,
         > span {
-            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)};
         }
     }
     &:active,
     &:focus {
         span.dnasg-icon > svg,
         > span {
-            color: ${theme["default"].color.text.pink};
+            color: ${theme.default.color.text.pink};
         }
     }
     span.dnasg-icon > svg {
@@ -53,10 +53,10 @@ const TooltipWrapper = styled["default"].button `
             overflow: hidden;
             max-width: ${navigation.IconContainerWidth};
         }
-        font-size: ${theme["default"].fontSize.xs};
-        font-weight: ${theme["default"].fontWeight.book};
+        font-size: ${theme.default.fontSize.xs};
+        font-weight: ${theme.default.fontWeight.book};
     }
 `;
 
 exports.TooltipWrapper = TooltipWrapper;
-exports["default"] = TooltipWrapper;
+exports.default = TooltipWrapper;

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

@@ -10,17 +10,13 @@ var NotificationBadge = require('../../NotificationBadge/NotificationBadge.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 MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
     const globalStateString = 'minicart';
-    const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext["default"]);
-    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))));
+    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))));
 };
 
-exports["default"] = MinicartTooltip;
+exports.default = MinicartTooltip;

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

@@ -16,16 +16,12 @@ var globalNavStyles = require('../globalNavStyles.js');
 var BusinessMenu = require('./BusinessMenu.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 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};
@@ -33,7 +29,7 @@ const MobileMenuContainer = styled["default"].div `
     overflow: hidden;
     overflow-y: auto;
     transition: max-height 0.2s ease-in-out;
-    background: ${theme["default"].color.background.white.default};
+    background: ${theme.default.color.background.white.default};
     max-height: ${mobileMenuNoRibbon};
     height: ${mobileMenuNoRibbon};
     ${styledUtils.media.md `
@@ -42,9 +38,9 @@ const MobileMenuContainer = styled["default"].div `
         height: ${mobileMenuWithRibbon};
     `};
 `;
-const MenuLinkBackLink = styled["default"](globalNavStyles.MenuLink) ``;
-const MobileMenu = styled["default"].div `
-    background: ${theme["default"].color.background.white.default};
+const MenuLinkBackLink = styled.default(globalNavStyles.MenuLink) ``;
+const MobileMenu = styled.default.div `
+    background: ${theme.default.color.background.white.default};
     ${globalNavStyles.MenuList} {
         display: block;
         float: left;
@@ -55,14 +51,14 @@ const MobileMenu = styled["default"].div `
             min-height: ${mobileMenuWithRibbon};
         `};
         &:first-of-type {
-            background: ${theme["default"].color.background.white.default};
+            background: ${theme.default.color.background.white.default};
             > ${globalNavStyles.MenuItem} > ${globalNavStyles.MenuLink} {
-                font-weight: ${theme["default"].fontWeight.medium};
-                border-bottom: 1px solid ${theme["default"].color.line.L04};
+                font-weight: ${theme.default.fontWeight.medium};
+                border-bottom: 1px solid ${theme.default.color.line.L04};
             }
         }
         &:not(:first-of-type) {
-            background: ${theme["default"].color.background.sand.default};
+            background: ${theme.default.color.background.sand.default};
         }
 
         ${globalNavStyles.MenuItem} {
@@ -73,24 +69,24 @@ const MobileMenu = styled["default"].div `
         }
     }
     ${globalNavStyles.MenuLink}, ${globalNavStyles.MenuLinkWithChildren} {
-        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};
+        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: ${theme["default"].fontWeight.medium};
-        background: ${theme["default"].color.background.white.default};
-        color: ${theme["default"].color.text.pink};
+        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-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 4)};
+            margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
         }
     }
     ${globalNavStyles.MenuLink}:hover {
@@ -98,7 +94,7 @@ const MobileMenu = styled["default"].div `
     }
 `;
 const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext["default"]);
+    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext.default);
     const levels = {
         level1Items,
         level2Items,
@@ -111,15 +107,15 @@ 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: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronLeft, size: "1rem" }),
+    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" }),
             backLink.titles[lang])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
     var _a;
-    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang, currentUrl, } = React.useContext(NavContext["default"]);
-    const { mobileMenuRef } = React.useContext(MobileMenuContext["default"]);
+    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang, currentUrl, } = React.useContext(NavContext.default);
+    const { mobileMenuRef } = React.useContext(MobileMenuContext.default);
     const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
     const indexLevel = currentLevel - 1;
     const tabNavigationDisabled = () => scrollPosition !== indexLevel;
@@ -137,41 +133,41 @@ 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.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 },
                 menuItem.titles[lang],
-                React__default["default"].createElement(Icon["default"], { icon: icons.ChevronRight, size: "1rem" }))));
+                React.createElement(Icon.default, { icon: icons.ChevronRight, 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.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() })));
 };
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const navElements = menuItem.pages;
     if (!navElements.length) {
         return 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.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 })))));
 };
 const NavigationMenuMobile = () => {
-    const { items, menuLevel, level1Items, level2Items } = React.useContext(NavContext["default"]);
+    const { items, menuLevel, level1Items, level2Items } = React.useContext(NavContext.default);
     const { mainNavigation } = items;
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return 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.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] })))));
 };
 const RenderMobileMenu = () => {
-    const { menuLevel, isMobileMenuOpen } = React.useContext(NavContext["default"]);
+    const { menuLevel, isMobileMenuOpen } = React.useContext(NavContext.default);
     const mobileMenuRef = React.useRef(null);
     const slidingMenuAnimation = reactSpring.useSpring({
         transform: `translateX(${(menuLevel.scrollPosition / navigation.menuLevelsAmount) * -100}%)`,
@@ -182,12 +178,12 @@ const RenderMobileMenu = () => {
     if (!isMobileMenuOpen) {
         return 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)))))));
+    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)))))));
 };
 
-exports["default"] = RenderMobileMenu;
+exports.default = RenderMobileMenu;

package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.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 PageSearch = ({ searchLabel }) => {
     const globalStateString = 'search';
-    const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext["default"]);
-    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)));
+    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)));
 };
 
-exports["default"] = PageSearch;
+exports.default = PageSearch;

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

@@ -9,51 +9,47 @@ var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const RibbonContainer = styled["default"].div `
+const RibbonContainer = styled.default.div `
     display: none;
     ${styledUtils.media.md `
-        background: ${theme["default"].color.background.sand.E01};
+        background: ${theme.default.color.background.sand.E01};
         display: block;
     `};
 `;
-const RibbonItems = styled["default"].div `
+const RibbonItems = styled.default.div `
     max-width: 1290px;
     height: ${navigation.ribbonHeight};
-    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
 `;
-const RibbonColumn = styled["default"].div `
+const RibbonColumn = styled.default.div `
     flex: 1 1 auto;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: ${theme["default"].color.text.gray};
-    font-size: ${theme["default"].fontSize.xs};
-    border-right: 2px solid ${theme["default"].color.line.L03};
+    color: ${theme.default.color.text.gray};
+    font-size: ${theme.default.fontSize.xs};
+    border-right: 2px solid ${theme.default.color.line.L03};
     &:last-of-type {
         border: none;
     }
 
     span.dnasg-icon {
-        margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+        margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
     }
 
     a {
         display: flex;
         align-items: center;
-        color: ${theme["default"].color.text.gray};
+        color: ${theme.default.color.text.gray};
         &:hover,
         &:focus,
         &:active {
             text-decoration: none;
-            color: ${theme["default"].color.text.pink};
+            color: ${theme.default.color.text.pink};
             border: none;
             outline: none;
         }
@@ -62,13 +58,13 @@ const RibbonColumn = styled["default"].div `
         }
     }
 `;
-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])))))))));
+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])))))))));
 
-exports["default"] = Ribbon;
+exports.default = Ribbon;

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

@@ -16,10 +16,6 @@ var MobileMenu = require('./ChildComponents/MobileMenu.js');
 var Ribbon = require('./ChildComponents/Ribbon.js');
 var NavContext = require('./context/NavContext.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const GlobalStyle = styled.createGlobalStyle `
     body.overflow-hidden {
         overflow: hidden;
@@ -65,14 +61,14 @@ const resumeBodyScroll = () => {
         });
     }
 };
-const PageOverlay = styled["default"].div `
+const PageOverlay = styled.default.div `
     position: fixed;
     animation: ${fadeIn} 0.2s ease-in-out;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: ${theme["default"].color.background.plum.default + theme["default"].color.transparency.T10};
+    background: ${theme.default.color.background.plum.default + theme.default.color.transparency.T10};
     z-index: ${({ navZIndex }) => navZIndex - 1};
 `;
 const scrollThreshold = 82;
@@ -82,7 +78,7 @@ const checkThreshold = (prevPos, currPos) => {
     }
     return currPos - prevPos > scrollThreshold;
 };
-const GlobalNavigationContainer = styled["default"].nav `
+const GlobalNavigationContainer = styled.default.nav `
     z-index: ${({ navZIndex }) => navZIndex};
     position: relative;
     position: sticky;
@@ -90,18 +86,18 @@ const GlobalNavigationContainer = styled["default"].nav `
     top: 0;
     left: 0;
     width: 100%;
-    background-color: ${theme["default"].color.background.white.default};
-    color: ${theme["default"].color.text.black};
+    background-color: ${theme.default.color.background.white.default};
+    color: ${theme.default.color.text.black};
     top: ${({ menuLevel, tooltipMenuActive }) => (menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.hideOnScroll) && !(menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.level1) && !tooltipMenuActive
     ? `calc(-${navigation.desktopNavMaxHeight} - ${navigation.ribbonHeight})`
     : '0px'} !important;
     transition: top 0.2s ease-in-out;
     box-sizing: border-box;
 `;
-const NavigationWrapper = styled["default"].div `
+const NavigationWrapper = styled.default.div `
     display: flex;
     width: 100%;
-    max-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 256)};
+    max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 256)};
     margin: 0 auto;
     height: ${navigation.mobileNavMaxHeight};
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -119,7 +115,7 @@ const initiateScrollToHeader = (componentRef) => {
 };
 /** @visibleName Main Navigation */
 const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = '', notificationText = '', }) => {
-    const { isMobile } = useWindowSize["default"](collapseSize);
+    const { isMobile } = useWindowSize.default(collapseSize);
     const props = {
         items,
         language,
@@ -294,23 +290,23 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
         searchComponent,
         currentUrl,
     ]);
-    useScrollPosition["default"](({ prevPos, currPos }) => {
+    useScrollPosition.default(({ prevPos, currPos }) => {
         const overThreshold = checkThreshold(prevPos.y, currPos.y);
         const isShow = currPos.y < prevPos.y;
         if (isShow !== menuLevel.hideOnScroll && overThreshold && !menuLevel.level1) {
             setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
         }
     }, undefined, false, 200);
-    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))))));
+    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))))));
 };
 
-exports["default"] = MainNavigation;
+exports.default = MainNavigation;

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

@@ -8,4 +8,4 @@ const MobileMenuContext = React.createContext({
     mobileMenuRef: null,
 });
 
-exports["default"] = MobileMenuContext;
+exports.default = MobileMenuContext;

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

@@ -43,4 +43,4 @@ const NavContext = React.createContext({
     },
 });
 
-exports["default"] = NavContext;
+exports.default = NavContext;

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -161,7 +161,7 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         pill: string;
     };
 }, {
-    isActive?: boolean | undefined;
+    isActive?: boolean;
 }, never>;
 export declare const MenuLink: import("styled-components").StyledComponent<"a", {
     base: {
@@ -326,7 +326,7 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         pill: string;
     };
 }, {
-    isActive?: boolean | undefined;
+    isActive?: boolean;
 }, never>;
 export declare const MenuLinkWithChildren: import("styled-components").StyledComponent<"button", {
     base: {
@@ -491,8 +491,8 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         pill: string;
     };
 }, {
-    isActive?: boolean | undefined;
-    isHighlighted?: boolean | undefined;
+    isActive?: boolean;
+    isHighlighted?: boolean;
 }, never>;
 export declare const MenuList: import("styled-components").StyledComponent<"ul", {
     base: {
@@ -657,5 +657,5 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         pill: string;
     };
 }, {
-    isInView?: boolean | undefined;
+    isInView?: boolean;
 }, never>;