@dnanpm/styleguide 3.11.5 → 3.12.0

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

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

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -18,13 +18,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const SecondaryNavigationWrapper = styledComponents.styled.nav `
     font-size: ${theme.default.fontSize.default};
     padding: 0;
-    background-color: ${({ whiteBg }) => whiteBg ? theme.default.color.background.white.default : 'transparent'};
+    background-color: ${({ $whiteBg }) => $whiteBg ? theme.default.color.background.white.default : 'transparent'};
 
-    ${({ mobileOnly }) => styledUtils.media.sm `
-        display: ${mobileOnly ? 'none' : 'inherit'};
+    ${({ $mobileOnly }) => styledUtils.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.default.color.line.L03};
     }
 `;
@@ -45,7 +45,7 @@ const MobileSelector = styledComponents.styled.button `
         cursor: pointer;
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         display: none;
     }
 `;
@@ -57,14 +57,14 @@ const MobileSelectorArrow = styledComponents.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 = styledComponents.styled.span `
     margin-left: auto;
 
     .dnasg-icon {
-        @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
             display: none;
         }
     }
@@ -79,11 +79,11 @@ const SecondaryNavigationList = styledComponents.styled.ul `
     transition:
         max-height 0.2s ease-in-out,
         border-bottom 0.2s linear;
-    background-color: ${({ isOpen }) => isOpen ? theme.default.color.background.white.default : 'transparent'};
-    max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
-    border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.default.color.line.L03}` : 'none')};
+    background-color: ${({ $isOpen }) => $isOpen ? theme.default.color.background.white.default : 'transparent'};
+    max-height: ${({ $isOpen }) => ($isOpen ? '500vh' : '0')};
+    border-bottom: ${({ $isOpen }) => ($isOpen ? `1px solid ${theme.default.color.line.L03}` : 'none')};
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
         max-height: none;
         position: static;
@@ -101,28 +101,28 @@ const SecondaryNavigationListElement = styledComponents.styled.li `
         text-decoration: none;
         padding: 1rem 0;
         justify-content: start;
-        color: ${({ isActive }) => (isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
-        font-weight: ${({ isActive }) => isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book};
+        color: ${({ $isActive }) => ($isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
+        font-weight: ${({ $isActive }) => $isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book};
         display: flex;
         align-items: center;
 
         &:hover {
             color: ${theme.default.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: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)} 0;
             font-weight: ${theme.default.fontWeight.book};
         }
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
         white-space: nowrap;
         transition: border-bottom 0.2s linear;
-        border-bottom: ${({ isActive }) => isActive ? `1px solid ${theme.default.color.default.pink}` : 'none'};
+        border-bottom: ${({ $isActive }) => $isActive ? `1px solid ${theme.default.color.default.pink}` : 'none'};
 
         &:first-of-type {
             margin-left: 0;
@@ -135,7 +135,7 @@ const IconWrapper = styledComponents.styled.span `
     margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
 
     &:after {
-        display: ${({ showNotification }) => (showNotification ? 'inline' : 'none')};
+        display: ${({ $showNotification }) => ($showNotification ? 'inline' : 'none')};
         content: '';
         position: absolute;
         border-radius: ${theme.default.radius.circle};
@@ -147,7 +147,7 @@ const IconWrapper = styledComponents.styled.span `
         background-color: ${theme.default.color.default.pink};
     }
 
-    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
+    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
         display: none;
     }
 `;
@@ -176,16 +176,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.default.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
-        selectedElement && (React__default.default.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+    return (React__default.default.createElement(SecondaryNavigationWrapper, { ref: ref, "data-testid": dataTestId, className: className, "$collapseSize": collapseSize, "$mobileOnly": props.mobileOnly, "$whiteBg": props.whiteBg },
+        selectedElement && (React__default.default.createElement(MobileSelector, { onClick: toggleNav, "$collapseSize": collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default.default.createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.default.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.default.createElement(IconWrapper, { "$showNotification": shouldHighlightSelectedElement, "$collapseSize": collapseSize },
                     React__default.default.createElement(Icon.default, { name: selectedElement.icon }))),
                 React__default.default.createElement("span", null, selectedElement.titles[lang])),
-            React__default.default.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
+            React__default.default.createElement(MobileSelectorArrow, { "$isOpen": isSecondaryNavOpen },
                 React__default.default.createElement(Icon.default, { icon: icons.ChevronDown })))),
         React__default.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 || '';
@@ -194,12 +194,12 @@ const SecondaryNavigation = (_a) => {
                 : currentUrl.indexOf(linkUrl) > -1;
             const showNotification = highlightIds.some(el => el === listElement.id);
             const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
-            return (React__default.default.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+            return (React__default.default.createElement(SecondaryNavigationListElement, { key: listElement.id, onClick: closeNav, "$isActive": isActive, "$collapseSize": collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
                 React__default.default.createElement(Icon.default, { icon: icons.Check }))))) : (React__default.default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default.default.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                iconName && (React__default.default.createElement(IconWrapper, { "$showNotification": showNotification, "$collapseSize": collapseSize },
                     React__default.default.createElement(Icon.default, { name: iconName }))),
                 React__default.default.createElement("span", null, linkTitle),
-                isActive && (React__default.default.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                isActive && (React__default.default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
                     React__default.default.createElement(Icon.default, { icon: icons.Check })))))));
         }))));
 };

package/build/cjs/components/Textarea/Textarea.js

@@ -88,7 +88,7 @@ const Textarea = (_a) => {
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
         React__default.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.default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        isErrorStatus && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        isErrorStatus && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: errorId, role: "alert", "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports.default = Textarea;

package/build/cjs/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/cjs/index.js

@@ -24,6 +24,7 @@ var EnergyLabel = require('./components/EnergyLabel/EnergyLabel.js');
 var Expander = require('./components/Expander/Expander.js');
 var Floater = require('./components/Floater/Floater.js');
 var Footer = require('./components/Footer/Footer.js');
+var Hero = require('./components/Hero/Hero.js');
 var Icon = require('./components/Icon/Icon.js');
 var hlArrowBackSmall = require('./components/Icons/Small/hlArrowBackSmall.js');
 var hlArrowForwardSmall = require('./components/Icons/Small/hlArrowForwardSmall.js');
@@ -194,6 +195,7 @@ exports.EnergyLabel = EnergyLabel.default;
 exports.Expander = Expander.default;
 exports.Floater = Floater.default;
 exports.Footer = Footer.default;
+exports.Hero = Hero.default;
 exports.Icon = Icon.default;
 exports.hlArrowBackSmall = hlArrowBackSmall.default;
 exports.hlArrowForwardSmall = hlArrowForwardSmall.default;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const breakpoints = {
+    xxl: 1440,
     xl: 1200,
     lg: 992,
     md: 768,

package/build/es/components/ButtonPrimary/ButtonPrimary.js

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

package/build/es/components/ButtonSecondary/ButtonSecondary.js

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

package/build/es/components/Drawer/Drawer.js

@@ -40,16 +40,17 @@ const slideIn = keyframes `
 const StyledReactModal = styled(ReactModal) `
     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 - ${getMultipliedSize(theme.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}) {
@@ -143,7 +144,7 @@ const CloseButton = styled(ButtonClose) `
     margin: 0;
     padding: 0.5rem;
     border-radius: 0 0 0 ${theme.radius.default};
-    background-color: ${({ variant }) => variant === 'light'
+    background-color: ${({ $variant }) => $variant === 'light'
     ? theme.color.background.sand.E01
     : theme.color.background.plum.default};
 `;
@@ -168,13 +169,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 = __rest(_a, ["appElement", "size", "side", "variant", "padding", "closeButton", "isClosable", 'data-testid']);
     ReactModal.setAppElement(appElement);
     return (React__default.createElement(React__default.Fragment, null,
-        React__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.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.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
                 React__default.createElement(ContentContainer, null,
                     React__default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
                         React__default.createElement(Title, { "$size": size, "$variant": variant }, props.title),
                         props.subtitle && (React__default.createElement(Subtitle, { "$size": size, "$variant": variant }, props.subtitle))),
-                    closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                    closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, "$variant": variant },
                         React__default.createElement(Close, { color: variant === 'light'
                                 ? theme.color.default.plum
                                 : theme.color.default.white }))),

package/build/es/components/Floater/Floater.js

@@ -11,12 +11,12 @@ const getInset = ({ position, offset, }) => {
 };
 const Element = 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 = __rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default.createElement(Element, { id: props.id, "$position": position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.createElement(Element, { id: props.id, "$position": position, "$offset": offset, "$zIndex": props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { Floater as default };

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

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