@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -11,36 +11,92 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         };
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
     color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
     };
     fontFamily: {
         default: string;
@@ -98,6 +154,13 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
 }, {
     isActive?: boolean | undefined;
     collapseSize: number;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('../../../themes/styled.js');
+var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var DnaLogo = require('../../DnaLogo/DnaLogo.js');
@@ -23,15 +24,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DesktopMenuContainer = styled['default'].div `
+const DesktopMenuContainer = styled["default"].div `
     height: 100%;
     display: none;
-    border-bottom: 1px solid ${p => p.theme.color.gray15};
+    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 = styled['default'].div `
+const IconContainer = styled["default"].div `
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -47,7 +49,7 @@ const IconContainer = styled['default'].div `
     }
     > span.dnasg-icon > svg,
     > span.dnasg-icon + span {
-        color: ${p => (p.isActive ? p.theme.color.hotPink : 'inherit')};
+        color: ${p => (p.isActive ? theme["default"].color.text.pink : 'inherit')};
     }
 
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -60,14 +62,14 @@ const IconContainer = styled['default'].div `
         }
     }
     @media (min-width: ${navigation.wideMenuBreakpoint}px) {
-        margin: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 0.4)} 0
-            ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
+        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.4)} 0
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
     }
 `;
-const HeaderIconContainer = styled['default'].div `
+const HeaderIconContainer = styled["default"].div `
     display: flex;
     justify-content: flex-end;
-    border-bottom: 1px solid ${p => p.theme.color.gray15};
+    border-bottom: 1px solid ${theme["default"].color.line.L03};
     padding-right: 0;
     flex: 1 1 100%;
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -79,7 +81,7 @@ const HeaderIconContainer = styled['default'].div `
         }
     }
 `;
-const HeaderIconWrapper = styled['default'].div `
+const HeaderIconWrapper = styled["default"].div `
     display: flex;
     flex: 1 1 100%;
     justify-content: space-between;
@@ -89,7 +91,7 @@ const HeaderIconWrapper = styled['default'].div `
         flex: 0 0 100%;
     }
 `;
-const MobileMenuButton = styled['default'].button `
+const MobileMenuButton = styled["default"].button `
     display: block;
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
@@ -101,7 +103,7 @@ const MobileMenuButton = styled['default'].button `
     }
     &:focus,
     &:active {
-        color: ${p => p.theme.color.hotPink};
+        color: ${theme["default"].color.text.pink};
     }
     font-size: 100%;
     font-family: inherit;
@@ -109,12 +111,12 @@ const MobileMenuButton = styled['default'].button `
     padding: 0;
     background: transparent;
 `;
-const MenuWrapper = styled['default'].div `
+const MenuWrapper = styled["default"].div `
     height: 50%;
     white-space: nowrap;
     align-self: flex-end;
 `;
-const LogoContainer = styled['default'].div `
+const LogoContainer = styled["default"].div `
     margin: 0;
     width: ${navigation.mobileLogoSize};
     height: ${navigation.mobileLogoSize};
@@ -123,49 +125,48 @@ const LogoContainer = styled['default'].div `
         height: ${navigation.desktopLogoSize};
     }
 `;
-const HeaderIconWrapperNoMargin = styled['default'].div `
+const HeaderIconWrapperNoMargin = styled["default"].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 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))));
 // TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
 // { menuProps: MainNavigationProps }
 const MenuFunctionality = ({ menuProps }) => {
     const { collapseSize, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount, login: isLogin, loginText: loginLabel, language: languageId, languageSelector: languageSelectorActive, items, } = menuProps;
     const languagesObject = items && items.languageSelector && items.languageSelector.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: languageId, languagesObject: languagesObject, collapseSize: collapseSize }))),
-            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 ? hlX['default'] : hlMenu['default'], size: "2rem" }))))));
+    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: languageId, languagesObject: languagesObject, collapseSize: collapseSize }))),
+            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 ? hlX["default"] : hlMenu["default"], size: "2rem" }))))));
 };
 // TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
 // { navElementProps: MainNavigationProps }
 const HeaderNavigationElements = ({ navElementProps }) => {
+    var _a;
     const { collapseSize, items, language } = navElementProps;
-    const currentBusinessSite = items &&
-        items.businessSelector &&
-        items.businessSelector.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.urls[language], title: "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 })));
+    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.urls[language], title: "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;
+exports["default"] = HeaderNavigationElements;

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

@@ -4,69 +4,39 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styled = require('../../../themes/styled.js');
-var colors = require('../../../themes/themeComponents/colors.js');
+var theme = require('../../../themes/theme.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var TooltipMenu = require('../../TooltipMenu/TooltipMenu.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 MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TooltipWrapper = styled['default'].div `
-    font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.l};
-    margin: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    span.dnasg-icon > svg {
-        width: 1.6em;
-        height: 1.6em;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
-            width: 1.2em;
-            height: 1.2em;
-        }
-    }
-
-    &:hover span {
-        color: ${colors['default'].hotPink};
-    }
-    span.dnasg-icon + span {
-        display: none;
-        margin-top: 4px;
-        font-size: 0.8125rem;
-        font-weight: ${p => p.theme.fontWeight.book};
-        text-align: center;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
-            display: block;
-        }
-    }
-    ${globalNavStyles.MenuLink} {
-        font-weight: ${p => p.theme.fontWeight.bold};
-        font-size: ${p => p.theme.fontSize.default};
-        margin: 0rem 1.5rem;
-        padding: 0.5rem 0;
-        width: 1.5rem;
-        text-align: center;
-        border-bottom: 1px solid ${colors['default'].gray15};
-        &:last-of-type {
-            border-bottom: none;
-        }
-    }
+const MenuContainer = styled["default"].div `
+    margin: auto;
+`;
+const MenuItem = styled["default"](globalNavStyles.MenuLink) `
+    font-weight: ${theme["default"].fontWeight.medium};
+    margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)} auto;
 `;
 const LanguageSelector = ({ currentLanguage, languagesObject, collapseSize, }) => {
-    const { navZIndex } = React__default['default'].useContext(NavContext['default']);
+    const { isMobileMenu, navZIndex } = React__default["default"].useContext(NavContext["default"]);
     const languageKeys = Object.keys(languagesObject);
     const languageSelectorKeys = languageKeys.filter(key => key.toLowerCase() !== currentLanguage.toLowerCase());
+    const LangComponent = () => (React__default["default"].createElement(MenuContainer, null, languageSelectorKeys.map(key => (React__default["default"].createElement(MenuItem, { key: `language-${key}`, href: languagesObject[key] }, key.toUpperCase())))));
     if (!languageSelectorKeys.length) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return (React__default['default'].createElement(TooltipWrapper, { collapseSize: collapseSize },
-        React__default['default'].createElement(TooltipMenu['default'], { selector: currentLanguage.toUpperCase(), zIndex: (navZIndex + 1).toString(), activeColor: colors['default'].hotPink, tooltipTop: "3.5rem", tooltipIconName: "hlGlobe", tooltipChevron: false }, languageSelectorKeys.map(key => (React__default['default'].createElement(globalNavStyles.MenuLink, { key: `language-${key}`, href: languagesObject[key] }, key.toUpperCase()))))));
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: (navZIndex + 1).toString(), tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LangComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
+        React__default["default"].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize },
+            React__default["default"].createElement(Icon["default"], { icon: hlGlobe["default"], size: "2rem" }),
+            React__default["default"].createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase()))));
 };
 
-exports.default = LanguageSelector;
+exports["default"] = LanguageSelector;

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

@@ -21,16 +21,16 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 const LinkModifier = ({ menuItem, tabIndex }) => {
-    const { lang, nextJSLinkComponent: NextJSLinkComponent, resetMenuEvents, } = React.useContext(NavContext['default']);
+    const { lang, nextJSLinkComponent: NextJSLinkComponent, resetMenuEvents, } = React.useContext(NavContext["default"]);
     const menuItemLink = menuItem.urls[lang] || '';
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        return (React__default['default'].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
-            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]))));
+        return (React__default["default"].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
+            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]))));
     }
-    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])));
+    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["default"] = LinkModifier;
 exports.isSelected = isSelected;

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var colors = require('../../../themes/themeComponents/colors.js');
 var Icon = require('../../Icon/Icon.js');
 require('tslib');
 var hlPerson = require('../../Icons/hlPerson.js');
@@ -16,11 +15,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const LoginTooltip = ({ loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent, collapseSize, isLoggedIn, } = React__default['default'].useContext(NavContext['default']);
-    return (React__default['default'].createElement(MainNavTooltipMenu['default'], { zIndex: (navZIndex + 1).toString(), color: isLoggedIn ? colors['default'].hotPink : colors['default'].text, activeColor: colors['default'].hotPink, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: "login", closeWhenTagClicked: ['a', 'button'] },
-        React__default['default'].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(LoginComponent) },
-            React__default['default'].createElement(Icon['default'], { icon: hlPerson['default'], size: "2rem" }),
-            React__default['default'].createElement("span", { "data-testid": "header-login-label" }, loginLabel))));
+    const globalStateString = 'login';
+    const { navZIndex, isMobileMenu, loginComponent: LoginComponent, collapseSize, isLoggedIn, tooltipItems, } = React__default["default"].useContext(NavContext["default"]);
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: (navZIndex + 1).toString(), tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
+        React__default["default"].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] || isLoggedIn },
+            React__default["default"].createElement(Icon["default"], { icon: hlPerson["default"], size: "2rem" }),
+            React__default["default"].createElement("span", { "data-testid": "header-login-label" }, loginLabel))));
 };
 
-exports.default = LoginTooltip;
+exports["default"] = LoginTooltip;

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

@@ -1,29 +1,19 @@
 import React from 'react';
 export interface MainNavTooltipMenuProps {
-    /** Allows to pass a custom className */
-    className?: string;
     /** Tooltip menu content */
     children?: React.ReactNode;
-    /** Size of chevron icon. Default: 1rem  */
-    iconSize?: string;
     /** Overlap other elements */
     zIndex?: string;
-    /** Color of the selector elements. default textColor */
-    color?: string;
-    /** Color of the active selector elements. default hotPink */
-    activeColor?: string;
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
     contentComponent?: React.FC<{
         mobileView: boolean;
     }>;
-    /** 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 */
+    /** 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;
-    /** Set overflow-y for tooltip: default true; */
-    overflowY?: boolean;
     /** 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. */
@@ -31,5 +21,5 @@ export interface MainNavTooltipMenuProps {
     /** Adjust menu to be full width after this number. default xs (480). */
     fullWidthBreakpoint?: number;
 }
-declare const MainNavTooltipMenu: ({ className, activeColor, color, children, zIndex, tooltipRight, contentWidth, contentComponent: ContentComponent, closeWhenTagClicked, overflowY, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => JSX.Element;
+declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent: ContentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => JSX.Element;
 export default MainNavTooltipMenu;