@dnanpm/styleguide 3.12.3 → 4.0.0

package/build/es/components/ButtonRound/ButtonRound.js

@@ -1,29 +0,0 @@
-import { __rest } from 'tslib';
-import React__default from 'react';
-import { styled } from 'styled-components';
-import theme from '../../themes/theme.js';
-import { getMultipliedSize } from '../../utils/styledUtils.js';
-import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
-
-const ButtonElement = styled(ButtonPrimary) `
-    display: flex;
-    min-width: initial;
-    width: ${getMultipliedSize(theme.base.baseWidth, 3.2)};
-    height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
-    border-radius: ${theme.radius.circle};
-    padding: initial;
-    text-align: center;
-    vertical-align: middle;
-    justify-content: center;
-    align-items: center;
-`;
-/**
- * @visibleName Button Round
- * @deprecated Use `ButtonArrow` component
- */
-const ButtonRound = (_a) => {
-    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
-};
-
-export { ButtonRound as default };

package/build/es/components/Icons/index.js

@@ -1,109 +0,0 @@
-export { default as hlArrowBackSmall } from './Small/hlArrowBackSmall.js';
-export { default as hlArrowForwardSmall } from './Small/hlArrowForwardSmall.js';
-export { default as hlArrowUnderSmall } from './Small/hlArrowUnderSmall.js';
-export { default as hlCalendarSmall } from './Small/hlCalendarSmall.js';
-export { default as hlChevronDownSmall } from './Small/hlChevronDownSmall.js';
-export { default as hlChevronLeftSmall } from './Small/hlChevronLeftSmall.js';
-export { default as hlChevronRightSmall } from './Small/hlChevronRightSmall.js';
-export { default as hlChevronUpSmall } from './Small/hlChevronUpSmall.js';
-export { default as hlClockSmall } from './Small/hlClockSmall.js';
-export { default as hlDownloadSmall } from './Small/hlDownloadSmall.js';
-export { default as hlExternalSmall } from './Small/hlExternalSmall.js';
-export { default as hlUploadSmall } from './Small/hlUploadSmall.js';
-export { default as facebook } from './Social/facebook.js';
-export { default as instagram } from './Social/instagram.js';
-export { default as linkedin } from './Social/linkedin.js';
-export { default as tiktok } from './Social/tiktok.js';
-export { default as twitter } from './Social/twitter.js';
-export { default as youtube } from './Social/youtube.js';
-export { default as hl404 } from './hl404.js';
-export { default as hl4gSim } from './hl4gSim.js';
-export { default as hl5gSim } from './hl5gSim.js';
-export { default as hlBattery } from './hlBattery.js';
-export { default as hlBell } from './hlBell.js';
-export { default as hlCableTVCard } from './hlCableTVCard.js';
-export { default as hlCalendar } from './hlCalendar.js';
-export { default as hlCall } from './hlCall.js';
-export { default as hlCameraBack } from './hlCameraBack.js';
-export { default as hlCameraFront } from './hlCameraFront.js';
-export { default as hlCart } from './hlCart.js';
-export { default as hlCartEmpty } from './hlCartEmpty.js';
-export { default as hlChat } from './hlChat.js';
-export { default as hlCheck, hlSuccess } from './hlCheck.js';
-export { default as hlChevronDown } from './hlChevronDown.js';
-export { default as hlChevronLeft } from './hlChevronLeft.js';
-export { default as hlChevronRight } from './hlChevronRight.js';
-export { default as hlChevronUp } from './hlChevronUp.js';
-export { default as hlCompensation } from './hlCompensation.js';
-export { default as hlCookie } from './hlCookie.js';
-export { default as hlCopy } from './hlCopy.js';
-export { default as hlCoupon } from './hlCoupon.js';
-export { default as hlDelivery } from './hlDelivery.js';
-export { default as hlDigiturva } from './hlDigiturva.js';
-export { default as hlDisplaySize } from './hlDisplaySize.js';
-export { default as hlDocument } from './hlDocument.js';
-export { default as hlDownload } from './hlDownload.js';
-export { default as hlEnvelope } from './hlEnvelope.js';
-export { default as hlError } from './hlError.js';
-export { default as hlEuro } from './hlEuro.js';
-export { default as hlExclamationMark } from './hlExclamationMark.js';
-export { default as hlExpand } from './hlExpand.js';
-export { default as hlExternal } from './hlExternal.js';
-export { default as hlEyeClosed } from './hlEyeClosed.js';
-export { default as hlEyeOpen } from './hlEyeOpen.js';
-export { default as hlFaceId } from './hlFaceId.js';
-export { default as hlFastDelivery } from './hlFastDelivery.js';
-export { default as hlFingerprint } from './hlFingerprint.js';
-export { default as hlGlobe } from './hlGlobe.js';
-export { default as hlHeadphones } from './hlHeadphones.js';
-export { default as hlHeadset } from './hlHeadset.js';
-export { default as hlHeart } from './hlHeart.js';
-export { default as hlHome } from './hlHome.js';
-export { default as hlHub } from './hlHub.js';
-export { default as hlImage } from './hlImage.js';
-export { default as hlInfo } from './hlInfo.js';
-export { default as hlInstallment } from './hlInstallment.js';
-export { default as hlIotSim } from './hlIotSim.js';
-export { default as hlLaptop } from './hlLaptop.js';
-export { default as hlLiveVideo } from './hlLiveVideo.js';
-export { default as hlLock } from './hlLock.js';
-export { default as hlMagnifyingGlass } from './hlMagnifyingGlass.js';
-export { default as hlMarker } from './hlMarker.js';
-export { default as hlMemory } from './hlMemory.js';
-export { default as hlMenu } from './hlMenu.js';
-export { default as hlMinimize } from './hlMinimize.js';
-export { default as hlMinus } from './hlMinus.js';
-export { default as hlMobileData } from './hlMobileData.js';
-export { default as hlMobilePayment } from './hlMobilePayment.js';
-export { default as hlModem } from './hlModem.js';
-export { default as hlMore } from './hlMore.js';
-export { default as hlOs } from './hlOs.js';
-export { default as hlPackage } from './hlPackage.js';
-export { default as hlPaperclip } from './hlPaperclip.js';
-export { default as hlPaytime } from './hlPaytime.js';
-export { default as hlPen } from './hlPen.js';
-export { default as hlPerson } from './hlPerson.js';
-export { default as hlPhone } from './hlPhone.js';
-export { default as hlPlaylist } from './hlPlaylist.js';
-export { default as hlPlus } from './hlPlus.js';
-export { default as hlPrepaid } from './hlPrepaid.js';
-export { default as hlProcessor } from './hlProcessor.js';
-export { default as hlServices } from './hlServices.js';
-export { default as hlSettings } from './hlSettings.js';
-export { default as hlShield } from './hlShield.js';
-export { default as hlSim } from './hlSim.js';
-export { default as hlSimSimple } from './hlSimSimple.js';
-export { default as hlSmile } from './hlSmile.js';
-export { default as hlSpeechBubble } from './hlSpeechBubble.js';
-export { default as hlSquaretrade } from './hlSquaretrade.js';
-export { default as hlStar } from './hlStar.js';
-export { default as hlStarFilled } from './hlStarFilled.js';
-export { default as hlTrash } from './hlTrash.js';
-export { default as hlTv } from './hlTv.js';
-export { default as hlUnlock } from './hlUnlock.js';
-export { default as hlUpload } from './hlUpload.js';
-export { default as hlWarning } from './hlWarning.js';
-export { default as hlWifi } from './hlWifi.js';
-export { default as hlWrench } from './hlWrench.js';
-export { default as hlX } from './hlX.js';
-export { default as hlLink } from './hlLink.js';

package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const BusinessMenu: () => React.JSX.Element | null;
-export default BusinessMenu;

package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -1,51 +0,0 @@
-import React__default, { useContext, useRef } from 'react';
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import NavContext from '../context/NavContext.js';
-
-const BusinessMenuLink = styled.a `
-    color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
-    display: block;
-    text-decoration: none;
-    margin: ${p => !p.$isMobileMenu
-    ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
-    : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};
-    &:hover,
-    &:focus {
-        text-decoration: none;
-        color: ${theme.color.text.pink};
-        outline: none;
-    }
-`;
-const BusinessMenuItem = styled.li `
-    display: flex;
-    overflow: hidden;
-`;
-const BusinessMenuList = styled.ul `
-    display: ${({ $isMobileMenu }) => (!$isMobileMenu ? 'inline-flex' : 'block')};
-    align-items: center;
-    position: relative;
-    list-style: none;
-    margin: ${({ $isMobileMenu }) => $isMobileMenu ? '1rem 0' : `0 ${getMultipliedSize(theme.base.baseWidth, 0.5)}`};
-    padding: 0;
-    background-color: ${theme.color.background.white.default};
-    font-size: ${({ $isMobileMenu }) => $isMobileMenu ? theme.fontSize.default : theme.fontSize.s};
-    height: 100%;
-`;
-const BusinessMenu = () => {
-    var _a;
-    const { items, lang, isMobileMenu, resetMenuEvents } = useContext(NavContext);
-    const ref = useRef(null);
-    const currentBusinessId = items.businessId;
-    const businessMenuItems = (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items;
-    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.createElement(BusinessMenuList, { "$isMobileMenu": isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, "$isActive": item.businessId === currentBusinessId, "$isMobileMenu": isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
-};
-
-export { BusinessMenu as default };

package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.d.ts

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

package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.js

@@ -1,251 +0,0 @@
-import { ChevronRight } from '@dnanpm/icons';
-import React__default, { useContext, useRef, useEffect } from 'react';
-import useOutsideClick from '../../../hooks/useOutsideClick.js';
-import { keyframes, css, styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { subMenuWidth, subMenuWidthXl, menuItemMargin } from '../../../themes/themeComponents/navigation.js';
-import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
-import Box from '../../Box/Box.js';
-import Icon from '../../Icon/Icon.js';
-import NavContext from '../context/NavContext.js';
-import { MenuList, MenuItem, MenuLinkWithChildren } from '../globalNavStyles.js';
-import LinkModifier, { isSelected } from './LinkModifier.js';
-
-const fadeIn = keyframes `
-    0% {
-        opacity: 0;
-        transform: translateY(-5px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
-`;
-const fadeRight = keyframes `
-    0% {
-        opacity: 0;
-        transform: translateX(-5px);
-    }
-    100% {
-        opacity: 1;
-        transform: translate(0px);
-    }
-`;
-const fadeInAnimation = css `
-    animation: ${fadeIn} 0.3s ease-in-out;
-`;
-const fadeRightAnimation = css `
-    animation: ${fadeRight} 0.3s ease-in-out;
-`;
-const noAnimation = css `
-    animation: none;
-`;
-const SubMenuListRight = styled.div `
-    display: ${({ $menuStates, $navItemId }) => $menuStates.level1 && $menuStates.level2 && $menuStates.level2 === $navItemId
-    ? 'block'
-    : 'none'};
-    ${({ $menuStates }) => $menuStates.level2 && $menuStates.animate2 ? fadeRightAnimation : noAnimation};
-    top: -${getMultipliedSize(theme.base.baseHeight, 2)};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    position: absolute;
-    width: ${subMenuWidth};
-    left: 100%;
-    transform: translateY(var(--nav-item-overflow-fix));
-
-    ${media.xl `
-        width: ${subMenuWidthXl};
-    `};
-`;
-const SubMenuItem = styled.li `
-    display: block;
-    position: relative;
-    > a {
-        color: ${p => (p.isHighlighted ? theme.color.text.pink : theme.color.text.black)};
-        span {
-            position: relative;
-            &:after {
-                position: absolute;
-                content: '';
-                width: 100%;
-                bottom: -6px;
-                left: 0;
-                border-bottom: 1px solid
-                    ${p => (p.isHighlighted ? theme.color.default.pink : 'transparent')};
-            }
-        }
-    }
-`;
-const DesktopMenuList = styled(MenuList) `
-    ul {
-        padding-left: 0;
-
-        li {
-            a,
-            button {
-                line-height: ${theme.lineHeight.s};
-                display: flex;
-                width: 100%;
-                align-items: center;
-                padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
-                justify-content: space-between;
-            }
-        }
-    }
-    > li {
-        > a,
-        > button {
-            white-space: nowrap;
-        }
-    }
-    a,
-    button {
-        font-size: ${theme.fontSize.s};
-        ${media.xl `
-            font-size: ${theme.fontSize.default};
-        `};
-    }
-    margin-top: -2px;
-`;
-const DesktopMenuItem = styled(MenuItem) `
-    &:first-child > ${MenuLinkWithChildren} {
-        margin: 0 ${menuItemMargin};
-    }
-    > a,
-    > button {
-        width: auto;
-        display: flex;
-        padding: 0.75rem 0;
-        margin: 0 ${getMultipliedSize(theme.base.baseHeight, 1.3)};
-        ${media.xl `
-            margin: 0 ${menuItemMargin};
-        `};
-        border-bottom: 3px solid ${theme.color.default.white};
-        position: relative;
-        color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
-        &:after {
-            position: absolute;
-            content: '';
-            width: 100%;
-            bottom: -4px;
-            border-bottom: 1px solid ${p => (p.isActive ? theme.color.default.pink : 'transparent')};
-        }
-        &:hover,
-        &:focus {
-            border-bottom: 3px solid ${theme.color.default.white};
-        }
-    }
-    &:hover,
-    &:focus {
-        > a,
-        > button {
-            cursor: pointer;
-            color: ${theme.color.text.pink};
-        }
-    }
-`;
-const SubMenuList = styled.div `
-    position: absolute;
-    left: -${getMultipliedSize(theme.base.baseHeight, 0.5)};
-    display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
-    z-index: ${({ $navZIndex }) => $navZIndex + 1};
-    margin-top: 1px;
-    ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
-    ? fadeInAnimation
-    : noAnimation};
-
-    width: ${subMenuWidth};
-    ${media.xl `
-        width: ${subMenuWidthXl};
-    `};
-    > div {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-`;
-const SubMenuLevel2 = ({ menuItem }) => {
-    const { lang, menuLevel, currentUrl } = useContext(NavContext);
-    // Handle the case where the submenu is not visible
-    const measureRef = useRef(null);
-    useEffect(() => {
-        const subNavArea = measureRef.current;
-        const handleOffSet = () => {
-            if (menuLevel.level2 === menuItem.id && measureRef.current) {
-                const offsetFix = window.innerHeight - subNavArea.getBoundingClientRect().bottom;
-                if (offsetFix < 0) {
-                    subNavArea.style.setProperty('--nav-item-overflow-fix', `${offsetFix}px`);
-                }
-            }
-        };
-        handleOffSet();
-    }, [menuLevel.level2, menuItem.id]);
-    return (React__default.createElement(SubMenuListRight, { role: "menu", "$menuStates": menuLevel, "$navItemId": menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
-        React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
-            React__default.createElement("ul", null, menuItem.pages.map((item, index) => {
-                const menuUrl = item.urls[lang];
-                return (React__default.createElement(SubMenuItem, { key: item.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
-                    React__default.createElement(LinkModifier, { menuItem: item, tabIndex: false })));
-            })))));
-};
-const SubMenuLevel1 = ({ menuItem }) => {
-    const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
-    const level1HasElements = Boolean(menuItem.pages.length);
-    const menuClick = (element) => (e) => {
-        e.preventDefault();
-        handleNavMenuClick(element.id, 'level2');
-    };
-    if (!level1HasElements) {
-        return null;
-    }
-    return (React__default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex, "data-testid": "desktop-nav-menu-ul-level-2" },
-        React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
-            React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
-                const menuUrl = element.urls[lang];
-                if (element.pages.length) {
-                    return (React__default.createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                        React__default.createElement(MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-                            React__default.createElement("span", null, element.titles[lang]),
-                            React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" })),
-                        React__default.createElement(SubMenuLevel2, { menuItem: element })));
-                }
-                return (React__default.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                    React__default.createElement(LinkModifier, { menuItem: element, tabIndex: false })));
-            })))));
-};
-const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
-    const menuClickMain = (element) => (e) => {
-        e.preventDefault();
-        handleNavMenuClick(element.id, 'level1');
-    };
-    const menuUrl = menuItem.urls[lang];
-    return (React__default.createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
-        React__default.createElement(MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-            React__default.createElement("span", null, menuItem.titles[lang])),
-        React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
-};
-const DesktopMenu = () => {
-    var _a;
-    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = useContext(NavContext);
-    const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
-    const ref = useRef(null);
-    useOutsideClick(ref, () => {
-        if (menuLevel.level1 || menuLevel.level2) {
-            resetMenuEvents();
-        }
-    });
-    if (!mainNavigation.length) {
-        return null;
-    }
-    return (React__default.createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
-        var _a;
-        const menuHasChildren = !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
-        if (menuHasChildren) {
-            return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
-        }
-        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
-                isSelected(currentUrl, navElement.urls[lang]) },
-            React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
-    })));
-};
-
-export { DesktopMenu as default };

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { MainNavigationProps } from '../MainNavigation';
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    isActive?: boolean;
-    collapseSize: number;
-}>> & string;
-declare const HeaderNavigationElements: ({ navElementProps, }: {
-    navElementProps: MainNavigationProps;
-}) => React.JSX.Element;
-export default HeaderNavigationElements;

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -1,159 +0,0 @@
-import { Close, Menu } from '@dnanpm/icons';
-import React__default, { useContext } from 'react';
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import breakpoints from '../../../themes/themeComponents/breakpoints.js';
-import { IconContainerWidth, navIconSizeMobile, navIconSize, wideMenuBreakpoint, mobileLogoSize, desktopLogoSize } from '../../../themes/themeComponents/navigation.js';
-import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import DnaLogo from '../../DnaLogo/DnaLogo.js';
-import Icon from '../../Icon/Icon.js';
-import NavContext from '../context/NavContext.js';
-import BusinessMenu from './BusinessMenu.js';
-import DesktopMenu from './DesktopMenu.js';
-import LanguageSelector from './LanguageSelector.js';
-import LoginTooltip from './LoginTooltip.js';
-import MinicartTooltip from './MinicartTooltip.js';
-import PageSearch from './PageSearch.js';
-
-const DesktopMenuContainer = styled.div `
-    height: 100%;
-    display: none;
-    border-bottom: 1px solid ${theme.color.line.L03};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        display: block;
-        padding-left: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-    }
-`;
-const IconContainer = styled.div `
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: ${IconContainerWidth};
-    transition: color 0.2s ease-in-out;
-
-    > span.dnasg-icon > svg {
-        display: block;
-        height: ${navIconSizeMobile};
-        width: ${navIconSizeMobile};
-    }
-    > span.dnasg-icon > svg,
-    > span.dnasg-icon + span {
-        color: ${p => (p.isActive ? theme.color.text.pink : 'inherit')};
-    }
-
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        > span.dnasg-icon > svg {
-            height: ${navIconSize};
-            width: ${navIconSize};
-        }
-        > span.dnasg-icon + span {
-            display: block;
-        }
-    }
-    @media (min-width: ${wideMenuBreakpoint}px) {
-        margin: 0 ${getMultipliedSize(theme.base.baseHeight, 0.4)} 0
-            ${getMultipliedSize(theme.base.baseHeight, 2)};
-    }
-`;
-const HeaderIconContainer = styled.div `
-    display: flex;
-    justify-content: flex-end;
-    border-bottom: 1px solid ${theme.color.line.L03};
-    padding-right: 0;
-    flex: 1 1 100%;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding-right: 1rem;
-    }
-    button {
-        &:focus {
-            outline: none;
-        }
-    }
-`;
-const HeaderIconWrapper = styled.div `
-    display: flex;
-    flex: 1 1 100%;
-    justify-content: space-between;
-    max-width: 18.75rem;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        justify-content: flex-end;
-        flex: 0 0 100%;
-    }
-`;
-const MobileMenuButton = styled.button `
-    display: block;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        display: none;
-    }
-    div > span.dnasg-icon > svg {
-        height: ${navIconSizeMobile};
-        width: ${navIconSizeMobile};
-        margin: 0 auto;
-    }
-    &:focus,
-    &:active {
-        color: ${theme.color.text.pink};
-    }
-    font-size: 100%;
-    font-family: inherit;
-    border: 0;
-    padding: 0;
-    background: transparent;
-`;
-const MenuWrapper = styled.div `
-    height: 50%;
-    white-space: nowrap;
-    align-self: flex-end;
-`;
-const LogoContainer = styled.div `
-    margin: 0;
-    width: ${mobileLogoSize};
-    height: ${mobileLogoSize};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        width: ${desktopLogoSize};
-        height: ${desktopLogoSize};
-    }
-`;
-const HeaderIconWrapperNoMargin = styled.div `
-    margin: 0;
-`;
-const RenderDesktopMenu = ({ collapseSize }) => (React__default.createElement(DesktopMenuContainer, { collapseSize: collapseSize },
-    React__default.createElement(MenuWrapper, null,
-        React__default.createElement(BusinessMenu, null)),
-    React__default.createElement(MenuWrapper, null,
-        React__default.createElement(DesktopMenu, null))));
-const MenuFunctionality = ({ menuProps }) => {
-    var _a;
-    const { collapseSize = breakpoints.md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
-    const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
-    const { handleToggleClick, isMobileMenuOpen } = useContext(NavContext);
-    return (React__default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
-        React__default.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
-            languagesObject && languageSelectorActive && (React__default.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
-                React__default.createElement(LanguageSelector, { currentLanguage: language, languagesObject: languagesObject }))),
-            isSearch && (React__default.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
-                React__default.createElement(PageSearch, { searchLabel: searchLabel }))),
-            isMinicart && (React__default.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
-                React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
-            isLogin && (React__default.createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
-                React__default.createElement(LoginTooltip, { loginLabel: loginLabel }))),
-            React__default.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
-                React__default.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
-                    React__default.createElement(Icon, { icon: isMobileMenuOpen ? Close : Menu, size: "2rem" }))))));
-};
-const HeaderNavigationElements = ({ navElementProps, }) => {
-    var _a;
-    const { collapseSize = breakpoints.md, items, language = 'fi' } = navElementProps;
-    const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HeaderIconWrapperNoMargin, null,
-            React__default.createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
-                React__default.createElement(LogoContainer, { collapseSize: collapseSize },
-                    React__default.createElement(DnaLogo, { size: "100%" })))),
-        React__default.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
-        React__default.createElement(MenuFunctionality, { menuProps: navElementProps })));
-};
-
-export { IconContainer, HeaderNavigationElements as default };

package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.d.ts

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

package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -1,30 +0,0 @@
-import { Globe } from '@dnanpm/icons';
-import React__default, { useContext, useCallback } from 'react';
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
-import NavContext from '../context/NavContext.js';
-import { MenuLink } from '../globalNavStyles.js';
-import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-
-const MenuItem = styled(MenuLink) `
-    font-weight: ${theme.fontWeight.medium};
-    margin: ${getMultipliedSize(theme.base.baseHeight, 1)} auto;
-    text-align: center;
-`;
-const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.createElement(React__default.Fragment, null, Object.entries(languagesObject)
-    .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React__default.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
-const LanguageSelector = ({ currentLanguage, languagesObject }) => {
-    const { isMobileMenu, navZIndex } = useContext(NavContext);
-    const LngComponent = useCallback(() => React__default.createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
-    if (Object.keys(languagesObject).length < 2) {
-        return null;
-    }
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
-        React__default.createElement(Icon, { icon: Globe, size: "2rem" }),
-        React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
-};
-
-export { LanguageSelector as default };