@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/MainHeaderNavigation/ChildComponents/DesktopMenu.js

@@ -9,167 +9,181 @@ import NavContext from '../context/NavContext.js';
 import { MenuItem, MenuList, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
 
-const fadeIn = keyframes `
-    0% {
-        opacity: 0;
-        transform: translateY(-5px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
-`;
-const fadeInAnimation = css `
-    animation: ${fadeIn} 0.3s ease-in-out;
-`;
-const noAnimation = css `
-    animation: none;
-`;
-const MegaMenuContent = styled.ul `
-    display: grid;
-    grid-template-columns: 25% 25% 25% 25%;
-`;
-const CategoryTitle = styled.h2 `
-    display: flex;
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    margin: 0;
-    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)}
-        ${getMultipliedSize(theme.base.baseWidth, 1)};
-    ${media.xl `
+const fadeIn = keyframes(["0%{opacity:0;transform:translateY(-5px);}100%{opacity:1;transform:translateY(0px);}"]);
+const fadeInAnimation = css(["animation:", " 0.3s ease-in-out;"], fadeIn);
+const noAnimation = css(["animation:none;"]);
+const MegaMenuContent = styled.ul.withConfig({
+  displayName: "DesktopMenu__MegaMenuContent",
+  componentId: "sc-yc5cg4-0"
+})(["display:grid;grid-template-columns:25% 25% 25% 25%;"]);
+const CategoryTitle = styled.h2.withConfig({
+  displayName: "DesktopMenu__CategoryTitle",
+  componentId: "sc-yc5cg4-1"
+})(["display:flex;font-size:", ";line-height:", ";margin:0;padding:0 ", " ", ";", ""], theme.fontSize.default, theme.lineHeight.default, getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseWidth, 1), media.xl`
         font-size: ${theme.fontSize.xl};
-    `}
-`;
-const CategoryBlock = styled.li `
-    display: block;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 2)} 0;
-    border-right: 1px solid ${theme.color.line.L03};
-
-    a {
-        font-size: ${theme.fontSize.s};
-        line-height: ${theme.lineHeight.s};
-        padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
-            ${getMultipliedSize(theme.base.baseWidth, 3)};
-        &:hover,
-        &:focus {
-            background-color: ${theme.color.background.sand.E01};
-        }
-        ${media.xl `
+    `);
+const CategoryBlock = styled.li.withConfig({
+  displayName: "DesktopMenu__CategoryBlock",
+  componentId: "sc-yc5cg4-2"
+})(["display:block;padding:", " 0;border-right:1px solid ", ";a{font-size:", ";line-height:", ";padding:", " ", ";&:hover,&:focus{background-color:", ";}", "}"], getMultipliedSize(theme.base.baseHeight, 2), theme.color.line.L03, theme.fontSize.s, theme.lineHeight.s, getMultipliedSize(theme.base.baseHeight, 0.5), getMultipliedSize(theme.base.baseWidth, 3), theme.color.background.sand.E01, media.xl`
             font-size: ${theme.fontSize.default};
             line-height: ${theme.lineHeight.default};
-        `}
-    }
-`;
-const CategoryCollectionBlock = styled(CategoryBlock) `
-    background-color: ${theme.color.background.sand.E01};
-`;
-const SubMenuItem = styled.li `
-    > a {
-        color: ${p => (p.$isHighlighted ? theme.color.text.pink : theme.color.text.black)};
-        font-weight: ${p => (p.$isHighlighted ? theme.fontWeight.bold : theme.fontWeight.book)};
-    }
-`;
-const DesktopMenuItem = styled(MenuItem) `
-    > a,
-    > button {
-        width: auto;
-        display: flex;
-        gap: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-        align-items: center;
-        padding: 0 ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-        height: 100%;
-        font-weight: ${theme.fontWeight.medium};
-
-        > span:first-child {
-            position: relative;
-            &:after {
-                position: absolute;
-                content: '';
-                width: 100%;
-                bottom: -22px;
-                left: 0;
-                border-bottom: 2px solid
-                    ${p => (p.$isActive ? theme.color.default.pink : 'transparent')};
-            }
-        }
-    }
-`;
+        `);
+const CategoryCollectionBlock = styled(CategoryBlock).withConfig({
+  displayName: "DesktopMenu__CategoryCollectionBlock",
+  componentId: "sc-yc5cg4-3"
+})(["background-color:", ";"], theme.color.background.sand.E01);
+const SubMenuItem = styled.li.withConfig({
+  displayName: "DesktopMenu__SubMenuItem",
+  componentId: "sc-yc5cg4-4"
+})(["> a{color:", ";font-weight:", ";}"], p => p.$isHighlighted ? theme.color.text.pink : theme.color.text.black, p => p.$isHighlighted ? theme.fontWeight.bold : theme.fontWeight.book);
+const DesktopMenuItem = styled(MenuItem).withConfig({
+  displayName: "DesktopMenu__DesktopMenuItem",
+  componentId: "sc-yc5cg4-5"
+})(["> a,> button{width:auto;display:flex;gap:", ";align-items:center;padding:0 ", ";height:100%;font-weight:", ";> span:first-child{position:relative;&:after{position:absolute;content:'';width:100%;bottom:-22px;left:0;border-bottom:2px solid ", ";}}}"], getMultipliedSize(theme.base.baseHeight, 0.5), getMultipliedSize(theme.base.baseHeight, 0.5), theme.fontWeight.medium, p => p.$isActive ? theme.color.default.pink : 'transparent');
 // MEGAMENU 1st level
-const SubMenuList = styled.div `
-    position: absolute;
-    top: ${navMaxHeight};
-    left: 0;
-    right: 0;
-    display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
-    z-index: ${({ $navZIndex }) => $navZIndex + 1};
-    ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
-    ? fadeInAnimation
-    : noAnimation};
-    background-color: ${theme.color.background.white.default};
-    max-height: calc(100vh - ${getMultipliedSize(theme.base.baseHeight, 3)} - ${headerMaxHeight});
-    border-bottom: 1px solid ${theme.color.line.L03};
-    overflow: auto;
-    ul {
-        padding: 0;
-        list-style: none;
-    }
-`;
-const SubMenuLevel1 = ({ menuItem }) => {
-    const { categoryCollectionText, collapseSize, currentUrl, featuredItemsAriaLabel, lang, menuLevel, navZIndex, } = useContext(NavContext);
-    const level1HasElements = !!menuItem.pages.length;
-    const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
-    // Helper function to render a sub menu item
-    const renderSubMenuItem = (element, index, currUrl) => (React__default.createElement(SubMenuItem, { key: element.id, "$isHighlighted": isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
-        React__default.createElement(LinkModifier, { menuItem: element, disabledTabIndex: false })));
-    if (!level1HasElements) {
-        return null;
-    }
-    return (React__default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex },
-        React__default.createElement(MegaMenuContent, { "aria-labelledby": `menu-id-${menuItem.id}` },
-            pagesWithSubItems.slice(0, 5).map(element => (React__default.createElement(CategoryBlock, { key: element.id },
-                React__default.createElement(CategoryTitle, { id: `menu-id-${element.id}` }, element.titles[lang]),
-                React__default.createElement("ul", { "aria-labelledby": `menu-id-${element.id}`, "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
-            pagesWithSubItems.length > 5 && (React__default.createElement(CategoryCollectionBlock, null,
-                React__default.createElement(CategoryTitle, { id: "misc-categories" }, categoryCollectionText),
-                React__default.createElement("ul", { "aria-labelledby": "misc-categories", "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
-                    .slice(5)
-                    .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
-            React__default.createElement(FeaturedBlock, { "$collapseSize": collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.some(element => !element.pages.length) && (React__default.createElement("section", { "aria-label": featuredItemsAriaLabel }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))))));
+const SubMenuList = styled.div.withConfig({
+  displayName: "DesktopMenu__SubMenuList",
+  componentId: "sc-yc5cg4-6"
+})(["position:absolute;top:", ";left:0;right:0;display:", ";z-index:", ";", ";background-color:", ";max-height:calc(100vh - ", " - ", ");border-bottom:1px solid ", ";overflow:auto;ul{padding:0;list-style:none;}"], navMaxHeight, ({
+  $menuStates,
+  $navItemId
+}) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none', ({
+  $navZIndex
+}) => $navZIndex + 1, ({
+  $menuStates
+}) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2 ? fadeInAnimation : noAnimation, theme.color.background.white.default, getMultipliedSize(theme.base.baseHeight, 3), headerMaxHeight, theme.color.line.L03);
+const SubMenuLevel1 = ({
+  menuItem
+}) => {
+  const {
+    categoryCollectionText,
+    collapseSize,
+    currentUrl,
+    featuredItemsAriaLabel,
+    lang,
+    menuLevel,
+    navZIndex
+  } = useContext(NavContext);
+  const level1HasElements = !!menuItem.pages.length;
+  const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
+  // Helper function to render a sub menu item
+  const renderSubMenuItem = (element, index, currUrl) => (/*#__PURE__*/React__default.createElement(SubMenuItem, {
+    key: element.id,
+    "$isHighlighted": isSelected(currUrl, element.urls[lang], true),
+    "data-testid": `desktop-nav-item-level-2-${index + 1}`
+  }, /*#__PURE__*/React__default.createElement(LinkModifier, {
+    menuItem: element,
+    disabledTabIndex: false
+  })));
+  if (!level1HasElements) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(SubMenuList, {
+    "aria-hidden": false,
+    "$menuStates": menuLevel,
+    "$navItemId": menuItem.id,
+    "$navZIndex": navZIndex
+  }, /*#__PURE__*/React__default.createElement(MegaMenuContent, {
+    "aria-labelledby": `menu-id-${menuItem.id}`
+  }, pagesWithSubItems.slice(0, 5).map(element => (/*#__PURE__*/React__default.createElement(CategoryBlock, {
+    key: element.id
+  }, /*#__PURE__*/React__default.createElement(CategoryTitle, {
+    id: `menu-id-${element.id}`
+  }, element.titles[lang]), /*#__PURE__*/React__default.createElement("ul", {
+    "aria-labelledby": `menu-id-${element.id}`,
+    "data-testid": "desktop-nav-menu-ul-level-2"
+  }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))), pagesWithSubItems.length > 5 && (/*#__PURE__*/React__default.createElement(CategoryCollectionBlock, null, /*#__PURE__*/React__default.createElement(CategoryTitle, {
+    id: "misc-categories"
+  }, categoryCollectionText), /*#__PURE__*/React__default.createElement("ul", {
+    "aria-labelledby": "misc-categories",
+    "data-testid": "desktop-nav-menu-ul-level-2"
+  }, pagesWithSubItems.slice(5).map((element, index) => renderSubMenuItem(element, index, currentUrl))))), /*#__PURE__*/React__default.createElement(FeaturedBlock, {
+    "$collapseSize": collapseSize,
+    "data-testid": "desktop-nav-menu-level-2-featured"
+  }, menuItem.pages.some(element => !element.pages.length) && (/*#__PURE__*/React__default.createElement("section", {
+    "aria-label": featuredItemsAriaLabel
+  }, menuItem.pages.map(element => element.pages.length ? null : (/*#__PURE__*/React__default.createElement(LinkModifier, {
+    key: element.id,
+    showIcon: true,
+    menuItem: element,
+    disabledTabIndex: false
+  }))))))));
 };
-const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang, handleNavMenuClick, currentUrl, menuLevel } = useContext(NavContext);
-    const linkUrl = menuItem.urls[lang];
-    const menuClickMain = (element) => (e) => {
-        e.preventDefault();
-        handleNavMenuClick(element.id, 'level1');
-    };
-    return (React__default.createElement(DesktopMenuItem, { "$isActive": isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
-        React__default.createElement(MenuLinkWithChildren, { "$isOpen": menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
-            React__default.createElement("span", { id: `menu-id-${menuItem.id}` }, menuItem.titles[lang]),
-            React__default.createElement(ChevronRight, { size: "1rem" })),
-        React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
+const MenuItemWithChildren = ({
+  menuItem,
+  currentLevel
+}) => {
+  const {
+    lang,
+    handleNavMenuClick,
+    currentUrl,
+    menuLevel
+  } = useContext(NavContext);
+  const linkUrl = menuItem.urls[lang];
+  const menuClickMain = element => e => {
+    e.preventDefault();
+    handleNavMenuClick(element.id, 'level1');
+  };
+  return /*#__PURE__*/React__default.createElement(DesktopMenuItem, {
+    "$isActive": isSelected(currentUrl, linkUrl),
+    "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`
+  }, /*#__PURE__*/React__default.createElement(MenuLinkWithChildren, {
+    "$isOpen": menuLevel.level1 === menuItem.id,
+    onClick: menuClickMain(menuItem),
+    "data-testid": "menu-button-with-children",
+    "aria-current": isSelected(currentUrl, linkUrl) ? 'true' : undefined,
+    "aria-expanded": menuLevel.level1 === menuItem.id,
+    href: linkUrl
+  }, /*#__PURE__*/React__default.createElement("span", {
+    id: `menu-id-${menuItem.id}`
+  }, menuItem.titles[lang]), /*#__PURE__*/React__default.createElement(ChevronRight, {
+    size: "1rem"
+  })), /*#__PURE__*/React__default.createElement(SubMenuLevel1, {
+    menuItem: menuItem
+  }));
 };
 const DesktopMenu = () => {
-    var _a;
-    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = useContext(NavContext);
-    const mainNavigation = ((_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
-    const ref = useRef(null);
-    useOutsideClick(ref, () => {
-        if (menuLevel.level1 || menuLevel.level2) {
-            resetMenuEvents();
-        }
-    });
-    if (!mainNavigation.length) {
-        return null;
+  var _a;
+  const {
+    items,
+    lang,
+    resetMenuEvents,
+    menuLevel,
+    currentUrl
+  } = useContext(NavContext);
+  const mainNavigation = ((_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
+  const ref = useRef(null);
+  useOutsideClick(ref, () => {
+    if (menuLevel.level1 || menuLevel.level2) {
+      resetMenuEvents();
+    }
+  });
+  if (!mainNavigation.length) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(MenuList, {
+    "aria-hidden": false,
+    ref: ref,
+    "data-testid": "desktop-nav-menu-ul"
+  }, mainNavigation.map((navElement, index) => {
+    const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!navElement.pages.length;
+    if (displaySubMenu) {
+      return /*#__PURE__*/React__default.createElement(MenuItemWithChildren, {
+        currentLevel: index,
+        key: navElement.id,
+        menuItem: navElement
+      });
     }
-    return (React__default.createElement(MenuList, { "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
-        const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!navElement.pages.length;
-        if (displaySubMenu) {
-            return (React__default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
-        }
-        return (React__default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, "$isActive": isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
-            React__default.createElement(LinkModifier, { menuItem: navElement, disabledTabIndex: false })));
-    })));
+    return /*#__PURE__*/React__default.createElement(DesktopMenuItem, {
+      "data-testid": `desktop-nav-item-level-1-${index + 1}`,
+      "$isActive": isSelected(currentUrl, navElement.urls[lang]),
+      key: navElement.id
+    }, /*#__PURE__*/React__default.createElement(LinkModifier, {
+      menuItem: navElement,
+      disabledTabIndex: false
+    }));
+  }));
 };
 
 export { DesktopMenu as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/LanguageSelector.js

@@ -6,26 +6,40 @@ import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import { MenuLink } from '../globalNavStyles.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MenuWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    margin: ${getMultipliedSize(theme.base.baseHeight, 2)}
-        ${getMultipliedSize(theme.base.baseHeight, 3)};
-    font-weight: ${theme.fontWeight.medium};
-    text-align: center;
-`;
-const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.createElement(MenuWrapper, null, Object.entries(languagesObject)
-    .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React__default.createElement(MenuLink, { key: `language-${key}`, href: value }, key.toUpperCase())))));
-const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLabel, }) => {
-    const LngComponent = useCallback(() => (React__default.createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
-    if (Object.keys(languagesObject).length < 2) {
-        return null;
-    }
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: "auto" },
-        React__default.createElement(Globe, null),
-        React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
+const MenuWrapper = styled.div.withConfig({
+  displayName: "LanguageSelector__MenuWrapper",
+  componentId: "sc-6mb97q-0"
+})(["display:flex;flex-direction:column;gap:", ";margin:", " ", ";font-weight:", ";text-align:center;"], getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseHeight, 3), theme.fontWeight.medium);
+const LangComponent = ({
+  currentLanguage,
+  languagesObject
+}) => (/*#__PURE__*/React__default.createElement(MenuWrapper, null, Object.entries(languagesObject).filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase()).map(([key, value]) => (/*#__PURE__*/React__default.createElement(MenuLink, {
+  key: `language-${key}`,
+  href: value
+}, key.toUpperCase())))));
+const LanguageSelector = ({
+  currentLanguage,
+  languagesObject,
+  languageSelectorLabel
+}) => {
+  const LngComponent = useCallback(() => (/*#__PURE__*/React__default.createElement(LangComponent, {
+    languageSelectorLabel: languageSelectorLabel,
+    currentLanguage: currentLanguage,
+    languagesObject: languagesObject
+  })), [currentLanguage, languagesObject, languageSelectorLabel]);
+  if (Object.keys(languagesObject).length < 2) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(MainNavTooltipMenu, {
+    ariaLabel: languageSelectorLabel,
+    closeWhenTagClicked: ['a'],
+    contentComponent: LngComponent,
+    contentWidth: "5rem",
+    globalStateString: "lang",
+    tooltipRight: "auto"
+  }, /*#__PURE__*/React__default.createElement(Globe, null), /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "header-lang-label"
+  }, currentLanguage.toUpperCase()));
 };
 
 export { LanguageSelector as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.js

@@ -5,41 +5,59 @@ import { MenuLink } from '../globalNavStyles.js';
 
 /* eslint-disable react/jsx-props-no-spreading */
 const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
-    if (currentUrl && linkUrl) {
-        let url = linkUrl;
-        if (url.includes('http')) {
-            url = url.replace(/^.*\/\/[^/]+/, '');
-        }
-        return exactMatch ? url === currentUrl : currentUrl.includes(url);
+  if (currentUrl && linkUrl) {
+    let url = linkUrl;
+    if (url.includes('http')) {
+      url = url.replace(/^.*\/\/[^/]+/, '');
     }
-    return false;
+    return exactMatch ? url === currentUrl : currentUrl.includes(url);
+  }
+  return false;
 };
-const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-const LinkModifier = ({ menuItem, disabledTabIndex, showIcon }) => {
-    const { lang, currentUrl, nextJSLinkComponent, nextJSLinkLegacyBehavior, resetMenuEvents } = useContext(NavContext);
-    const menuItemLink = menuItem.urls[lang];
-    const isExternalLink = menuItem.target === '_blank';
-    const linkContent = (React__default.createElement(React__default.Fragment, null,
-        showIcon && (isExternalLink ? React__default.createElement(Open, null) : React__default.createElement(ArrowRight, null)),
-        React__default.createElement("span", null, menuItem.titles[lang])));
-    const MenuLinkComponent = (React__default.createElement(MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' }, linkContent));
-    const commonLinkProps = {
-        'aria-current': isSelected(currentUrl, menuItemLink) ? 'page' : undefined,
-        linkUrl: menuItemLink,
-        id: menuItem.id,
-        onClick: resetMenuEvents,
-        tabIndex: disabledTabIndex ? -1 : undefined,
-        target: isExternalLink ? '_blank' : '_self',
-    };
-    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        const NextJSLinkComponent = nextJSLinkComponent;
-        if (nextJSLinkLegacyBehavior) {
-            return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink },
-                React__default.createElement(MenuLink, Object.assign({}, commonLinkProps), linkContent)));
-        }
-        return (React__default.createElement(MenuLink, Object.assign({ as: NextJSLinkComponent }, commonLinkProps), linkContent));
+const isMenuItemLinkAbsolute = menuItemLink => menuItemLink.includes('http');
+const LinkModifier = ({
+  menuItem,
+  disabledTabIndex,
+  showIcon
+}) => {
+  const {
+    lang,
+    currentUrl,
+    nextJSLinkComponent,
+    nextJSLinkLegacyBehavior,
+    resetMenuEvents
+  } = useContext(NavContext);
+  const menuItemLink = menuItem.urls[lang];
+  const isExternalLink = menuItem.target === '_blank';
+  const linkContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showIcon && (isExternalLink ? /*#__PURE__*/React__default.createElement(Open, null) : /*#__PURE__*/React__default.createElement(ArrowRight, null)), /*#__PURE__*/React__default.createElement("span", null, menuItem.titles[lang]));
+  const MenuLinkComponent = /*#__PURE__*/React__default.createElement(MenuLink, {
+    "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined,
+    href: menuItemLink,
+    id: menuItem.id,
+    onClick: resetMenuEvents,
+    tabIndex: disabledTabIndex ? -1 : undefined,
+    target: isExternalLink ? '_blank' : '_self'
+  }, linkContent);
+  const commonLinkProps = {
+    'aria-current': isSelected(currentUrl, menuItemLink) ? 'page' : undefined,
+    linkUrl: menuItemLink,
+    id: menuItem.id,
+    onClick: resetMenuEvents,
+    tabIndex: disabledTabIndex ? -1 : undefined,
+    target: isExternalLink ? '_blank' : '_self'
+  };
+  if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
+    const NextJSLinkComponent = nextJSLinkComponent;
+    if (nextJSLinkLegacyBehavior) {
+      return /*#__PURE__*/React__default.createElement(NextJSLinkComponent, {
+        linkUrl: menuItemLink
+      }, /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({}, commonLinkProps), linkContent));
     }
-    return MenuLinkComponent;
+    return /*#__PURE__*/React__default.createElement(MenuLink, Object.assign({
+      as: NextJSLinkComponent
+    }, commonLinkProps), linkContent);
+  }
+  return MenuLinkComponent;
 };
 
 export { LinkModifier as default, isSelected };

package/build/es/components/MainHeaderNavigation/ChildComponents/LoginTooltip.js

@@ -3,11 +3,23 @@ import React__default, { useContext } from 'react';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { isMobileMenu, loginComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem' }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(User, null),
-        React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
+const LoginTooltip = ({
+  isLogged,
+  loginLabel
+}) => {
+  const {
+    isMobileMenu,
+    loginComponent
+  } = useContext(NavContext);
+  return /*#__PURE__*/React__default.createElement(MainNavTooltipMenu, {
+    ariaLabel: loginLabel,
+    closeWhenTagClicked: ['a', 'button'],
+    contentComponent: loginComponent,
+    globalStateString: "login",
+    tooltipRight: isMobileMenu ? '3rem' : '1rem'
+  }, !isLogged ? loginLabel : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(User, null), /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "header-login-label"
+  }, loginLabel))));
 };
 
 export { LoginTooltip as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -21,9 +21,12 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     /** Adjust menu to be full width after this number. default xs (480). */
     fullWidthBreakpoint?: number;
 }
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isActive" | "$collapseSize"> & {
     $isActive?: boolean;
     $collapseSize: number;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isActive" | "$collapseSize"> & {
+    $isActive?: boolean;
+    $collapseSize: number;
+}, never>>> & string;
 declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;