@dnanpm/styleguide 3.9.13 → 3.10.0

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

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

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

@@ -2,12 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var theme = require('../../../themes/theme.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var Icon = require('../../Icon/Icon.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
@@ -16,13 +13,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MinicartTooltip = (_a) => {
-    var { minicartAmount, minicartLabel } = _a, props = tslib.__rest(_a, ["minicartAmount", "minicartLabel"]);
-    const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: props.onCartButtonClick, contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.default.createElement(Icon.default, { icon: icons.Cart, size: navigation.navIconSize }),
-        React__default.default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
+    const { navZIndex, minicartComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentComponent: minicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
+        React__default.default.createElement(icons.Cart, null),
+        React__default.default.createElement("span", { "aria-hidden": true }, minicartLabel),
+        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 };
 
 exports.default = MinicartTooltip;

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

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

package/build/cjs/components/MainHeaderNavigation/ChildComponents/PageSearch.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 PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
-        React__default.default.createElement(Icon.default, { icon: icons.Search, size: navigation.navIconSize }),
+    const { navZIndex, searchComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+        React__default.default.createElement(icons.Search, null),
         React__default.default.createElement("span", null, searchLabel)));
 };
 

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

@@ -16,6 +16,7 @@ export interface MainHeaderNavigationProps {
     minicart?: boolean;
     minicartText?: string;
     minicartAmount?: number;
+    minicartAmountLabel?: string;
     /**
      * Defines MinicartComponent when used. If minicart is true but component is not provided, shown as disabled element.
      *
@@ -27,6 +28,9 @@ export interface MainHeaderNavigationProps {
      * On Cart button click callback
      */
     onCartButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    dnaLogoLinkAriaLabel?: string;
+    openMainMenuAriaLabel?: string;
+    closeMainMenuAriaLabel?: string;
     showLoginTooltip?: boolean;
     languageSelector?: boolean;
     languageSelectorText?: string;
@@ -40,6 +44,6 @@ export interface MainHeaderNavigationProps {
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainHeaderNavigation;

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

@@ -13,7 +13,6 @@ var theme = require('../../themes/theme.js');
 var navigation = require('../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var DnaLogo = require('../DnaLogo/DnaLogo.js');
-var Icon = require('../Icon/Icon.js');
 var Notification = require('../Notification/Notification.js');
 var BusinessMenu = require('./ChildComponents/BusinessMenu.js');
 var DesktopMenu = require('./ChildComponents/DesktopMenu.js');
@@ -135,7 +134,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "className", "collapseSize", "currentUrl", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
     const { isMobile } = useWindowSize.default(collapseSize);
     const navigationEl = React.useRef(null);
     const key = ramda.prop('id');
@@ -301,24 +300,25 @@ const MainHeaderNavigation = (_a) => {
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         isPageOverlay && React__default.default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React__default.default.createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl, role: "banner" },
+        React__default.default.createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl },
             React__default.default.createElement(NavContext.default.Provider, { value: navigationContext },
                 React__default.default.createElement(GlobalStyle, null),
                 !items.mainNavigation && notificationText && (React__default.default.createElement(Notification.default, { type: "info" }, notificationText)),
                 React__default.default.createElement(BusinessMenu.default, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
                 React__default.default.createElement(NavigationWrapper, { collapseSize: collapseSize },
-                    React__default.default.createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
+                    React__default.default.createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], "aria-label": dnaLogoLinkAriaLabel },
                         React__default.default.createElement(DnaLogo.default, { size: navigation.headerLogoSize })),
                     React__default.default.createElement(globalNavStyles.DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
                         React__default.default.createElement(DesktopMenu.default, null)),
                     React__default.default.createElement(globalNavStyles.HeaderIconContainer, { collapseSize: collapseSize },
                         languagesObject && languageSelector && (React__default.default.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
                         search && React__default.default.createElement(PageSearch.default, { searchLabel: searchText }),
-                        minicart && (React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
+                        minicart && (React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartAmountLabel: minicartAmountLabel !== null && minicartAmountLabel !== void 0 ? minicartAmountLabel : '', minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
                         login && React__default.default.createElement(LoginTooltip.default, { loginLabel: loginText, isLogged: isLoggedIn }),
                         React__default.default.createElement(MainNavTooltipMenu.IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
-                            React__default.default.createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
-                                React__default.default.createElement(Icon.default, { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: navigation.navIconSize })))),
+                            React__default.default.createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": isMobileMenuOpen
+                                    ? closeMainMenuAriaLabel
+                                    : openMainMenuAriaLabel, "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick }, isMobileMenuOpen ? React__default.default.createElement(icons.Close, null) : React__default.default.createElement(icons.Menu, null)))),
                     isMobile && React__default.default.createElement(MobileMenu.default, null))))));
 };
 

package/build/cjs/components/MainHeaderNavigation/globalNavStyles.js

@@ -94,6 +94,12 @@ const MenuLink = styled.default.a `
     overflow: visible;
     text-decoration: none;
     color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
+    > svg {
+            fill: ${theme.default.color.text.pink};
+            height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+            width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+        }
+    }
 `;
 const MenuLinkWithChildren = styled.default.a `
     line-height: ${theme.default.lineHeight.xs};

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

@@ -124,7 +124,7 @@ const Pill = (_a) => {
     const isDefaultType = type === 'none';
     return (React__default.default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId, isDefaultButtonStyle: props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
         props.children,
-        !isDefaultType && (React__default.default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }))));
+        !isDefaultType && (React__default.default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked }))));
 };
 
 exports.default = Pill;

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,13 +305,15 @@ const PriorityNavigation = (_a) => {
         checkHorizontalOverflow,
     ]);
     const handleNavigationListKeyDown = React.useCallback((e) => {
-        var _a;
+        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]);
@@ -346,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/RadioButton/RadioButton.js

@@ -104,7 +104,7 @@ const RadioButtonGroup = ({ label, description, groupName, value, onChange, id,
     const descriptionId = `${baseId}-description`;
     const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');
     const content = children ||
-        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'] }))));
+        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'], "data-checked": value === option.value }))));
     const Wrapper = isFieldset ? StyledFieldset : 'div';
     const renderLabel = () => {
         if (!label)

package/build/cjs/components/Switch/Switch.js

@@ -115,7 +115,7 @@ const Switch = (_a) => {
     };
     const accessibleLabel = props.label ? undefined : ariaLabel || 'Toggle switch';
     return (React__namespace.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        React__namespace.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox", "data-checked": Boolean(props.isChecked) }),
         React__namespace.createElement(LabelWrapper, { htmlFor: props.id },
             React__namespace.createElement(Rail, { isChecked: props.isChecked },
                 React__namespace.createElement(Button, { isChecked: props.isChecked })),

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/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>>;