@dnanpm/styleguide 3.12.3 → 4.0.0

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

@@ -1,168 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var icons = require('@dnanpm/icons');
-var React = require('react');
-var styledComponents = require('styled-components');
-var theme = require('../../../themes/theme.js');
-var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var styledUtils = require('../../../utils/styledUtils.js');
-var DnaLogo = require('../../DnaLogo/DnaLogo.js');
-var Icon = require('../../Icon/Icon.js');
-var NavContext = require('../context/NavContext.js');
-var BusinessMenu = require('./BusinessMenu.js');
-var DesktopMenu = require('./DesktopMenu.js');
-var LanguageSelector = require('./LanguageSelector.js');
-var LoginTooltip = require('./LoginTooltip.js');
-var MinicartTooltip = require('./MinicartTooltip.js');
-var PageSearch = require('./PageSearch.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const DesktopMenuContainer = styledComponents.styled.div `
-    height: 100%;
-    display: none;
-    border-bottom: 1px solid ${theme.default.color.line.L03};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        display: block;
-        padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
-    }
-`;
-const IconContainer = styledComponents.styled.div `
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: ${navigation.IconContainerWidth};
-    transition: color 0.2s ease-in-out;
-
-    > span.dnasg-icon > svg {
-        display: block;
-        height: ${navigation.navIconSizeMobile};
-        width: ${navigation.navIconSizeMobile};
-    }
-    > span.dnasg-icon > svg,
-    > span.dnasg-icon + span {
-        color: ${p => (p.isActive ? theme.default.color.text.pink : 'inherit')};
-    }
-
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        > span.dnasg-icon > svg {
-            height: ${navigation.navIconSize};
-            width: ${navigation.navIconSize};
-        }
-        > span.dnasg-icon + span {
-            display: block;
-        }
-    }
-    @media (min-width: ${navigation.wideMenuBreakpoint}px) {
-        margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.4)} 0
-            ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
-    }
-`;
-const HeaderIconContainer = styledComponents.styled.div `
-    display: flex;
-    justify-content: flex-end;
-    border-bottom: 1px solid ${theme.default.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 = styledComponents.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 = styledComponents.styled.button `
-    display: block;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        display: none;
-    }
-    div > span.dnasg-icon > svg {
-        height: ${navigation.navIconSizeMobile};
-        width: ${navigation.navIconSizeMobile};
-        margin: 0 auto;
-    }
-    &:focus,
-    &:active {
-        color: ${theme.default.color.text.pink};
-    }
-    font-size: 100%;
-    font-family: inherit;
-    border: 0;
-    padding: 0;
-    background: transparent;
-`;
-const MenuWrapper = styledComponents.styled.div `
-    height: 50%;
-    white-space: nowrap;
-    align-self: flex-end;
-`;
-const LogoContainer = styledComponents.styled.div `
-    margin: 0;
-    width: ${navigation.mobileLogoSize};
-    height: ${navigation.mobileLogoSize};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        width: ${navigation.desktopLogoSize};
-        height: ${navigation.desktopLogoSize};
-    }
-`;
-const HeaderIconWrapperNoMargin = styledComponents.styled.div `
-    margin: 0;
-`;
-const RenderDesktopMenu = ({ collapseSize }) => (React__default.default.createElement(DesktopMenuContainer, { collapseSize: collapseSize },
-    React__default.default.createElement(MenuWrapper, null,
-        React__default.default.createElement(BusinessMenu.default, null)),
-    React__default.default.createElement(MenuWrapper, null,
-        React__default.default.createElement(DesktopMenu.default, null))));
-const MenuFunctionality = ({ menuProps }) => {
-    var _a;
-    const { collapseSize = breakpoints.default.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 } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
-        React__default.default.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
-            languagesObject && languageSelectorActive && (React__default.default.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
-                React__default.default.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject }))),
-            isSearch && (React__default.default.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
-                React__default.default.createElement(PageSearch.default, { searchLabel: searchLabel }))),
-            isMinicart && (React__default.default.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
-                React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
-            isLogin && (React__default.default.createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
-                React__default.default.createElement(LoginTooltip.default, { loginLabel: loginLabel }))),
-            React__default.default.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
-                React__default.default.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
-                    React__default.default.createElement(Icon.default, { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: "2rem" }))))));
-};
-const HeaderNavigationElements = ({ navElementProps, }) => {
-    var _a;
-    const { collapseSize = breakpoints.default.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.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(HeaderIconWrapperNoMargin, null,
-            React__default.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.default.createElement(LogoContainer, { collapseSize: collapseSize },
-                    React__default.default.createElement(DnaLogo.default, { size: "100%" })))),
-        React__default.default.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
-        React__default.default.createElement(MenuFunctionality, { menuProps: navElementProps })));
-};
-
-exports.IconContainer = IconContainer;
-exports.default = HeaderNavigationElements;

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var icons = require('@dnanpm/icons');
-var React = require('react');
-var styledComponents = require('styled-components');
-var theme = require('../../../themes/theme.js');
-var styledUtils = require('../../../utils/styledUtils.js');
-var Icon = require('../../Icon/Icon.js');
-var NavContext = require('../context/NavContext.js');
-var globalNavStyles = require('../globalNavStyles.js');
-var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const MenuItem = styledComponents.styled(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 }) => {
-    const { isMobileMenu, navZIndex } = React.useContext(NavContext.default);
-    const LngComponent = React.useCallback(() => React__default.default.createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
-    if (Object.keys(languagesObject).length < 2) {
-        return null;
-    }
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
-        React__default.default.createElement(Icon.default, { icon: icons.Globe, size: "2rem" }),
-        React__default.default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
-};
-
-exports.default = LanguageSelector;

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/LinkModifier.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var NavContext = require('../context/NavContext.js');
-var globalNavStyles = require('../globalNavStyles.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(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 }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext.default);
-    const menuItemLink = menuItem.urls[lang] || '';
-    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        const NextJSLinkComponent = nextJSLinkComponent;
-        return (React__default.default.createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
-            React__default.default.createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined },
-                React__default.default.createElement("span", null, menuItem.titles[lang]))));
-    }
-    return (React__default.default.createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
-        React__default.default.createElement("span", null, menuItem.titles[lang])));
-};
-
-exports.default = LinkModifier;
-exports.isSelected = isSelected;

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/LoginTooltip.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var icons = require('@dnanpm/icons');
-var React = require('react');
-var Icon = require('../../Icon/Icon.js');
-var NavContext = require('../context/NavContext.js');
-var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const LoginTooltip = ({ loginLabel }) => {
-    const globalStateString = 'login';
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
-        React__default.default.createElement(Icon.default, { icon: icons.User, size: "2rem" }),
-        React__default.default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)));
-};
-
-exports.default = LoginTooltip;

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -1,104 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var useCloseOutsideOrElementClicked = require('../../../hooks/useCloseOutsideOrElementClicked.js');
-var useDocHeight = require('../../../hooks/useDocHeight.js');
-var styledComponents = require('styled-components');
-var theme = require('../../../themes/theme.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var styledUtils = require('../../../utils/styledUtils.js');
-var Box = require('../../Box/Box.js');
-var NavContext = require('../context/NavContext.js');
-var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Container = styledComponents.styled.div `
-    width: 100%;
-`;
-const Tooltip = styledComponents.styled.div `
-    min-height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 5)};
-    max-height: calc(var(--vh100, 100vh) - ${navigation.mobileNavMaxHeight});
-    width: 100%;
-    position: absolute;
-    right: 0;
-    top: ${navigation.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)};
-    }
-    ${styledUtils.media.md `
-        max-height: calc(var(--vh100, 100vh) - (${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight}));
-        top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
-    `};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(var(--vh100, 100vh) - (${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight}));
-        top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
-    }
-`;
-const TooltipBox = styledComponents.styled(Box.default) `
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    min-height: inherit;
-    max-height: inherit;
-`;
-const Caret = styledComponents.styled.div `
-    position: absolute;
-    z-index: ${p => p.zIndex + 1};
-    top: ${navigation.mobileNavMaxHeight};
-    transform: translate3d(50%, -50%, 0) rotate(-45deg);
-    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
-    height: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
-    background-color: ${theme.default.color.default.white};
-    border: 1px solid ${theme.default.color.line.L03};
-    border-width: 1px 1px 0 0;
-    margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.85)};
-    ${styledUtils.media.md `
-        top: calc(${navigation.mobileNavMaxHeight} + ${navigation.ribbonHeight});
-    `};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(var(--vh100, 100vh) - ${navigation.desktopNavMaxHeight});
-        top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
-    }
-`;
-const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme.default.breakpoints.xs, }) => {
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext.default);
-    const ref = React.useRef(null);
-    const globalStateKey = globalStateString;
-    const ContentComponent = contentComponent;
-    useDocHeight.default();
-    React.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.default({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateKey]) {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
-        }
-    });
-    return (React__default.default.createElement(Container, { ref: ref },
-        React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
-        tooltipItems[globalStateKey] && React__default.default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-        tooltipItems[globalStateKey] && ContentComponent && (React__default.default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
-            React__default.default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
-                React__default.default.createElement(ContentComponent, { mobileView: isMobileMenu }))))));
-};
-
-exports.default = MainNavTooltipMenu;

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -1,62 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styledComponents = require('styled-components');
-var theme = require('../../../themes/theme.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-
-const TooltipWrapper = styledComponents.styled.button `
-    position: relative;
-    border: none;
-    margin: 0;
-    padding: 0;
-    overflow: visible;
-    background: transparent;
-    color: ${p => (p.isHighlighted ? theme.default.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.default.color.text.pink : theme.default.color.text.black)};
-        }
-    }
-    &:active,
-    &:focus {
-        span.dnasg-icon > svg,
-        > span {
-            color: ${theme.default.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: ${navigation.IconContainerWidth};
-        }
-        font-size: ${theme.default.fontSize.xs};
-        font-weight: ${theme.default.fontWeight.book};
-    }
-`;
-
-exports.TooltipWrapper = TooltipWrapper;
-exports.default = TooltipWrapper;

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.js

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

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

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