@dnanpm/styleguide 3.2.0 → 3.3.0

package/build/cjs/components/Icons/hlPhone.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlPhone: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlPhone;

package/build/cjs/components/Icons/hlPlaylist.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlPlaylist: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlPlaylist;

package/build/cjs/components/Icons/hlPlus.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlPlus: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlPlus;

package/build/cjs/components/Icons/hlPrepaid.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlPrepaid: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlPrepaid;

package/build/cjs/components/Icons/hlProcessor.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlProcessor: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlProcessor;

package/build/cjs/components/Icons/hlServices.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlServices: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlServices;

package/build/cjs/components/Icons/hlSettings.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlSettings: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlSettings;

package/build/cjs/components/Icons/hlShield.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlShield: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlShield;

package/build/cjs/components/Icons/hlSim.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlSim: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlSim;

package/build/cjs/components/Icons/hlSimSimple.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlSimSimple: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlSimSimple;

package/build/cjs/components/Icons/hlSmile.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlSmile: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlSmile;

package/build/cjs/components/Icons/hlSpeechBubble.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlSpeechBubble: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlSpeechBubble;

package/build/cjs/components/Icons/hlSquaretrade.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlSquaretrade: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlSquaretrade;

package/build/cjs/components/Icons/hlStar.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlStar: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlStar;

package/build/cjs/components/Icons/hlStarFilled.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlStarFilled: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlStarFilled;

package/build/cjs/components/Icons/hlTrash.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlTrash: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlTrash;

package/build/cjs/components/Icons/hlTv.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlTv: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlTv;

package/build/cjs/components/Icons/hlUnlock.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlUnlock: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlUnlock;

package/build/cjs/components/Icons/hlUpload.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlUpload: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlUpload;

package/build/cjs/components/Icons/hlWarning.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlWarning: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlWarning;

package/build/cjs/components/Icons/hlWifi.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlWifi: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlWifi;

package/build/cjs/components/Icons/hlWrench.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlWrench: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlWrench;

package/build/cjs/components/Icons/hlX.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { IconProps, Props as IconComponentProps } from '../Icon/Icon';
+import type { Props as IconComponentProps, IconProps } from '../Icon/Icon';
 declare const hlX: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
 export default hlX;

package/build/cjs/components/Input/Input.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 styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
 var Icon = require('../Icon/Icon.js');
-var hlCheck = require('../Icons/hlCheck.js');
-var hlError = require('../Icons/hlError.js');
-var hlEyeClosed = require('../Icons/hlEyeClosed.js');
-var hlEyeOpen = require('../Icons/hlEyeOpen.js');
-var hlLock = require('../Icons/hlLock.js');
-var hlX = require('../Icons/hlX.js');
 var LabelText = require('../LabelText/LabelText.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,8 +17,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const iconsMap = {
-    success: hlCheck.hlSuccess,
-    error: hlError["default"],
+    success: icons.Check,
+    error: icons.Error,
 };
 const FieldContainer = styled["default"].div `
     color: ${theme["default"].color.text.black};
@@ -160,12 +155,12 @@ const Input = (_a) => {
                 props.showPasswordToggle ||
                 props.disabled ||
                 props.onClearableButtonClick) && (React__default["default"].createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default["default"].createElement(Icon["default"], { icon: showPassword ? hlEyeOpen["default"] : hlEyeClosed["default"], onClick: togglePasswordVisibility })),
+                props.showPasswordToggle && (React__default["default"].createElement(Icon["default"], { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility })),
                 (props.status === 'success' || props.status === 'error') && (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.status], color: theme["default"].color.notification[props.status] })),
-                props.disabled && React__default["default"].createElement(Icon["default"], { icon: hlLock["default"] }),
+                props.disabled && React__default["default"].createElement(Icon["default"], { icon: icons.Lock }),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
-                    !props.disabled && (React__default["default"].createElement(ButtonIcon["default"], { icon: hlX["default"], onClick: props.onClearableButtonClick }))))),
+                    !props.disabled && (React__default["default"].createElement(ButtonIcon["default"], { icon: icons.Close, onClick: props.onClearableButtonClick }))))),
         props.status === 'error' && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
         props.status === 'comment' && props.commentMessage && (React__default["default"].createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };

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

@@ -1,6 +1,10 @@
 import React from 'react';
+import type { BusinessSite } from '../types/globalNavProps';
 interface BusinessMenuProps {
-    ariaLabel: string;
+    ariaLabel?: string;
+    items?: BusinessSite[];
+    lang: string;
+    currentBusinessId?: string;
 }
-declare const BusinessMenu: ({ ariaLabel }: BusinessMenuProps) => React.JSX.Element | null;
+declare const BusinessMenu: ({ ariaLabel, currentBusinessId, items, lang }: BusinessMenuProps) => React.JSX.Element | null;
 export default BusinessMenu;

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

@@ -6,7 +6,6 @@ var React = require('react');
 var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var NavContext = require('../context/NavContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,7 +44,6 @@ const BusinessMenuLink = styled["default"].a `
     }
 `;
 const BusinessMenuList = styled["default"].nav `
-    background-color: ${theme["default"].color.background.plum.E02};
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
     padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)}
@@ -54,17 +52,11 @@ const BusinessMenuList = styled["default"].nav `
         padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
     `};
 `;
-const BusinessMenu = ({ ariaLabel }) => {
-    const { items, lang, resetMenuEvents } = React.useContext(NavContext["default"]);
-    const ref = React.useRef(null);
-    const currentBusinessId = items.businessId;
-    const businessMenuItems = React.useMemo(() => { var _a; return (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items; }, [items.businessSelector]);
-    if (!(businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) ||
-        !currentBusinessId ||
-        (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
+const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
+    if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default["default"].createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", ref: ref, role: "navigation" }, businessMenuItems.map(item => (React__default["default"].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId, onClick: resetMenuEvents }, item.titles[lang])))));
+    return (React__default["default"].createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React__default["default"].createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
 };
 
 exports["default"] = BusinessMenu;

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

@@ -2,6 +2,7 @@
 
 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');
@@ -9,8 +10,6 @@ var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlChevronRight = require('../../Icons/hlChevronRight.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var LinkModifier = require('./LinkModifier.js');
@@ -177,7 +176,7 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     return (React__default["default"].createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
         React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
             React__default["default"].createElement("span", null, menuItem.titles[lang]),
-            React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1rem" })),
+            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronRight, size: "1rem" })),
         React__default["default"].createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {

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

@@ -2,17 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
+var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlGlobe = require('../../Icons/hlGlobe.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,7 +32,7 @@ const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLa
         return null;
     }
     return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default["default"].createElement(Icon["default"], { icon: hlGlobe["default"], size: navigation.navIconSize }),
+        React__default["default"].createElement(Icon["default"], { icon: icons.Globe, size: navigation.navIconSize }),
         React__default["default"].createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

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

@@ -2,14 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
+var theme = require('../../../themes/theme.js');
+var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
-var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlArrowForwardSmall = require('../../Icons/Small/hlArrowForwardSmall.js');
-var hlExternal = require('../../Icons/hlExternal.js');
-var theme = require('../../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +29,7 @@ const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
     const menuItemLink = menuItem.urls[lang] || '';
     const isExternalLink = menuItem.target === '_blank';
     const MenuLinkComponent = (React__default["default"].createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default["default"].createElement(Icon["default"], { icon: isExternalLink ? hlExternal["default"] : hlArrowForwardSmall["default"], size: "1rem", color: theme["default"].color.default.pink })),
+        showIcon && (React__default["default"].createElement(Icon["default"], { icon: isExternalLink ? icons.Open : icons.ArrowRight, size: "1rem", color: theme["default"].color.default.pink })),
         React__default["default"].createElement("span", null, menuItem.titles[lang])));
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
+var navigation = require('../../../themes/themeComponents/navigation.js');
 var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlPerson = require('../../Icons/hlPerson.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const LoginTooltip = ({ isLogged, loginLabel }) => {
     const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext["default"]);
     return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Icon["default"], { icon: hlPerson["default"], size: navigation.navIconSize }),
+        React__default["default"].createElement(Icon["default"], { icon: icons.User, size: navigation.navIconSize }),
         React__default["default"].createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };
 

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

@@ -46,7 +46,8 @@ const IconContainer = styled["default"].div `
 `;
 const Tooltip = styled["default"].div `
     min-height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5)};
-    max-height: calc(var(--vh100, 100vh) - ${navigation.navMaxHeight});
+    // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
+    max-height: calc(var(--vh100, 100vh) - ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 12)});
     width: 100%;
     position: absolute;
     right: 0;

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

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var theme = require('../../../themes/theme.js');
+var navigation = require('../../../themes/themeComponents/navigation.js');
 var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlCart = require('../../Icons/hlCart.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
     const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext["default"]);
     return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme["default"].breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default["default"].createElement(Icon["default"], { icon: hlCart["default"], size: navigation.navIconSize }),
+        React__default["default"].createElement(Icon["default"], { icon: icons.Cart, size: navigation.navIconSize }),
         React__default["default"].createElement("span", null, minicartLabel),
         minicartAmount > 0 && (React__default["default"].createElement(NotificationBadge["default"], { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
 };

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var reactSpring = require('react-spring');
 var styled = require('../../../themes/styled.js');
@@ -9,9 +10,6 @@ var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlChevronLeft = require('../../Icons/hlChevronLeft.js');
-var hlChevronRight = require('../../Icons/hlChevronRight.js');
 var MobileMenuContext = require('../context/MobileMenuContext.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
@@ -115,7 +113,7 @@ const MenuItemBackLink = ({ currentLevel }) => {
     const backLink = getBackLink(menuElements, currentLevel - 1);
     return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
         React__default["default"].createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default["default"].createElement(Icon["default"], { icon: hlChevronLeft["default"], size: "1rem" }),
+            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronLeft, size: "1rem" }),
             backLink.titles[lang])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
@@ -140,7 +138,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
     if (hasChildren && currentLevel < 3) {
         return renderMenuItem(React__default["default"].createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled ? -1 : undefined },
             menuItem.titles[lang],
-            React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1.5rem", color: theme["default"].color.default.pink })));
+            React__default["default"].createElement(Icon["default"], { icon: icons.ChevronRight, color: theme["default"].color.default.pink })));
     }
     return renderMenuItem(React__default["default"].createElement(LinkModifier["default"], { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
 };

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
+var navigation = require('../../../themes/themeComponents/navigation.js');
 var Icon = require('../../Icon/Icon.js');
-require('tslib');
-var hlMagnifyingGlass = require('../../Icons/hlMagnifyingGlass.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const PageSearch = ({ searchLabel }) => {
     const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext["default"]);
     return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
-        React__default["default"].createElement(Icon["default"], { icon: hlMagnifyingGlass["default"], size: navigation.navIconSize }),
+        React__default["default"].createElement(Icon["default"], { icon: icons.Search, size: navigation.navIconSize }),
         React__default["default"].createElement("span", null, searchLabel)));
 };