@dnanpm/styleguide 3.9.13 → 3.10.0

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -7,6 +7,47 @@ import { getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
+const getStandardStyle = ({ isLinkStyle }) => {
+    const colorValue = isLinkStyle ? theme.color.default.pink : theme.color.text.black;
+    const colorHoverValue = isLinkStyle ? theme.color.hover.pink : theme.color.text.black;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        }
+        &:hover {
+            color: ${colorHoverValue};
+        }
+        &:active {
+            color: ${theme.color.text.black + theme.color.transparency.T80};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${theme.color.text.gray};
+        }
+    `;
+};
+const getDarkBgStyle = () => {
+    const colorValue = theme.color.text.white;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.color.focus.dark};
+            box-shadow: 0px 0px 0px 2px ${theme.color.focus.light};
+        }
+        &:hover {
+            color: ${colorValue};
+        }   
+        &:active {
+            color: ${colorValue + theme.color.transparency.T90};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${colorValue + theme.color.transparency.T70};
+        }
+    `;
+};
 const ButtonElement = styled__default.button `
     display: inline-flex;
     align-items: center;
@@ -15,10 +56,11 @@ const ButtonElement = styled__default.button `
     font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.default)};
     line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.default)};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme.color.text.white : theme.color.text.black)};
     background-color: transparent;
     border: 2px solid transparent;
     padding: ${getDividedSize(theme.base.baseWidth, 5)} 0;
+    text-align: left;
+    transition: all 0.2s ease-in-out;
 
     & svg {
         pointer-events: none;
@@ -26,29 +68,23 @@ const ButtonElement = styled__default.button `
 
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
+    ${({ darkBg, isLinkStyle }) => (darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle }))}
+
     &:focus-visible {
         border-radius: ${theme.radius.s};
         text-decoration: underline;
-        border: 2px solid
-            ${({ darkBg }) => (darkBg ? theme.color.focus.dark : theme.color.focus.light)};
-        box-shadow: 0px 0px 0px 2px
-            ${({ darkBg }) => (darkBg ? theme.color.focus.light : theme.color.focus.dark)};
         outline: none;
     }
 
     &:hover {
         text-decoration: underline;
-    }
-
-    &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme.color.text.white + theme.color.transparency.T90
-    : theme.color.text.black + theme.color.transparency.T80};
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
     }
 
     &:disabled,
     &[disabled] {
-        color: ${({ darkBg }) => darkBg ? theme.color.text.white + theme.color.transparency.T70 : theme.color.text.gray};
         pointer-events: none;
     }
 
@@ -83,7 +119,7 @@ const ButtonElement = styled__default.button `
 const ButtonIcon = forwardRef((_a, ref) => {
     var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
+    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, isLinkStyle: props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
         props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 });

package/build/es/components/Carousel/Carousel.js

@@ -176,7 +176,8 @@ const Carousel = (_a) => {
     };
     const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
-    const slideScreensCount = Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const slidesCount = Children.count(props.children);
+    const slideScreensCount = Math.max(1, slidesCount - Math.floor(visibleItems) + 1);
     const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
     const currentStepIndex = Math.ceil(currentIndex / step);
     const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
@@ -298,6 +299,8 @@ const Carousel = (_a) => {
         setIsSwiping(false);
     };
     const handleSlidesPointerDown = (e) => {
+        if (e.button !== 0)
+            return;
         if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
             data.startX = e.pageX;
             data.startTime = Date.now();

package/build/es/components/Checkbox/Checkbox.js

@@ -110,7 +110,7 @@ const Checkbox = (_a) => {
     };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Container, null,
-            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined }),
+            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined, "data-checked": Boolean(props.value) }),
             React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.createElement(Mandatory, null, "*"))),

package/build/es/components/EnergyLabel/EnergyLabel.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label to the component
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to set property `aria-label` for `ButtonClose` element
+     */
+    closeButtonLabel?: string;
+    /**
+     * Allows to set the source of the badge image
+     */
+    badgeSrc: string;
+    /**
+     * Allows to set the title of the modal
+     */
+    modalTitle?: string;
+    /**
+     * Allows to set the source of the image in the modal
+     */
+    modalImageSrc?: string;
+    /**
+     * Allows to set the label of the modal
+     */
+    modalLabel?: string;
+    /**
+     * Allows to set the label of the button that opens the PDF
+     */
+    pdfButtonLabel?: string;
+    /**
+     * Allows to set the href of the PDF file
+     */
+    pdfHref?: string;
+    /**
+     * Allows to set the label for the error state
+     */
+    errorLabel?: string;
+    /**
+     * Allows to set the title for the error state
+     */
+    errorTitle?: string;
+    /**
+     * Allows to hide application from assistive screenreaders and other assistive technologies while the modal is open
+     *
+     * @default '#__next'
+     */
+    modalAppElement?: string;
+}
+/** @visibleName Energy Label */
+declare const EnergyLabel: ({ "data-testid": dataTestId, modalAppElement, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default EnergyLabel;

package/build/es/components/EnergyLabel/EnergyLabel.js

@@ -0,0 +1,90 @@
+import { __rest } from 'tslib';
+import React__default, { useState } from 'react';
+import { Open } from '@dnanpm/icons';
+import Modal from '../Modal/Modal.js';
+import styled from '../../themes/styled.js';
+import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import Button from '../Button/Button.js';
+import theme from '../../themes/theme.js';
+
+const ERROR_IMAGE = 'https://res.cloudinary.com/dnaoyj/image/upload/v1731073400/Assets/KLT/Enriched%20icons/enriched-error-state.png';
+const ButtonElement = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+`;
+const StyledModal = styled(Modal) `
+    > div > div {
+        max-height: 100%;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+
+        ${media.xs `
+            width: 23.438rem;
+            height: 50rem;
+            border-radius: ${theme.radius.default};
+        `};
+
+        > div {
+            border-radius: 0;
+        }
+    }
+`;
+const ModalLabel = styled.p `
+    font-size: ${theme.fontSize.s};
+    margin: 0;
+`;
+const ButtonContent = styled.span `
+    display: inline-flex;
+    align-items: center;
+    gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+`;
+const ErrorContainer = styled.div `
+    display: flex;
+    padding-top: ${getMultipliedSize(theme.base.baseHeight, 2)};
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    flex-direction: column;
+    gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
+`;
+const Image = styled.img `
+    width: ${p => p.imgWidth};
+`;
+/** @visibleName Energy Label */
+const EnergyLabel = (_a) => {
+    var { 'data-testid': dataTestId, modalAppElement = '#__next' } = _a, props = __rest(_a, ['data-testid', "modalAppElement"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const [imgError, setImgError] = useState(false);
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const renderFooter = () => (React__default.createElement(Button, { fullWidth: true, href: props.pdfHref, target: "_blank" },
+        React__default.createElement(ButtonContent, null,
+            props.pdfButtonLabel,
+            " ",
+            React__default.createElement(Open, null))));
+    if (imgError) {
+        return null;
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ButtonElement, { onClick: handleOpen, "aria-label": props.ariaLabel, "data-testid": dataTestId, id: props.id, className: props.className },
+            React__default.createElement(Image, { src: props.badgeSrc, alt: "", "aria-hidden": true, imgWidth: "55px", onError: () => setImgError(true) })),
+        React__default.createElement(StyledModal, { appElement: modalAppElement, isOpen: isOpen, onRequestClose: handleClose, title: props.modalTitle, closeLabel: props.closeButtonLabel, footer: renderFooter() }, hasError || !props.modalImageSrc ? (React__default.createElement(ErrorContainer, null,
+            React__default.createElement("h3", null, props.errorTitle),
+            React__default.createElement(Image, { src: ERROR_IMAGE, alt: "", imgWidth: "160px" }),
+            React__default.createElement("p", null, props.errorLabel))) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Image, { src: props.modalImageSrc, alt: "", imgWidth: "100%", onError: () => setHasError(true) }),
+            React__default.createElement(ModalLabel, null, props.modalLabel))))));
+};
+
+export { EnergyLabel as default };

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

@@ -39,8 +39,7 @@ const BusinessMenuLink = styled.a `
 const BusinessMenuList = styled.nav `
     display: flex;
     gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
-        ${getMultipliedSize(theme.base.baseWidth, 1)};
+    padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)} ${getMultipliedSize(theme.base.baseWidth, 1)};
     ${media.md `
         padding: ${getMultipliedSize(theme.base.baseHeight, 1)} ${getMultipliedSize(theme.base.baseWidth, 1.5)};
     `};
@@ -49,7 +48,7 @@ const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React__default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
+    return (React__default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
 };
 
 export { BusinessMenu as default };

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

@@ -28,13 +28,12 @@ const noAnimation = css `
 const MegaMenuContent = styled.ul `
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
-    padding-left: 0;
 `;
-const CategoryTitle = styled.span `
+const CategoryTitle = styled.h2 `
     display: flex;
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.bold};
+    margin: 0;
     padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)}
         ${getMultipliedSize(theme.base.baseWidth, 1)};
     ${media.xl `
@@ -121,21 +120,21 @@ const SubMenuLevel1 = ({ menuItem }) => {
     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, tabIndex: false })));
+        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, null,
+        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, null, element.titles[lang]),
-                React__default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+                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, null, categoryCollectionText),
-                React__default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+                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.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+            React__default.createElement(FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const { lang, handleNavMenuClick, currentUrl, menuLevel } = useContext(NavContext);
@@ -144,9 +143,9 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, menuItem.urls[lang]), "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", href: linkUrl },
-            React__default.createElement("span", null, menuItem.titles[lang]),
+    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 })));
 };
@@ -166,10 +165,10 @@ const DesktopMenu = () => {
     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, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React__default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
         }
-        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]) },
-            React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
+        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 })));
     })));
 };
 

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

@@ -4,7 +4,6 @@ import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
 import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
@@ -24,7 +23,7 @@ const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLa
         return null;
     }
     return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: Globe, size: navIconSize }),
+        React__default.createElement(Globe, { size: navIconSize }),
         React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

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

@@ -2,9 +2,9 @@ import React from 'react';
 import type { MenuLevelItem } from '../types/globalNavProps';
 interface LinkModifierProps {
     menuItem: MenuLevelItem;
-    tabIndex: boolean;
+    disabledTabIndex?: boolean;
     showIcon?: boolean;
 }
 export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
-declare const LinkModifier: ({ menuItem, tabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
+declare const LinkModifier: ({ menuItem, disabledTabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
 export default LinkModifier;

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

@@ -1,7 +1,5 @@
 import { Open, ArrowRight } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import theme from '../../../themes/theme.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 
@@ -16,12 +14,12 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
     return false;
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
-    const menuItemLink = menuItem.urls[lang] || '';
+const LinkModifier = ({ menuItem, disabledTabIndex, showIcon }) => {
+    const { lang, currentUrl, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
+    const menuItemLink = menuItem.urls[lang];
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1.25rem", color: theme.color.default.pink })),
+    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' },
+        showIcon && (isExternalLink ? React__default.createElement(Open, null) : React__default.createElement(ArrowRight, null)),
         React__default.createElement("span", null, menuItem.titles[lang])));
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;

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

@@ -1,14 +1,12 @@
 import { User } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Icon, { icon: User, size: navIconSize }),
+    const { navZIndex, isMobileMenu, loginComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(User, null),
         React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };
 

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

@@ -20,19 +20,19 @@ const IconContainer = styled.div `
     min-width: ${IconContainerMinWidth};
     transition: color 0.2s ease-in-out;
 
-    > span.dnasg-icon > svg {
+    > svg {
         display: block;
         height: ${navIconSize};
         width: ${navIconSize};
     }
-    > span.dnasg-icon > svg,
-    > span.dnasg-icon + span {
+    > svg,
+    + span {
         color: ${p => (p.isActive ? theme.color.text.pink : 'inherit')};
     }
 
     @media (min-width: ${p => p.collapseSize + 1}px) {
         min-width: ${getMultipliedSize(theme.base.baseWidth, 6)};
-        > span.dnasg-icon + span {
+        + span {
             display: block;
         }
     }
@@ -103,7 +103,7 @@ const MainNavTooltipMenu = (_a) => {
         }
     });
     return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
         tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
             React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },

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

@@ -20,7 +20,7 @@ const TooltipWrapper = styled.button `
     border-left: ${p => (p.isLoggedIn ? `2px solid ${theme.color.line.L03}` : 'none')};
     &:active,
     &:focus {
-        span.dnasg-icon > svg,
+        > svg,
         > span {
             color: ${theme.color.text.pink};
         }
@@ -30,12 +30,12 @@ const TooltipWrapper = styled.button `
         border-radius: ${theme.radius.s};
         box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
-        span.dnasg-icon > svg,
+        > svg,
         > span {
             color: ${theme.color.text.black};
         }
     }
-    span.dnasg-icon > svg {
+    > svg {
         align-content: center;
         display: flex;
         margin: 0 auto;
@@ -44,7 +44,7 @@ const TooltipWrapper = styled.button `
             width: 1.625em;
         }
     }
-    span.dnasg-icon + span {
+    > span {
         display: none;
         @media (min-width: ${p => p.collapseSize + 1}px) {
             font-size: ${theme.fontSize.xs};

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

@@ -2,7 +2,8 @@ import React from 'react';
 import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
 interface MinicartTooltipProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
     minicartAmount: number;
-    minicartLabel?: string;
+    minicartLabel: string;
+    minicartAmountLabel: string;
 }
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel, ...props }: MinicartTooltipProps) => React.JSX.Element;
+declare const MinicartTooltip: ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }: MinicartTooltipProps) => React.JSX.Element;
 export default MinicartTooltip;

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

@@ -1,20 +1,16 @@
-import { __rest } from 'tslib';
 import { Cart } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
 import theme from '../../../themes/theme.js';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
-import Icon from '../../Icon/Icon.js';
 import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MinicartTooltip = (_a) => {
-    var { minicartAmount, minicartLabel } = _a, props = __rest(_a, ["minicartAmount", "minicartLabel"]);
-    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: props.onCartButtonClick, contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: Cart, size: navIconSize }),
-        React__default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
+    const { navZIndex, minicartComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentComponent: minicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
+        React__default.createElement(Cart, null),
+        React__default.createElement("span", { "aria-hidden": true }, minicartLabel),
+        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 };
 
 export { MinicartTooltip as default };

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

@@ -124,7 +124,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
             menuItem.titles[lang],
             React__default.createElement(ChevronRight, { color: theme.color.default.pink })));
     }
-    return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
+    return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, disabledTabIndex: tabNavigationDisabled }));
 };
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
@@ -136,7 +136,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
     }
     return (React__default.createElement(React__default.Fragment, null,
         currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, tabIndex: tabNavigationDisabled }))))),
+        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled }))))),
         menuItem.pages
             .filter(subMenuItem => !featuredItems.includes(subMenuItem))
             .map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
@@ -147,7 +147,7 @@ const NavigationMenuMobile = () => {
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return null;
     }
-    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
         React__default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
     return (React__default.createElement(React__default.Fragment, null,
         renderMenuList(0, 1, mainNavigation),

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

@@ -1,14 +1,12 @@
 import { Search } from '@dnanpm/icons';
 import React__default, { useContext } from 'react';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent: SearchComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
-        React__default.createElement(Icon, { icon: Search, size: navIconSize }),
+    const { navZIndex, searchComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+        React__default.createElement(Search, null),
         React__default.createElement("span", null, searchLabel)));
 };