@dnanpm/styleguide 3.9.9 → 3.9.11

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

@@ -10,20 +10,24 @@ interface Props {
     /**
      * Allows to change the color styling of component, depending on the passed type
      *
-     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
-     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
+     * @param {ChipType} default Uses default color: `theme.color.line.L01`
+     * @param {ChipType} info Changes color to default color (this type will be deprecated in the future)
      * @param {ChipType} success Uses `theme.color.notification.success` color for styling
-     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
+     * @param {ChipType} warning Changes color to default color (this type will be deprecated in the future)
      * @param {ChipType} error Uses `theme.color.notification.error` color for styling
      *
+     * @deprecated The 'info' and 'warning' types will be deprecated and removed in the next major release.
+     *
      * @default 'default'
      */
     type?: ChipType;
     /**
      * Allows to change the appearance styling of component, depending on passed variant
      *
-     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
-     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
+     * @param {ChipVariant} outlined
+     * @param {ChipVariant} filled
+     *
+     * @deprecated The styles are now encapsulated within the component. The 'variant' prop will be removed in the next major release.
      *
      * @default 'outlined'
      */
@@ -44,6 +48,15 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass an accessible label for the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Provides additional information about the Chip not included in the aria-label.
+     * This attribute should reference the ID of a related text element for context.
+     */
+    ariaDescribedBy?: string;
 }
 declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/cjs/components/Chip/Chip.js

@@ -13,14 +13,31 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const getStyling = ({ $type, $variant, }) => {
-    const stylingColor = $type === 'default' ? theme.default.color.line.L01 : theme.default.color.notification[$type];
-    const border = `border: 2px solid ${stylingColor};`;
-    const background = `background-color: ${$variant === 'outlined' ? theme.default.color.background.white.default : stylingColor};`;
-    const color = `color: ${$variant === 'outlined' ? theme.default.color.text.black : theme.default.color.text.white};`;
-    return `${border}${background}${color}`;
+const getStyling = ({ $type }) => {
+    switch ($type) {
+        case 'success':
+            return `
+                color: ${theme.default.color.text.white};
+                border: 2px solid ${theme.default.color.notification.success};
+                background-color: ${theme.default.color.notification.success};
+            `;
+        case 'error':
+            return `
+                color: ${theme.default.color.text.black};
+                border: 2px solid ${theme.default.color.notification.error};
+                background-color: ${theme.default.color.background.white.default};
+            `;
+        case 'default':
+        default:
+            return `
+                color: ${theme.default.color.text.black};
+                border: 2px solid ${theme.default.color.line.L01};
+                background-color: ${theme.default.color.background.white.default};
+            `;
+    }
 };
 const Element = styled__default.default.div `
+    all: unset;
     display: inline-block;
     border-radius: ${theme.default.radius.pill};
     padding: 1px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
@@ -30,11 +47,18 @@ const Element = styled__default.default.div `
     text-align: center;
     ${({ onClick }) => onClick && `cursor: pointer`};
 
-    ${({ $type, $variant }) => getStyling({ $type, $variant })}
+    ${({ $type }) => getStyling({ $type })}
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+    }
 `;
 const Chip = (_a) => {
     var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "variant", 'data-testid']);
-    return (React__default.default.createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+    const label = props.ariaLabel || (typeof props.children === 'string' ? props.children : undefined);
+    return (React__default.default.createElement(Element, { as: props.onClick ? 'button' : 'div', id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId, "aria-label": label, "aria-describedby": props.ariaDescribedBy, tabIndex: 0 }, props.children));
 };
 
 exports.default = Chip;

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

@@ -1,3 +1,3 @@
-import type { FC } from 'react';
-declare const DesktopMenu: FC;
+import React from 'react';
+declare const DesktopMenu: () => React.JSX.Element | null;
 export default DesktopMenu;

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

@@ -9,7 +9,6 @@ var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var LinkModifier = require('./LinkModifier.js');
@@ -77,7 +76,6 @@ const SubMenuItem = styled.default.li `
     > a {
         color: ${p => (p.isHighlighted ? theme.default.color.text.pink : theme.default.color.text.black)};
         font-weight: ${p => (p.isHighlighted ? theme.default.fontWeight.bold : theme.default.fontWeight.book)};
-        }
     }
 `;
 const DesktopMenuList = styled.default(globalNavStyles.MenuList) `
@@ -173,16 +171,16 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const menuClickMain = (element) => () => {
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
-        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children" },
             React__default.default.createElement("span", null, menuItem.titles[lang]),
-            React__default.default.createElement(Icon.default, { icon: icons.ChevronRight, size: "1rem" })),
+            React__default.default.createElement(icons.ChevronRight, { size: "1rem" })),
         React__default.default.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
     var _a;
     const { items, lang, resetMenuEvents, menuLevel, currentUrl, collapseSize } = React.useContext(NavContext.default);
-    const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
+    const mainNavigation = ((_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
     const ref = React.useRef(null);
     useOutsideClick.default(ref, () => {
         if (menuLevel.level1 || menuLevel.level2) {
@@ -192,13 +190,12 @@ const DesktopMenu = () => {
     if (!mainNavigation.length) {
         return null;
     }
-    return (React__default.default.createElement(DesktopMenuList, { role: "menu", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul", collapseSize: collapseSize }, mainNavigation.map((navElement, index) => {
-        var _a;
-        const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
+    return (React__default.default.createElement(DesktopMenuList, { "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul", collapseSize: collapseSize }, mainNavigation.map((navElement, index) => {
+        const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!navElement.pages.length;
         if (displaySubMenu) {
             return (React__default.default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default.default.createElement(DesktopMenuItem, { key: navElement.id, role: "presentation", "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
+        return (React__default.default.createElement(DesktopMenuItem, { key: navElement.id, "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
             React__default.default.createElement(LinkModifier.default, { menuItem: navElement, tabIndex: false })));
     })));
 };

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

@@ -28,8 +28,8 @@ const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
     const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext.default);
     const menuItemLink = menuItem.urls[lang] || '';
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.default.createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default.default.createElement(Icon.default, { icon: isExternalLink ? icons.Open : icons.ArrowRight, size: "1rem", color: theme.default.color.default.pink })),
+    const MenuLinkComponent = (React__default.default.createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (React__default.default.createElement(Icon.default, { icon: isExternalLink ? icons.Open : icons.ArrowRight, size: "1.25rem", color: theme.default.color.default.pink })),
         React__default.default.createElement("span", null, menuItem.titles[lang])));
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;

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

@@ -9,7 +9,6 @@ var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var Icon = require('../../Icon/Icon.js');
 var MobileMenuContext = require('../context/MobileMenuContext.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
@@ -19,8 +18,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MobileMenuWrapper = styled.default.div `
+const MobileMenuWrapper = styled.default(reactSpring.animated.div) `
     width: ${100 * navigation.menuLevelsAmount}%;
+    display: flex;
     button {
         border: 0;
         background: transparent;
@@ -36,16 +36,15 @@ const MobileMenuContainer = styled.default.div `
     overflow: hidden;
     overflow-y: auto;
     transition: max-height 0.2s ease-in-out;
-    background: ${theme.default.color.background.white.default};
+    background-color: ${theme.default.color.background.sand.default};
     max-height: ${mobileMenu};
     height: ${mobileMenu};
     max-width: ${navigation.mobileNavMaxWidth};
     ${globalNavStyles.MenuList} {
         display: block;
-        float: left;
         width: ${100 / navigation.menuLevelsAmount}%;
         position: relative;
-        min-height: ${mobileMenu};
+        border-top: 4px solid ${theme.default.color.background.white.default};
         &:first-of-type {
             background: ${theme.default.color.background.white.default};
             > ${globalNavStyles.MenuItem} > ${globalNavStyles.MenuLink} {
@@ -58,17 +57,12 @@ const MobileMenuContainer = styled.default.div `
         }
         ${globalNavStyles.MenuItem} {
             border-bottom: 1px solid ${theme.default.color.line.L04};
-            &:last-of-type {
-                margin-bottom: ${navigation.headerMaxHeight}; // make sure items are visible in different devices which might calculate vh differently
-            }
         }
+        margin-bottom: ${navigation.headerMaxHeight}; // make sure items are visible in different devices which might calculate vh differently
     }
     ${globalNavStyles.MenuLink}, ${globalNavStyles.MenuLinkWithChildren} {
         line-height: ${theme.default.lineHeight.default};
-        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.75)}
-            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)}
-            ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.75)}
-            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
         font-size: ${theme.default.fontSize.default};
         display: flex;
         flex-grow: 1;
@@ -85,7 +79,7 @@ const MobileMenuContainer = styled.default.div `
         color: ${theme.default.color.text.pink};
         justify-content: flex-start;
         gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
-        height: auto;
+        height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 6)};
     }
     ${globalNavStyles.FeaturedBlock} {
         border-bottom: 1px solid ${theme.default.color.line.L04};
@@ -97,7 +91,6 @@ const MobileMenuContainer = styled.default.div `
         }
     }
 `;
-const useTabNavigationDisabled = (scrollPosition, indexLevel) => scrollPosition !== indexLevel;
 const MenuItemBackLink = ({ currentLevel }) => {
     const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext.default);
     const levels = {
@@ -112,17 +105,16 @@ const MenuItemBackLink = ({ currentLevel }) => {
     const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
     const backLink = getBackLink(menuElements, currentLevel - 1);
     return (React__default.default.createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default.default.createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default.default.createElement(Icon.default, { icon: icons.ChevronLeft, size: "1rem" }),
+        React__default.default.createElement(MenuLinkBackLink, { as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default.default.createElement(icons.ChevronLeft, { size: "1.5rem" }),
             backLink.titles[lang])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
-    var _a;
     const { handleNavMenuClick, menuLevel, lang, currentUrl } = React.useContext(NavContext.default);
     const { mobileMenuRef } = React.useContext(MobileMenuContext.default);
-    const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
+    const hasChildren = menuItem.pages.length;
     const indexLevel = currentLevel - 1;
-    const tabNavigationDisabled = useTabNavigationDisabled(menuLevel.scrollPosition, indexLevel);
+    const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
     const menuUrl = menuItem.urls[lang] || '';
     const mobileMenuClick = (element) => (e) => {
         var _a, _b;
@@ -134,11 +126,11 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
-    const renderMenuItem = (children) => (React__default.default.createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "presentation", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) }, children));
+    const renderMenuItem = (children) => (React__default.default.createElement(globalNavStyles.MenuItem, { key: menuItem.id, "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) }, children));
     if (hasChildren && currentLevel < 3) {
-        return renderMenuItem(React__default.default.createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled ? -1 : undefined },
+        return renderMenuItem(React__default.default.createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), tabIndex: tabNavigationDisabled ? -1 : undefined },
             menuItem.titles[lang],
-            React__default.default.createElement(Icon.default, { icon: icons.ChevronRight, color: theme.default.color.default.pink })));
+            React__default.default.createElement(icons.ChevronRight, { color: theme.default.color.default.pink })));
     }
     return renderMenuItem(React__default.default.createElement(LinkModifier.default, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
 };
@@ -146,7 +138,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
     const indexLevel = currentLevel - 1;
     const { collapseSize, menuLevel: { scrollPosition }, } = React.useContext(NavContext.default);
-    const tabNavigationDisabled = useTabNavigationDisabled(scrollPosition, indexLevel);
+    const tabNavigationDisabled = scrollPosition !== indexLevel;
     if (!menuItem.pages.length) {
         return null;
     }
@@ -186,9 +178,8 @@ const RenderMobileMenu = () => {
     }
     return (React__default.default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
         React__default.default.createElement(MobileMenuContext.default.Provider, { value: mobileMenuContext },
-            React__default.default.createElement(MobileMenuWrapper, null,
-                React__default.default.createElement(reactSpring.animated.div, { style: slidingMenuAnimation },
-                    React__default.default.createElement(NavigationMenuMobile, null))))));
+            React__default.default.createElement(MobileMenuWrapper, { style: slidingMenuAnimation },
+                React__default.default.createElement(NavigationMenuMobile, null)))));
 };
 
 exports.default = RenderMobileMenu;

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-interface MobileMenuContextProps {
+export interface MobileMenuContextProps {
     mobileMenuRef: RefObject<HTMLElement> | null;
 }
 declare const MobileMenuContext: import("react").Context<MobileMenuContextProps>;

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

@@ -29,14 +29,9 @@ const MobileMenuButton = styled.default.button `
     border: 0;
     padding: 0;
     background: transparent;
-    svg {
-        color: ${theme.default.color.text.black};
-        fill: ${theme.default.color.text.black};
-    }
     &:focus,
     &:active {
         svg {
-            color: ${theme.default.color.text.pink};
             fill: ${theme.default.color.text.pink};
         }
     }
@@ -47,6 +42,9 @@ const MobileMenuButton = styled.default.button `
             0px 0px 0px 4px ${theme.default.color.focus.dark};
         color: ${theme.default.color.text.black};
     }
+    svg {
+        fill: ${theme.default.color.text.black};
+    }
 `;
 const HeaderIconContainer = styled.default.div `
     display: flex;
@@ -76,9 +74,6 @@ const MenuItem = styled.default.li `
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
             ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
     }
-    > button {
-        background-color: ${theme.default.color.background.white};
-    }
     > button,
     > a {
         color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
@@ -99,14 +94,6 @@ const MenuLink = styled.default.a `
     overflow: visible;
     text-decoration: none;
     color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
-    &:hover,
-    &:focus {
-        color: ${theme.default.color.hover.pink};
-        text-underline-offset: 0.2em;
-        -webkit-text-decoration-skip: ink;
-        text-decoration-skip-ink: auto;
-        text-decoration-thickness: from-font;
-    }
 `;
 const MenuLinkWithChildren = styled.default.button `
     line-height: ${theme.default.lineHeight.xs};
@@ -125,7 +112,7 @@ const MenuLinkWithChildren = styled.default.button `
         cursor: pointer;
         outline: none;
     }
-    > span > svg {
+    > svg {
             transform: rotate( ${p => (p.isOpen ? '270deg' : '90deg')});
             transition: transform .2s ease-in-out;
         }
@@ -135,8 +122,6 @@ const MenuLinkWithChildren = styled.default.button `
 const MenuList = styled.default.ul `
     display: flex;
     max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
-    overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
-    list-style: none;
     margin: 0;
     padding: 0;
     background-color: ${theme.default.color.background.white};

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

@@ -16,13 +16,17 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: ReactNode;
+    children: ReactNode;
     /**
      * Allows to show and hide close button
      *
      * @default false
      */
     closeButton?: boolean;
+    /**
+     * Label for the close button
+     */
+    closeButtonLabel?: string;
     /**
      * On close button click callback
      */
@@ -41,8 +45,18 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * If true, the component is treated as static (non-interactive),
+     * and uses `aria-label` instead of `role="alert"`.
+     *
+     * @default false
+     */
+    isStatic?: boolean;
+    /**
+     * Accessible label for the notification. Required when `isStatic` is true
+     * and no type-based default label is desired.
+     */
+    ariaLabel?: string;
 }
-/** @visibleName Notification */
-declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
-/** @component */
+declare const Notification: ({ type, "data-testid": dataTestId, isStatic, className, children, closeButton, closeButtonLabel, onClickCloseButton, dismissed, ariaLabel, }: Props) => React.JSX.Element | null;
 export default Notification;

package/build/cjs/components/Notification/Notification.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
@@ -21,7 +20,7 @@ const iconsMap = {
     warning: icons.Warning,
     error: icons.Error,
 };
-const NotificationWrapper = styled__default.default.div `
+const sharedStyles = styled.css `
     display: flex;
     gap: 1rem;
     line-height: ${theme.default.lineHeight.default};
@@ -30,6 +29,14 @@ const NotificationWrapper = styled__default.default.div `
     border-radius: ${theme.default.radius.s};
     border: 2px solid ${({ $type }) => theme.default.color.notification[$type]};
 `;
+const NotificationWrapper = styled__default.default.div `
+    ${sharedStyles}
+    border-color: ${({ $type }) => theme.default.color.notification[$type]};
+`;
+const StaticWrapper = styled__default.default.section `
+    ${sharedStyles}
+    border-color: ${({ $type }) => theme.default.color.notification[$type]};
+`;
 const IconWrapper = styled__default.default.div `
     display: flex;
     align-items: center;
@@ -44,16 +51,24 @@ const ContentWrapper = styled__default.default.span `
 const ButtonCloseStyled = styled__default.default(ButtonClose.default) `
     position: static;
     margin: auto 0.5rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+    }
 `;
-/** @visibleName Notification */
-const Notification = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    return !props.dismissed ? (React__default.default.createElement(NotificationWrapper, { "$type": type, className: props.className, "data-testid": dataTestId },
+const Notification = ({ type = 'info', 'data-testid': dataTestId, isStatic = false, className, children, closeButton = false, closeButtonLabel, onClickCloseButton, dismissed = false, ariaLabel, }) => {
+    if (dismissed)
+        return null;
+    const IconToUse = iconsMap[type];
+    const renderContent = () => (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(IconWrapper, { "$type": type },
-            React__default.default.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.default.white })),
-        React__default.default.createElement(ContentWrapper, null, props.children),
-        props.closeButton && (React__default.default.createElement(ButtonCloseStyled, { onClick: props.onClickCloseButton },
-            React__default.default.createElement(Icon.default, { icon: icons.Close, color: "currentColor" }))))) : null;
+            React__default.default.createElement(Icon.default, { icon: IconToUse, size: "2rem", color: theme.default.color.default.white, "aria-hidden": true })),
+        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()));
 };
 
 exports.default = Notification;

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

@@ -35,8 +35,12 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Screen reader label for the badge (visually hidden)
+     */
+    visuallyHiddenText?: string;
 }
 /** @visibleName Notification Badge */
-declare const NotificationBadge: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const NotificationBadge: ({ "data-testid": dataTestId, visuallyHiddenText, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default NotificationBadge;

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -26,10 +26,24 @@ const NotificationBadgeElement = styled.default.div `
     background-color: ${theme.default.color.notification.error};
     border-radius: ${theme.default.radius.circle};
 `;
+const VisuallyHidden = styled.default.span `
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+`;
 /** @visibleName Notification Badge */
 const NotificationBadge = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId }, props.children));
+    var { 'data-testid': dataTestId, visuallyHiddenText } = _a, props = tslib.__rest(_a, ['data-testid', "visuallyHiddenText"]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        visuallyHiddenText && React__default.default.createElement(VisuallyHidden, null, visuallyHiddenText),
+        React__default.default.createElement(NotificationBadgeElement, { id: props.id, position: props.position, top: props.top, right: props.right, className: props.className, "data-testid": dataTestId, "aria-hidden": "true" }, props.children)));
 };
 
 exports.default = NotificationBadge;

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

@@ -4,7 +4,11 @@ type PillType = 'none' | 'checkbox' | 'radio';
 type Position = 'auto' | 'left' | 'right' | 'middle';
 interface Props {
     /**
-     * Unique ID for the input element
+     * Unique ID
+     *
+     * This ID is used to associate the label with the input for
+     * "checkbox" and "radio" types. For "none" types, the ID
+     * is applied directly to the button element.
      */
     id: string;
     /**
@@ -14,7 +18,7 @@ interface Props {
     /**
      * Allows to change the functionality of component while retaining style
      *
-     * @param {PillType} none No functionality
+     * @param {PillType} none Acts as a button
      * @param {PillType} checkbox Acts as a checkbox input type
      * @param {PillType} radio Acts as a radiobutton input type
      *
@@ -72,7 +76,16 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * A styled version that is designed to look like the default Button component
+     */
+    isDefaultButtonStyle?: boolean;
+    /**
+     * A screen reader label that describes the purpose of the Pill component when the default text is not sufficiently descriptive.
+     */
+    ariaLabel?: string;
 }
 declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Pill;
+export { PillType, Position };