@dnanpm/styleguide 3.4.0 → 3.5.1

package/build/cjs/build/assets/fonts/fonts.css

@@ -1,129 +1,129 @@
-/* "DNA Text" font definition */
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-/* "DNA Heading" font definition */
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-/* "DNA Numerals" font definition */
-@font-face {
-    font-family: 'DNA Numerals';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
-
-/* Direct definitons of DNA fonts */
-@font-face {
-    font-family: 'DNA Text Regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Medium';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Text Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAText-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Demi Bold';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Heading Black';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
-}
-
-@font-face {
-    font-family: 'DNA Numerals Bold';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
-        url('https://banner.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
-}
+/* "DNA Text" font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* "DNA Heading" font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+/* "DNA Numerals" font definition */
+@font-face {
+    font-family: 'DNA Numerals';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}
+
+/* Direct definitons of DNA fonts */
+@font-face {
+    font-family: 'DNA Text Regular';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Medium';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Demi Bold';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading Black';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Numerals Bold';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
+}

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

@@ -29,6 +29,10 @@ const ButtonElement = styled__default["default"].button `
     border: 2px solid transparent;
     padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)} 0;
 
+    & svg {
+        pointer-events: none;
+    }
+
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
     &:focus {

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

@@ -41,6 +41,14 @@ interface Props {
      * On input change callback
      */
     onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: ReactDatePickerProps['minDate'];
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: ReactDatePickerProps['maxDate'];
     /**
      * Allows to define time intervals in time picker
      *
@@ -69,6 +77,10 @@ interface Props {
      * @default false
      */
     isEditable?: boolean;
+    /**
+     * Allows to clear the selected date
+     */
+    isClearable?: boolean;
     /**
      * Allows to disable the component functionality
      *

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -57,6 +57,7 @@ const localeData = {
     'en-GB': undefined,
 };
 const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+// TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
 const Wrapper = styled__default["default"].div `
     position: relative;
 
@@ -67,7 +68,7 @@ const Wrapper = styled__default["default"].div `
         border-radius: ${theme["default"].radius.default};
         border: 1px solid ${theme["default"].color.line.L03};
         background-color: ${theme["default"].color.background.white.default};
-        z-index: 1;
+        z-index: 2;
 
         .react-datepicker__aria-live {
             display: none;
@@ -135,7 +136,17 @@ const Wrapper = styled__default["default"].div `
                 color: ${theme["default"].color.text.pink};
                 font-weight: ${theme["default"].fontWeight.bold};
             }
-
+            &.react-datepicker__day--disabled {
+                color: ${theme["default"].color.text.gray + theme["default"].color.transparency.T40};
+                font-weight: ${theme["default"].fontWeight.book};
+                &:hover {
+                    cursor: default;
+                    color: ${theme["default"].color.text.gray + theme["default"].color.transparency.T40};
+                    font-weight: ${theme["default"].fontWeight.book};
+                    background-color: transparent;
+                    border: 1px solid transparent;
+                }
+            }
             &.react-datepicker__day--in-selecting-range {
                 color: ${theme["default"].color.text.white};
                 font-weight: ${theme["default"].fontWeight.bold};
@@ -271,8 +282,8 @@ const DateTimePicker = (_a) => {
         .join(' - ');
     const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
     return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: handleClearable, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
-        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
+        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
             // Used to format the date/time in internal ReactDatePicker input
             // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
             dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));

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

@@ -42,6 +42,7 @@ interface Props {
      */
     'data-testid'?: string;
 }
+/** @visibleName Notification */
 declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Notification;

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

@@ -7,7 +7,6 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
-var styledUtils = require('../../utils/styledUtils.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
 
@@ -24,26 +23,34 @@ const iconsMap = {
 };
 const NotificationWrapper = styled__default["default"].div `
     display: flex;
-    align-items: center;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    gap: 1rem;
     line-height: ${theme["default"].lineHeight.default};
     color: ${theme["default"].color.text.black};
     background-color: ${theme["default"].color.background.white.default};
     border-radius: ${theme["default"].radius.s};
     border: 2px solid ${({ $type }) => theme["default"].color.notification[$type]};
 `;
+const IconWrapper = styled__default["default"].div `
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    background-color: ${({ $type }) => theme["default"].color.notification[$type]};
+`;
 const ContentWrapper = styled__default["default"].span `
-    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+    margin: auto 0;
+    padding: 0.5rem 0;
+    width: 100%;
 `;
 const ButtonCloseStyled = styled__default["default"](ButtonClose["default"]) `
     position: static;
-    margin: 0 0 0 auto;
+    margin: auto 0.5rem;
 `;
+/** @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 },
-        React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "2rem", color: theme["default"].color.notification[type] }),
+        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;

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -9,6 +9,14 @@ interface Props {
      * Content of the component
      */
     children?: ReactNode;
+    /**
+     * Allows to pass common mouse click callback to all children
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass common keyboard key down callback to all children
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to define aria-label attribute for nav HTML element
      */

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

@@ -103,11 +103,15 @@ const DropdownList = styled["default"](CoreULStyles) `
     ${common["default"]({ elevation: 'low' })}
 `;
 const reducer = (state, action) => {
-    var _a;
+    var _a, _b;
     switch (action.type) {
+        case 'resetNavigationState': {
+            const navigationItems = React.Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
+            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
+        }
         case 'moveItemToDropdown': {
             const lastChild = state.navigationItems[state.navigationItems.length - 1];
-            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.lastItem) && {
+            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
                 lastItemWidth: [...state.lastItemWidth, action.payload.lastItem.clientWidth],
             }));
         }
@@ -164,7 +168,7 @@ const PriorityNavigation = (_a) => {
     const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
     const navigationItems = React.useRef(new Map()).current;
     const initialState = {
-        navigationItems: props.children,
+        navigationItems: React.Children.toArray(props.children),
         dropdownItems: [],
         lastItemWidth: [],
     };
@@ -197,6 +201,9 @@ const PriorityNavigation = (_a) => {
             child.type === PriorityNavigationItem["default"] &&
             child.props.isActive));
     useOutsideClick["default"](listsContainerRef, () => {
+        if (isMobileNavigationOpen) {
+            setIsMobileNavigationOpen(false);
+        }
         if (isDropdownOpen) {
             setIsDropdownOpen(false);
         }
@@ -212,16 +219,24 @@ const PriorityNavigation = (_a) => {
         checkHorizontalOverflow,
         isMobile,
     ]);
-    const navigationListItems = 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, 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.useEffect(() => {
+        dispatch({
+            type: 'resetNavigationState',
+            payload: {
+                navigationItems: props.children,
+            },
+        });
+        setIsMobileNavigationOpen(false);
+    }, [props.children]);
     return (React__default["default"].createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
         React__default["default"].createElement(ListsContainer, { ref: listsContainerRef },
             isMobile && selectedItem && (React__default["default"].createElement(MobileDropdown, { onClick: toggleMobileNavigation },
                 selectedItem,
                 React__default["default"].createElement(Icon["default"], { icon: isMobileNavigationOpen ? icons.ChevronUp : icons.ChevronDown }))),
-            React__default["default"].createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, navigationListItems),
+            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 })))))),
             !isMobile && Boolean(state.dropdownItems.length) && (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel),
                 React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems))))));

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

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
 import React from 'react';
 export interface Props {
     /**
@@ -10,13 +10,21 @@ export interface Props {
      */
     children?: ReactNode;
     /**
-     * A ref object, or a ref callback function
+     * On component mouse click callback
      */
-    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On component keyboard key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to set component as active
      */
     isActive?: boolean;
+    /**
+     * A ref object, or a ref callback function
+     */
+    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
     /**
      * Allows to pass a custom className
      */

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

@@ -21,6 +21,20 @@ const Element = styled["default"].li `
     padding: 1rem 1.25rem;
     flex-shrink: 0;
 
+    ${({ onClick }) => onClick &&
+    `
+        cursor: pointer;
+    `};
+
+    &:focus-within {
+        & > * {
+            border-radius: ${theme["default"].radius.s};
+            border: 2px solid ${theme["default"].color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+            outline: none;
+        }
+    }
+
     ${({ isActive }) => styledUtils.media.md `
         justify-content: center;
         padding: 1rem 0;
@@ -29,26 +43,20 @@ const Element = styled["default"].li `
         border-bottom: 3px solid ${isActive ? theme["default"].color.text.pink : 'transparent'};
     `}
 
-    & a {
+    & > * {
         display: block;
         color: ${({ isActive }) => (isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
         ${({ isActive }) => isActive && `font-weight: ${theme["default"].fontWeight.bold}`};
         border: 2px solid transparent;
 
-        &:focus {
-            border-radius: ${theme["default"].radius.s};
-            border: 2px solid ${theme["default"].color.focus.light};
-            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
-            outline: none;
+        &:hover {
+            color: ${theme["default"].color.hover.pink};
+            text-decoration: none;
         }
 
         ${styledUtils.media.md `
             margin: auto;
         `}
-
-        &:hover {
-            color: ${theme["default"].color.hover.pink};
-        }
     }
 `;
 /**
@@ -56,7 +64,7 @@ const Element = styled["default"].li `
  */
 const PriorityNavigationItem = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, ref: props.innerRef, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+    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));
 };
 
 exports["default"] = PriorityNavigationItem;

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

@@ -1,5 +1,6 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
 import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
 interface Props {
     /**
      * Unique ID for the input element
@@ -67,6 +68,19 @@ interface Props {
      * @default 3
      */
     height?: number;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
+     */
+    status?: InputStatus;
+    /**
+     * Text of the error message when textarea is in error state
+     */
+    errorMessage?: string;
     /**
      * Allows to pass a custom className
      */

package/build/cjs/components/Textarea/Textarea.js

@@ -57,6 +57,10 @@ const Message = styled["default"].div `
     color: ${theme["default"].color.text.gray};
     margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
+const ErrorMessage = styled["default"](Message) `
+    font-weight: ${theme["default"].fontWeight.medium};
+    color: ${theme["default"].color.notification.error};
+`;
 const Textarea = (_a) => {
     var { height = 3, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["height", 'data-testid']);
     const inputRef = React.useRef(null);
@@ -77,9 +81,10 @@ const Textarea = (_a) => {
         }
     };
     return (React__default["default"].createElement(FieldContainer, { className: props.className },
-        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, isMandatory: props.required }, props.label)),
+        props.label && (React__default["default"].createElement(LabelText["default"], { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default["default"].createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+        props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports["default"] = Textarea;