@dnanpm/styleguide 3.11.5 → 3.12.0

package/build/es/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/es/components/Input/Input.js

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

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

@@ -5,10 +5,10 @@ import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import NavContext from '../context/NavContext.js';
 
 const BusinessMenuLink = styled.a `
-    color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
+    color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
     display: block;
     text-decoration: none;
-    margin: ${p => !p.isMobileMenu
+    margin: ${p => !p.$isMobileMenu
     ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
     : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};
     &:hover,
@@ -23,14 +23,14 @@ const BusinessMenuItem = styled.li `
     overflow: hidden;
 `;
 const BusinessMenuList = 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 ${getMultipliedSize(theme.base.baseWidth, 0.5)}`};
+    margin: ${({ $isMobileMenu }) => $isMobileMenu ? '1rem 0' : `0 ${getMultipliedSize(theme.base.baseWidth, 0.5)}`};
     padding: 0;
     background-color: ${theme.color.background.white.default};
-    font-size: ${({ isMobileMenu }) => (isMobileMenu ? theme.fontSize.default : theme.fontSize.s)};
+    font-size: ${({ $isMobileMenu }) => $isMobileMenu ? theme.fontSize.default : theme.fontSize.s};
     height: 100%;
 `;
 const BusinessMenu = () => {
@@ -44,8 +44,8 @@ const BusinessMenu = () => {
         (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
         return null;
     }
-    return (React__default.createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__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.createElement(BusinessMenuList, { "$isMobileMenu": isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+        React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, "$isActive": item.businessId === currentBusinessId, "$isMobileMenu": isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
 };
 
 export { BusinessMenu as default };

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

@@ -41,10 +41,10 @@ const noAnimation = css `
     animation: none;
 `;
 const SubMenuListRight = 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: -${getMultipliedSize(theme.base.baseHeight, 2)};
     padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
     position: absolute;
@@ -146,10 +146,10 @@ const DesktopMenuItem = styled(MenuItem) `
 const SubMenuList = styled.div `
     position: absolute;
     left: -${getMultipliedSize(theme.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};
 
@@ -178,7 +178,7 @@ const SubMenuLevel2 = ({ menuItem }) => {
         };
         handleOffSet();
     }, [menuLevel.level2, menuItem.id]);
-    return (React__default.createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
+    return (React__default.createElement(SubMenuListRight, { role: "menu", "$menuStates": menuLevel, "$navItemId": menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
         React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
             React__default.createElement("ul", null, menuItem.pages.map((item, index) => {
                 const menuUrl = item.urls[lang];
@@ -196,7 +196,7 @@ const SubMenuLevel1 = ({ menuItem }) => {
     if (!level1HasElements) {
         return null;
     }
-    return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
+    return (React__default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex, "data-testid": "desktop-nav-menu-ul-level-2" },
         React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
             React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
                 const menuUrl = element.urls[lang];

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

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

package/build/es/components/PixelLoader/PixelLoader.js

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

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -56,7 +56,7 @@ const MobileDropdown = styled.button `
     cursor: pointer;
     background: none;
     border: none;
-    padding: ${({ isCategoryLabel }) => (isCategoryLabel ? '0.5rem' : '0.75rem')} 1.25rem;
+    padding: ${({ $isCategoryLabel }) => ($isCategoryLabel ? '0.5rem' : '0.75rem')} 1.25rem;
     color: ${theme.color.text.pink};
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};
@@ -117,8 +117,10 @@ const DropdownList = styled(CoreULStyles) `
     background-color: ${theme.color.background.white.default};
     border: 1px solid ${theme.color.line.L04};
     border-radius: 0 0 ${theme.radius.default} ${theme.radius.default};
-    visibility: ${({ isDropdownListOpen }) => (isDropdownListOpen ? 'visible' : 'hidden')};
-    clip-path: inset(0% 0% ${({ isDropdownListOpen }) => (isDropdownListOpen ? '0%' : '100%')} 0%);
+    visibility: ${({ $isDropdownListOpen }) => ($isDropdownListOpen ? 'visible' : 'hidden')};
+    clip-path: inset(
+        0% 0% ${({ $isDropdownListOpen }) => ($isDropdownListOpen ? '0%' : '100%')} 0%
+    );
     transition: all 0.2s ease-in-out;
 
     ${media.md `
@@ -319,7 +321,7 @@ const PriorityNavigation = (_a) => {
         !isMobile && props.categoryLabel && (React__default.createElement(Category, { id: categoryId }, props.categoryLabel)),
         React__default.createElement("nav", { "aria-labelledby": categoryId },
             React__default.createElement(ListsContainer, { ref: listsContainerRef },
-                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, isCategoryLabel: Boolean(props.categoryLabel) },
+                isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation, "aria-label": mobileDropdownAriaLabel !== null && mobileDropdownAriaLabel !== void 0 ? mobileDropdownAriaLabel : `${props.categoryLabel ? `${props.categoryLabel}, ` : ''}${selectedItem}.`, "aria-expanded": isMobileNavigationOpen, "$isCategoryLabel": Boolean(props.categoryLabel) },
                     React__default.createElement(MobileDropdownContent, null,
                         props.categoryLabel && React__default.createElement(Category, null, props.categoryLabel),
                         selectedItem),
@@ -346,7 +348,7 @@ const PriorityNavigation = (_a) => {
                 !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", null,
                         React__default.createElement(ButtonIcon, { ref: dropdownButtonRef, ariaLabel: openMoreSubpagesAriaLabel, ariaExpanded: isDropdownListOpen, onClick: toggleDropdown, icon: isDropdownListOpen ? ChevronUp : ChevronDown, isReversed: true, "data-testid": "dropdown-button" }, dropdownButtonLabel)),
-                    isDropdownListOpen && (React__default.createElement(DropdownList, { isDropdownListOpen: isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
+                    isDropdownListOpen && (React__default.createElement(DropdownList, { "$isDropdownListOpen": isDropdownListOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
                         dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown ||
                             props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))))));
 };

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -32,7 +32,7 @@ const ProgressIndicatorItem = styled.li `
     flex-direction: column;
     align-items: center;
     flex: 1.5 1 0%;
-    gap: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 0.5 : 1)};
+    gap: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 0.5 : 1)};
 
     &:first-of-type {
         align-items: flex-start;
@@ -62,34 +62,34 @@ const ProgressIndicatorItem = styled.li `
 `;
 const ProgressIndicatorItemConnector = styled.div `
     position: absolute;
-    top: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 1.5 : 2)};
+    top: ${({ $small }) => getMultipliedSize(theme.base.baseHeight, $small ? 1.5 : 2)};
     left: -50%;
     right: 50%;
     width: 100%;
-    height: ${({ small }) => (small ? '2px' : '4px')};
-    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.color.default.pink : theme.color.line.L02};
+    height: ${({ $small }) => ($small ? '2px' : '4px')};
+    background-color: ${({ $isActive, $isCompleted }) => $isActive || $isCompleted ? theme.color.default.pink : theme.color.line.L02};
 `;
 const ProgressIndicatorItemNumber = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.l)};
+    font-size: ${({ $small }) => ($small ? theme.fontSize.s : theme.fontSize.l)};
     font-weight: ${theme.fontWeight.bold};
-    width: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 3 : 4)};
-    height: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 3 : 4)};
-    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
-    color: ${({ isActive }) => (isActive ? theme.color.text.white : theme.color.text.gray)};
+    width: ${({ $small }) => getMultipliedSize(theme.base.baseWidth, $small ? 3 : 4)};
+    height: ${({ $small }) => getMultipliedSize(theme.base.baseHeight, $small ? 3 : 4)};
+    cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+    color: ${({ $isActive }) => ($isActive ? theme.color.text.white : theme.color.text.gray)};
     border-radius: ${theme.radius.circle};
-    border: ${({ small, isActive, isCompleted, isError }) => `${small ? '3px' : '4px'} solid ${getBorderColor({ isActive, isCompleted, isError })}`};
+    border: ${({ $small, $isActive, $isCompleted, $isError }) => `${$small ? '3px' : '4px'} solid ${getBorderColor({ isActive: $isActive, isCompleted: $isCompleted, isError: $isError })}`};
     z-index: 1;
 
-    ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
+    ${({ $isActive, $isError }) => getBackgroundColor({ isActive: $isActive, isError: $isError })}
 `;
 const ProgressIndicatorItemLabel = styled.div `
-    font-size: ${({ small }) => (small ? theme.fontSize.xs : theme.fontSize.s)};
-    line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.s)};
+    font-size: ${({ $small }) => ($small ? theme.fontSize.xs : theme.fontSize.s)};
+    line-height: ${({ $small }) => ($small ? theme.lineHeight.xs : theme.lineHeight.s)};
     font-weight: ${theme.fontWeight.bold};
-    color: ${({ isActive }) => (isActive ? theme.color.text.black : theme.color.text.gray)};
+    color: ${({ $isActive }) => ($isActive ? theme.color.text.black : theme.color.text.gray)};
 
     ${media.sm `
         &.visually-hidden {
@@ -125,12 +125,12 @@ const ProgressIndicator = (_a) => {
             }
         };
         const isClickable = isCompleted && Boolean(props.onStepClick);
-        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small },
-            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, isClickable: isClickable, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
+        return (React__default.createElement(ProgressIndicatorItem, { key: id, "$small": props.small },
+            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { "$small": props.small, "$isActive": isActive, "$isCompleted": isCompleted })),
+            React__default.createElement(ProgressIndicatorItemNumber, { "$small": props.small, "$isActive": isActive, "$isCompleted": isCompleted, "$isError": isError, "$isClickable": isClickable, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
                     ? `${label}, ${props.completedStepLabel}`
                     : label }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem", "aria-hidden": true })) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, "$small": props.small, "$isActive": isActive, onClick: handleClick, className: "visually-hidden" }, label))));
     });
     return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "tablist" }, progressIndicatorItems));
 };

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -10,13 +10,13 @@ import Icon from '../Icon/Icon.js';
 const SecondaryNavigationWrapper = styled.nav `
     font-size: ${theme.fontSize.default};
     padding: 0;
-    background-color: ${({ whiteBg }) => whiteBg ? theme.color.background.white.default : 'transparent'};
+    background-color: ${({ $whiteBg }) => $whiteBg ? theme.color.background.white.default : 'transparent'};
 
-    ${({ mobileOnly }) => media.sm `
-        display: ${mobileOnly ? 'none' : 'inherit'};
+    ${({ $mobileOnly }) => media.sm `
+        display: ${$mobileOnly ? 'none' : 'inherit'};
     `};
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         border-bottom: 1px solid ${theme.color.line.L03};
     }
 `;
@@ -37,7 +37,7 @@ const MobileSelector = styled.button `
         cursor: pointer;
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         display: none;
     }
 `;
@@ -49,14 +49,14 @@ const MobileSelectorArrow = styled.span `
 
     .dnasg-icon svg {
         transition: transform 0.15s ease-in-out;
-        transform: rotate(${({ isOpen }) => (isOpen ? '180deg' : '0deg')});
+        transform: rotate(${({ $isOpen }) => ($isOpen ? '180deg' : '0deg')});
     }
 `;
 const MobileSelectorCheck = styled.span `
     margin-left: auto;
 
     .dnasg-icon {
-        @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
             display: none;
         }
     }
@@ -71,11 +71,11 @@ const SecondaryNavigationList = styled.ul `
     transition:
         max-height 0.2s ease-in-out,
         border-bottom 0.2s linear;
-    background-color: ${({ isOpen }) => isOpen ? theme.color.background.white.default : 'transparent'};
-    max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
-    border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};
+    background-color: ${({ $isOpen }) => $isOpen ? theme.color.background.white.default : 'transparent'};
+    max-height: ${({ $isOpen }) => ($isOpen ? '500vh' : '0')};
+    border-bottom: ${({ $isOpen }) => ($isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         padding: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
         max-height: none;
         position: static;
@@ -93,28 +93,28 @@ const SecondaryNavigationListElement = styled.li `
         text-decoration: none;
         padding: 1rem 0;
         justify-content: start;
-        color: ${({ isActive }) => (isActive ? theme.color.text.pink : theme.color.text.black)};
-        font-weight: ${({ isActive }) => isActive ? theme.fontWeight.bold : theme.fontWeight.book};
+        color: ${({ $isActive }) => ($isActive ? theme.color.text.pink : theme.color.text.black)};
+        font-weight: ${({ $isActive }) => $isActive ? theme.fontWeight.bold : theme.fontWeight.book};
         display: flex;
         align-items: center;
 
         &:hover {
             color: ${theme.color.text.pink};
             text-decoration: none;
-            cursor: ${({ isActive }) => (isActive ? 'auto' : 'pointer')};
+            cursor: ${({ $isActive }) => ($isActive ? 'auto' : 'pointer')};
         }
 
-        @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
             padding: ${getMultipliedSize(theme.base.baseHeight, 1.5)} 0;
             font-weight: ${theme.fontWeight.book};
         }
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1.5)};
         white-space: nowrap;
         transition: border-bottom 0.2s linear;
-        border-bottom: ${({ isActive }) => isActive ? `1px solid ${theme.color.default.pink}` : 'none'};
+        border-bottom: ${({ $isActive }) => $isActive ? `1px solid ${theme.color.default.pink}` : 'none'};
 
         &:first-of-type {
             margin-left: 0;
@@ -127,7 +127,7 @@ const IconWrapper = styled.span `
     margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
 
     &:after {
-        display: ${({ showNotification }) => (showNotification ? 'inline' : 'none')};
+        display: ${({ $showNotification }) => ($showNotification ? 'inline' : 'none')};
         content: '';
         position: absolute;
         border-radius: ${theme.radius.circle};
@@ -139,7 +139,7 @@ const IconWrapper = styled.span `
         background-color: ${theme.color.default.pink};
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         display: none;
     }
 `;
@@ -168,16 +168,16 @@ const SecondaryNavigation = (_a) => {
     const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
     const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
     const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
-        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, "data-testid": dataTestId, className: className, "$collapseSize": collapseSize, "$mobileOnly": props.mobileOnly, "$whiteBg": props.whiteBg },
+        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, "$collapseSize": collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default.createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { "$showNotification": shouldHighlightSelectedElement, "$collapseSize": collapseSize },
                     React__default.createElement(Icon, { name: selectedElement.icon }))),
                 React__default.createElement("span", null, selectedElement.titles[lang])),
-            React__default.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
+            React__default.createElement(MobileSelectorArrow, { "$isOpen": isSecondaryNavOpen },
                 React__default.createElement(Icon, { icon: ChevronDown })))),
         React__default.createElement(SecondaryNavigationList, { id: props.data.name ||
-                `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.map((listElement, index) => {
+                `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, "$isOpen": isSecondaryNavOpen, "$collapseSize": collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.map((listElement, index) => {
             const linkUrl = listElement.urls[lang];
             const linkTitle = listElement.titles[lang];
             const iconName = listElement.icon || '';
@@ -186,12 +186,12 @@ const SecondaryNavigation = (_a) => {
                 : currentUrl.indexOf(linkUrl) > -1;
             const showNotification = highlightIds.some(el => el === listElement.id);
             const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
-            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, onClick: closeNav, "$isActive": isActive, "$collapseSize": collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
                 React__default.createElement(Icon, { icon: Check }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                iconName && (React__default.createElement(IconWrapper, { "$showNotification": showNotification, "$collapseSize": collapseSize },
                     React__default.createElement(Icon, { name: iconName }))),
                 React__default.createElement("span", null, linkTitle),
-                isActive && (React__default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                isActive && (React__default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
                     React__default.createElement(Icon, { icon: Check })))))));
         }))));
 };

package/build/es/components/Textarea/Textarea.js

@@ -80,7 +80,7 @@ const Textarea = (_a) => {
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
         React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-invalid": isErrorStatus, "aria-describedby": describedBy, "data-testid": dataTestId }),
         props.commentMessage && (React__default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        isErrorStatus && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        isErrorStatus && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, role: "alert", "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Textarea as default };

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

@@ -22,6 +22,7 @@ export { default as EnergyLabel } from './EnergyLabel/EnergyLabel';
 export { default as Expander } from './Expander/Expander';
 export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';
+export { default as Hero } from './Hero/Hero';
 export { default as Icon } from './Icon/Icon';
 export * from './Icons';
 export { default as InfoDialog } from './InfoDialog/InfoDialog';

package/build/es/index.js

@@ -22,6 +22,7 @@ export { default as EnergyLabel } from './components/EnergyLabel/EnergyLabel.js'
 export { default as Expander } from './components/Expander/Expander.js';
 export { default as Floater } from './components/Floater/Floater.js';
 export { default as Footer } from './components/Footer/Footer.js';
+export { default as Hero } from './components/Hero/Hero.js';
 export { default as Icon } from './components/Icon/Icon.js';
 export { default as hlArrowBackSmall } from './components/Icons/Small/hlArrowBackSmall.js';
 export { default as hlArrowForwardSmall } from './components/Icons/Small/hlArrowForwardSmall.js';

package/build/es/themes/themeComponents/breakpoints.js

@@ -1,4 +1,5 @@
 const breakpoints = {
+    xxl: 1440,
     xl: 1200,
     lg: 992,
     md: 768,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.11.5",
+    "version": "v3.12.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -71,11 +71,12 @@
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "2.32.0",
-        "eslint-plugin-jsdoc": "^56.1.2",
+        "eslint-plugin-jsdoc": "^60.4.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-transient-props": "file:eslint-plugins/eslint-plugin-transient-props",
         "jest": "^30.0.5",
         "jest-environment-jsdom": "^29.7.0",
         "jest-styled-components": "^7.2.0",