@dnanpm/styleguide 3.0.0 → 3.2.0

package/build/cjs/components/Input/Input.js

@@ -7,12 +7,14 @@ 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 }; }
@@ -29,12 +31,46 @@ const FieldContainer = styled["default"].div `
 `;
 const FieldWrapper = styled["default"].div `
     position: relative;
+    display: flex;
+    border-radius: ${theme["default"].radius.s};
+    border: 1px solid ${theme["default"].color.line.L01};
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    background-color: ${theme["default"].color.background.white.default};
+
+    ${({ status }) => status === 'error' &&
+    `
+        border-bottom: 4px solid ${theme["default"].color.notification.error};
+    `}
+
+    ${({ $type }) => $type === 'range' &&
+    `
+        border: 0;
+        background: none;
+    `}
+
+    ${({ $type }) => $type === 'hidden' &&
+    `
+        display: none;
+    `} 
+
+    ${({ $disabled }) => $disabled &&
+    `
+        background-color: ${theme["default"].color.background.sand.E01};
+    `} 
+
+    &:focus-within {
+        border: 2px solid ${theme["default"].color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        border-radius: ${theme["default"].radius.s};
+    }
 `;
 const IconWrapper = styled["default"].div `
-    position: absolute;
-    z-index: 1;
-    top: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 1.25)};
-    right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    display: flex;
+    flex-wrap: nowrap;
+    border-radius: ${theme["default"].radius.s};
+    align-items: center;
 
     & span.dnasg-icon {
         margin-left: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 2)};
@@ -51,16 +87,12 @@ const StyledInput = styled["default"].input `
     vertical-align: middle;
     font-family: ${theme["default"].fontFamily.default};
     font-size: ${theme["default"].fontSize.default};
-    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-    width: 100%;
-    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
     border-radius: ${theme["default"].radius.s};
-    border: 1px solid ${theme["default"].color.line.L01};
-
-    ${({ status }) => status === 'error' &&
-    `
-        border-bottom: 4px solid ${theme["default"].color.notification.error};
-    `}
+    width: 100%;
+    border: 0 none;
+    outline: 0;
+    padding: 0;
+    background: transparent;
 
     &[type='range'] {
         appearance: auto;
@@ -71,21 +103,10 @@ const StyledInput = styled["default"].input `
         display: none;
     }
 
-    &:disabled,
-    &[disabled] {
-        background-color: ${theme["default"].color.background.sand.E01};
-    }
-
     &:invalid {
         box-shadow: none;
     }
 
-    &:focus {
-        border: 2px solid ${theme["default"].color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
-        outline: none;
-    }
-
     &::placeholder {
         color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T40};
     }
@@ -133,12 +154,18 @@ const Input = (_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`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default["default"].createElement(FieldWrapper, null,
-            React__default["default"].createElement(StyledInput, { status: props.status, id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId }),
-            (props.status || props.showPasswordToggle || props.disabled) && (React__default["default"].createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default["default"].createElement(Icon["default"], { onClick: togglePasswordVisibility, icon: showPassword ? hlEyeOpen["default"] : hlEyeClosed["default"] })),
+        React__default["default"].createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
+            React__default["default"].createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
+            ((props.status && props.status !== 'comment') ||
+                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.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: hlLock["default"] }),
+                props.onClearableButtonClick &&
+                    Boolean(props.value) &&
+                    !props.disabled && (React__default["default"].createElement(ButtonIcon["default"], { icon: hlX["default"], 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/Label/Label.d.ts

@@ -1,5 +1,6 @@
+import type { ReactNode } from 'react';
 import React from 'react';
-declare type LabelType = 'campaign' | 'new' | 'presale' | 'other';
+type LabelType = 'campaign' | 'new' | 'presale' | 'other';
 interface Props {
     /**
      * Allows to change the background color of component
@@ -8,7 +9,7 @@ interface Props {
     /**
      * Content of Label component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass a custom className
      */
@@ -18,6 +19,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Label;

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

@@ -1,5 +1,6 @@
+import type { ReactNode } from 'react';
 import React from 'react';
-declare type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
+type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
 interface Props {
     /**
      * Unique ID for the component
@@ -8,7 +9,7 @@ interface Props {
     /**
      * Content of LabelText component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass a custom 'for' attribute
      */
@@ -39,5 +40,5 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Label Text */
-declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default LabelText;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface BusinessMenuProps {
+    ariaLabel: string;
+}
+declare const BusinessMenu: ({ ariaLabel }: BusinessMenuProps) => React.JSX.Element | null;
+export default BusinessMenu;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const BusinessMenuLink = styled["default"].a `
+    background-color: ${p => p.isActive ? theme["default"].color.background.white.default : theme["default"].color.background.plum.E02};
+    color: ${p => (p.isActive ? theme["default"].color.text.black : theme["default"].color.text.white)};
+    font-family: ${theme["default"].fontFamily.default};
+    font-weight: ${theme["default"].fontWeight.medium};
+    font-size: ${theme["default"].fontSize.xs};
+    line-height: ${theme["default"].lineHeight.s};
+    border-radius: ${theme["default"].radius.pill};
+    display: block;
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+    ${styledUtils.media.md `
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)} ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    `};
+    ${styledUtils.media.xs `
+        font-size: ${theme["default"].fontSize.s};
+    `};
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+        color: ${p => (p.isActive ? theme["default"].color.text.black : theme["default"].color.text.white)};
+        background-color: ${p => p.isActive
+    ? theme["default"].color.background.white.default
+    : theme["default"].color.background.plum.default};
+        outline: none;
+    }
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.light},
+            0px 0px 0px 4px ${theme["default"].color.focus.dark};
+    }
+`;
+const 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)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    ${styledUtils.media.md `
+        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)) {
+        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])))));
+};
+
+exports["default"] = BusinessMenu;

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const DesktopMenu: FC;
+export default DesktopMenu;

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

@@ -0,0 +1,207 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useOutsideClick = require('../../../hooks/useOutsideClick.js');
+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 hlChevronRight = require('../../Icons/hlChevronRight.js');
+var NavContext = require('../context/NavContext.js');
+var globalNavStyles = require('../globalNavStyles.js');
+var LinkModifier = require('./LinkModifier.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const fadeIn = styled.keyframes `
+    0% {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+`;
+const fadeInAnimation = styled.css `
+    animation: ${fadeIn} 0.3s ease-in-out;
+`;
+const noAnimation = styled.css `
+    animation: none;
+`;
+const MegaMenuContent = styled["default"].ul `
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    padding-left: 0;
+`;
+const CategoryTitle = styled["default"].span `
+    display: flex;
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)}
+        ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    ${styledUtils.media.xl `
+        font-size: ${theme["default"].fontSize.xl};
+    `}
+`;
+const CategoryBlock = styled["default"].li `
+    display: block;
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)} 0;
+    border-right: 1px solid ${theme["default"].color.line.L03};
+
+    a {
+        font-size: ${theme["default"].fontSize.s};
+        line-height: ${theme["default"].lineHeight.s};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 3)};
+        &:hover,
+        &:focus {
+            background-color: ${theme["default"].color.background.sand.E01};
+        }
+        ${styledUtils.media.xl `
+            font-size: ${theme["default"].fontSize.default};
+            line-height: ${theme["default"].lineHeight.default};
+        `}
+    }
+`;
+const CategoryCollectionBlock = styled["default"](CategoryBlock) `
+    background-color: ${theme["default"].color.background.sand.E01};
+`;
+const SubMenuItem = styled["default"].li `
+    > a {
+        color: ${p => (p.isHighlighted ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+        font-weight: ${p => (p.isHighlighted ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book)};
+        }
+    }
+`;
+const DesktopMenuList = styled["default"](globalNavStyles.MenuList) `
+    @media (min-width: ${p => p.collapseSize + 1}px) {
+        flex-direction: row;
+        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+    }
+    ul {
+        li {
+            a {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+    > li {
+        > a,
+        > button {
+            white-space: nowrap;
+            text-decoration: none;
+        }
+    }
+`;
+const DesktopMenuItem = styled["default"](globalNavStyles.MenuItem) `
+    > a,
+    > button {
+        width: auto;
+        display: flex;
+        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+        align-items: center;
+        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
+        height: 100%;
+        font-weight: ${theme["default"].fontWeight.medium};
+
+        > span:first-child {
+            position: relative;
+            &:after {
+                position: absolute;
+                content: '';
+                width: 100%;
+                bottom: -22px;
+                left: 0;
+                border-bottom: 2px solid
+                    ${p => (p.isActive ? theme["default"].color.default.pink : 'transparent')};
+            }
+        }
+    }
+`;
+// MEGAMENU 1st level
+const SubMenuList = styled["default"].div `
+    position: absolute;
+    top: ${navigation.navMaxHeight};
+    left: 0;
+    right: 0;
+    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
+    z-index: ${({ navZIndex }) => navZIndex + 1};
+    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    ? fadeInAnimation
+    : noAnimation};
+    background-color: ${theme["default"].color.background.white.default};
+    max-height: calc(100vh - ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3)} - ${navigation.headerMaxHeight});
+    border-bottom: 1px solid ${theme["default"].color.line.L03};
+    overflow: auto;
+    ul {
+        padding: 0;
+        list-style: none;
+    }
+`;
+const SubMenuLevel1 = ({ menuItem }) => {
+    const { categoryCollectionText, collapseSize, currentUrl, lang, menuLevel, navZIndex } = React.useContext(NavContext["default"]);
+    const level1HasElements = !!menuItem.pages.length;
+    const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
+    // Helper function to render a sub menu item
+    const renderSubMenuItem = (element, index, currUrl) => (React__default["default"].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
+        React__default["default"].createElement(LinkModifier["default"], { menuItem: element, tabIndex: false })));
+    if (!level1HasElements) {
+        return null;
+    }
+    return (React__default["default"].createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
+        React__default["default"].createElement(MegaMenuContent, null,
+            pagesWithSubItems.slice(0, 5).map(element => (React__default["default"].createElement(CategoryBlock, { key: element.id },
+                React__default["default"].createElement(CategoryTitle, null, element.titles[lang]),
+                React__default["default"].createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+            pagesWithSubItems.length > 5 && (React__default["default"].createElement(CategoryCollectionBlock, null,
+                React__default["default"].createElement(CategoryTitle, null, categoryCollectionText),
+                React__default["default"].createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+                    .slice(5)
+                    .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
+            React__default["default"].createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default["default"].createElement(LinkModifier["default"], { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+};
+const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
+    const { lang, handleNavMenuClick, currentUrl, menuLevel } = React.useContext(NavContext["default"]);
+    const menuClickMain = (element) => () => {
+        handleNavMenuClick(element.id, 'level1');
+    };
+    return (React__default["default"].createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
+        React__default["default"].createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+            React__default["default"].createElement("span", null, menuItem.titles[lang]),
+            React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1rem" })),
+        React__default["default"].createElement(SubMenuLevel1, { menuItem: menuItem })));
+};
+const DesktopMenu = () => {
+    var _a;
+    const { items, lang, resetMenuEvents, menuLevel, currentUrl, collapseSize } = React.useContext(NavContext["default"]);
+    const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
+    const ref = React.useRef(null);
+    useOutsideClick["default"](ref, () => {
+        if (menuLevel.level1 || menuLevel.level2) {
+            resetMenuEvents();
+        }
+    });
+    if (!mainNavigation.length) {
+        return null;
+    }
+    return (React__default["default"].createElement(DesktopMenuList, { role: "menu", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul", collapseSize: collapseSize }, mainNavigation.map((navElement, index) => {
+        var _a;
+        const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
+        if (displaySubMenu) {
+            return (React__default["default"].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+        }
+        return (React__default["default"].createElement(DesktopMenuItem, { key: navElement.id, role: "presentation", "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
+            React__default["default"].createElement(LinkModifier["default"], { menuItem: navElement, tabIndex: false })));
+    })));
+};
+
+exports["default"] = DesktopMenu;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { LanguageSelectorProps } from '../types/globalNavProps';
+declare const LanguageSelector: ({ currentLanguage, languagesObject, languageSelectorLabel, }: LanguageSelectorProps) => React.JSX.Element | null;
+export default LanguageSelector;

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MenuItem = styled["default"](globalNavStyles.MenuLink) `
+    font-weight: ${theme["default"].fontWeight.medium};
+    margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} auto;
+    text-align: center;
+`;
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(languagesObject)
+    .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
+    .map(([key, value]) => (React__default["default"].createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLabel, }) => {
+    const { isMobileMenu, navZIndex } = React.useContext(NavContext["default"]);
+    const LngComponent = React.useCallback(() => (React__default["default"].createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
+    if (Object.keys(languagesObject).length < 2) {
+        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("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
+};
+
+exports["default"] = LanguageSelector;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MenuLevelItem } from '../types/globalNavProps';
+interface LinkModifierProps {
+    menuItem: MenuLevelItem;
+    tabIndex: boolean;
+    showIcon?: boolean;
+}
+export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
+declare const LinkModifier: ({ menuItem, tabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
+export default LinkModifier;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
+    if (currentUrl && linkUrl) {
+        let url = linkUrl;
+        if (url.includes('http')) {
+            url = url.replace(/^.*\/\/[^/]+/, '');
+        }
+        return exactMatch ? url === currentUrl : currentUrl.includes(url);
+    }
+    return false;
+};
+const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
+const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
+    const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext["default"]);
+    const menuItemLink = menuItem.urls[lang] || '';
+    const isExternalLink = menuItem.target === '_blank';
+    const MenuLinkComponent = (React__default["default"].createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (React__default["default"].createElement(Icon["default"], { icon: isExternalLink ? hlExternal["default"] : hlArrowForwardSmall["default"], size: "1rem", color: theme["default"].color.default.pink })),
+        React__default["default"].createElement("span", null, menuItem.titles[lang])));
+    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
+        const NextJSLinkComponent = nextJSLinkComponent;
+        return (React__default["default"].createElement(NextJSLinkComponent, { linkUrl: menuItemLink }, MenuLinkComponent));
+    }
+    return MenuLinkComponent;
+};
+
+exports["default"] = LinkModifier;
+exports.isSelected = isSelected;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LoginTooltipProp {
+    isLogged?: boolean;
+    loginLabel?: string;
+}
+declare const LoginTooltip: ({ isLogged, loginLabel }: LoginTooltipProp) => React.JSX.Element;
+export default LoginTooltip;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+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 }; }
+
+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("span", { "data-testid": "header-login-label" }, loginLabel)))));
+};
+
+exports["default"] = LoginTooltip;