@dnanpm/styleguide 3.9.13 → 3.10.0

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

@@ -65,6 +65,10 @@ interface Props {
      * e.g., "important information" or "example."
      */
     ariaLabel?: string;
+    /**
+     * Screen reader live region policy for the box content
+     */
+    ariaLive?: 'off' | 'polite' | 'assertive';
     /**
      * Allows to pass a role to the component
      */

package/build/cjs/components/Box/Box.js

@@ -26,7 +26,7 @@ const BoxWrapper = styled__default.default.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel }, props.children));
+    return (React__default.default.createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, role: props.role, "aria-label": props.ariaLabel, "aria-live": props.ariaLive }, props.children));
 };
 
 exports.default = Box;

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

@@ -24,6 +24,10 @@ export interface Props {
      * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
      */
     href?: string;
+    /**
+     * Allows to set the target attribute for the link
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
     /**
      * Content of Button component
      */

package/build/cjs/components/Button/Button.js

@@ -123,7 +123,7 @@ const Element = styled__default.default.button `
 /** @visibleName Button */
 const Button = (_a) => {
     var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
-    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
+    return (React__default.default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

package/build/cjs/components/ButtonArrow/ButtonArrow.js

@@ -10,7 +10,6 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
 var ButtonSecondary = require('../ButtonSecondary/ButtonSecondary.js');
-var Icon = require('../Icon/Icon.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -73,7 +72,15 @@ const buttonsMap = {
 const ButtonArrow = (_a) => {
     var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
     const Element = buttonsMap[variant];
-    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, props.direction ? (React__default.default.createElement(Icon.default, { icon: iconsMap[props.direction], size: "1rem", "aria-hidden": true })) : (React.isValidElement(props.icon) && props.icon.type === Icon.default && props.icon)));
+    let iconElement = null;
+    if (props.direction) {
+        const IconComponent = iconsMap[props.direction];
+        iconElement = React__default.default.createElement(IconComponent, { size: "1rem" });
+    }
+    else if (React.isValidElement(props.icon)) {
+        iconElement = React.cloneElement(props.icon, { size: '1rem' });
+    }
+    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, iconElement));
 };
 
 exports.default = ButtonArrow;

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

@@ -30,6 +30,10 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * Screen reader label describing the purpose of the ButtonIcon,
      */
     ariaLabel?: string;
+    /**
+     * Show the element with link color (pink)
+     */
+    isLinkStyle?: boolean;
 }
 /** @visibleName Button Icon */
 declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -16,6 +16,47 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+const getStandardStyle = ({ isLinkStyle }) => {
+    const colorValue = isLinkStyle ? theme.default.color.default.pink : theme.default.color.text.black;
+    const colorHoverValue = isLinkStyle ? theme.default.color.hover.pink : theme.default.color.text.black;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.default.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        }
+        &:hover {
+            color: ${colorHoverValue};
+        }
+        &:active {
+            color: ${theme.default.color.text.black + theme.default.color.transparency.T80};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${theme.default.color.text.gray};
+        }
+    `;
+};
+const getDarkBgStyle = () => {
+    const colorValue = theme.default.color.text.white;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.default.color.focus.dark};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light};
+        }
+        &:hover {
+            color: ${colorValue};
+        }   
+        &:active {
+            color: ${colorValue + theme.default.color.transparency.T90};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${colorValue + theme.default.color.transparency.T70};
+        }
+    `;
+};
 const ButtonElement = styled__default.default.button `
     display: inline-flex;
     align-items: center;
@@ -24,10 +65,11 @@ const ButtonElement = styled__default.default.button `
     font-size: ${({ small }) => (small ? theme.default.fontSize.s : theme.default.fontSize.default)};
     line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme.default.color.text.white : theme.default.color.text.black)};
     background-color: transparent;
     border: 2px solid transparent;
     padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)} 0;
+    text-align: left;
+    transition: all 0.2s ease-in-out;
 
     & svg {
         pointer-events: none;
@@ -35,29 +77,23 @@ const ButtonElement = styled__default.default.button `
 
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
+    ${({ darkBg, isLinkStyle }) => (darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle }))}
+
     &:focus-visible {
         border-radius: ${theme.default.radius.s};
         text-decoration: underline;
-        border: 2px solid
-            ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
-        box-shadow: 0px 0px 0px 2px
-            ${({ darkBg }) => (darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
         outline: none;
     }
 
     &:hover {
         text-decoration: underline;
-    }
-
-    &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme.default.color.text.white + theme.default.color.transparency.T90
-    : theme.default.color.text.black + theme.default.color.transparency.T80};
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
     }
 
     &:disabled,
     &[disabled] {
-        color: ${({ darkBg }) => darkBg ? theme.default.color.text.white + theme.default.color.transparency.T70 : theme.default.color.text.gray};
         pointer-events: none;
     }
 
@@ -92,7 +128,7 @@ const ButtonElement = styled__default.default.button `
 const ButtonIcon = React.forwardRef((_a, ref) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.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.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
+    return (React__default.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.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 });

package/build/cjs/components/Carousel/Carousel.js

@@ -184,7 +184,8 @@ const Carousel = (_a) => {
     };
     const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
-    const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const slidesCount = React.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));
@@ -306,6 +307,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/cjs/components/Checkbox/Checkbox.js

@@ -118,7 +118,7 @@ const Checkbox = (_a) => {
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Container, null,
-            React__default.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.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.default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.default.createElement(Mandatory, null, "*"))),

package/build/cjs/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/cjs/components/EnergyLabel/EnergyLabel.js

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

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

@@ -47,8 +47,7 @@ const BusinessMenuLink = styled.default.a `
 const BusinessMenuList = styled.default.nav `
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
-        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     ${styledUtils.media.md `
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
     `};
@@ -57,7 +56,7 @@ const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default.default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React__default.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.default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__default.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])))));
 };
 
 exports.default = BusinessMenu;

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

@@ -36,13 +36,12 @@ const noAnimation = styled.css `
 const MegaMenuContent = styled.default.ul `
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
-    padding-left: 0;
 `;
-const CategoryTitle = styled.default.span `
+const CategoryTitle = styled.default.h2 `
     display: flex;
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
-    font-weight: ${theme.default.fontWeight.bold};
+    margin: 0;
     padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
         ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     ${styledUtils.media.xl `
@@ -129,21 +128,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.default.createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
-        React__default.default.createElement(LinkModifier.default, { menuItem: element, tabIndex: false })));
+        React__default.default.createElement(LinkModifier.default, { menuItem: element, disabledTabIndex: false })));
     if (!level1HasElements) {
         return null;
     }
     return (React__default.default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
-        React__default.default.createElement(MegaMenuContent, null,
+        React__default.default.createElement(MegaMenuContent, { "aria-labelledby": `menu-id-${menuItem.id}` },
             pagesWithSubItems.slice(0, 5).map(element => (React__default.default.createElement(CategoryBlock, { key: element.id },
-                React__default.default.createElement(CategoryTitle, null, element.titles[lang]),
-                React__default.default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+                React__default.default.createElement(CategoryTitle, { id: `menu-id-${element.id}` }, element.titles[lang]),
+                React__default.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.default.createElement(CategoryCollectionBlock, null,
-                React__default.default.createElement(CategoryTitle, null, categoryCollectionText),
-                React__default.default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+                React__default.default.createElement(CategoryTitle, { id: "misc-categories" }, categoryCollectionText),
+                React__default.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.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.default.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+            React__default.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.default.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const { lang, handleNavMenuClick, currentUrl, menuLevel } = React.useContext(NavContext.default);
@@ -152,9 +151,9 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
-        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", href: linkUrl },
-            React__default.default.createElement("span", null, menuItem.titles[lang]),
+    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": LinkModifier.isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
+            React__default.default.createElement("span", { id: `menu-id-${menuItem.id}` }, menuItem.titles[lang]),
             React__default.default.createElement(icons.ChevronRight, { size: "1rem" })),
         React__default.default.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
@@ -174,10 +173,10 @@ const DesktopMenu = () => {
     return (React__default.default.createElement(globalNavStyles.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.default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React__default.default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
         }
-        return (React__default.default.createElement(DesktopMenuItem, { key: navElement.id, "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
-            React__default.default.createElement(LinkModifier.default, { menuItem: navElement, tabIndex: false })));
+        return (React__default.default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
+            React__default.default.createElement(LinkModifier.default, { menuItem: navElement, disabledTabIndex: false })));
     })));
 };
 

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

@@ -8,7 +8,6 @@ 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 Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
@@ -32,7 +31,7 @@ const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLa
         return null;
     }
     return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default.default.createElement(Icon.default, { icon: icons.Globe, size: navigation.navIconSize }),
+        React__default.default.createElement(icons.Globe, { size: navigation.navIconSize }),
         React__default.default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

package/build/cjs/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/cjs/components/MainHeaderNavigation/ChildComponents/LinkModifier.js

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

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

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
@@ -14,9 +12,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(Icon.default, { icon: icons.User, size: navigation.navIconSize }),
+    const { navZIndex, isMobileMenu, loginComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(icons.User, null),
         React__default.default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };
 

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

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

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

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