@dnanpm/styleguide 3.8.1 → 3.8.2

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

@@ -26,10 +26,6 @@ var PageSearch = require('./ChildComponents/PageSearch.js');
 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 GlobalStyle = styled.createGlobalStyle `
     body.overflow-hidden {
         overflow: hidden;
@@ -75,14 +71,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;
@@ -92,35 +88,35 @@ const checkThreshold = (prevPos, currPos) => {
     }
     return currPos - prevPos > scrollThreshold;
 };
-const GlobalNavigationContainer = styled["default"].header `
+const GlobalNavigationContainer = styled.default.header `
     z-index: ${({ navZIndex }) => navZIndex};
     position: sticky;
     top: 0;
     left: 0;
     right: 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};
     max-width: 2560px;
     margin: 0 auto;
     > nav {
-        background-color: ${theme["default"].color.background.plum.E02};
+        background-color: ${theme.default.color.background.plum.E02};
     }
 `;
-const NavigationWrapper = styled["default"].div `
+const NavigationWrapper = styled.default.div `
     display: flex;
     width: 100%;
-    max-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 256)};
+    max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 256)};
     margin: 0 auto;
     height: ${navigation.navMaxHeight};
     position: relative;
     flex-wrap: nowrap;
     gap: 0;
-    background-color: ${theme["default"].color.background.white.default};
-    border-bottom: 1px solid ${theme["default"].color.line.L04};
+    background-color: ${theme.default.color.background.white.default};
+    border-bottom: 1px solid ${theme.default.color.line.L04};
     @media (min-width: ${p => p.collapseSize + 1}px) {
         flex-wrap: nowrap;
-        gap: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
+        gap: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
     }
 `;
 let previousValue = false;
@@ -136,7 +132,7 @@ const initiateScrollToHeader = (componentRef) => {
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
     var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "className", "collapseSize", "currentUrl", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
-    const { isMobile } = useWindowSize["default"](collapseSize);
+    const { isMobile } = useWindowSize.default(collapseSize);
     const navigationEl = React.useRef(null);
     const key = ramda.prop('id');
     // Index & memoize menu levels
@@ -284,7 +280,7 @@ const MainHeaderNavigation = (_a) => {
         tooltipItems,
         zIndex,
     ]);
-    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) {
@@ -299,27 +295,27 @@ const MainHeaderNavigation = (_a) => {
         initiateScrollToHeader(navigationEl);
         setIsMobileMenuOpen(!isMobileMenuOpen);
     };
-    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, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl, role: "banner" },
-            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)),
-                React__default["default"].createElement(BusinessMenu["default"], { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
-                React__default["default"].createElement(NavigationWrapper, { collapseSize: collapseSize },
-                    React__default["default"].createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
-                        React__default["default"].createElement(DnaLogo["default"], { size: navigation.headerLogoSize })),
-                    React__default["default"].createElement(globalNavStyles.DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
-                        React__default["default"].createElement(DesktopMenu["default"], null)),
-                    React__default["default"].createElement(globalNavStyles.HeaderIconContainer, { collapseSize: collapseSize },
-                        languagesObject && languageSelector && (React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
-                        search && React__default["default"].createElement(PageSearch["default"], { searchLabel: searchText }),
-                        minicart && (React__default["default"].createElement(MinicartTooltip["default"], { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
-                        login && React__default["default"].createElement(LoginTooltip["default"], { loginLabel: loginText, isLogged: isLoggedIn }),
-                        React__default["default"].createElement(MainNavTooltipMenu.IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
-                            React__default["default"].createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
-                                React__default["default"].createElement(Icon["default"], { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: navigation.navIconSize })))),
-                    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, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl, role: "banner" },
+            React.createElement(NavContext.default.Provider, { value: navigationContext },
+                React.createElement(GlobalStyle, null),
+                !items.mainNavigation && notificationText && (React.createElement(Notification.default, { type: "info" }, notificationText)),
+                React.createElement(BusinessMenu.default, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
+                React.createElement(NavigationWrapper, { collapseSize: collapseSize },
+                    React.createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
+                        React.createElement(DnaLogo.default, { size: navigation.headerLogoSize })),
+                    React.createElement(globalNavStyles.DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
+                        React.createElement(DesktopMenu.default, null)),
+                    React.createElement(globalNavStyles.HeaderIconContainer, { collapseSize: collapseSize },
+                        languagesObject && languageSelector && (React.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
+                        search && React.createElement(PageSearch.default, { searchLabel: searchText }),
+                        minicart && (React.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
+                        login && React.createElement(LoginTooltip.default, { loginLabel: loginText, isLogged: isLoggedIn }),
+                        React.createElement(MainNavTooltipMenu.IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
+                            React.createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
+                                React.createElement(Icon.default, { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: navigation.navIconSize })))),
+                    isMobile && React.createElement(MobileMenu.default, null))))));
 };
 
-exports["default"] = MainHeaderNavigation;
+exports.default = MainHeaderNavigation;

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

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

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

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

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

@@ -817,8 +817,8 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         pill: string;
     };
 }, {
-    isActive?: boolean | undefined;
-    isFeaturedItem?: boolean | undefined;
+    isActive?: boolean;
+    isFeaturedItem?: boolean;
 }, never>;
 export declare const MenuLink: import("styled-components").StyledComponent<"a", {
     base: {
@@ -983,7 +983,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: {
@@ -1148,7 +1148,7 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         pill: string;
     };
 }, {
-    isOpen?: boolean | undefined;
+    isOpen?: boolean;
 }, never>;
 export declare const MenuList: import("styled-components").StyledComponent<"ul", {
     base: {
@@ -1313,7 +1313,7 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         pill: string;
     };
 }, {
-    isInView?: boolean | undefined;
+    isInView?: boolean;
 }, never>;
 export declare const FeaturedBlock: import("styled-components").StyledComponent<"li", {
     base: {

package/build/cjs/components/MainHeaderNavigation/globalNavStyles.js

@@ -1,18 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var navigation = require('../../themes/themeComponents/navigation.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-const LogoLink = styled["default"].a `
+const LogoLink = styled.default.a `
     height: ${navigation.navMaxHeight};
     flex: 0 0 auto;
 `;
-const DesktopMenuContainer = styled["default"].nav `
+const DesktopMenuContainer = styled.default.nav `
     display: none;
     flex-direction: column;
     position: absolute;
@@ -26,36 +24,36 @@ const DesktopMenuContainer = styled["default"].nav `
         overflow: initial;
     }
 `;
-const MobileMenuButton = styled["default"].button `
+const MobileMenuButton = styled.default.button `
     font-family: inherit;
     border: 0;
     padding: 0;
     background: transparent;
     svg {
-        color: ${theme["default"].color.text.black};
-        fill: ${theme["default"].color.text.black};
+        color: ${theme.default.color.text.black};
+        fill: ${theme.default.color.text.black};
     }
     &:focus,
     &:active {
         svg {
-            color: ${theme["default"].color.text.pink};
-            fill: ${theme["default"].color.text.pink};
+            color: ${theme.default.color.text.pink};
+            fill: ${theme.default.color.text.pink};
         }
     }
     &:focus-visible {
         outline: 0;
-        border-radius: ${theme["default"].radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.light},
-            0px 0px 0px 4px ${theme["default"].color.focus.dark};
-        color: ${theme["default"].color.text.black};
+        border-radius: ${theme.default.radius.s};
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+        color: ${theme.default.color.text.black};
     }
 `;
-const HeaderIconContainer = styled["default"].div `
+const HeaderIconContainer = styled.default.div `
     display: flex;
     height: ${navigation.navMaxHeight};
     flex: 0 0 auto;
-    gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)} 0 auto;
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)} 0 auto;
     button {
         &:focus {
             outline: none;
@@ -67,51 +65,51 @@ const HeaderIconContainer = styled["default"].div `
         }
     }
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     }
 `;
-const MenuItem = styled["default"].li `
+const MenuItem = styled.default.li `
     display: ${p => (p.isFeaturedItem ? 'grid' : 'flex')};
     align-items: center;
     grid-template-columns: ${p => (p.isFeaturedItem ? '1fr 1fr' : '1fr')};
     & > a {
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3)};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
     }
     > button {
-        background-color: ${theme["default"].color.background.white};
+        background-color: ${theme.default.color.background.white};
     }
     > button,
     > a {
-        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)};
         justify-content: ${p => (p.isFeaturedItem ? 'flex-start' : 'space-between')};
-        font-size: ${theme["default"].fontSize.s};
+        font-size: ${theme.default.fontSize.s};
         &:focus-visible {
             outline: 0;
-            border-radius: ${theme["default"].radius.s};
-            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.light},
-                0px 0px 0px 4px ${theme["default"].color.focus.dark};
+            border-radius: ${theme.default.radius.s};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+                0px 0px 0px 4px ${theme.default.color.focus.dark};
         }
         ${styledUtils.media.xl `
-            font-size: ${theme["default"].fontSize.default};
+            font-size: ${theme.default.fontSize.default};
         `}
     }
 `;
-const MenuLink = styled["default"].a `
+const MenuLink = styled.default.a `
     overflow: visible;
     text-decoration: none;
-    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)};
     &:hover,
     &:focus {
-        color: ${theme["default"].color.hover.pink};
+        color: ${theme.default.color.hover.pink};
         text-underline-offset: 0.2em;
         -webkit-text-decoration-skip: ink;
         text-decoration-skip-ink: auto;
         text-decoration-thickness: from-font;
     }
 `;
-const MenuLinkWithChildren = styled["default"].button `
-    line-height: ${theme["default"].lineHeight.xs};
+const MenuLinkWithChildren = styled.default.button `
+    line-height: ${theme.default.lineHeight.xs};
     text-align: left;
     display: block;
     text-decoration: none;
@@ -120,10 +118,10 @@ const MenuLinkWithChildren = styled["default"].button `
     outline: none;
     font-family: inherit;
     white-space: normal;
-    color: ${p => (p.isOpen ? theme["default"].color.text.pink : theme["default"].color.default.black)};
+    color: ${p => (p.isOpen ? theme.default.color.text.pink : theme.default.color.default.black)};
     &:hover,
     &:focus {
-        color: ${theme["default"].color.hover.pink};
+        color: ${theme.default.color.hover.pink};
         cursor: pointer;
         outline: none;
     }
@@ -134,43 +132,43 @@ const MenuLinkWithChildren = styled["default"].button `
     }
 
 `;
-const MenuList = styled["default"].ul `
+const MenuList = styled.default.ul `
     display: flex;
     max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
     overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
     list-style: none;
     margin: 0;
     padding: 0;
-    background-color: ${theme["default"].color.background.white};
+    background-color: ${theme.default.color.background.white};
     transition: all 300ms ease-in-out;
 `;
-const FeaturedBlock = styled["default"].li `
-    background-color: ${theme["default"].color.background.sand.E01};
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+const FeaturedBlock = styled.default.li `
+    background-color: ${theme.default.color.background.sand.E01};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     display: grid;
     grid-template-columns: 1fr 1fr;
-    font-weight: ${theme["default"].fontWeight.bold};
+    font-weight: ${theme.default.fontWeight.bold};
     grid-column: 4;
     grid-row: 1/4;
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        ${common["default"]({ elevation: 'high' })};
+        ${common.default({ elevation: 'high' })};
         border-radius: 0
         border-width: 0 0 0 1px;
-        background: ${theme["default"].color.background.sand.default};
-        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)}
-            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3)};
+        background: ${theme.default.color.background.sand.default};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
         display: flex;
         flex-direction: column;
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
         align-items: stretch;
         justify-content: flex-start;
     }
     a {
-        line-height: ${theme["default"].lineHeight.default};
-        font-weight: ${theme["default"].fontWeight.bold};
-        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+        line-height: ${theme.default.lineHeight.default};
+        font-weight: ${theme.default.fontWeight.bold};
+        gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
         &:hover,
         &:focus {
             color: inherit;

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

@@ -8,41 +8,37 @@ var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.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 BusinessMenuLink = styled["default"].a `
-    color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+const BusinessMenuLink = styled.default.a `
+    color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
     display: block;
     margin: ${p => !p.isMobileMenu
-    ? `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`
-    : `${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.25)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)} `};
+    ? `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}`
+    : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)} `};
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${theme["default"].color.text.pink};
+        color: ${theme.default.color.text.pink};
         outline: none;
     }
 `;
-const BusinessMenuItem = styled["default"].li `
+const BusinessMenuItem = styled.default.li `
     display: flex;
     overflow: hidden;
 `;
-const BusinessMenuList = styled["default"].ul `
+const BusinessMenuList = styled.default.ul `
     display: ${({ isMobileMenu }) => (!isMobileMenu ? 'inline-flex' : 'block')};
     align-items: center;
     position: relative;
     list-style: none;
-    margin: ${({ isMobileMenu }) => isMobileMenu ? '1rem 0' : `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)}`};
+    margin: ${({ isMobileMenu }) => isMobileMenu ? '1rem 0' : `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)}`};
     padding: 0;
-    background-color: ${theme["default"].color.background.white.default};
-    font-size: ${({ isMobileMenu }) => (isMobileMenu ? theme["default"].fontSize.default : theme["default"].fontSize.s)};
+    background-color: ${theme.default.color.background.white.default};
+    font-size: ${({ isMobileMenu }) => (isMobileMenu ? theme.default.fontSize.default : theme.default.fontSize.s)};
     height: 100%;
 `;
 const BusinessMenu = () => {
     var _a;
-    const { items, lang, isMobileMenu, resetMenuEvents } = React.useContext(NavContext["default"]);
+    const { items, lang, isMobileMenu, resetMenuEvents } = React.useContext(NavContext.default);
     const ref = React.useRef(null);
     const currentBusinessId = items.businessId;
     const businessMenuItems = (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items;
@@ -51,8 +47,8 @@ const BusinessMenu = () => {
         (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
         return null;
     }
-    return (React__default["default"].createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default["default"].createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__default["default"].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
+    return (React.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+        React.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
 };
 
-exports["default"] = BusinessMenu;
+exports.default = BusinessMenu;