@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/cjs/components/LabelText/LabelText.d.ts

@@ -1,103 +1,43 @@
+import React from 'react';
+declare type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of LabelText component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to pass a custom 'for' attribute
+     */
+    htmlFor?: string;
+    /**
+     * Styling of `label` element changes depending on the passed status
+     *
+     * @param {LabelTextStatus} undefined Default styling
+     * @param {LabelTextStatus} info Changes color to `theme.color.notification.info`
+     * @param {LabelTextStatus} success Changes color to `theme.color.notification.success`
+     * @param {LabelTextStatus} warning Changes color to `theme.color.notification.warning`
+     * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
+     */
+    status?: LabelTextStatus;
+    /**
+     * Allows to set element as mandatory
+     *
+     * @default false
+     */
+    isMandatory?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
 /** @visibleName Label Text */
-declare const LabelText: import("styled-components").StyledComponent<"label", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        /** @visibleName Label Text */
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, {}, never>;
+declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 export default LabelText;

package/build/cjs/components/LabelText/LabelText.js

@@ -2,15 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
+var React = require('react');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Label = styled["default"].label `
+    display: block;
+    color: ${({ status }) => (status ? theme["default"].color.notification[status] : theme["default"].color.text.gray)};
+    font-weight: ${theme["default"].fontWeight.medium};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    margin-bottom: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 2)};
+    ${({ htmlFor }) => htmlFor && `cursor: pointer`};
+`;
+const Mandatory = styled["default"].span `
+    color: ${theme["default"].color.text.pink};
+`;
 /** @visibleName Label Text */
-const LabelText = styled['default'].label(({ theme, htmlFor }) => ({
-    fontSize: theme.fontSize.default,
-    display: 'block',
-    marginBottom: styledUtils.getDividedSize(theme.base.baseWidth, 2),
-    cursor: htmlFor ? 'pointer' : 'default',
-}));
+const LabelText = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    return (React__default["default"].createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, status: props.status },
+        props.children,
+        props.isMandatory && React__default["default"].createElement(Mandatory, null, "*")));
+};
 
-exports.default = LabelText;
+exports["default"] = LabelText;

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

@@ -1,2 +1,3 @@
-declare const BusinessMenu: any;
+/// <reference types="react" />
+declare const BusinessMenu: () => JSX.Element;
 export default BusinessMenu;

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

@@ -4,53 +4,55 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('../../../themes/styled.js');
+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 `
-    padding: ${p => (!p.isMobileMenu ? 0 : '0.5rem 1.25rem')};
-    color: ${p => (p.isActive ? p.theme.color.hotPink : p.theme.color.slateGray)};
-    display: ${p => (!p.isMobileMenu ? 'block' : null)};
-    margin: ${p => (!p.isMobileMenu ? '0 0.625rem 0 0.625rem' : null)};
+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)} `};
     &:hover,
     &:focus {
         text-decoration: none;
-        color: ${p => p.theme.color.hotPink};
-        cursor: pointer;
+        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 0.325rem')};
+    margin: ${({ isMobileMenu }) => isMobileMenu ? '1rem 0' : `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)}`};
     padding: 0;
-    background-color: ${p => p.theme.color.white};
-    font-size: ${p => p.theme.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 = () => {
-    const { items: data, lang: language, isMobileMenu, resetMenuEvents } = React.useContext(NavContext['default']);
+    const { items: data, lang: language, isMobileMenu, resetMenuEvents } = React.useContext(NavContext["default"]);
     const ref = React.useRef(null);
     if (!data.businessId || (!data.businessSelector && data.businessSelector.items.length > 0)) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
     const currentBusinessId = data.businessId;
     const businessMenuItems = data.businessSelector.items;
     if (!businessMenuItems.length) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return (React__default['default'].createElement(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[language], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[language]))))));
+    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[language], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[language]))))));
 };
 
-exports.default = BusinessMenu;
+exports["default"] = BusinessMenu;

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

@@ -8,6 +8,7 @@ var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
+var Box = require('../../Box/Box.js');
 var Icon = require('../../Icon/Icon.js');
 require('tslib');
 var hlChevronRight = require('../../Icons/hlChevronRight.js');
@@ -39,41 +40,27 @@ const fadeRight = styled.keyframes `
         transform: translate(0px);
     }
 `;
-const SubMenuListRight = styled['default'].ul `
+const SubMenuListRight = styled["default"].div `
     display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
     ? 'block'
     : 'none'};
     ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
-    top: -${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    margin: 0;
-    margin-top: -2px;
-    margin-left: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
+    top: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
     position: absolute;
-    background: #fff;
-    box-shadow: 0px 5px 11px -5px rgba(1, 1, 1, 0.6);
     width: ${navigation.subMenuWidth};
-    ${() => styledUtils.media.xl `
+    left: 100%;
+    transform: translateY(var(--nav-item-overflow-fix));
+
+    ${styledUtils.media.xl `
         width: ${navigation.subMenuWidthXl};
     `};
-    a,
-    button {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-        line-height: 1.2rem;
-    }
-    button {
-        margin-right: 1rem;
-    }
 `;
-const SubMenuItem = styled['default'].li `
-    padding: 0.5rem ${navigation.menuItemMargin};
+const SubMenuItem = styled["default"].li `
     display: block;
     position: relative;
     > a {
-        color: ${p => (p.isHighlighted ? p.theme.color.hotPink : p.theme.color.text)};
+        color: ${p => (p.isHighlighted ? theme["default"].color.text.pink : theme["default"].color.text.black)};
         span {
             position: relative;
             &:after {
@@ -83,12 +70,27 @@ const SubMenuItem = styled['default'].li `
                 bottom: -6px;
                 left: 0;
                 border-bottom: 1px solid
-                    ${p => (p && p.isHighlighted ? p.theme.color.hotPink : 'transparent')};
+                    ${p => (p.isHighlighted ? theme["default"].color.default.pink : 'transparent')};
             }
         }
     }
 `;
-const DesktopMenuList = styled['default'](globalNavStyles.MenuList) `
+const DesktopMenuList = styled["default"](globalNavStyles.MenuList) `
+    ul {
+        padding-left: 0;
+
+        li {
+            a,
+            button {
+                line-height: ${theme["default"].lineHeight.s};
+                display: flex;
+                width: 100%;
+                align-items: center;
+                padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+                justify-content: space-between;
+            }
+        }
+    }
     > li {
         > a,
         > button {
@@ -97,9 +99,9 @@ const DesktopMenuList = styled['default'](globalNavStyles.MenuList) `
     }
     a,
     button {
-        font-size: ${theme['default'].fontSize.s};
-        ${() => styledUtils.media.xl `
-            font-size: ${theme['default'].fontSize.default};
+        font-size: ${theme["default"].fontSize.s};
+        ${styledUtils.media.xl `
+            font-size: ${theme["default"].fontSize.default};
         `};
     }
     margin-top: -2px;
@@ -113,7 +115,7 @@ const fadeRightAnimation = styled.css `
 const noAnimation = styled.css `
     animation: none;
 `;
-const DesktopMenuItem = styled['default'](globalNavStyles.MenuItem) `
+const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
     &:first-child > ${globalNavStyles.MenuLinkWithChildren} {
         margin: 0 ${navigation.menuItemMargin};
     }
@@ -121,26 +123,24 @@ const DesktopMenuItem = styled['default'](globalNavStyles.MenuItem) `
     > button {
         width: auto;
         display: flex;
-        line-height: 1rem;
         padding: 0.75rem 0;
-        margin: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.3)};
-        ${() => styledUtils.media.xl `
+        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.3)};
+        ${styledUtils.media.xl `
             margin: 0 ${navigation.menuItemMargin};
         `};
-        border-bottom: 3px solid ${p => p.theme.color.white};
+        border-bottom: 3px solid ${theme["default"].color.default.white};
         position: relative;
-        color: ${p => (p && p.isActive ? p.theme.color.hotPink : p.theme.color.text)};
+        color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
         &:after {
             position: absolute;
             content: '';
             width: 100%;
             bottom: -4px;
-            border-bottom: 1px solid
-                ${p => (p && p.isActive ? p.theme.color.hotPink : 'transparent')};
+            border-bottom: 1px solid ${p => (p.isActive ? theme["default"].color.default.pink : 'transparent')};
         }
         &:hover,
         &:focus {
-            border-bottom: 3px solid ${p => p.theme.color.white};
+            border-bottom: 3px solid ${theme["default"].color.default.white};
         }
     }
     &:hover,
@@ -148,75 +148,56 @@ const DesktopMenuItem = styled['default'](globalNavStyles.MenuItem) `
         > a,
         > button {
             cursor: pointer;
-            color: ${p => p.theme.color.hotPink};
+            color: ${theme["default"].color.text.pink};
         }
     }
 `;
-const SubMenuList = styled['default'].ul `
+const SubMenuList = styled["default"].div `
+    position: absolute;
+    left: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
     display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level1 === navItemId ? 'block' : 'none'};
     z-index: ${({ navZIndex }) => navZIndex + 1};
     margin-top: 1px;
     ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
     ? fadeInAnimation
     : noAnimation};
-    padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    position: absolute;
-    ul {
-        left: 100%;
-        top: -0.5rem;
-        margin-left: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-        transform: translateY(var(--nav-item-overflow-fix));
-        ${noAnimation}
-    }
-    background: ${p => p.theme.color.white};
-    box-shadow: 0px 2px 8px -3px rgba(1, 1, 1, 0.7);
-    -ms-box-shadow: 0px 2px 11px -2px rgba(1, 1, 1, 0.6);
+
     width: ${navigation.subMenuWidth};
-    ${() => styledUtils.media.xl `
+    ${styledUtils.media.xl `
         width: ${navigation.subMenuWidthXl};
     `};
-    li {
-        margin: 0;
-        padding: 0;
-        a,
-        button {
-            line-height: ${theme['default'].lineHeight.s};
-            display: flex;
-            width: 100%;
-            align-items: center;
-            padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-            justify-content: space-between;
-        }
-        button {
-            margin-right: 1rem;
-        }
+    > div {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
     }
 `;
 const SubMenuLevel1 = ({ menuItem }) => {
-    const { lang: language, navZIndex, menuLevel, handleNavMenuClick, currentUrl, } = React.useContext(NavContext['default']);
+    const { lang: language, navZIndex, menuLevel, handleNavMenuClick, currentUrl, } = React.useContext(NavContext["default"]);
     const level1HasElements = Boolean(menuItem.pages.length);
     const menuClick = (element) => (e) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level2');
     };
     if (!level1HasElements) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return (React__default['default'].createElement(SubMenuList, { role: "menu", "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex }, menuItem.pages.map((element, index) => {
-        const menuUrl = element.urls[language];
-        if (element.pages.length) {
-            return (React__default['default'].createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-                    React__default['default'].createElement("span", null, element.titles[language]),
-                    React__default['default'].createElement(Icon['default'], { icon: hlChevronRight['default'], size: "1rem" })),
-                React__default['default'].createElement(SubMenuLevel2, { menuItem: element })));
-        }
-        return (React__default['default'].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-            React__default['default'].createElement(LinkModifier['default'], { menuItem: element, tabIndex: false })));
-    })));
+    return (React__default["default"].createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
+        React__default["default"].createElement(Box["default"], { elevation: "high", padding: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1) },
+            React__default["default"].createElement("ul", null, menuItem.pages.map((element, index) => {
+                const menuUrl = element.urls[language];
+                if (element.pages.length) {
+                    return (React__default["default"].createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                        React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+                            React__default["default"].createElement("span", null, element.titles[language]),
+                            React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1rem" })),
+                        React__default["default"].createElement(SubMenuLevel2, { menuItem: element })));
+                }
+                return (React__default["default"].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                    React__default["default"].createElement(LinkModifier["default"], { menuItem: element, tabIndex: false })));
+            })))));
 };
 const SubMenuLevel2 = ({ menuItem }) => {
-    const { lang, menuLevel, currentUrl } = React.useContext(NavContext['default']);
+    const { lang, menuLevel, currentUrl } = React.useContext(NavContext["default"]);
     // Handle the case where the submenu is not visible
     const measureRef = React.useRef(null);
     React.useEffect(() => {
@@ -231,45 +212,48 @@ const SubMenuLevel2 = ({ menuItem }) => {
         };
         handleOffSet();
     }, [menuLevel.level2, menuItem.id]);
-    return (React__default['default'].createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef }, menuItem.pages.map((item, index) => {
-        const menuUrl = item.urls[lang];
-        return (React__default['default'].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
-            React__default['default'].createElement(LinkModifier['default'], { menuItem: item, tabIndex: false })));
-    })));
+    return (React__default["default"].createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
+        React__default["default"].createElement(Box["default"], { elevation: "high", padding: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1) },
+            React__default["default"].createElement("ul", null, menuItem.pages.map((item, index) => {
+                const menuUrl = item.urls[lang];
+                return (React__default["default"].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
+                    React__default["default"].createElement(LinkModifier["default"], { menuItem: item, tabIndex: false })));
+            })))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang: language, menuLevel, handleNavMenuClick, currentUrl } = React.useContext(NavContext['default']);
+    const { lang: language, menuLevel, handleNavMenuClick, currentUrl } = React.useContext(NavContext["default"]);
     const menuClickMain = (element) => (e) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
     const menuUrl = menuItem.urls[language];
-    return (React__default['default'].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
-        React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-            React__default['default'].createElement("span", null, menuItem.titles[language])),
-        React__default['default'].createElement(SubMenuLevel1, { menuItem: menuItem })));
+    return (React__default["default"].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
+        React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+            React__default["default"].createElement("span", null, menuItem.titles[language])),
+        React__default["default"].createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
-    const { items: data, lang: language, resetMenuEvents, menuLevel, currentUrl, } = React.useContext(NavContext['default']);
-    const mainNavigation = data.mainNavigation && data.mainNavigation.pages ? data.mainNavigation.pages : [];
+    var _a;
+    const { items: data, lang: language, resetMenuEvents, menuLevel, currentUrl, } = React.useContext(NavContext["default"]);
+    const mainNavigation = ((_a = data === null || data === void 0 ? void 0 : data.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
     const ref = React.useRef(null);
-    useOutsideClick['default'](ref, () => {
+    useOutsideClick["default"](ref, () => {
         if (menuLevel.level1 || menuLevel.level2) {
             resetMenuEvents();
         }
     });
     if (!mainNavigation.length) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return (React__default['default'].createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
+    return (React__default["default"].createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
         const menuHasChildren = Boolean(navElement.pages && navElement.pages.length);
         if (menuHasChildren) {
-            return (React__default['default'].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React__default["default"].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default['default'].createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
+        return (React__default["default"].createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
                 LinkModifier.isSelected(currentUrl, navElement.urls[language]) },
-            React__default['default'].createElement(LinkModifier['default'], { menuItem: navElement, tabIndex: false })));
+            React__default["default"].createElement(LinkModifier["default"], { menuItem: navElement, tabIndex: false })));
     })));
 };
 
-exports.default = DesktopMenu;
+exports["default"] = DesktopMenu;