@dnanpm/styleguide 3.12.3 → 4.0.1

package/build/es/components/Icon/Icon.js

@@ -3,9 +3,7 @@ import React__default from 'react';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import * as index from '../Icons/index.js';
 
-const IconsList = index;
 const IconContainer = styled.span `
     display: inline-flex;
     width: ${({ size }) => size};
@@ -27,14 +25,9 @@ const IconContainer = styled.span `
     }
 `;
 const Icon = (_a) => {
-    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const RenderIcon = name && IconsList[name];
-    return (React__default.createElement(React__default.Fragment, null,
-        RenderIcon && (React__default.createElement(IconContainer, { "$position": props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
-            React__default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__default.createElement(IconContainer, { onClick: props.onClick, "$position": props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
-            React__default.createElement(IconParam, { size: size, color: color })))));
+    var { icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = __rest(_a, ["icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
+    return (React__default.createElement(IconContainer, { onClick: props.onClick, "$position": props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
+        React__default.createElement(IconParam, { size: size, color: color })));
 };
 
 export { Icon as default };

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

@@ -2,10 +2,6 @@ import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import React from 'react';
 type InputStatus = 'none' | 'success' | 'error' | 'comment';
 type InputType = 'email' | 'hidden' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'url';
-/**
- * @deprecated Use `DateTimePicker` component
- */
-type InputTypeDeprecated = 'date' | 'month' | 'time' | 'week';
 interface Props {
     /**
      * Unique ID for the input element
@@ -28,14 +24,9 @@ interface Props {
      * @param {InputType} text Single-line text field
      * @param {InputType} url Used for entering a URL and supported with browser validation
      *
-     * @param {InputTypeDeprecated} date DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} month DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} time DEPRECATED Use `DateTimePicker` component
-     * @param {InputTypeDeprecated} week DEPRECATED Use `DateTimePicker` component
-     *
      * @default 'text'
      */
-    type?: InputType | InputTypeDeprecated;
+    type?: InputType;
     /**
      * Default value of input element
      */

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
+type LabelTextStatus = 'error';
 interface Props {
     /**
      * Unique ID for the component
@@ -18,12 +18,7 @@ interface Props {
      * Styling of `label` element changes depending on the passed status
      *
      * @param {LabelTextStatus} undefined Default styling
-     * @param {LabelTextStatus} info Changes color to default color (this type will be deprecated in the future)
-     * @param {LabelTextStatus} success Changes color to default color (this type will be deprecated in the future)
-     * @param {LabelTextStatus} warning Changes color to default color (this type will be deprecated in the future)
      * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
-     *
-     * @deprecated info, success and warning are deprecated, please switch to default or error status
      */
     status?: LabelTextStatus;
     /**

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

@@ -1,29 +1,30 @@
 import { Globe } from '@dnanpm/icons';
-import React__default, { useContext, useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
-import { navIconSize } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import NavContext from '../context/NavContext.js';
 import { MenuLink } from '../globalNavStyles.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MenuItem = styled(MenuLink) `
+const MenuWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    margin: ${getMultipliedSize(theme.base.baseHeight, 2)}
+        ${getMultipliedSize(theme.base.baseHeight, 3)};
     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)
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.createElement(MenuWrapper, null, Object.entries(languagesObject)
     .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
-    .map(([key, value]) => (React__default.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+    .map(([key, value]) => (React__default.createElement(MenuLink, { key: `language-${key}`, href: value }, key.toUpperCase())))));
 const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLabel, }) => {
-    const { isMobileMenu, navZIndex } = useContext(NavContext);
     const LngComponent = useCallback(() => (React__default.createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
     if (Object.keys(languagesObject).length < 2) {
         return null;
     }
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default.createElement(Globe, { size: navIconSize }),
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: "auto" },
+        React__default.createElement(Globe, null),
         React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

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

@@ -4,8 +4,8 @@ import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
+    const { isMobileMenu, loginComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem' }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(User, null),
         React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };

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

@@ -6,13 +6,11 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     ariaLabel?: string;
     /** Tooltip menu content */
     children?: ReactNode;
-    /** Overlap other elements */
-    zIndex?: number;
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
     contentComponent?: ComponentType<ContentProps> | ReactNode | 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 className="no-close" in element */
     closeWhenTagClicked?: string[];
     /** Width of the opened menu content. default 20rem. */
     contentWidth?: string;
@@ -27,5 +25,5 @@ export declare const IconContainer: import("styled-components/dist/types").IStyl
     $isActive?: boolean;
     $collapseSize: number;
 }>> & string;
-declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
+declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

@@ -41,9 +41,7 @@ const Tooltip = styled.div `
     min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
     // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
     max-height: calc(var(--vh100, 100vh) - ${getMultipliedSize(theme.base.baseHeight, 12)});
-    width: 100%;
     position: absolute;
-    right: 0;
     top: ${navMaxHeight};
     z-index: ${p => p.$zIndex};
     display: flex;
@@ -77,8 +75,8 @@ const Caret = styled.div `
     }
 `;
 const MainNavTooltipMenu = (_a) => {
-    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
+    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem' } = _a, props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight"]);
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, navZIndex, } = useContext(NavContext);
     const ref = useRef(null);
     const globalStateKey = globalStateString;
     const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
@@ -105,8 +103,8 @@ const MainNavTooltipMenu = (_a) => {
     return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
         globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], "$isLoggedIn": isLoginItemAndLoggedIn, "$collapseSize": collapseSize, "$isHighlighted": tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
         tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Caret, { "$zIndex": zIndex, "$collapseSize": collapseSize }),
-            React__default.createElement(Tooltip, { "$zIndex": zIndex, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
+            React__default.createElement(Caret, { "$zIndex": navZIndex + 1, "$collapseSize": collapseSize }),
+            React__default.createElement(Tooltip, { "$zIndex": navZIndex + 1, "$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 })))))));
 };

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

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

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

@@ -4,8 +4,8 @@ import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+    const { searchComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0" },
         React__default.createElement(Search, null),
         React__default.createElement("span", null, searchLabel)));
 };

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

@@ -19,12 +19,6 @@ export interface MainHeaderNavigationProps {
     minicartText?: string;
     minicartAmount?: number;
     minicartAmountLabel?: string;
-    /**
-     * Defines MinicartComponent when used. If minicart is true but component is not provided, shown as disabled element.
-     *
-     * @deprecated Use `onCartButtonClick` property instead
-     */
-    minicartComponent?: ComponentType | ReactNode | boolean;
     showMinicart?: boolean;
     /**
      * On Cart button click callback
@@ -47,6 +41,6 @@ export interface MainHeaderNavigationProps {
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, nextJSLinkLegacyBehavior, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartText, nextJSLinkComponent, nextJSLinkLegacyBehavior, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainHeaderNavigation;

package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js

@@ -126,7 +126,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, nextJSLinkLegacyBehavior = true, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "nextJSLinkLegacyBehavior", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartText = 'Ostoskori', nextJSLinkComponent = false, nextJSLinkLegacyBehavior = true, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartText", "nextJSLinkComponent", "nextJSLinkLegacyBehavior", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
     const { isMobile } = useWindowSize(collapseSize);
     const navigationEl = useRef(null);
     const key = prop('id');
@@ -246,7 +246,6 @@ const MainHeaderNavigation = (_a) => {
             level2Items,
             loginComponent,
             menuLevel,
-            minicartComponent,
             navZIndex: zIndex,
             nextJSLinkComponent,
             nextJSLinkLegacyBehavior,
@@ -272,7 +271,6 @@ const MainHeaderNavigation = (_a) => {
         level2Items,
         loginComponent,
         menuLevel,
-        minicartComponent,
         nextJSLinkComponent,
         nextJSLinkLegacyBehavior,
         searchComponent,

package/build/es/components/MainHeaderNavigation/context/NavContext.d.ts

@@ -17,7 +17,6 @@ export interface NavContextProps {
     lang: string;
     loginComponent?: ComponentType | ReactNode | boolean;
     menuLevel: MenuStates;
-    minicartComponent?: ComponentType | ReactNode | boolean;
     navZIndex: number;
     nextJSLinkComponent: ComponentType | ReactNode | boolean;
     nextJSLinkLegacyBehavior?: boolean;

package/build/es/components/MainHeaderNavigation/context/NavContext.js

@@ -36,7 +36,6 @@ const NavContext = createContext({
         scrollPosition: 0,
         hideOnScroll: false,
     },
-    minicartComponent: undefined,
     navZIndex: 1030,
     nextJSLinkComponent: false,
     nextJSLinkLegacyBehavior: true,

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

@@ -63,11 +63,6 @@ interface Props {
      * Allows to set property `aria-label` for content element
      */
     contentLabel?: string;
-    /**
-     * Allows changing CSS property `max-width` for Modal content wrapper element.
-     * @deprecated Replaced with 'size' property
-     */
-    maxWidth?: string;
     /**
      * Allows to change the size of the component.
      * Size in mobile view is always 100% of the window size

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

@@ -17,12 +17,6 @@ interface Props {
      * @default false
      */
     isExpanded?: boolean;
-    /**
-     * Allows to show component in expanded state on init and immediately close after load
-     *
-     * @deprecated Use `isExpanded` property
-     */
-    seoInitExpanded?: boolean;
     /**
      * On ButtonIcon mouse click callback.
      */
@@ -46,20 +40,6 @@ interface Props {
      * @default '10rem'
      */
     collapsedSize?: string;
-    /**
-     * Allows to change the label of ButtonIcon.
-     * Note: Ignored when `isStateless` is set to true
-     *
-     * @deprecated Use `buttonLabel` property
-     */
-    showMoreText?: string;
-    /**
-     * Allows to change the label of ButtonIcon.
-     * Note: Ignored when `isStateless` is set to true
-     *
-     * @deprecated Use `buttonLabel` property
-     */
-    showLessText?: string;
     /**
      * Allows to pass a custom className
      */

package/build/es/components/ReadMore/ReadMore.js

@@ -36,14 +36,13 @@ const StyledButtonIcon = styled(ButtonIcon) `
 /** @visibleName Read More */
 const ReadMore = (_a) => {
     var { collapsedSize = '10rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["collapsedSize", 'data-testid']);
-    const [expanded, setExpanded] = useState(props.seoInitExpanded === true || false);
+    const [expanded, setExpanded] = useState(false);
     const contentRef = useRef(null);
     const buttonRef = useRef(null);
     const userInteractedRef = useRef(false);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
     const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
     const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
-    const temporaryButtonLabel = temporaryStateManagement ? props.showLessText : props.showMoreText;
     const handleOnClick = (event) => {
         if (props.onClick) {
             props.onClick(event);
@@ -53,11 +52,6 @@ const ReadMore = (_a) => {
         }
         userInteractedRef.current = true;
     };
-    useEffect(() => {
-        if (props.seoInitExpanded) {
-            setExpanded(false);
-        }
-    }, [props.seoInitExpanded]);
     useEffect(() => {
         var _a, _b;
         if (userInteractedRef.current) {
@@ -84,7 +78,7 @@ const ReadMore = (_a) => {
     return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
         React__default.createElement(Content, { ref: contentRef, "$isExpanded": temporaryStateManagement, "$collapsedSize": collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, Children.map(props.children, forceTabIndexOnTextLinks)),
         React__default.createElement(ButtonWrapper, { "$buttonPosition": props.buttonPosition },
-            React__default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick, "aria-expanded": temporaryStateManagement }, temporaryButtonLabel || props.buttonLabel))));
+            React__default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick, "aria-expanded": temporaryStateManagement }, props.buttonLabel))));
 };
 
 export { ReadMore as default };

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

@@ -1,10 +1,6 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type Type = 'box' | 'panel' | 'underlined';
-/**
- * @deprecated Use `box`, `panel` or `underlined` types
- */
-type TypeDeprecated = 'default' | 'gray';
 export interface Props {
     /**
      * Unique ID for the component
@@ -21,45 +17,21 @@ export interface Props {
      * @param {Type} panel Content container remains unstyled
      * @param {Type} underlined Tab label is visually similar to anchor, with content container unstyled
      *
-     * @param {TypeDeprecated} default DEPRECATED Use `box` type
-     * @param {TypeDeprecated} gray DEPRECATED Use `box`, `panel` or `underlined` types
-     *
      * @default 'box'
      */
-    type?: Type | TypeDeprecated;
-    /**
-     * Style of the tab
-     *
-     * @deprecated Use `type` property
-     */
-    tabStyle?: Type;
+    type?: Type;
     /**
      * Content of the component
      */
     children?: ReactNode;
-    /**
-     * Allows to define currently active tab
-     *
-     * @deprecated Use `isActive` property
-     */
-    activeTab?: string;
     /**
      * Allows to set tab as active
      */
     isActive?: boolean;
-    /**
-     * Allows to enable updated internal state management.
-     * Note: In updated internal state management, this component acts as truly stateless and can be controlled with `isActive` property.
-     *
-     * @deprecated Will be removed in next major release
-     */
-    isStateless?: boolean;
     /**
      * On tab label click callback
-     *
-     * @deprecated Parameter `tab` has been deprecated. Use `e` parameter instead
      */
-    onClick?: (tab: string, e?: MouseEvent<HTMLElement>) => void;
+    onClick?: (label: string, e?: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/es/components/Tab/Tab.js

@@ -3,8 +3,6 @@ import React__default from 'react';
 import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import Box from '../Box/Box.js';
-import Divider from '../Divider/Divider.js';
 
 // TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
 const TabLabel = styled.li `
@@ -56,26 +54,6 @@ const TabStyle = styled.li `
             background-color: transparent;
         `}
 `;
-const ContentContainer = styled.div `
-    ${({ $type }) => {
-    if ($type === 'box' || $type === 'default') {
-        return `
-                border-top-left-radius: 0;
-            `;
-    }
-    if ($type === 'panel') {
-        return `
-                border-top: 1px solid ${theme.color.line.L03};
-            `;
-    }
-    if ($type === 'underlined' || $type === 'gray') {
-        return `
-                margin-top: ${theme.grid.gutter};
-            `;
-    }
-    return '';
-}}
-`;
 /** @visibleName Tab */
 const Tab = (_a) => {
     var { type = 'box', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
@@ -84,17 +62,8 @@ const Tab = (_a) => {
             props.onClick(props.label, e);
         }
     };
-    const isActive = props.activeTab ? props.activeTab === props.label : props.isActive;
-    return type === 'box' || type === 'default' || type === 'panel' ? (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TabLabel, { role: "tab", id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
-        props.isStateless &&
-            (props.children && (props.activeTab === props.label || props.isActive) ? (React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, as: (type === 'box' || type === 'default') && !props.tabStyle
-                    ? Box
-                    : undefined }, props.children)) : (React__default.createElement(Divider, { margin: "0" }))))) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TabStyle, { role: "tab", id: props.id, "$type": props.tabStyle || type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label),
-        props.isStateless &&
-            props.children &&
-            (props.activeTab === props.label || props.isActive) && (React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type }, props.children))));
+    const { isActive } = props;
+    return type === 'box' || type === 'panel' ? (React__default.createElement(TabLabel, { role: "tab", "data-testid": dataTestId, id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label)) : (React__default.createElement(TabStyle, { role: "tab", "data-testid": dataTestId, id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label));
 };
 
 export { Tab as default };

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

@@ -1,7 +1,7 @@
 import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 import type { Props as TabProps } from '../Tab/Tab';
-interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick'> {
+interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick' | 'tabStyle' | 'isStateless'> {
     /**
      * Content of the component
      *
@@ -22,20 +22,12 @@ interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onC
      * Allows to reduce gap between tabs in `underlined` type
      */
     isNarrowUnderlined?: boolean;
-    /**
-     * On tab change callback
-     *
-     * @deprecated Use `onClick` property
-     */
-    onChange?: (tab: string) => void;
     /**
      * Allows to pass common mouse click callback to all children
      */
     onClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to pass a custom className
-     *
-     * @deprecated Prefix 'tabs' is deprecated and will be removed in next major version
      */
     className?: string;
 }

package/build/es/components/Tabs/Tabs.js

@@ -21,7 +21,7 @@ const Tablist = styled.ul `
     `}
 
     ${({ $type, $isNarrowUnderlined }) => {
-    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+    if ($type === 'box' || $type === 'panel') {
         return `
                 margin: 0;
                 
@@ -47,17 +47,12 @@ const Tablist = styled.ul `
                 border-bottom: 1px solid ${theme.color.line.L02};
             `;
     }
-    if ($type === 'gray') {
-        return `
-                gap: 1.25rem;
-            `;
-    }
     return '';
 }}
 `;
 const ContentContainer = styled.div `
     ${({ $type, $isFullWidth }) => {
-    if ($type === 'box' || $type === 'default') {
+    if ($type === 'box') {
         return `
                 border-top-left-radius: 0;
                 ${$isFullWidth ? 'border-top-right-radius: 0;' : ''}
@@ -68,7 +63,7 @@ const ContentContainer = styled.div `
                 border-top: 1px solid ${theme.color.line.L03};
             `;
     }
-    if ($type === 'underlined' || $type === 'gray') {
+    if ($type === 'underlined') {
         return `
                 margin-top: ${theme.grid.gutter};
             `;
@@ -84,9 +79,6 @@ const Tabs = (_a) => {
     const onClickTabItem = (tab, e) => {
         setActiveTab(tab);
         if (tab !== activeTab) {
-            if (props.onChange) {
-                props.onChange(tab);
-            }
             if (props.onClick && e) {
                 props.onClick(e);
             }
@@ -107,16 +99,16 @@ const Tabs = (_a) => {
     if (!tabs) {
         return null;
     }
-    const outerActiveTab = tabs.find(child => child.props.isActive || child.props.activeTab === child.props.label);
+    const outerActiveTab = tabs.find(child => child.props.isActive);
     if (!activeTab) {
         setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
     }
-    return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, "$isFullWidth": props.isFullWidth, "$isNarrowUnderlined": props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
-            tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
+    return (React__default.createElement("div", { className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Tablist, { role: "tablist", "$type": type, "$isFullWidth": props.isFullWidth, "$isNarrowUnderlined": props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
+            tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: type, isActive: tab.props.isActive
                 ? tab.props.isActive
-                : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
-        React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, "$isFullWidth": props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
+                : activeTab === tab.props.label, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
+        React__default.createElement(ContentContainer, { role: "tabpanel", "$type": type, "$isFullWidth": props.isFullWidth, as: type === 'box' ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
             tab.type === Tab &&
             (tab.props.isActive || tab.props.label === activeTab) &&
             tab.props.children))));

package/build/es/components/Tooltip/Tooltip.js

@@ -100,7 +100,7 @@ const Tooltip = (_a) => {
         scroll: true,
     };
     return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500 },
             React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position, "aria-hidden": true }))),
         React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };