@dnanpm/styleguide 4.0.0 → 4.0.2

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Page layout constants for consistent sizing across the design system.
+ *
+ * All values are numbers in pixels. Add 'px' suffix when used in CSS.
+ *
+ * @example
+ *     const Container = styled.div`
+ *       max-width: ${theme.layout.content.maxWidth.wide}px; // 1200px
+ *       margin: 0 auto;
+ *     `;
+ */
+const layout = {
+    /** Page-level layout constraints */
+    page: {
+        /** Minimum page width: 320px */
+        minWidth: 320,
+        /** Maximum page width: 2560px */
+        maxWidth: 2560,
+    },
+    /** Content area layout constraints */
+    content: {
+        /** Content max-width values (pure content area without padding) */
+        maxWidth: {
+            /** Wide/Normal content: 1200px */
+            wide: 1200,
+            /** Medium content: 860px */
+            medium: 860,
+            /** Narrow/Small content: 640px */
+            narrow: 640,
+        },
+        /** Container max-width values (content + 80px padding on each side) */
+        containerMaxWidth: {
+            /** Wide container: 1280px (1200 + 80) */
+            wide: 1280,
+            /** Medium container: 940px (860 + 80) */
+            medium: 940,
+            /** Narrow container: 720px (640 + 80) */
+            narrow: 720,
+        },
+    },
+};
+
+exports.default = layout;

package/build/cjs/themes/themeComponents/navigation.d.ts

@@ -11,7 +11,6 @@ export declare const mobileLogoSize = "3.75em";
 export declare const desktopLogoSize = "5.25em";
 export declare const menuItemMargin = "1rem";
 export declare const ribbonHeight = "1.5625rem";
-export declare const wideMenuBreakpoint = 1280;
 export declare const IconContainerWidth = "3.75rem";
 export declare const IconContainerMinWidth = "2.5rem";
 export declare const navMaxHeight = "3.75rem";

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

@@ -60,7 +60,8 @@ export interface Props {
      */
     fullWidth?: boolean;
     /**
-     * Allows to disable the component functionality. Ignored when `href` is defined
+     * Allows disabling the component functionality.
+     * When `href` is defined, disables the link functionality.
      *
      * @default false
      */

package/build/es/components/Button/Button.js

@@ -23,6 +23,8 @@ const shade = {
     },
 };
 const Element = styled.button `
+    text-align: center;
+    transition: all 0.2s ease-in-out;
     display: inline-block;
     font-family: ${theme.fontFamily.default};
     font-weight: ${theme.fontWeight.bold};
@@ -43,7 +45,7 @@ const Element = styled.button `
         display: inline-flex;
     }
 
-    &:focus-visible {
+    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${({ $darkBg }) => ($darkBg ? theme.color.text.plum : theme.color.text.white)};
         background-color: ${({ $darkBg }) => $darkBg ? theme.color.default.white : shade.plum.darker};
         border: 2px solid
@@ -53,9 +55,10 @@ const Element = styled.button `
         outline: none;
     }
 
-    &:hover {
+    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${({ $darkBg }) => ($darkBg ? theme.color.text.plum : theme.color.text.white)};
         background-color: ${({ $darkBg }) => $darkBg ? theme.color.default.white : shade.plum.darker};
+        text-decoration: none;
 
         &:focus-visible {
             border: 2px solid
@@ -65,7 +68,7 @@ const Element = styled.button `
         }
     }
 
-    &:active {
+    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${({ $darkBg }) => ($darkBg ? theme.color.text.plum : theme.color.text.white)};
         background-color: ${({ $darkBg }) => $darkBg
     ? theme.color.default.white + theme.color.transparency.T90
@@ -78,7 +81,8 @@ const Element = styled.button `
     }
 
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[aria-disabled='true'] {
         color: ${({ $darkBg }) => $darkBg
     ? theme.color.text.white + theme.color.transparency.T70
     : theme.color.text.gray};
@@ -86,19 +90,10 @@ const Element = styled.button `
             ${({ $darkBg }) => $darkBg
     ? theme.color.default.white + theme.color.transparency.T30
     : theme.color.default.plum + theme.color.transparency.T30};
-        pointer-events: none;
+        cursor: not-allowed;
+        outline: none;
     }
 
-    ${({ href }) => href &&
-    `
-        text-align: center;
-
-        &:hover {
-            text-decoration: none;
-        }
-
-    `}
-
     ${({ $loading }) => $loading &&
     `
         pointer-events: none;
@@ -119,7 +114,18 @@ const Element = styled.button `
 const Button = (_a) => {
     var _b;
     var { type = 'submit', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["type", 'data-testid', 'data-track-value', 'aria-label']);
-    return (React__default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: props.onClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
+    const isDisabledAnchor = props.disabled && props.href;
+    const handleClick = (event) => {
+        if (isDisabledAnchor) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (props.onClick) {
+            props.onClick(event);
+        }
+    };
+    return (React__default.createElement(Element, Object.assign({ id: props.id, as: (_b = props.nextLink) !== null && _b !== void 0 ? _b : (props.href ? 'a' : undefined), type: props.href ? undefined : type, href: isDisabledAnchor ? undefined : props.href, target: props.href ? props.target : undefined, rel: props.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: handleClick, onMouseDown: props.onMouseDown, "$small": props.small, "$darkBg": props.darkBg, "$fullWidth": props.fullWidth, "$loading": props.loading, tabIndex: props.loading || isDisabledAnchor ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, "aria-disabled": isDisabledAnchor ? 'true' : undefined }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
     })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));

package/build/es/components/ButtonArrow/ButtonArrow.js

@@ -44,7 +44,7 @@ const buttonsMap = {
             color: ${theme.color.text.black};
         }
 
-        &:hover {
+        &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
             color: ${theme.color.text.black};
         }
 

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -85,7 +85,8 @@ const ButtonElement = styled.button `
 
     &:disabled,
     &[disabled] {
-        pointer-events: none;
+        cursor: not-allowed;
+        text-decoration: none;
     }
 
     ${({ $loading }) => $loading &&

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

@@ -9,25 +9,27 @@ const ButtonPrimary = styled(Button) `
     background-color: ${theme.color.default.pink};
     border: 2px solid ${theme.color.default.pink};
 
-    &:focus {
+    &:focus:not(:disabled):not([disabled]):not([aria-disabled='true']),
+    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.color.text.white};
         background-color: ${theme.color.default.pink};
     }
 
-    &:hover {
+    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.color.text.white};
         background-color: ${shade.pink.darker};
         border: 2px solid ${shade.pink.darker};
     }
 
-    &:active {
+    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.color.text.white};
         background-color: ${shade.pink.lighter};
         border: 2px solid ${shade.pink.lighter};
     }
 
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[aria-disabled='true'] {
         background-color: ${theme.color.default.pink + theme.color.transparency.T30};
         border: 2px solid ${theme.color.default.pink + theme.color.transparency.T30};
         background-clip: padding-box;

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

@@ -9,25 +9,27 @@ const ButtonSecondary = styled(Button) `
     background-color: ${theme.color.background.sand.E02};
     border: 2px solid ${theme.color.line.L02};
 
-    &:focus {
+    &:focus:not(:disabled):not([disabled]):not([aria-disabled='true']),
+    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.color.text.plum};
         background-color: ${theme.color.background.sand.E02};
     }
 
-    &:hover {
+    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.color.text.plum};
         background-color: ${shade.sand.E02.darker};
         border: 2px solid ${shade.sand.E02.darker};
     }
 
-    &:active {
+    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.color.text.plum};
         background-color: ${shade.sand.E02.lighter};
         border: 2px solid ${shade.sand.E02.lighter};
     }
 
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[aria-disabled='true'] {
         background-color: ${theme.color.background.sand.E02 + theme.color.transparency.T30};
         border: 2px solid ${theme.color.line.L02 + theme.color.transparency.T30};
         background-clip: padding-box;

package/build/es/components/Footer/Components/FooterComponents.js

@@ -31,7 +31,7 @@ const BaseContainer = styled.div `
     padding: ${getMultipliedSize(theme.base.baseHeight, 2)};
     gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
     grid-template-columns: repeat(1, minmax(0, 1fr));
-    max-width: 1290px;
+    max-width: ${theme.layout.content.containerMaxWidth.wide}px;
     margin-left: auto;
     margin-right: auto;
 

package/build/es/components/Hero/Hero.js

@@ -2,25 +2,26 @@ 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 { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 
 const HERO_CONSTANTS = {
     mobileHeight: 220,
     desktopMinHeight: 460,
     logoMaxWidth: 500,
+    contentMaxWidth: 650,
 };
 const HeroContainer = styled.div `
     position: relative;
     margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1.25)};
 
-    @media (min-width: ${theme.breakpoints.md}px) {
+    ${({ $variant }) => media.md `
         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'};
-    }
+        justify-content: ${$variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    `}
 `;
 const HeroImage = styled.div `
     position: relative;
@@ -35,14 +36,14 @@ const HeroImage = styled.div `
         background-position: bottom;
     `}
 
-    @media (min-width: ${theme.breakpoints.md}px) {
+    ${media.md `
         height: auto;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: ${getMultipliedSize(theme.base.baseHeight, 4)};
-    }
+    `}
 
     img {
         width: 100%;
@@ -77,31 +78,32 @@ const LogoImageContainer = styled.div `
         object-fit: contain;
     }
 
-    @media (min-width: ${theme.breakpoints.md}px) {
+    ${media.md `
         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));
-    }
+    ${media.lg `
+        left: calc(min(64%, ${HERO_CONSTANTS.contentMaxWidth + 100}px));
+    `}
 `;
 const ContentWrap = styled.div `
     width: 100%;
+    max-width: ${theme.layout.content.containerMaxWidth.wide}px;
     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) {
+    ${({ $variant }) => media.md `
         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'};
-    }
+        justify-content: ${$variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    `}
 `;
 const Content = styled(Box).attrs({
     elevation: 'extraHigh',
@@ -110,19 +112,19 @@ const Content = styled(Box).attrs({
     position: relative;
     text-align: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'left')};
 
-    @media (min-width: ${theme.breakpoints.md}px) {
+    ${media.md `
         padding: ${getMultipliedSize(theme.base.baseWidth, 3)};
         width: 50%;
-        max-width: 650px;
-    }
+        max-width: ${HERO_CONSTANTS.contentMaxWidth}px;
+    `}
 
-    @media (min-width: ${theme.breakpoints.lg}px) {
+    ${({ $variant }) => media.lg `
         padding: ${getMultipliedSize(theme.base.baseWidth, 4)};
         width: 60%;
-        margin-left: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left'
+        margin-left: ${$variant === 'centered' || $variant === 'centered-text-left'
     ? '0'
     : `${getMultipliedSize(theme.base.baseWidth, 4)}`};
-    }
+    `}
 `;
 const LabelContainer = styled.div `
     margin: 0 0 ${getMultipliedSize(theme.base.baseHeight, 1)};
@@ -153,14 +155,14 @@ const TextContent = styled.div `
 const CtaArea = styled.div `
     margin: ${getMultipliedSize(theme.base.baseWidth, 3)} 0 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
     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;
+    ${media.md `
         margin: ${getMultipliedSize(theme.base.baseWidth, 4)} 0 0;
-    }
+    `}
 `;
 const renderImage = (ImageComponent, imageProps) => {
     if (!imageProps)

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

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

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

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

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

@@ -6,8 +6,6 @@ interface MainNavTooltipMenuProps<ContentProps extends object = object> extends
     ariaLabel?: string;
     /** Tooltip menu content */
     children?: ReactNode;
-    /** Overlap other elements */
-    zIndex?: number;
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
@@ -27,5 +25,5 @@ export declare const IconContainer: import("styled-components/dist/types").IStyl
     $isActive?: boolean;
     $collapseSize: number;
 }>> & string;
-declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
+declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

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

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

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

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

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

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

@@ -92,7 +92,7 @@ const GlobalNavigationContainer = styled.header `
     width: 100%;
     background-color: ${theme.color.background.white.default};
     color: ${theme.color.text.black};
-    max-width: 2560px;
+    max-width: ${theme.layout.page.maxWidth}px;
     margin: 0 auto;
     > nav {
         background-color: ${theme.color.background.plum.E02};
@@ -101,7 +101,7 @@ const GlobalNavigationContainer = styled.header `
 const NavigationWrapper = styled.div `
     display: flex;
     width: 100%;
-    max-width: ${getMultipliedSize(theme.base.baseWidth, 256)};
+    max-width: ${theme.layout.page.maxWidth}px;
     margin: 0 auto;
     height: ${navMaxHeight};
     position: relative;

package/build/es/components/Pill/Pill.js

@@ -110,13 +110,15 @@ const Input = styled.input `
     &:focus-visible {
         outline: 0 none;
     }
+
+    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
 `;
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     const isDefaultType = type === 'none';
     return (React__default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, "$position": props.position, "$isChecked": props.isChecked || props.isDefaultChecked, "$isDisabled": props.isDisabled, className: props.className, "data-testid": dataTestId, "$isDefaultButtonStyle": props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
         props.children,
-        !isDefaultType && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked }))));
+        !isDefaultType && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked, "$isDisabled": props.isDisabled }))));
 };
 
 export { Pill as default };

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

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

package/build/es/themes/theme.d.ts

@@ -143,6 +143,24 @@ declare const theme: {
     grid: {
         gutter: string;
     };
+    layout: {
+        readonly page: {
+            readonly minWidth: 320;
+            readonly maxWidth: 2560;
+        };
+        readonly content: {
+            readonly maxWidth: {
+                readonly wide: 1200;
+                readonly medium: 860;
+                readonly narrow: 640;
+            };
+            readonly containerMaxWidth: {
+                readonly wide: 1280;
+                readonly medium: 940;
+                readonly narrow: 720;
+            };
+        };
+    };
     lineHeight: {
         default: string;
         xl: string;

package/build/es/themes/theme.js

@@ -7,6 +7,7 @@ import fontFamily from './themeComponents/fontFamily.js';
 import fontSize from './themeComponents/fontSize.js';
 import fontWeight from './themeComponents/fontWeight.js';
 import forms from './themeComponents/forms.js';
+import layout from './themeComponents/layout.js';
 import lineHeight from './themeComponents/lineHeight.js';
 import radius from './themeComponents/radius.js';
 
@@ -19,6 +20,7 @@ const theme = {
     fontWeight,
     form: forms,
     grid: gridTheme,
+    layout,
     lineHeight,
     media,
     radius,