@dnanpm/styleguide 3.1.0 → 3.3.0

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -152,7 +152,7 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -317,7 +317,7 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -482,7 +482,7 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -648,7 +648,7 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 interface Props {
@@ -16,7 +17,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to hide application from assistive screenreaders and other assistive technologies while the modal is open
      *

package/build/cjs/components/Modal/Modal.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
@@ -11,7 +12,6 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
-var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -83,7 +83,7 @@ const Modal = (_a) => {
         React__default["default"].createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
             React__default["default"].createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
                 closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default["default"].createElement(Icon["default"], { icon: hlX["default"] }))),
+                    React__default["default"].createElement(Icon["default"], { icon: icons.Close }))),
                 props.title && React__default["default"].createElement(Title, null, props.title),
                 props.children)),
         React__default["default"].createElement(GlobalStyle, null)));

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

@@ -1,3 +1,4 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type NotificationType = 'info' | 'success' | 'warning' | 'error';
 interface Props {
@@ -15,7 +16,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to show and hide close button
      *
@@ -25,7 +26,7 @@ interface Props {
     /**
      * On close button click callback
      */
-    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to dismiss the notification programmatically
      *

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

@@ -3,17 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+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');
-var hlCheck = require('../Icons/hlCheck.js');
-var hlError = require('../Icons/hlError.js');
-var hlInfo = require('../Icons/hlInfo.js');
-var hlWarning = require('../Icons/hlWarning.js');
-var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,10 +17,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const iconsMap = {
-    info: hlInfo["default"],
-    success: hlCheck["default"],
-    warning: hlWarning["default"],
-    error: hlError["default"],
+    info: icons.Info,
+    success: icons.Check,
+    warning: icons.Warning,
+    error: icons.Error,
 };
 const NotificationWrapper = styled__default["default"].div `
     display: flex;
@@ -50,7 +46,7 @@ const Notification = (_a) => {
         React__default["default"].createElement(Icon["default"], { icon: iconsMap[type], size: "2rem", color: theme["default"].color.notification[type] }),
         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: hlX["default"], color: "currentColor" }))))) : null;
+            React__default["default"].createElement(Icon["default"], { icon: icons.Close, color: "currentColor" }))))) : null;
 };
 
 exports["default"] = Notification;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -7,7 +8,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to change CSS property `position`
      *

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

@@ -1,3 +1,4 @@
+import type { ChangeEvent, ReactNode } from 'react';
 import React from 'react';
 type PillType = 'none' | 'checkbox' | 'radio';
 type Position = 'auto' | 'left' | 'right' | 'middle';
@@ -29,9 +30,9 @@ interface Props {
     /**
      * On checkbox/radiobutton change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Allows to set position of component relative to other content and adds appropriate margins
+     * Allows to set position of component relative to other in line content by adding appropriate margins
      *
      * @param {Position} auto Pill component is grouped with other pill components, add margins in between
      * @param {Position} left Pill component is on the left side of content, add right margin
@@ -62,7 +63,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass testid string for testing purposes
      */

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

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import React from 'react';
 type ProgressIndicatorStatus = 'error';
 interface Props {
@@ -14,7 +15,7 @@ interface Props {
      * On Progress Indicator Item label or number click callback
      * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
      */
-    onStepClick?: (stepIndex: number, e: React.MouseEvent<HTMLElement>) => void;
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to change version of component to small
      */

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -3,13 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-var hlCheck = require('../Icons/hlCheck.js');
-var hlExclamationMark = require('../Icons/hlExclamationMark.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -124,7 +123,7 @@ const ProgressIndicator = (_a) => {
         };
         return (React__default["default"].createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
             index > 0 && (React__default["default"].createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default["default"].createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default["default"].createElement(Icon["default"], { icon: isError ? hlExclamationMark["default"] : hlCheck.hlSuccess, color: isError ? theme["default"].color.text.white : theme["default"].color.text.pink, size: "1rem" })) : (stepNumber)),
+            React__default["default"].createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default["default"].createElement(Icon["default"], { icon: isError ? icons.Warning : icons.Check, color: isError ? theme["default"].color.text.white : theme["default"].color.text.pink, size: "1rem" })) : (stepNumber)),
             label && (React__default["default"].createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
     });
     return (React__default["default"].createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));

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

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -21,7 +22,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *

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

@@ -1,18 +1,18 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent, ReactNode } from 'react';
 interface ReadMoreProps {
     /** The label for show more link */
     showMoreText?: string;
     /** The label for show less link */
     showLessText?: string;
     /** Text content for component */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Allows to pass a custom className */
     className?: string;
     /** Allows to pass custom onClick */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Init in expanded state and immediately close on client for better SEO */
     seoInitExpanded?: boolean;
 }
 /** @visibleName Read More */
-declare const ReadMore: React.FunctionComponent<ReadMoreProps>;
+declare const ReadMore: FunctionComponent<ReadMoreProps>;
 export default ReadMore;

package/build/cjs/components/ReadMore/ReadMore.js

@@ -2,13 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-require('tslib');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,7 +55,7 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
         setExpanded(!expanded);
         onClick(event);
     };
-    const icon = expanded ? hlChevronUp["default"] : hlChevronDown["default"];
+    const icon = expanded ? icons.ChevronUp : icons.ChevronDown;
     const buttonText = expanded ? showLessText : showMoreText;
     return (React__default["default"].createElement(TruncateContainer, { expanded: expanded, className: className },
         children,

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

@@ -1,3 +1,4 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -19,27 +20,27 @@ interface Props {
     /**
      * On search input change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * On search input blur callback
      */
-    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * On search input focus callback
      */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
     /**
      * On search input key press callback
      */
-    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
     /**
      * On search input key down callback
      */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
     /**
      * On button click callback
      */
-    onButtonClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    onButtonClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allow to set search input element focus on page load
      */

package/build/cjs/components/Search/Search.js

@@ -3,13 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
-var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
-var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -63,7 +62,7 @@ const Button = styled["default"](ButtonIcon["default"]) `
 const Search = (_a) => {
     var _b;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const inputRef = React__default["default"].useRef(null);
+    const inputRef = React.useRef(null);
     const handleButtonClick = (e) => {
         if (inputRef && inputRef.current) {
             inputRef.current.focus();
@@ -74,7 +73,7 @@ const Search = (_a) => {
     };
     return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
         React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus }),
-        React__default["default"].createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? hlX["default"] : hlMagnifyingGlass["default"], name: `${props.name}-button`, onClick: handleButtonClick })));
+        React__default["default"].createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? icons.Close : icons.Search, name: `${props.name}-button`, onClick: handleButtonClick })));
 };
 
 exports["default"] = Search;

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

@@ -1,8 +1,25 @@
+import type { ComponentType, ReactNode } from 'react';
 import React from 'react';
+import type { LangProps } from '../../types/language';
+interface MenuItem {
+    id: string;
+    icon?: string;
+    target?: string;
+    titles: LangProps;
+    urls: LangProps;
+}
 interface SNDataProps {
     name?: string;
     categoryId?: string;
-    pages?: object[] | null;
+    pages?: MenuItem[] | null;
+}
+interface NextJSSecondaryNavLinkProps {
+    linkUrl: string;
+    linkTitle: string;
+    iconName: string;
+    showNotification: boolean;
+    collapseSize: number;
+    children?: ReactNode;
 }
 interface Props {
     /**
@@ -21,7 +38,7 @@ interface Props {
     /**
      * pass nextJS component for enabling nextJS routing
      */
-    nextJSSecondaryNavLink?: any;
+    nextJSSecondaryNavLink?: ComponentType<NextJSSecondaryNavLinkProps>;
     /**
      * width in pixels where navigation collapses to a dropdown
      *

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -2,15 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-require('tslib');
-var hlCheck = require('../Icons/hlCheck.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -140,10 +138,9 @@ const IconWrapper = styled["default"].span `
         background-color: ${theme["default"].color.default.pink};
     }
 `;
-const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 /** @visibleName Secondary Navigation */
-const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink = false, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
-    var _a;
+const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
+    var _a, _b, _c, _d;
     const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
     const toggleNav = () => {
         setIsSecondaryNavOpen(!isSecondaryNavOpen);
@@ -159,39 +156,34 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
             setIsSecondaryNavOpen(false);
         }
     });
-    const selectedElement = data.pages
-        ? data.pages.find((listElement) => currentUrl === listElement.urls[lang])
-        : undefined;
-    const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
+    const selectedElement = (_a = data.pages) === null || _a === void 0 ? void 0 : _a.find(listElement => currentUrl === listElement.urls[lang]);
+    const shouldHighlightSelectedElement = (_b = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _b !== void 0 ? _b : false;
+    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
     return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
         selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default["default"].createElement(MobileSelectorTitleWrapper, null,
-                ((_a = selectedElement.icon) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
                     React__default["default"].createElement(Icon["default"], { name: selectedElement.icon }))),
                 React__default["default"].createElement("span", null, selectedElement.titles[lang])),
             React__default["default"].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"] })))),
-        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
-            ? data.pages.map((listElement, index) => {
-                const linkUrl = listElement.urls[lang];
-                const linkTitle = listElement.titles[lang];
-                const iconName = listElement.icon || '';
-                const isActive = matchFullUrl
-                    ? currentUrl === linkUrl
-                    : currentUrl.indexOf(linkUrl) > -1;
-                const showNotification = highlightIds.some((el) => el === listElement.id);
-                const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
-                return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
-                    isNextJsLink && (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] }))))),
-                    !isNextJsLink && (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                        iconName.length > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default["default"].createElement(Icon["default"], { name: iconName }))),
-                        React__default["default"].createElement("span", null, linkTitle),
-                        isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] })))))));
-            })
-            : null)));
+                React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown })))),
+        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${(_c = data.categoryId) !== null && _c !== void 0 ? _c : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, (_d = data.pages) === null || _d === void 0 ? void 0 : _d.map((listElement, index) => {
+            const linkUrl = listElement.urls[lang];
+            const linkTitle = listElement.titles[lang];
+            const iconName = listElement.icon || '';
+            const isActive = matchFullUrl
+                ? currentUrl === linkUrl
+                : currentUrl.indexOf(linkUrl) > -1;
+            const showNotification = highlightIds.some(el => el === listElement.id);
+            const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
+            return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                React__default["default"].createElement(Icon["default"], { icon: icons.Check }))))) : (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { name: iconName }))),
+                React__default["default"].createElement("span", null, linkTitle),
+                isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { icon: icons.Check })))))));
+        }))));
 };
 
 exports["default"] = SecondaryNavigation;

package/build/cjs/components/Selectbox/Selectbox.js

@@ -3,18 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var Select = require('react-select');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
-var hlError = require('../Icons/hlError.js');
-var hlLock = require('../Icons/hlLock.js');
-var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
-var hlX = require('../Icons/hlX.js');
 var LabelText = require('../LabelText/LabelText.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
@@ -36,9 +31,9 @@ const ErrorMessage = styled["default"].div `
 `;
 const customTheme = Object.assign(Object.assign({}, Select.defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, Select.defaultTheme.colors), { primary50: theme["default"].color.background.sand.E02, primary25: theme["default"].color.background.sand.E01, primary: theme["default"].color.background.sand.E02 }) });
 const getStyles = () => ({
-    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', height: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4), backgroundColor: state.isDisabled
+    control: (_styles, state) => (Object.assign(Object.assign({ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}`, width: '100%', minHeight: styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4), backgroundColor: state.isDisabled
             ? theme["default"].color.background.sand.E01
-            : theme["default"].color.background.white.default, borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}` }, (state.selectProps.errorState && {
+            : theme["default"].color.background.white.default, borderRadius: theme["default"].radius.s, border: `1px solid ${theme["default"].color.line.L01}`, overflow: 'auto' }, (state.selectProps.errorState && {
         borderBottom: `4px solid ${theme["default"].color.notification.error}`,
     })), (!state.menuIsOpen && {
         ':focus-within': {
@@ -79,30 +74,30 @@ const getStyles = () => ({
 const MultiValueRemove = (_a) => {
     var multiValueRemoveProps = tslib.__rest(_a, []);
     return Select.components.MultiValueRemove && (React__default["default"].createElement(Select.components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
-        React__default["default"].createElement(Icon["default"], { icon: hlX["default"], size: "1rem" })));
+        React__default["default"].createElement(Icon["default"], { icon: icons.Close, size: "1rem" })));
 };
 const IndicatorsContainer = (_a) => {
     var { selectProps } = _a, indicatorsContainerProps = tslib.__rest(_a, ["selectProps"]);
     return Select.components.IndicatorsContainer && (React__default["default"].createElement(Select.components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
-        selectProps.errorState && (React__default["default"].createElement(Icon["default"], { icon: hlError["default"], color: theme["default"].color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: hlLock["default"], position: "right" }),
+        selectProps.errorState && (React__default["default"].createElement(Icon["default"], { icon: icons.Error, color: theme["default"].color.notification.error, position: "right" })),
+        selectProps.isDisabled && React__default["default"].createElement(Icon["default"], { icon: icons.Lock, position: "right" }),
         indicatorsContainerProps.children));
 };
 const ClearIndicator = (_a) => {
     var clearIndicatorProps = tslib.__rest(_a, []);
     return Select.components.ClearIndicator && (React__default["default"].createElement(Select.components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default["default"].createElement(Icon["default"], { icon: hlX["default"] })));
+        React__default["default"].createElement(Icon["default"], { icon: icons.Close })));
 };
 const DropdownIndicator = (_a) => {
     var { selectProps } = _a, dropdownIndicatorProps = tslib.__rest(_a, ["selectProps"]);
     const getIcon = () => {
         if (selectProps.isSearchable) {
-            return hlMagnifyingGlass["default"];
+            return icons.Search;
         }
-        return selectProps.menuIsOpen ? hlChevronUp["default"] : hlChevronDown["default"];
+        return selectProps.menuIsOpen ? icons.ChevronUp : icons.ChevronDown;
     };
     return (Select.components.DropdownIndicator && (React__default["default"].createElement(Select.components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
-        React__default["default"].createElement(Icon["default"], { icon: getIcon(), color: "currentColor", size: "1.5rem" }))));
+        React__default["default"].createElement(Icon["default"], { icon: getIcon() }))));
 };
 const SelectBox = (_a) => {
     var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["noOptionsText", 'data-testid']);

package/build/cjs/components/Selectbox/__tests__/Selectbox.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/cjs/components/Tabs/Tab.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
+import type { ReactNode } from 'react';
+import React, { PureComponent } from 'react';
 import type { Type } from './Tabs';
 export interface TabProps {
     activeTab?: string;
     label: string;
     tabStyle?: Type;
     onClick?: (tab: string) => void;
+    children?: ReactNode;
 }
 export interface TabStyleProps {
     isActive?: boolean;
@@ -164,7 +166,7 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -173,7 +175,7 @@ export declare const TabStyle: import("styled-components").StyledComponent<"li",
         pill: string;
     };
 }, TabStyleProps, never>;
-declare class Tab extends React.PureComponent<TabProps> {
+declare class Tab extends PureComponent<TabProps> {
     onClick: () => void;
     render(): React.JSX.Element;
 }

package/build/cjs/components/Tabs/Tab.js

@@ -47,7 +47,7 @@ const TabStyle = styled["default"].li `
             background-color: transparent;
         `}
 `;
-class Tab extends React__default["default"].PureComponent {
+class Tab extends React.PureComponent {
     constructor() {
         super(...arguments);
         this.onClick = () => {