@dnanpm/styleguide 3.11.5 → 3.12.1

package/build/cjs/components/ButtonPrimary/ButtonPrimary.js

@@ -6,6 +6,7 @@ var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('../Button/Button.js');
 
+/* eslint-disable transient-props/transient-props */
 /** @visibleName Button Primary */
 const ButtonPrimary = styledComponents.styled(Button.default) `
     color: ${theme.default.color.text.white};

package/build/cjs/components/ButtonSecondary/ButtonSecondary.js

@@ -6,6 +6,7 @@ var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var Button = require('../Button/Button.js');
 
+/* eslint-disable transient-props/transient-props */
 /** @visibleName Button Secondary */
 const ButtonSecondary = styledComponents.styled(Button.default) `
     color: ${theme.default.color.text.plum};

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -260,6 +260,10 @@ const CurrentMonth = styledComponents.styled.div `
     line-height: ${theme.default.lineHeight.default};
     font-weight: ${theme.default.fontWeight.bold};
 `;
+/**
+ * TODO: Replace the VisuallyHiddenStatus styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHiddenStatus = styledComponents.styled.div `
     position: absolute;
     left: -9999px;

package/build/cjs/components/Drawer/Drawer.js

@@ -49,16 +49,17 @@ const slideIn = styledComponents.keyframes `
 const StyledReactModal = styledComponents.styled(ReactModal__default.default) `
     position: fixed;
     top: 0;
-    ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
-    width: ${({ size }) => sizeMap[size]};
+    ${({ $side }) => ($side === 'left' ? 'left: 0' : 'right: 0')};
+    width: ${({ $size }) => sizeMap[$size]};
     height: 100dvh;
     max-height: 100%;
     max-width: calc(100vw - ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)});
-    transform: translateX(${({ side }) => side === 'left' && '-'}100%);
-    animation: ${slideIn} ${({ size }) => animationMap[size][0]}s forwards;
+    transform: translateX(${({ $side }) => $side === 'left' && '-'}100%);
+    animation: ${slideIn} ${({ $size }) => animationMap[$size][0]}s forwards;
 
     &.ReactModal__Content--before-close {
-        animation: ${({ side }) => slideOut(side)} ${({ size }) => animationMap[size][1]}s forwards;
+        animation: ${({ $side }) => slideOut($side)} ${({ $size }) => animationMap[$size][1]}s
+            forwards;
     }
 
     @media (max-width: ${sizeMap.small}) {
@@ -152,7 +153,7 @@ const CloseButton = styledComponents.styled(ButtonClose.default) `
     margin: 0;
     padding: 0.5rem;
     border-radius: 0 0 0 ${theme.default.radius.default};
-    background-color: ${({ variant }) => variant === 'light'
+    background-color: ${({ $variant }) => $variant === 'light'
     ? theme.default.color.background.sand.E01
     : theme.default.color.background.plum.default};
 `;
@@ -177,13 +178,13 @@ const Drawer = (_a) => {
     var { appElement = '#__next', size = 'medium', side = 'right', variant = 'light', padding = '1.25rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
     ReactModal__default.default.setAppElement(appElement);
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size, side: side },
+        React__default.default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, "$size": size, "$side": side },
             React__default.default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
                 React__default.default.createElement(ContentContainer, null,
                     React__default.default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.default.createElement(Title, { "$size": size, "$variant": variant }, props.title),
                         props.subtitle && (React__default.default.createElement(Subtitle, { "$size": size, "$variant": variant }, props.subtitle))),
-                    closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                    closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, "$variant": variant },
                         React__default.default.createElement(icons.Close, { color: variant === 'light'
                                 ? theme.default.color.default.plum
                                 : theme.default.color.default.white }))),

package/build/cjs/components/Floater/Floater.js

@@ -19,12 +19,12 @@ const getInset = ({ position, offset, }) => {
 };
 const Element = styledComponents.styled.div `
     position: sticky;
-    ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
-    ${({ $position, offset }) => getInset({ position: $position, offset })}
+    ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex}`};
+    ${({ $position = 'top', $offset }) => getInset({ position: $position, offset: $offset })}
 `;
 const Floater = (_a) => {
     var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default.default.createElement(Element, { id: props.id, "$position": position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(Element, { id: props.id, "$position": position, "$offset": offset, "$zIndex": props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports.default = Floater;

package/build/cjs/components/Hero/Hero.d.ts

@@ -0,0 +1,88 @@
+import type { ComponentProps, ComponentType, ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type Label from '../Label/Label';
+import type ButtonPrimary from '../ButtonPrimary/ButtonPrimary';
+import type Button from '../Button/Button';
+interface CommonImageProps {
+    [key: string]: unknown;
+    src: string;
+    alt: string;
+}
+type HeroVariant = 'default' | 'centered' | 'centered-text-left';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type ImageComponent = ComponentType<CommonImageProps> | 'img';
+interface HeroProps {
+    /**
+     * Visual variant of the hero component
+     * - default: Content aligned to left with offset
+     * - centered: Content and text centered
+     * - centered-text-left: Content centered but text left-aligned
+     *
+     * @default 'default'
+     */
+    variant?: HeroVariant;
+    /**
+     * Image component to use for background - can be 'img' for plain HTML or a component like Next.js Image
+     * @default 'img'
+     */
+    Image?: ImageComponent;
+    /**
+     * Props to pass to the background Image component
+     */
+    imageProps?: CommonImageProps;
+    /**
+     * Background color when no image is provided
+     */
+    backgroundColor?: string;
+    /**
+     * Enable gradient overlay on background
+     *
+     * @default false
+     */
+    hasGradient?: boolean;
+    /**
+     * Logo image component for logo-style heroes
+     */
+    LogoImage?: ImageComponent;
+    /**
+     * Props to pass to the Logo image component
+     */
+    logoImageProps?: CommonImageProps;
+    /**
+     * Label content (must use Label component)
+     */
+    label?: ReactElement<ComponentProps<typeof Label>>;
+    /**
+     * Main heading content
+     */
+    heading?: ReactNode;
+    /**
+     * Heading level for semantic HTML
+     *
+     * @default 'h1'
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Description text content
+     */
+    description?: ReactNode;
+    /**
+     * Primary call-to-action button
+     */
+    primaryCta?: ReactElement<ComponentProps<typeof ButtonPrimary>>;
+    /**
+     * Optional secondary call-to-action button
+     */
+    secondaryCta?: ReactElement<ComponentProps<typeof Button>>;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Hero: ({ variant, headingLevel, Image, LogoImage, "data-testid": dataTestId, ...props }: HeroProps) => React.JSX.Element;
+/** @component */
+export default Hero;

package/build/cjs/components/Hero/Hero.js

@@ -0,0 +1,202 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styledComponents = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Box = require('../Box/Box.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const HERO_CONSTANTS = {
+    mobileHeight: 220,
+    desktopMinHeight: 460,
+    logoMaxWidth: 500,
+};
+const HeroContainer = styledComponents.styled.div `
+    position: relative;
+    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+
+    @media (min-width: ${theme.default.breakpoints.md}px) {
+        min-height: calc(
+            ${HERO_CONSTANTS.desktopMinHeight}px + ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
+        );
+        display: flex;
+        justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    }
+`;
+const HeroImage = styledComponents.styled.div `
+    position: relative;
+    height: ${HERO_CONSTANTS.mobileHeight}px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor || 'transparent'};
+
+    ${({ $hasGradient }) => $hasGradient &&
+    `
+        linear-gradient(180deg, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0} 0%, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T30}  100%);
+        background-size: 100% 33.33%;
+        background-repeat: no-repeat;
+        background-position: bottom;
+    `}
+
+    @media (min-width: ${theme.default.breakpoints.md}px) {
+        height: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+`;
+const LogoImageWrap = styledComponents.styled.div `
+    position: relative;
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+`;
+const LogoImageContainer = styledComponents.styled.div `
+    position: absolute;
+    top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
+    bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
+    left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+    right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: ${HERO_CONSTANTS.logoMaxWidth}px;
+    margin: 0 auto;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+
+    @media (min-width: ${theme.default.breakpoints.md}px) {
+        top: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+        bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+        right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+        left: 50%;
+    }
+
+    @media (min-width: ${theme.default.breakpoints.lg}px) {
+        left: calc(min(64%, 750px));
+    }
+`;
+const ContentWrap = styledComponents.styled.div `
+    width: 100%;
+    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+    margin: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)} auto 0;
+    z-index: 1;
+
+    @media (min-width: ${theme.default.breakpoints.md}px) {
+        display: flex;
+        align-items: flex-end;
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
+            ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0;
+        margin: 0 auto;
+        justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    }
+`;
+const Content = styledComponents.styled(Box.default).attrs({
+    elevation: 'extraHigh',
+    padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2),
+}) `
+    position: relative;
+    text-align: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'left')};
+
+    @media (min-width: ${theme.default.breakpoints.md}px) {
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
+        width: 50%;
+        max-width: 650px;
+    }
+
+    @media (min-width: ${theme.default.breakpoints.lg}px) {
+        padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
+        width: 60%;
+        margin-left: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left'
+    ? '0'
+    : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)}`};
+    }
+`;
+const LabelContainer = styledComponents.styled.div `
+    margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
+`;
+const TextContent = styledComponents.styled.div `
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
+        color: ${theme.default.color.text.black};
+        font-family: ${theme.default.fontFamily.default};
+    }
+
+    p {
+        margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+        color: ${theme.default.color.text.black};
+        font-family: ${theme.default.fontFamily.default};
+        line-height: ${theme.default.lineHeight.default};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+`;
+const CtaArea = styledComponents.styled.div `
+    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)} 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
+    justify-content: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'flex-start')};
+
+    @media (min-width: ${theme.default.breakpoints.md}px) {
+        flex-direction: row;
+        margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0 0;
+    }
+`;
+const renderImage = (ImageComponent, imageProps) => {
+    if (!imageProps)
+        return null;
+    if (typeof ImageComponent === 'string') {
+        // eslint-disable-next-line jsx-a11y/alt-text, react/jsx-props-no-spreading
+        return React__default.default.createElement("img", Object.assign({}, imageProps));
+    }
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return React__default.default.createElement(ImageComponent, Object.assign({}, imageProps));
+};
+const Hero = (_a) => {
+    var { variant = 'default', headingLevel = 'h1', Image = 'img', LogoImage = 'img', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
+    const HeadingTag = headingLevel;
+    return (React__default.default.createElement(HeroContainer, { "$variant": variant, className: props.className, "data-testid": dataTestId },
+        React__default.default.createElement(HeroImage, { "$hasGradient": props.hasGradient, "$backgroundColor": props.backgroundColor },
+            props.logoImageProps && (React__default.default.createElement(LogoImageWrap, null,
+                React__default.default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))),
+            !props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)),
+        React__default.default.createElement(ContentWrap, { "$variant": variant },
+            React__default.default.createElement(Content, { "$variant": variant },
+                props.label && React__default.default.createElement(LabelContainer, null, props.label),
+                React__default.default.createElement(TextContent, null,
+                    props.heading && React__default.default.createElement(HeadingTag, null, props.heading),
+                    props.description),
+                (props.primaryCta || props.secondaryCta) && (React__default.default.createElement(CtaArea, { "$variant": variant },
+                    props.primaryCta,
+                    props.secondaryCta))))));
+};
+
+exports.default = Hero;

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

@@ -142,7 +142,16 @@ interface Props {
      */
     ariaLabel?: string;
     /**
-     * Screen reader label describing the password toggle
+     * Screen reader label for "Show password" toggle
+     */
+    showPasswordLabel?: string;
+    /**
+     * Screen reader label for "Hide password" toggle
+     */
+    hidePasswordLabel?: string;
+    /**
+     * @deprecated Use `showPasswordLabel` and `hidePasswordLabel`
+     * Screen reader label describing the password toggle (same for both states)
      */
     passwordToggleLabel?: string;
     /**

package/build/cjs/components/Input/Input.js

@@ -130,7 +130,7 @@ const ErrorMessage = styledComponents.styled(Message) `
     color: ${theme.default.color.notification.error};
 `;
 const Input = React.forwardRef((_a, ref) => {
-    var _b;
+    var _b, _c, _d;
     var { type = 'text', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     const [showPassword, setShowPassword] = React.useState(false);
     const togglePasswordVisibility = () => {
@@ -178,7 +178,9 @@ const Input = React.forwardRef((_a, ref) => {
                 props.readonly ||
                 props.readonlyUnstyled ||
                 props.onClearableButtonClick) && (React__default.default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.default.createElement(StyledButtonIcon, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel })),
+                props.showPasswordToggle && (React__default.default.createElement(StyledButtonIcon, { icon: showPassword ? icons.EyeOpen : icons.EyeClosed, onClick: togglePasswordVisibility, ariaLabel: showPassword
+                        ? ((_c = props.hidePasswordLabel) !== null && _c !== void 0 ? _c : props.passwordToggleLabel)
+                        : ((_d = props.showPasswordLabel) !== null && _d !== void 0 ? _d : props.passwordToggleLabel) })),
                 (props.status === 'success' || props.status === 'error') && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.default.color.notification[props.status] })),
                 (props.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.default.createElement(Icon.default, { "aria-hidden": true, icon: icons.Lock, className: props.className && `${props.className}-lock-icon` })),
                 props.onClearableButtonClick &&

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

@@ -13,10 +13,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const BusinessMenuLink = styledComponents.styled.a `
-    color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
+    color: ${p => (p.$isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
     display: block;
     text-decoration: none;
-    margin: ${p => !p.isMobileMenu
+    margin: ${p => !p.$isMobileMenu
     ? `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)}`
     : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)} `};
     &:hover,
@@ -31,14 +31,14 @@ const BusinessMenuItem = styledComponents.styled.li `
     overflow: hidden;
 `;
 const BusinessMenuList = styledComponents.styled.ul `
-    display: ${({ isMobileMenu }) => (!isMobileMenu ? 'inline-flex' : 'block')};
+    display: ${({ $isMobileMenu }) => (!$isMobileMenu ? 'inline-flex' : 'block')};
     align-items: center;
     position: relative;
     list-style: none;
-    margin: ${({ isMobileMenu }) => isMobileMenu ? '1rem 0' : `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)}`};
+    margin: ${({ $isMobileMenu }) => $isMobileMenu ? '1rem 0' : `0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)}`};
     padding: 0;
     background-color: ${theme.default.color.background.white.default};
-    font-size: ${({ isMobileMenu }) => (isMobileMenu ? theme.default.fontSize.default : theme.default.fontSize.s)};
+    font-size: ${({ $isMobileMenu }) => $isMobileMenu ? theme.default.fontSize.default : theme.default.fontSize.s};
     height: 100%;
 `;
 const BusinessMenu = () => {
@@ -52,8 +52,8 @@ const BusinessMenu = () => {
         (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
         return null;
     }
-    return (React__default.default.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__default.default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
+    return (React__default.default.createElement(BusinessMenuList, { "$isMobileMenu": isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+        React__default.default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, "$isActive": item.businessId === currentBusinessId, "$isMobileMenu": isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
 };
 
 exports.default = BusinessMenu;

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

@@ -49,10 +49,10 @@ const noAnimation = styledComponents.css `
     animation: none;
 `;
 const SubMenuListRight = styledComponents.styled.div `
-    display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level2 && menuStates.level2 === navItemId
+    display: ${({ $menuStates, $navItemId }) => $menuStates.level1 && $menuStates.level2 && $menuStates.level2 === $navItemId
     ? 'block'
     : 'none'};
-    ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
+    ${({ $menuStates }) => $menuStates.level2 && $menuStates.animate2 ? fadeRightAnimation : noAnimation};
     top: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
     position: absolute;
@@ -154,10 +154,10 @@ const DesktopMenuItem = styledComponents.styled(globalNavStyles.MenuItem) `
 const SubMenuList = styledComponents.styled.div `
     position: absolute;
     left: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
-    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
-    z-index: ${({ navZIndex }) => navZIndex + 1};
+    display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
+    z-index: ${({ $navZIndex }) => $navZIndex + 1};
     margin-top: 1px;
-    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
     ? fadeInAnimation
     : noAnimation};
 
@@ -186,7 +186,7 @@ const SubMenuLevel2 = ({ menuItem }) => {
         };
         handleOffSet();
     }, [menuLevel.level2, menuItem.id]);
-    return (React__default.default.createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
+    return (React__default.default.createElement(SubMenuListRight, { role: "menu", "$menuStates": menuLevel, "$navItemId": menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
         React__default.default.createElement(Box.default, { elevation: "high", padding: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1) },
             React__default.default.createElement("ul", null, menuItem.pages.map((item, index) => {
                 const menuUrl = item.urls[lang];
@@ -204,7 +204,7 @@ const SubMenuLevel1 = ({ menuItem }) => {
     if (!level1HasElements) {
         return null;
     }
-    return (React__default.default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
+    return (React__default.default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex, "data-testid": "desktop-nav-menu-ul-level-2" },
         React__default.default.createElement(Box.default, { elevation: "high", padding: styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1) },
             React__default.default.createElement("ul", null, menuItem.pages.map((element, index) => {
                 const menuUrl = element.urls[lang];

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

@@ -73,7 +73,7 @@ const PageOverlay = styledComponents.styled.div `
     width: 100%;
     height: 100%;
     background: ${theme.default.color.background.plum.default + theme.default.color.transparency.T10};
-    z-index: ${({ navZIndex }) => navZIndex - 1};
+    z-index: ${({ $navZIndex }) => $navZIndex - 1};
 `;
 const scrollThreshold = 82;
 const checkThreshold = (prevPos, currPos) => {
@@ -83,7 +83,7 @@ const checkThreshold = (prevPos, currPos) => {
     return currPos - prevPos > scrollThreshold;
 };
 const GlobalNavigationContainer = styledComponents.styled.nav `
-    z-index: ${({ navZIndex }) => navZIndex};
+    z-index: ${({ $navZIndex }) => $navZIndex};
     position: relative;
     position: sticky;
     display: block;
@@ -92,7 +92,7 @@ const GlobalNavigationContainer = styledComponents.styled.nav `
     width: 100%;
     background-color: ${theme.default.color.background.white.default};
     color: ${theme.default.color.text.black};
-    top: ${({ menuLevel, tooltipMenuActive }) => (menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.hideOnScroll) && !(menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.level1) && !tooltipMenuActive
+    top: ${({ $menuLevel, $tooltipMenuActive }) => ($menuLevel === null || $menuLevel === void 0 ? void 0 : $menuLevel.hideOnScroll) && !($menuLevel === null || $menuLevel === void 0 ? void 0 : $menuLevel.level1) && !$tooltipMenuActive
     ? `calc(-${navigation.desktopNavMaxHeight} - ${navigation.ribbonHeight})`
     : '0px'} !important;
     transition: top 0.2s ease-in-out;
@@ -104,7 +104,7 @@ const NavigationWrapper = styledComponents.styled.div `
     max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 256)};
     margin: 0 auto;
     height: ${navigation.mobileNavMaxHeight};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         height: ${navigation.desktopNavMaxHeight};
     }
 `;
@@ -305,13 +305,13 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
         }
     }, undefined, false, 200);
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        isPageOverlay && React__default.default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React__default.default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
+        isPageOverlay && React__default.default.createElement(PageOverlay, { "data-testid": "navigation-overlay", "$navZIndex": zIndex }),
+        React__default.default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, "$collapseSize": collapseSize, "$menuLevel": menuLevel, "$navZIndex": zIndex, "$tooltipMenuActive": tooltipMenuActive, "data-testid": "main-navigation" },
             React__default.default.createElement(NavContext.default.Provider, { value: navigationContext },
                 React__default.default.createElement(GlobalStyle, null),
                 !items.mainNavigation && notificationText && (React__default.default.createElement(Notification.default, { type: "info" }, notificationText)),
                 ribbon && ribbonData && React__default.default.createElement(Ribbon.default, { ribbonData: ribbonData, lang: language }),
-                React__default.default.createElement(NavigationWrapper, { collapseSize: collapseSize },
+                React__default.default.createElement(NavigationWrapper, { "$collapseSize": collapseSize },
                     React__default.default.createElement(HeaderNavigationElements.default, { navElementProps: props }),
                     isMobile && React__default.default.createElement(MobileMenu.default, null))))));
 };

package/build/cjs/components/NotificationBadge/NotificationBadge.js

@@ -26,6 +26,10 @@ const NotificationBadgeElement = styledComponents.styled.div `
     background-color: ${theme.default.color.notification.error};
     border-radius: ${theme.default.radius.circle};
 `;
+/**
+ * TODO: Replace the VisuallyHidden styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
 const VisuallyHidden = styledComponents.styled.span `
     position: absolute;
     width: 1px;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -29,7 +29,7 @@ const PixelLoaderWrapper = styledComponents.styled.div `
     padding: 0.125rem;
 `;
 const Pixel = styledComponents.styled.div `
-    background-color: ${({ color }) => color || theme.default.color.default.pink};
+    background-color: ${({ $color }) => $color || theme.default.color.default.pink};
     display: inline-block;
     width: 0.625rem;
     height: 0.625rem;
@@ -42,10 +42,10 @@ const PixelLoader = (_a) => {
     var { className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["className", 'data-testid']);
     return (React__default.default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
         props.label && React__default.default.createElement("span", { className: "visually-hidden" }, props.label),
-        React__default.default.createElement(Pixel, { color: props.color, "$delay": "-0.27" }),
-        React__default.default.createElement(Pixel, { color: props.color, "$delay": "-0.18" }),
-        React__default.default.createElement(Pixel, { color: props.color, "$delay": "-0.09" }),
-        React__default.default.createElement(Pixel, { color: props.color, "$delay": "0" })));
+        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "-0.27" }),
+        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "-0.18" }),
+        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "-0.09" }),
+        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "0" })));
 };
 
 exports.default = PixelLoader;