@dnanpm/styleguide 3.9.9 → 3.9.11

package/build/cjs/components/Pill/Pill.js

@@ -7,41 +7,78 @@ var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var Button = require('../Button/Button.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
+const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
     const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
-    const colorValue = isChecked
+    const bgColor = isChecked
         ? theme.default.color.background.plum.default
         : theme.default.color.background.orange.E02;
-    // Only Pill component specific colors to be used on user interaction styles
-    const hoverValue = isChecked ? '#441632' : '#FFB557';
-    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
-    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
-    return backgroundColor + hoverBackgroundColor;
+    const hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
+    const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.black;
+    const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
+    return `
+      font-size: ${theme.default.fontSize.s};
+      font-weight: ${theme.default.fontWeight.medium};
+      padding: 2px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid transparent;
+      ${!isDisabled ? `&:hover { background-color: ${hoverBgColor}; }` : ''}
+    `;
+};
+const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
+    const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
+    const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
+    const disabledBgColor = isDisabled ? theme.default.color.default.plum : Button.shade.plum.lighter;
+    const bgColor = isChecked ? disabledBgColor : 'transparent';
+    const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.plum;
+    const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
+    const disabledBorderColor = isDisabled ? 'transparent' : Button.shade.plum.lighter;
+    const borderColor = isChecked
+        ? disabledBorderColor
+        : `${theme.default.color.default.plum}${alphaValue}`;
+    return `
+      font-size: ${theme.default.fontSize.default};
+      font-weight: ${theme.default.fontWeight.bold};
+      padding: 6px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
+      background-color: ${bgColor}${alphaValue};
+      color: ${disabledTextColor};
+      border: 2px solid ${borderColor};
+      ${!isDisabled
+        ? `
+        &:hover { 
+            border: 2px solid ${hoverColor};
+            color: ${theme.default.color.default.white}; 
+            background-color: ${hoverColor}; 
+        }`
+        : ''}
+    `;
 };
 const Label = styled__default.default.label `
+    all: unset;
+    position: relative;
     display: inline-block;
     border-radius: ${theme.default.radius.pill};
-    font-size: ${theme.default.fontSize.s};
     line-height: ${theme.default.lineHeight.default};
-    font-weight: ${theme.default.fontWeight.medium};
-    color: ${({ isChecked }) => isChecked ? theme.default.color.default.white : theme.default.color.default.black};
-    border: 2px solid transparent;
-    padding: 2px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
     text-align: center;
+    transition: all 0.2s ease-in-out;
+
+    ${({ isChecked, isDisabled, isDefaultButtonStyle }) => isDefaultButtonStyle
+    ? getDefaultButtonStyles({ isChecked, isDisabled })
+    : getStandardPillStyles({ isChecked, isDisabled })}
 
-    ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
-    ${({ isChecked, isDisabled }) => getBackgroundColor({ isChecked, isDisabled })}
+    ${({ isDisabled }) => `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`}
 
     &:focus-within, *:focus > & {
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
-        border: 2px solid ${theme.default.color.focus.light};
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
     }
 
     ${({ position }) => (position === 'right' || position === 'middle') &&
@@ -73,7 +110,10 @@ const Input = styled__default.default.input `
     border: 0 none;
     margin: 0;
     width: 0;
-    height: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
 
     &:focus-visible {
         outline: 0 none;
@@ -81,9 +121,10 @@ const Input = styled__default.default.input `
 `;
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    return (React__default.default.createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+    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 },
         props.children,
-        type !== 'none' && (React__default.default.createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+        !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` }))));
 };
 
 exports.default = Pill;

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

@@ -49,10 +49,22 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a custom aria-label for mobile dropdown button
+     */
+    mobileDropdownAriaLabel?: string;
+    /**
+     * Allows to pass a custom aria-label for current page
+     */
+    currentPageAriaLabel?: string;
+    /**
+     * Allows to pass a custom aria-label for open more subpages button
+     */
+    openMoreSubpagesAriaLabel?: string;
 }
 /**
  * @visibleName Priority Navigation
  */
-declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, mobileDropdownAriaLabel, currentPageAriaLabel, openMoreSubpagesAriaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default PriorityNavigation;

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

@@ -24,13 +24,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const Container = styled.default.div `
     width: 100%;
 
-    ${styledUtils.media.md `
-        border-bottom: 1px solid ${theme.default.color.line.L03};
-    `}
+    ${styledUtils.media.md ` border-bottom: 1px solid ${theme.default.color.line.L03}; `}
 `;
-const Category = styled.default.h4 `
+const Category = styled.default.span `
     margin: 0;
     color: ${theme.default.color.text.black};
+    font-size: ${theme.default.fontSize.h4};
+    font-weight: ${theme.default.fontWeight.bold};
+    line-height: ${theme.default.lineHeight.h4};
+    display: block;
 
     ${styledUtils.media.md `
         padding: 1.25rem 0.25rem 0;
@@ -135,6 +137,18 @@ const DropdownList = styled.default(CoreULStyles) `
 
     ${common.default({ elevation: 'low' })}
 `;
+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;
+`;
 const reducer = (state, action) => {
     var _a, _b;
     switch (action.type) {
@@ -193,10 +207,11 @@ const getReactNodeText = (reactNode) => {
  * @visibleName Priority Navigation
  */
 const PriorityNavigation = (_a) => {
-    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["dropdownButtonLabel", 'data-testid']);
+    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId, mobileDropdownAriaLabel, currentPageAriaLabel, openMoreSubpagesAriaLabel } = _a, props = tslib.__rest(_a, ["dropdownButtonLabel", 'data-testid', "mobileDropdownAriaLabel", "currentPageAriaLabel", "openMoreSubpagesAriaLabel"]);
     const listsContainerRef = React.useRef(null);
     const navigationListRef = React.useRef(null);
     const dropdownButtonRef = React.useRef(null);
+    const categoryId = React.useId();
     const { isMobile } = useWindowSize.default(theme.default.breakpoints.md);
     const { width: wrapperContainerWidth } = useResizeObserver.default(listsContainerRef);
     const [isMobileNavigationOpen, setIsMobileNavigationOpen] = React.useState(false);
@@ -258,42 +273,66 @@ const PriorityNavigation = (_a) => {
     });
     React.useEffect(() => {
         if (!isMobile) {
-            checkHorizontalOverflow();
+            dispatch({
+                type: 'resetNavigationState',
+                payload: {
+                    navigationItems: props.children,
+                },
+            });
+        }
+        setIsMobileNavigationOpen(false);
+    }, [isMobile, props.children]);
+    React.useLayoutEffect(() => {
+        if (!isMobile) {
+            requestAnimationFrame(() => {
+                checkHorizontalOverflow();
+            });
         }
     }, [
-        state.navigationItems,
-        state.dropdownItems,
+        isMobile,
         wrapperContainerWidth,
+        state.navigationItems.length,
+        state.dropdownItems.length,
         checkHorizontalOverflow,
-        isMobile,
     ]);
-    React.useEffect(() => {
-        dispatch({
-            type: 'resetNavigationState',
-            payload: {
-                navigationItems: props.children,
-            },
-        });
-        setIsMobileNavigationOpen(false);
-    }, [props.children]);
+    const handleNavigationListKeyDown = React.useCallback((e) => {
+        var _a;
+        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) {
+                e.preventDefault();
+                setIsMobileNavigationOpen(false);
+            }
+        }
+    }, [isMobile, isMobileNavigationOpen]);
     return (React__default.default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        !isMobile && props.categoryLabel && React__default.default.createElement(Category, null, props.categoryLabel),
-        React__default.default.createElement("nav", { "aria-label": props.navigationLabel },
+        !isMobile && props.categoryLabel && (React__default.default.createElement(Category, { id: categoryId }, props.categoryLabel)),
+        React__default.default.createElement("nav", { "aria-labelledby": categoryId },
             React__default.default.createElement(ListsContainer, { ref: listsContainerRef },
-                isMobile && selectedItem && (React__default.default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": (props.categoryLabel && selectedItem) ||
-                        (props.dropdownButtonAriaLabel &&
-                            `${props.dropdownButtonAriaLabel}: ${selectedItem}`), "aria-expanded": isMobileNavigationOpen, isCategoryLabel: Boolean(props.categoryLabel) },
+                isMobile && selectedItem && (React__default.default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, isCategoryLabel: Boolean(props.categoryLabel) },
                     React__default.default.createElement(MobileDropdownContent, null,
                         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 }, React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
-                    navigationItem.type === PriorityNavigationItem.default && (React__default.default.createElement(PriorityNavigationItem.default, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
-                    navigationItem.props.children,
-                    navigationItem.props.isActive && isMobile && (React__default.default.createElement(Icon.default, { icon: icons.Check, color: theme.default.color.default.pink })))))),
+                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: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+                            navigationItem.props.isActive
+                                ? React.cloneElement(navigationItem.props.children, {
+                                    'aria-current': 'page',
+                                })
+                                : navigationItem.props.children,
+                            navigationItem.props.isActive && isMobile && (React__default.default.createElement(React__default.default.Fragment, null,
+                                React__default.default.createElement(Icon.default, { icon: icons.Check, "aria-hidden": true, color: theme.default.color.default.pink }),
+                                React__default.default.createElement(VisuallyHidden, null, currentPageAriaLabel)))));
+                    }
+                    return null;
+                })),
                 !isMobile && Boolean(state.dropdownItems.length) && (React__default.default.createElement(React__default.default.Fragment, null,
                     React__default.default.createElement("div", { ref: dropdownButtonRef },
-                        React__default.default.createElement(ButtonIcon.default, { onClick: toggleDropdown, icon: isDropdownListOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                        React__default.default.createElement(ButtonIcon.default, { 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))))))))));
 };

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

@@ -37,6 +37,6 @@ export interface Props {
 /**
  * @visibleName Priority NavigationItem
  */
-declare const PriorityNavigationItem: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const PriorityNavigationItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
 /** @component */
 export default PriorityNavigationItem;

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -21,10 +21,7 @@ const Element = styled.default.li `
     padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
-    ${({ onClick }) => onClick &&
-    `
-        cursor: pointer;
-    `};
+    ${({ onClick }) => onClick && `cursor: pointer;`}
 
     &:focus-within {
         & > *:not(a, span.dnasg-icon) {
@@ -45,6 +42,7 @@ const Element = styled.default.li `
 
     & > a {
         text-decoration: none;
+
         &:focus-visible {
             border-radius: ${theme.default.radius.s};
             border: 2px solid ${theme.default.color.focus.light};
@@ -56,7 +54,7 @@ const Element = styled.default.li `
     & > * {
         display: block;
         color: ${({ isActive }) => (isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
-        ${({ isActive }) => isActive && `font-weight: ${theme.default.fontWeight.bold}`};
+        ${({ isActive }) => isActive && `font-weight: ${theme.default.fontWeight.bold};`}
         border: 2px solid transparent;
 
         &:hover {
@@ -68,9 +66,10 @@ const Element = styled.default.li `
 /**
  * @visibleName Priority NavigationItem
  */
-const PriorityNavigationItem = (_a) => {
+const PriorityNavigationItem = React__default.default.forwardRef((_a, ref) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
-};
+    return (React__default.default.createElement(Element, { id: props.id, ref: ref, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+});
+PriorityNavigationItem.displayName = 'PriorityNavigationItem';
 
 exports.default = PriorityNavigationItem;

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

@@ -40,6 +40,6 @@ interface Props {
      */
     onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
 }
-declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+declare const Toaster: ({ type, "data-testid": dataTestId, closeLabel, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Toaster;

package/build/cjs/components/Toaster/Toaster.js

@@ -54,17 +54,16 @@ const ButtonCloseStyled = styled__default.default(ButtonClose.default) `
     top: auto;
 `;
 const Toaster = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    if (props.dismissed) {
+    var { type = 'info', 'data-testid': dataTestId, closeLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', "closeLabel"]);
+    if (props.dismissed)
         return null;
-    }
-    return (React__default.default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
+    return (React__default.default.createElement(ToasterWrapper, { className: props.className, "data-testid": dataTestId, role: "alert", "aria-live": "assertive", "aria-atomic": "true" },
         React__default.default.createElement(StyledBox, { type: type, padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), elevation: "extraHigh" },
             React__default.default.createElement(IconWrapper, null,
-                React__default.default.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.notification[type] })),
+                React__default.default.createElement(Icon.default, { icon: iconsMap[type], size: "2rem", color: theme.default.color.notification[type], "aria-hidden": true, "data-testid": "toaster-icon" })),
             React__default.default.createElement(ContentWrapper, null, props.children),
-            React__default.default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
-                React__default.default.createElement(Icon.default, { icon: icons.Close, color: theme.default.color.text.black })))));
+            React__default.default.createElement(ButtonCloseStyled, { "aria-label": closeLabel, onClick: props.onClickCloseButton },
+                React__default.default.createElement(Icon.default, { icon: icons.Close, color: theme.default.color.text.black, "aria-hidden": true })))));
 };
 
 exports.default = Toaster;

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

@@ -46,10 +46,14 @@ interface Props {
     closeWithEsc?: boolean;
     /**
      * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     *
+     * @default false
      */
     isClickable?: boolean;
     /**
      * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     *
+     * @default false
      */
     isHoverable?: boolean;
     /**
@@ -66,6 +70,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, isClickable, isHoverable, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Tooltip;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -16,9 +16,28 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Helper = styled.default.div `
-    display: inline;
+const Helper = styled.default.button `
+    display: inline-block;
     vertical-align: middle;
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    text-decoration: none;
+    outline: inherit;
+    pointer-events: auto;
+    height: 1rem;
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
+            0px 0px 0px 4px ${theme.default.color.focus.dark};
+        border-radius: 100%;
+    }
+
     ${({ isClickable }) => isClickable && `cursor: pointer`};
 `;
 const getArrowOverrides = () => {
@@ -65,11 +84,32 @@ const StyledReactTooltip = styled.default(reactTooltip.Tooltip) `
     ${getArrowOverrides()}
 `;
 const Tooltip = (_a) => {
-    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc"]);
+    var { 'data-testid': dataTestId, closeWithEsc = true, isClickable = false, isHoverable = false } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
+    const handleReactTooltipOpenEvents = {
+        mouseover: !isClickable,
+        focus: !isClickable,
+        mouseenter: !isClickable,
+        mousedown: !isClickable && !isHoverable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipCloseEvents = {
+        mouseout: !isClickable && !isHoverable,
+        blur: !isClickable && !isHoverable,
+        mouseleave: !isClickable,
+        mouseup: !isClickable,
+        click: isClickable,
+        dblclick: isClickable,
+    };
+    const handleReactTooltipGlobalCloseEvents = {
+        escape: closeWithEsc,
+        clickOutsideAnchor: true,
+        scroll: true,
+    };
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position }))),
-        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+            React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position, "aria-hidden": true }))),
+        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 exports.default = Tooltip;

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

@@ -4,14 +4,31 @@ import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const getStyling = ({ $type, $variant, }) => {
-    const stylingColor = $type === 'default' ? theme.color.line.L01 : theme.color.notification[$type];
-    const border = `border: 2px solid ${stylingColor};`;
-    const background = `background-color: ${$variant === 'outlined' ? theme.color.background.white.default : stylingColor};`;
-    const color = `color: ${$variant === 'outlined' ? theme.color.text.black : theme.color.text.white};`;
-    return `${border}${background}${color}`;
+const getStyling = ({ $type }) => {
+    switch ($type) {
+        case 'success':
+            return `
+                color: ${theme.color.text.white};
+                border: 2px solid ${theme.color.notification.success};
+                background-color: ${theme.color.notification.success};
+            `;
+        case 'error':
+            return `
+                color: ${theme.color.text.black};
+                border: 2px solid ${theme.color.notification.error};
+                background-color: ${theme.color.background.white.default};
+            `;
+        case 'default':
+        default:
+            return `
+                color: ${theme.color.text.black};
+                border: 2px solid ${theme.color.line.L01};
+                background-color: ${theme.color.background.white.default};
+            `;
+    }
 };
 const Element = styled__default.div `
+    all: unset;
     display: inline-block;
     border-radius: ${theme.radius.pill};
     padding: 1px ${getMultipliedSize(theme.base.baseHeight, 1)};
@@ -21,11 +38,18 @@ const Element = styled__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.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
+    }
 `;
 const Chip = (_a) => {
     var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "variant", 'data-testid']);
-    return (React__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.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));
 };
 
 export { Chip as default };

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

@@ -5,7 +5,6 @@ import styled, { keyframes, css } from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
 import { navMaxHeight, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
 import NavContext from '../context/NavContext.js';
 import { MenuList, MenuItem, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
@@ -69,7 +68,6 @@ const SubMenuItem = styled.li `
     > a {
         color: ${p => (p.isHighlighted ? theme.color.text.pink : theme.color.text.black)};
         font-weight: ${p => (p.isHighlighted ? theme.fontWeight.bold : theme.fontWeight.book)};
-        }
     }
 `;
 const DesktopMenuList = styled(MenuList) `
@@ -165,16 +163,16 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const menuClickMain = (element) => () => {
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
-        React__default.createElement(MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.createElement(MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children" },
             React__default.createElement("span", null, menuItem.titles[lang]),
-            React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" })),
+            React__default.createElement(ChevronRight, { size: "1rem" })),
         React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
     var _a;
     const { items, lang, resetMenuEvents, menuLevel, currentUrl, collapseSize } = useContext(NavContext);
-    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 = useRef(null);
     useOutsideClick(ref, () => {
         if (menuLevel.level1 || menuLevel.level2) {
@@ -184,13 +182,12 @@ const DesktopMenu = () => {
     if (!mainNavigation.length) {
         return null;
     }
-    return (React__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.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.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "presentation", "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]) },
+        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]) },
             React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
     })));
 };