@dnanpm/styleguide 3.12.3 → 4.0.0

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

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

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

@@ -1,29 +0,0 @@
-import React__default, { useContext } from 'react';
-import NavContext from '../context/NavContext.js';
-import { MenuLink } from '../globalNavStyles.js';
-
-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 }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
-    const menuItemLink = menuItem.urls[lang] || '';
-    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        const NextJSLinkComponent = nextJSLinkComponent;
-        return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
-            React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined },
-                React__default.createElement("span", null, menuItem.titles[lang]))));
-    }
-    return (React__default.createElement(MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
-        React__default.createElement("span", null, menuItem.titles[lang])));
-};
-
-export { LinkModifier as default, isSelected };

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

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

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

@@ -1,15 +0,0 @@
-import { User } from '@dnanpm/icons';
-import React__default, { useContext } from 'react';
-import Icon from '../../Icon/Icon.js';
-import NavContext from '../context/NavContext.js';
-import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-
-const LoginTooltip = ({ loginLabel }) => {
-    const globalStateString = 'login';
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
-        React__default.createElement(Icon, { icon: User, size: "2rem" }),
-        React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)));
-};
-
-export { LoginTooltip as default };

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

@@ -1,24 +0,0 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-export interface MainNavTooltipMenuProps {
-    /** Tooltip menu content */
-    children?: ReactNode;
-    /** Overlap other elements */
-    zIndex?: number;
-    /** Tooltip position from right. Default: 1.25rem */
-    tooltipRight?: string;
-    /** Component provided for tooltip content */
-    contentComponent?: ReactNode | boolean | undefined;
-    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
-    closeWhenTagClicked?: string[];
-    /** Width of the opened menu content. default 20rem. */
-    contentWidth?: string;
-    /** This will define the global state object string. mandatory */
-    globalStateString: string;
-    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
-    fullWidthDesktop?: boolean;
-    /** Adjust menu to be full width after this number. default xs (480). */
-    fullWidthBreakpoint?: number;
-}
-declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => React.JSX.Element;
-export default MainNavTooltipMenu;

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

@@ -1,96 +0,0 @@
-import React__default, { useContext, useRef, useEffect } from 'react';
-import useCloseOutsideOrElementClicked from '../../../hooks/useCloseOutsideOrElementClicked.js';
-import useDocHeight from '../../../hooks/useDocHeight.js';
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { mobileNavMaxHeight, ribbonHeight, desktopNavMaxHeight } from '../../../themes/themeComponents/navigation.js';
-import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
-import Box from '../../Box/Box.js';
-import NavContext from '../context/NavContext.js';
-import TooltipWrapper from './MainNavTooltipMenuExportedStyles.js';
-
-const Container = styled.div `
-    width: 100%;
-`;
-const Tooltip = styled.div `
-    min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
-    max-height: calc(var(--vh100, 100vh) - ${mobileNavMaxHeight});
-    width: 100%;
-    position: absolute;
-    right: 0;
-    top: ${mobileNavMaxHeight};
-    z-index: ${p => p.zIndex};
-    display: flex;
-    flex-direction: row;
-
-    @media (min-width: ${p => p.fullWidthBreakpoint}px) {
-        width: ${p => p.contentWidth};
-        right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
-    }
-    ${media.md `
-        max-height: calc(var(--vh100, 100vh) - (${mobileNavMaxHeight} + ${ribbonHeight}));
-        top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
-    `};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(var(--vh100, 100vh) - (${desktopNavMaxHeight} + ${ribbonHeight}));
-        top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
-    }
-`;
-const TooltipBox = styled(Box) `
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    min-height: inherit;
-    max-height: inherit;
-`;
-const Caret = styled.div `
-    position: absolute;
-    z-index: ${p => p.zIndex + 1};
-    top: ${mobileNavMaxHeight};
-    transform: translate3d(50%, -50%, 0) rotate(-45deg);
-    width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
-    height: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
-    background-color: ${theme.color.default.white};
-    border: 1px solid ${theme.color.line.L03};
-    border-width: 1px 1px 0 0;
-    margin-left: ${getMultipliedSize(theme.base.baseWidth, 1.85)};
-    ${media.md `
-        top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
-    `};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(var(--vh100, 100vh) - ${desktopNavMaxHeight});
-        top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
-    }
-`;
-const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme.breakpoints.xs, }) => {
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
-    const ref = useRef(null);
-    const globalStateKey = globalStateString;
-    const ContentComponent = contentComponent;
-    useDocHeight();
-    useEffect(() => {
-        setTooltipItems({
-            minicart: showMinicart,
-            login: showLoginTooltip,
-            search: false,
-        });
-    }, [showMinicart, showLoginTooltip, setTooltipItems]);
-    const toggleState = () => {
-        resetMenuEvents();
-        setTimeout(() => {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
-        });
-    };
-    useCloseOutsideOrElementClicked({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateKey]) {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
-        }
-    });
-    return (React__default.createElement(Container, { ref: ref },
-        React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
-        tooltipItems[globalStateKey] && React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
-            React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
-                React__default.createElement(ContentComponent, { mobileView: isMobileMenu }))))));
-};
-
-export { MainNavTooltipMenu as default };

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

@@ -1,6 +0,0 @@
-declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    collapseSize: number;
-    isHighlighted?: boolean;
-}>> & string;
-export default TooltipWrapper;
-export { TooltipWrapper };

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

@@ -1,57 +0,0 @@
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { IconContainerWidth } from '../../../themes/themeComponents/navigation.js';
-
-const TooltipWrapper = styled.button `
-    position: relative;
-    border: none;
-    margin: 0;
-    padding: 0;
-    overflow: visible;
-    background: transparent;
-    color: ${p => (p.isHighlighted ? theme.color.text.pink : 'inherit')};
-    font: inherit;
-    line-height: normal;
-    -webkit-font-smoothing: inherit;
-    -moz-osx-font-smoothing: inherit;
-    -webkit-appearance: none;
-    width: 100%;
-    cursor: pointer;
-    &:hover {
-        span.dnasg-icon > svg,
-        > span {
-            color: ${p => (p.isHighlighted ? theme.color.text.pink : theme.color.text.black)};
-        }
-    }
-    &:active,
-    &:focus {
-        span.dnasg-icon > svg,
-        > span {
-            color: ${theme.color.text.pink};
-        }
-    }
-    span.dnasg-icon > svg {
-        align-content: center;
-        display: flex;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
-            height: 1.625em;
-            width: 1.625em;
-        }
-        margin: 0 auto;
-    }
-    span.dnasg-icon + span {
-        width: 100%;
-        display: none;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
-            display: block;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            max-width: ${IconContainerWidth};
-        }
-        font-size: ${theme.fontSize.xs};
-        font-weight: ${theme.fontWeight.book};
-    }
-`;
-
-export { TooltipWrapper, TooltipWrapper as default };

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

@@ -1,7 +0,0 @@
-import React from 'react';
-interface MinicartTooltipProps {
-    minicartAmount: number;
-    minicartLabel?: string;
-}
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
-export default MinicartTooltip;

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

@@ -1,18 +0,0 @@
-import { Cart } from '@dnanpm/icons';
-import React__default, { useContext } from 'react';
-import theme from '../../../themes/theme.js';
-import Icon from '../../Icon/Icon.js';
-import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
-import NavContext from '../context/NavContext.js';
-import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-
-const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const globalStateString = 'minicart';
-    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
-        React__default.createElement(Icon, { icon: Cart, size: "2rem" }),
-        React__default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
-};
-
-export { MinicartTooltip as default };

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

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

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

@@ -1,185 +0,0 @@
-import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
-import React__default, { useContext, useRef, useMemo } from 'react';
-import { useSpring, animated } from 'react-spring';
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { menuLevelsAmount, mobileNavMaxHeight, ribbonHeight } from '../../../themes/themeComponents/navigation.js';
-import { media, getMultipliedSize } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
-import MobileMenuContext from '../context/MobileMenuContext.js';
-import NavContext from '../context/NavContext.js';
-import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren } from '../globalNavStyles.js';
-import BusinessMenu from './BusinessMenu.js';
-import LinkModifier, { isSelected } from './LinkModifier.js';
-
-const MobileMenuWrapper = styled.div `
-    width: ${100 * menuLevelsAmount}%;
-`;
-const mobileMenuWithRibbon = `calc(100vh - ${mobileNavMaxHeight} - ${ribbonHeight})`;
-const mobileMenuNoRibbon = `calc(100vh - ${mobileNavMaxHeight})`;
-const MobileMenuContainer = styled.div `
-    width: 100%;
-    position: absolute;
-    top: ${mobileNavMaxHeight};
-    left: 0;
-    overflow: hidden;
-    overflow-y: auto;
-    transition: max-height 0.2s ease-in-out;
-    background: ${theme.color.background.white.default};
-    max-height: ${mobileMenuNoRibbon};
-    height: ${mobileMenuNoRibbon};
-    ${media.md `
-        top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
-        max-height: ${mobileMenuWithRibbon};
-        height: ${mobileMenuWithRibbon};
-    `};
-`;
-const MenuLinkBackLink = styled(MenuLink) ``;
-const MobileMenu = styled.div `
-    background: ${theme.color.background.white.default};
-    ${MenuList} {
-        display: block;
-        float: left;
-        width: ${100 / menuLevelsAmount}%;
-        position: relative;
-        min-height: ${mobileMenuNoRibbon};
-        ${media.md `
-            min-height: ${mobileMenuWithRibbon};
-        `};
-        &:first-of-type {
-            background: ${theme.color.background.white.default};
-            > ${MenuItem} > ${MenuLink} {
-                font-weight: ${theme.fontWeight.medium};
-                border-bottom: 1px solid ${theme.color.line.L04};
-            }
-        }
-        &:not(:first-of-type) {
-            background: ${theme.color.background.sand.default};
-        }
-
-        ${MenuItem} {
-            display: block;
-            &:last-of-type {
-                margin-bottom: 2rem;
-            }
-        }
-    }
-    ${MenuLink}, ${MenuLinkWithChildren} {
-        line-height: ${theme.lineHeight.default};
-        padding: ${getMultipliedSize(theme.base.baseHeight, 1.75)}
-            ${getMultipliedSize(theme.base.baseWidth, 1.5)}
-            ${getMultipliedSize(theme.base.baseHeight, 1.75)}
-            ${getMultipliedSize(theme.base.baseWidth, 2)};
-        font-size: ${theme.fontSize.default};
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        justify-content: space-between;
-    }
-    ${MenuLinkBackLink} {
-        font-weight: ${theme.fontWeight.medium};
-        background: ${theme.color.background.white.default};
-        color: ${theme.color.text.pink};
-        justify-content: flex-start;
-        span.dnasg-icon {
-            margin-right: ${getMultipliedSize(theme.base.baseWidth, 4)};
-        }
-    }
-    ${MenuLink}:hover {
-        cursor: pointer;
-    }
-`;
-const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = useContext(NavContext);
-    const levels = {
-        level1Items,
-        level2Items,
-    };
-    const menuElementLevel = `level${currentLevel - 1}Items`;
-    const menuElements = levels[menuElementLevel];
-    const mobileMenuBackClick = (e) => {
-        e.preventDefault();
-        handleNavMenuClick(null, `level${currentLevel - 1}Mobile`);
-    };
-    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
-    const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React__default.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default.createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React__default.createElement(Icon, { icon: ChevronLeft, size: "1rem" }),
-            backLink.titles[lang])));
-};
-const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
-    var _a;
-    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang, currentUrl, } = useContext(NavContext);
-    const { mobileMenuRef } = useContext(MobileMenuContext);
-    const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
-    const indexLevel = currentLevel - 1;
-    const tabNavigationDisabled = () => scrollPosition !== indexLevel;
-    const menuUrl = menuItem.urls[lang] || '';
-    const mobileMenuClick = (element) => (e) => {
-        var _a;
-        if (typeof ((_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === 'function') {
-            mobileMenuRef.current.scroll({
-                top: 0,
-                left: 0,
-                behavior: 'smooth',
-            });
-        }
-        e.preventDefault();
-        handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
-    };
-    if (hasChildren && currentLevel < 3) {
-        return (React__default.createElement(MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl) },
-            React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
-                menuItem.titles[lang],
-                React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" }))));
-    }
-    return (React__default.createElement(MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) },
-        React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));
-};
-const SubMenuMobile = ({ currentLevel, menuItem }) => {
-    const navElements = menuItem.pages;
-    if (!navElements.length) {
-        return null;
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        navElements.map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { menuItem: subMenuItem, currentLevel: currentLevel, key: subMenuItem.id, itemIndex: index })))));
-};
-const NavigationMenuMobile = () => {
-    const { items, menuLevel, level1Items, level2Items } = useContext(NavContext);
-    const { mainNavigation } = items;
-    if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
-        return null;
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 0, "aria-disabled": menuLevel.scrollPosition !== 0, "data-testid": "mobile-nav-menu-level-1", isInView: menuLevel.scrollPosition === 0 },
-            React__default.createElement(SubMenuMobile, { currentLevel: 1, menuItem: mainNavigation }),
-            React__default.createElement(MenuItem, { key: "business-item", "aria-hidden": menuLevel.scrollPosition !== 0, role: "menuitem" },
-                React__default.createElement(BusinessMenu, null))),
-        menuLevel.level1Mobile !== null && (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 1, "aria-disabled": menuLevel.scrollPosition !== 1, "data-testid": "mobile-nav-menu-level-2", isInView: menuLevel.scrollPosition === 1 },
-            React__default.createElement(SubMenuMobile, { currentLevel: 2, menuItem: level1Items[menuLevel.level1Mobile] }))),
-        menuLevel.level2Mobile !== null && (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 2, "aria-disabled": menuLevel.scrollPosition !== 2, "data-testid": "mobile-nav-menu-level-3", isInView: menuLevel.scrollPosition === 2 },
-            React__default.createElement(SubMenuMobile, { currentLevel: 3, menuItem: level2Items[menuLevel.level2Mobile] })))));
-};
-const RenderMobileMenu = () => {
-    const { menuLevel, isMobileMenuOpen } = useContext(NavContext);
-    const mobileMenuRef = useRef(null);
-    const slidingMenuAnimation = useSpring({
-        transform: `translateX(${(menuLevel.scrollPosition / menuLevelsAmount) * -100}%)`,
-    });
-    const mobileMenuContext = useMemo(() => ({
-        mobileMenuRef,
-    }), [mobileMenuRef]);
-    if (!isMobileMenuOpen) {
-        return null;
-    }
-    return (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React__default.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
-            React__default.createElement(MobileMenu, null,
-                React__default.createElement(MobileMenuWrapper, null,
-                    React__default.createElement(animated.div, { style: slidingMenuAnimation },
-                        React__default.createElement(NavigationMenuMobile, null)))))));
-};
-
-export { RenderMobileMenu as default };

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

@@ -1,6 +0,0 @@
-import React from 'react';
-interface PageSearchProps {
-    searchLabel?: string;
-}
-declare const PageSearch: ({ searchLabel }: PageSearchProps) => React.JSX.Element;
-export default PageSearch;

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

@@ -1,15 +0,0 @@
-import { Search } from '@dnanpm/icons';
-import React__default, { useContext } from 'react';
-import Icon from '../../Icon/Icon.js';
-import NavContext from '../context/NavContext.js';
-import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-
-const PageSearch = ({ searchLabel }) => {
-    const globalStateString = 'search';
-    const { navZIndex, searchComponent: SearchComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
-        React__default.createElement(Icon, { icon: Search, size: "2rem" }),
-        React__default.createElement("span", null, searchLabel)));
-};
-
-export { PageSearch as default };

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { LangProps } from '../../../types/language';
-export interface RibbonDataProps {
-    ribbonLink: LangProps;
-    ribbonIcon: string;
-    ribbonTexts: LangProps;
-}
-interface Props {
-    ribbonData: RibbonDataProps[];
-    lang?: string;
-}
-declare const Ribbon: ({ ribbonData, lang }: Props) => React.JSX.Element;
-export default Ribbon;

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

@@ -1,66 +0,0 @@
-import React__default from 'react';
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-import { ribbonHeight } from '../../../themes/themeComponents/navigation.js';
-import { media, getMultipliedSize } from '../../../utils/styledUtils.js';
-import Icon from '../../Icon/Icon.js';
-
-const RibbonContainer = styled.div `
-    display: none;
-    ${media.md `
-        background: ${theme.color.background.sand.E01};
-        display: block;
-    `};
-`;
-const RibbonItems = styled.div `
-    max-width: 1290px;
-    height: ${ribbonHeight};
-    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
-const RibbonColumn = styled.div `
-    flex: 1 1 auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: ${theme.color.text.gray};
-    font-size: ${theme.fontSize.xs};
-    border-right: 2px solid ${theme.color.line.L03};
-    &:last-of-type {
-        border: none;
-    }
-
-    span.dnasg-icon {
-        margin-right: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-    }
-
-    a {
-        display: flex;
-        align-items: center;
-        color: ${theme.color.text.gray};
-        &:hover,
-        &:focus,
-        &:active {
-            text-decoration: none;
-            color: ${theme.color.text.pink};
-            border: none;
-            outline: none;
-        }
-        &:focus {
-            text-decoration: underline;
-        }
-    }
-`;
-const Ribbon = ({ ribbonData, lang = 'fi' }) => (React__default.createElement(RibbonContainer, null,
-    React__default.createElement(RibbonItems, null, ribbonData.map(ribbon => (React__default.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
-        ribbon.ribbonLink[lang] && (React__default.createElement("a", { href: ribbon.ribbonLink[lang] },
-            React__default.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem" }),
-            React__default.createElement("span", null, ribbon.ribbonTexts[lang]))),
-        !ribbon.ribbonLink[lang] && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem" }),
-            React__default.createElement("span", null, ribbon.ribbonTexts[lang])))))))));
-
-export { Ribbon as default };

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

@@ -1,38 +0,0 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { RibbonDataProps } from './ChildComponents/Ribbon';
-import type { GlobalNavItems } from './types/globalNavProps';
-export interface MainNavigationProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    items?: GlobalNavItems;
-    language?: string;
-    zIndex?: number;
-    search?: boolean;
-    searchText?: string;
-    searchComponent?: ReactNode | boolean;
-    minicart?: boolean;
-    minicartText?: string;
-    minicartAmount?: number;
-    minicartComponent?: ReactNode | boolean;
-    showMinicart?: boolean;
-    showLoginTooltip?: boolean;
-    login?: boolean;
-    loginText?: string;
-    loginComponent?: ReactNode | boolean;
-    isLoggedIn?: boolean;
-    collapseSize?: number;
-    languageSelector?: boolean;
-    nextJSLinkComponent: ReactNode | boolean;
-    ribbon?: boolean;
-    ribbonData?: RibbonDataProps[];
-    currentUrl?: string;
-    notificationText?: string;
-}
-/**
- * @visibleName Main Navigation
- * @deprecated Use `MainHeaderNavigation` component
- */
-declare const MainNavigation: ({ items, language, zIndex, languageSelector, search, searchText, searchComponent, minicart, minicartText, minicartComponent, minicartAmount, showMinicart, showLoginTooltip, login, loginText, loginComponent, isLoggedIn, collapseSize, nextJSLinkComponent, ribbon, ribbonData, className, currentUrl, notificationText, }: MainNavigationProps) => React.JSX.Element;
-/** @component */
-export default MainNavigation;