@dnanpm/styleguide 3.9.14 → 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/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/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/Notification/Notification.js

@@ -33,7 +33,7 @@ const NotificationWrapper = styled__default.default.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const StaticWrapper = styled__default.default.section `
+const StaticWrapper = styled__default.default.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
@@ -43,7 +43,7 @@ const IconWrapper = styled__default.default.div `
     padding: 0.5rem;
     background-color: ${({ $type }) => theme.default.color.notification[$type]};
 `;
-const ContentWrapper = styled__default.default.span `
+const ContentWrapper = styled__default.default.div `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
@@ -68,7 +68,7 @@ const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = fal
         React__default.default.createElement(ContentWrapper, null, children),
         closeButton && (React__default.default.createElement(ButtonCloseStyled, { onClick: onClickCloseButton, "aria-label": closeButtonLabel },
             React__default.default.createElement(Icon.default, { icon: icons.Close, color: "currentColor", "aria-hidden": true })))));
-    return isStatic ? (React__default.default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel }, renderContent())) : (React__default.default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
+    return isStatic ? (React__default.default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel, role: "region" }, renderContent())) : (React__default.default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
 };
 
 exports.default = Notification;

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

@@ -1,6 +1,8 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { MouseEvent, ReactNode, KeyboardEvent } from 'react';
 import React from 'react';
-interface Props {
+type AriaLandmarkRoles = 'none' | 'main' | 'navigation' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'region' | 'search';
+type Html5Tag = 'main' | 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer';
+interface BaseProps {
     /**
      * Unique ID for the component
      */
@@ -13,6 +15,11 @@ interface Props {
      * On overlay element mouse click
      */
     onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Callback function for keydown events on the overlay element to be used with prop `onClick`.
+     * This can be used to handle keyboard interactions, such as closing the overlay with the Escape key.
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to set DOM node to which Overlay component will be appended. The node must already exist.
      * Use `false` to render in place without use of `createPortal`
@@ -42,8 +49,62 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Specifies the HTML5 tag to be used for the content wrapper.
+     * It is recommended to use native semantic HTML elements whenever possible.
+     * If a suitable semantic element is not available, a `<div>` with an appropriate ARIA role should be used (role from `role`).
+     * ARIA roles from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles
+     *
+     * @param {Html5Tag} main Uses `<main>` tag for the content wrapper.
+     * @param {Html5Tag} div Uses `<div>` tag for the content wrapper.
+     * @param {Html5Tag} section Uses `<section>` tag for the content wrapper.
+     * @param {Html5Tag} article Uses `<article>` tag for the content wrapper.
+     * @param {Html5Tag} aside Uses `<aside>` tag for the content wrapper.
+     * @param {Html5Tag} nav Uses `<nav>` tag for the content wrapper.
+     * @param {Html5Tag} header Uses `<header>` tag for the content wrapper.
+     * @param {Html5Tag} footer Uses `<footer>` tag for the content wrapper.
+     *
+     * @default 'section'
+     */
+    as?: Html5Tag;
+    /**
+     * Specifies the ARIA landmark role for the content wrapper and is used when `as` is a div.
+     * It is always recommended to use native semantic HTML elements from `as` whenever possible.
+     * ARIA roles from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles
+     *
+     * @param {AriaLandmarkRoles} main Represents the main content with `role="main"` (acting as <main>).
+     * @param {AriaLandmarkRoles} navigation Represents navigation links with `role="navigation"` (acting as <nav>).
+     * @param {AriaLandmarkRoles} banner Represents introductory content with `role="banner"` (acting as <header>).
+     * @param {AriaLandmarkRoles} complementary Represents related content with `role="complementary"` (acting as <aside>).
+     * @param {AriaLandmarkRoles} contentinfo Represents footer information with `role="contentinfo"` (acting as <footer>).
+     * @param {AriaLandmarkRoles} form Indicates an interactive form with `role="form"` (acting as <form>).
+     * @param {AriaLandmarkRoles} region Represents an important section with `role="region"` (acting as <section>).
+     * @param {AriaLandmarkRoles} search Represents a search area with `role="search"` (acting as <search>).
+     */
+    role?: AriaLandmarkRoles;
+    /**
+     * If a role from `role` is used more than once on a page, the aria-label attribute should also be used in order to distinguish between the two regions.
+     */
+    ariaLabel?: string;
+    /**
+     * Ensures that overlays maintain proper focus management and accessibility.
+     * If `isFocusTrapped` is true, an appropriate ARIA role should be used (role from `focusableTrappedWidgetRole`).
+     * If `isFocusTrapped` is false, the tabbable element will not have an ARIA role.
+     *
+     * @default true
+     */
+    isFocusTrapped?: boolean;
 }
+type DivProps = BaseProps & {
+    as?: 'div';
+    role: AriaLandmarkRoles;
+};
+type NonDivProps = BaseProps & {
+    as?: Exclude<Html5Tag, 'div'>;
+    role?: undefined;
+};
+type Props = DivProps | NonDivProps;
 /** @visibleName Overlay */
-declare const Overlay: ({ portalContainer: portalContainerSelector, appElement: appElementSelector, preventBodyScroll, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Overlay: ({ portalContainer: portalContainerSelector, appElement: appElementSelector, preventBodyScroll, "data-testid": dataTestId, as, role, isFocusTrapped, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Overlay;

package/build/cjs/components/Overlay/Overlay.js

@@ -33,28 +33,31 @@ const Element = styled.default.div `
 `;
 /** @visibleName Overlay */
 const Overlay = (_a) => {
-    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid']);
+    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId, as = 'section', role, isFocusTrapped = true } = _a, props = tslib.__rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
     const contentRef = React.useRef(null);
     const portalContainer = portalContainerSelector
         ? document.querySelector(portalContainerSelector)
         : null;
     const appElement = document.querySelector(appElementSelector);
-    const overlayElement = (React__default.default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement("div", { ref: contentRef, tabIndex: -1 }, props.children)));
+    const overlayElement = (React__default.default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId, onKeyDown: props.onKeyDown, "aria-label": props.ariaLabel, as: as, role: as === 'div' ? role : undefined },
+        React__default.default.createElement("div", { ref: contentRef, tabIndex: -1, "data-testid": dataTestId ? `${dataTestId}-content` : '' }, props.children)));
     React.useEffect(() => {
         if (preventBodyScroll) {
             document.body.style.setProperty('overflow', 'hidden');
+            document.body.style.setProperty('position', 'relative');
+            document.body.style.setProperty('top', '0');
+            document.body.style.setProperty('left', '0');
             return () => {
                 document.body.style.removeProperty('overflow');
             };
         }
         return undefined;
-    });
+    }, [preventBodyScroll]);
     React.useEffect(() => {
         var _a;
         if (appElement) {
             const focusTrapStart = document.createElement('div');
-            focusTrapStart.setAttribute('tabindex', '0');
+            focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
             focusTrapStart.addEventListener('focus', () => {
                 var _a;
                 (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -67,15 +70,15 @@ const Overlay = (_a) => {
             (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             document.body.prepend(focusTrapStart);
             document.body.append(focusTrapEnd);
-            appElement.setAttribute('aria-hidden', 'true');
+            appElement.setAttribute('inert', 'true');
             return () => {
                 document.body.removeChild(focusTrapStart);
                 document.body.removeChild(focusTrapEnd);
-                appElement.removeAttribute('aria-hidden');
+                appElement.removeAttribute('inert');
             };
         }
         return undefined;
-    });
+    }, [appElement, contentRef, isFocusTrapped]);
     return portalContainerSelector === false
         ? overlayElement
         : reactDom.createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);

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

@@ -41,10 +41,6 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
-    /**
-     * Allows to pass a custom aria-label for mobile dropdown button
-     */
-    dropdownButtonAriaLabel?: string;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -276,14 +276,20 @@ const PriorityNavigation = (_a) => {
     });
     React.useEffect(() => {
         if (!isMobile) {
-            dispatch({
-                type: 'resetNavigationState',
-                payload: {
-                    navigationItems: props.children,
-                },
+            requestAnimationFrame(() => {
+                dispatch({
+                    type: 'resetNavigationState',
+                    payload: {
+                        navigationItems: props.children,
+                    },
+                });
+                setTimeout(() => {
+                    checkHorizontalOverflow();
+                }, 0);
             });
         }
         setIsMobileNavigationOpen(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isMobile, props.children]);
     React.useLayoutEffect(() => {
         if (!isMobile) {
@@ -299,31 +305,18 @@ const PriorityNavigation = (_a) => {
         checkHorizontalOverflow,
     ]);
     const handleNavigationListKeyDown = React.useCallback((e) => {
-        var _a;
-        if (isMobile && isMobileNavigationOpen) {
+        var _a, _b;
+        if (isMobile && isMobileNavigationOpen && e.key === 'Tab') {
             const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
             const lastElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
-            if (document.activeElement === lastElement) {
+            const goingForward = !e.shiftKey;
+            if (goingForward && document.activeElement === lastElement) {
                 e.preventDefault();
                 setIsMobileNavigationOpen(false);
+                (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
     }, [isMobile, isMobileNavigationOpen]);
-    const handleNavigationListFocus = React.useCallback(() => {
-        if (isMobile && isMobileNavigationOpen) {
-            setTimeout(() => {
-                var _a, _b;
-                const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
-                if (!focusableElements || focusableElements.length === 0)
-                    return;
-                const lastElement = focusableElements[focusableElements.length - 1];
-                if (document.activeElement === lastElement) {
-                    setIsMobileNavigationOpen(false);
-                    (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-            }, 0);
-        }
-    }, [isMobile, isMobileNavigationOpen]);
     const handleItemClick = (e) => {
         setIsMobileNavigationOpen(false);
         if (props.onClick) {
@@ -339,7 +332,7 @@ const PriorityNavigation = (_a) => {
                         props.categoryLabel && React__default.default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
                     React__default.default.createElement(Icon.default, { icon: isMobileNavigationOpen ? icons.OvalChevronUp : icons.OvalChevronDown, size: "2.5rem" }))),
-                React__default.default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown, onFocus: handleNavigationListFocus }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+                React__default.default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
                     if (React.isValidElement(navigationItem) &&
                         navigationItem.type === PriorityNavigationItem.default) {
                         return (React__default.default.createElement(PriorityNavigationItem.default, { id: navigationItem.props.id, key: navigationItem.key, onClick: handleItemClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], ref: instance => {
@@ -361,8 +354,9 @@ const PriorityNavigation = (_a) => {
                 !isMobile && Boolean(state.dropdownItems.length) && (React__default.default.createElement(React__default.default.Fragment, null,
                     React__default.default.createElement("div", null,
                         React__default.default.createElement(ButtonIcon.default, { ref: dropdownButtonRef, ariaLabel: openMoreSubpagesAriaLabel, ariaExpanded: isDropdownListOpen, onClick: toggleDropdown, icon: isDropdownListOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true, "data-testid": "dropdown-button" }, dropdownButtonLabel)),
-                    React__default.default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => React.isValidElement(dropdownItem) &&
-                        dropdownItem.type === PriorityNavigationItem.default && (React__default.default.createElement(PriorityNavigationItem.default, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children))))))))));
+                    isDropdownListOpen && (React__default.default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => React.isValidElement(dropdownItem) &&
+                        dropdownItem.type === PriorityNavigationItem.default && (React__default.default.createElement(PriorityNavigationItem.default, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown ||
+                            props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))))));
 };
 
 exports.default = PriorityNavigation;

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

@@ -18,6 +18,7 @@ export { default as Divider } from './Divider/Divider';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as EnergyLabel } from './EnergyLabel/EnergyLabel';
 export { default as Expander } from './Expander/Expander';
 export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';

package/build/cjs/index.js

@@ -20,6 +20,7 @@ var Divider = require('./components/Divider/Divider.js');
 var DnaLogo = require('./components/DnaLogo/DnaLogo.js');
 var Drawer = require('./components/Drawer/Drawer.js');
 var EmptyState = require('./components/EmptyState/EmptyState.js');
+var EnergyLabel = require('./components/EnergyLabel/EnergyLabel.js');
 var Expander = require('./components/Expander/Expander.js');
 var Floater = require('./components/Floater/Floater.js');
 var Footer = require('./components/Footer/Footer.js');
@@ -189,6 +190,7 @@ exports.Divider = Divider.default;
 exports.DnaLogo = DnaLogo.default;
 exports.Drawer = Drawer.default;
 exports.EmptyState = EmptyState.default;
+exports.EnergyLabel = EnergyLabel.default;
 exports.Expander = Expander.default;
 exports.Floater = Floater.default;
 exports.Footer = Footer.default;

package/build/es/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/es/components/Box/Box.js

@@ -17,7 +17,7 @@ const BoxWrapper = styled__default.div `
 `;
 const Box = (_a) => {
     var { elevation = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["elevation", 'data-testid']);
-    return (React__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.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));
 };
 
 export { Box as default };

package/build/es/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/es/components/Button/Button.js

@@ -114,7 +114,7 @@ const Element = styled__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 = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
-    return (React__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.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.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));

package/build/es/components/ButtonArrow/ButtonArrow.js

@@ -1,12 +1,11 @@
 import { __rest } from 'tslib';
 import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from '@dnanpm/icons';
-import React__default, { isValidElement } from 'react';
+import React__default, { isValidElement, cloneElement } from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
 import ButtonSecondary from '../ButtonSecondary/ButtonSecondary.js';
-import Icon from '../Icon/Icon.js';
 
 const iconsMap = {
     up: ChevronUp,
@@ -64,7 +63,15 @@ const buttonsMap = {
 const ButtonArrow = (_a) => {
     var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
     const Element = buttonsMap[variant];
-    return (React__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.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem", "aria-hidden": true })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
+    let iconElement = null;
+    if (props.direction) {
+        const IconComponent = iconsMap[props.direction];
+        iconElement = React__default.createElement(IconComponent, { size: "1rem" });
+    }
+    else if (isValidElement(props.icon)) {
+        iconElement = cloneElement(props.icon, { size: '1rem' });
+    }
+    return (React__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));
 };
 
 export { ButtonArrow as default };

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/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/Notification/Notification.js

@@ -24,7 +24,7 @@ const NotificationWrapper = styled__default.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.color.notification[$type]};
 `;
-const StaticWrapper = styled__default.section `
+const StaticWrapper = styled__default.div `
     ${sharedStyles}
     border-color: ${({ $type }) => theme.color.notification[$type]};
 `;
@@ -34,7 +34,7 @@ const IconWrapper = styled__default.div `
     padding: 0.5rem;
     background-color: ${({ $type }) => theme.color.notification[$type]};
 `;
-const ContentWrapper = styled__default.span `
+const ContentWrapper = styled__default.div `
     margin: auto 0;
     padding: 0.5rem 0;
     width: 100%;
@@ -59,7 +59,7 @@ const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = fal
         React__default.createElement(ContentWrapper, null, children),
         closeButton && (React__default.createElement(ButtonCloseStyled, { onClick: onClickCloseButton, "aria-label": closeButtonLabel },
             React__default.createElement(Icon, { icon: Close, color: "currentColor", "aria-hidden": true })))));
-    return isStatic ? (React__default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel }, renderContent())) : (React__default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
+    return isStatic ? (React__default.createElement(StaticWrapper, { "$type": type, className: className, "data-testid": dataTestId, "aria-label": ariaLabel, role: "region" }, renderContent())) : (React__default.createElement(NotificationWrapper, { "$type": type, className: className, "data-testid": dataTestId, role: "alert" }, renderContent()));
 };
 
 export { Notification as default };

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

@@ -1,6 +1,8 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { MouseEvent, ReactNode, KeyboardEvent } from 'react';
 import React from 'react';
-interface Props {
+type AriaLandmarkRoles = 'none' | 'main' | 'navigation' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'region' | 'search';
+type Html5Tag = 'main' | 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer';
+interface BaseProps {
     /**
      * Unique ID for the component
      */
@@ -13,6 +15,11 @@ interface Props {
      * On overlay element mouse click
      */
     onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Callback function for keydown events on the overlay element to be used with prop `onClick`.
+     * This can be used to handle keyboard interactions, such as closing the overlay with the Escape key.
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to set DOM node to which Overlay component will be appended. The node must already exist.
      * Use `false` to render in place without use of `createPortal`
@@ -42,8 +49,62 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Specifies the HTML5 tag to be used for the content wrapper.
+     * It is recommended to use native semantic HTML elements whenever possible.
+     * If a suitable semantic element is not available, a `<div>` with an appropriate ARIA role should be used (role from `role`).
+     * ARIA roles from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles
+     *
+     * @param {Html5Tag} main Uses `<main>` tag for the content wrapper.
+     * @param {Html5Tag} div Uses `<div>` tag for the content wrapper.
+     * @param {Html5Tag} section Uses `<section>` tag for the content wrapper.
+     * @param {Html5Tag} article Uses `<article>` tag for the content wrapper.
+     * @param {Html5Tag} aside Uses `<aside>` tag for the content wrapper.
+     * @param {Html5Tag} nav Uses `<nav>` tag for the content wrapper.
+     * @param {Html5Tag} header Uses `<header>` tag for the content wrapper.
+     * @param {Html5Tag} footer Uses `<footer>` tag for the content wrapper.
+     *
+     * @default 'section'
+     */
+    as?: Html5Tag;
+    /**
+     * Specifies the ARIA landmark role for the content wrapper and is used when `as` is a div.
+     * It is always recommended to use native semantic HTML elements from `as` whenever possible.
+     * ARIA roles from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles
+     *
+     * @param {AriaLandmarkRoles} main Represents the main content with `role="main"` (acting as <main>).
+     * @param {AriaLandmarkRoles} navigation Represents navigation links with `role="navigation"` (acting as <nav>).
+     * @param {AriaLandmarkRoles} banner Represents introductory content with `role="banner"` (acting as <header>).
+     * @param {AriaLandmarkRoles} complementary Represents related content with `role="complementary"` (acting as <aside>).
+     * @param {AriaLandmarkRoles} contentinfo Represents footer information with `role="contentinfo"` (acting as <footer>).
+     * @param {AriaLandmarkRoles} form Indicates an interactive form with `role="form"` (acting as <form>).
+     * @param {AriaLandmarkRoles} region Represents an important section with `role="region"` (acting as <section>).
+     * @param {AriaLandmarkRoles} search Represents a search area with `role="search"` (acting as <search>).
+     */
+    role?: AriaLandmarkRoles;
+    /**
+     * If a role from `role` is used more than once on a page, the aria-label attribute should also be used in order to distinguish between the two regions.
+     */
+    ariaLabel?: string;
+    /**
+     * Ensures that overlays maintain proper focus management and accessibility.
+     * If `isFocusTrapped` is true, an appropriate ARIA role should be used (role from `focusableTrappedWidgetRole`).
+     * If `isFocusTrapped` is false, the tabbable element will not have an ARIA role.
+     *
+     * @default true
+     */
+    isFocusTrapped?: boolean;
 }
+type DivProps = BaseProps & {
+    as?: 'div';
+    role: AriaLandmarkRoles;
+};
+type NonDivProps = BaseProps & {
+    as?: Exclude<Html5Tag, 'div'>;
+    role?: undefined;
+};
+type Props = DivProps | NonDivProps;
 /** @visibleName Overlay */
-declare const Overlay: ({ portalContainer: portalContainerSelector, appElement: appElementSelector, preventBodyScroll, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Overlay: ({ portalContainer: portalContainerSelector, appElement: appElementSelector, preventBodyScroll, "data-testid": dataTestId, as, role, isFocusTrapped, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Overlay;

package/build/es/components/Overlay/Overlay.js

@@ -25,28 +25,31 @@ const Element = styled.div `
 `;
 /** @visibleName Overlay */
 const Overlay = (_a) => {
-    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid']);
+    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId, as = 'section', role, isFocusTrapped = true } = _a, props = __rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
     const contentRef = useRef(null);
     const portalContainer = portalContainerSelector
         ? document.querySelector(portalContainerSelector)
         : null;
     const appElement = document.querySelector(appElementSelector);
-    const overlayElement = (React__default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId },
-        React__default.createElement("div", { ref: contentRef, tabIndex: -1 }, props.children)));
+    const overlayElement = (React__default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId, onKeyDown: props.onKeyDown, "aria-label": props.ariaLabel, as: as, role: as === 'div' ? role : undefined },
+        React__default.createElement("div", { ref: contentRef, tabIndex: -1, "data-testid": dataTestId ? `${dataTestId}-content` : '' }, props.children)));
     useEffect(() => {
         if (preventBodyScroll) {
             document.body.style.setProperty('overflow', 'hidden');
+            document.body.style.setProperty('position', 'relative');
+            document.body.style.setProperty('top', '0');
+            document.body.style.setProperty('left', '0');
             return () => {
                 document.body.style.removeProperty('overflow');
             };
         }
         return undefined;
-    });
+    }, [preventBodyScroll]);
     useEffect(() => {
         var _a;
         if (appElement) {
             const focusTrapStart = document.createElement('div');
-            focusTrapStart.setAttribute('tabindex', '0');
+            focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
             focusTrapStart.addEventListener('focus', () => {
                 var _a;
                 (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -59,15 +62,15 @@ const Overlay = (_a) => {
             (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             document.body.prepend(focusTrapStart);
             document.body.append(focusTrapEnd);
-            appElement.setAttribute('aria-hidden', 'true');
+            appElement.setAttribute('inert', 'true');
             return () => {
                 document.body.removeChild(focusTrapStart);
                 document.body.removeChild(focusTrapEnd);
-                appElement.removeAttribute('aria-hidden');
+                appElement.removeAttribute('inert');
             };
         }
         return undefined;
-    });
+    }, [appElement, contentRef, isFocusTrapped]);
     return portalContainerSelector === false
         ? overlayElement
         : createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);

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

@@ -41,10 +41,6 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
-    /**
-     * Allows to pass a custom aria-label for mobile dropdown button
-     */
-    dropdownButtonAriaLabel?: string;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -268,14 +268,20 @@ const PriorityNavigation = (_a) => {
     });
     useEffect(() => {
         if (!isMobile) {
-            dispatch({
-                type: 'resetNavigationState',
-                payload: {
-                    navigationItems: props.children,
-                },
+            requestAnimationFrame(() => {
+                dispatch({
+                    type: 'resetNavigationState',
+                    payload: {
+                        navigationItems: props.children,
+                    },
+                });
+                setTimeout(() => {
+                    checkHorizontalOverflow();
+                }, 0);
             });
         }
         setIsMobileNavigationOpen(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isMobile, props.children]);
     useLayoutEffect(() => {
         if (!isMobile) {
@@ -291,31 +297,18 @@ const PriorityNavigation = (_a) => {
         checkHorizontalOverflow,
     ]);
     const handleNavigationListKeyDown = useCallback((e) => {
-        var _a;
-        if (isMobile && isMobileNavigationOpen) {
+        var _a, _b;
+        if (isMobile && isMobileNavigationOpen && e.key === 'Tab') {
             const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
             const lastElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[focusableElements.length - 1];
-            if (document.activeElement === lastElement) {
+            const goingForward = !e.shiftKey;
+            if (goingForward && document.activeElement === lastElement) {
                 e.preventDefault();
                 setIsMobileNavigationOpen(false);
+                (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
     }, [isMobile, isMobileNavigationOpen]);
-    const handleNavigationListFocus = useCallback(() => {
-        if (isMobile && isMobileNavigationOpen) {
-            setTimeout(() => {
-                var _a, _b;
-                const focusableElements = (_a = navigationListRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
-                if (!focusableElements || focusableElements.length === 0)
-                    return;
-                const lastElement = focusableElements[focusableElements.length - 1];
-                if (document.activeElement === lastElement) {
-                    setIsMobileNavigationOpen(false);
-                    (_b = dropdownButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-            }, 0);
-        }
-    }, [isMobile, isMobileNavigationOpen]);
     const handleItemClick = (e) => {
         setIsMobileNavigationOpen(false);
         if (props.onClick) {
@@ -331,7 +324,7 @@ const PriorityNavigation = (_a) => {
                         props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
                     React__default.createElement(Icon, { icon: isMobileNavigationOpen ? OvalChevronUp : OvalChevronDown, size: "2.5rem" }))),
-                React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown, onFocus: handleNavigationListFocus }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
+                React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen, onKeyDown: handleNavigationListKeyDown }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => {
                     if (isValidElement(navigationItem) &&
                         navigationItem.type === PriorityNavigationItem) {
                         return (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: handleItemClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], ref: instance => {
@@ -353,8 +346,9 @@ const PriorityNavigation = (_a) => {
                 !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", null,
                         React__default.createElement(ButtonIcon, { ref: dropdownButtonRef, ariaLabel: openMoreSubpagesAriaLabel, ariaExpanded: isDropdownListOpen, onClick: toggleDropdown, icon: isDropdownListOpen ? ChevronUp : ChevronDown, isReversed: true, "data-testid": "dropdown-button" }, dropdownButtonLabel)),
-                    React__default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
-                        dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children))))))))));
+                    isDropdownListOpen && (React__default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
+                        dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown ||
+                            props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))))));
 };
 
 export { PriorityNavigation as default };

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

@@ -18,6 +18,7 @@ export { default as Divider } from './Divider/Divider';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as EnergyLabel } from './EnergyLabel/EnergyLabel';
 export { default as Expander } from './Expander/Expander';
 export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';

package/build/es/index.js

@@ -18,6 +18,7 @@ export { default as Divider } from './components/Divider/Divider.js';
 export { default as DnaLogo } from './components/DnaLogo/DnaLogo.js';
 export { default as Drawer } from './components/Drawer/Drawer.js';
 export { default as EmptyState } from './components/EmptyState/EmptyState.js';
+export { default as EnergyLabel } from './components/EnergyLabel/EnergyLabel.js';
 export { default as Expander } from './components/Expander/Expander.js';
 export { default as Floater } from './components/Floater/Floater.js';
 export { default as Footer } from './components/Footer/Footer.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.14",
+    "version": "v3.10.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -70,7 +70,7 @@
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^8.10.0",
-        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-import": "2.32.0",
         "eslint-plugin-jsdoc": "^39.9.1",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",