@dnanpm/styleguide 4.0.0 → 4.0.2

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

@@ -31,6 +31,8 @@ const shade = {
     },
 };
 const Element = styledComponents.styled.button `
+    text-align: center;
+    transition: all 0.2s ease-in-out;
     display: inline-block;
     font-family: ${theme.default.fontFamily.default};
     font-weight: ${theme.default.fontWeight.bold};
@@ -51,7 +53,7 @@ const Element = styledComponents.styled.button `
         display: inline-flex;
     }
 
-    &:focus-visible {
+    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ $darkBg }) => $darkBg ? theme.default.color.default.white : shade.plum.darker};
         border: 2px solid
@@ -61,9 +63,10 @@ const Element = styledComponents.styled.button `
         outline: none;
     }
 
-    &:hover {
+    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ $darkBg }) => $darkBg ? theme.default.color.default.white : shade.plum.darker};
+        text-decoration: none;
 
         &:focus-visible {
             border: 2px solid
@@ -73,7 +76,7 @@ const Element = styledComponents.styled.button `
         }
     }
 
-    &:active {
+    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${({ $darkBg }) => ($darkBg ? theme.default.color.text.plum : theme.default.color.text.white)};
         background-color: ${({ $darkBg }) => $darkBg
     ? theme.default.color.default.white + theme.default.color.transparency.T90
@@ -86,7 +89,8 @@ const Element = styledComponents.styled.button `
     }
 
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[aria-disabled='true'] {
         color: ${({ $darkBg }) => $darkBg
     ? theme.default.color.text.white + theme.default.color.transparency.T70
     : theme.default.color.text.gray};
@@ -94,19 +98,10 @@ const Element = styledComponents.styled.button `
             ${({ $darkBg }) => $darkBg
     ? theme.default.color.default.white + theme.default.color.transparency.T30
     : theme.default.color.default.plum + theme.default.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;
@@ -127,7 +122,18 @@ const Element = styledComponents.styled.button `
 const Button = (_a) => {
     var _b;
     var { type = 'submit', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-track-value', 'aria-label']);
-    return (React__default.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.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.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.plum, label: props.loadingLabel })) : (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));

package/build/cjs/components/ButtonArrow/ButtonArrow.js

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

package/build/cjs/components/ButtonIcon/ButtonIcon.js

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

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

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

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

@@ -13,25 +13,27 @@ const ButtonSecondary = styledComponents.styled(Button.default) `
     background-color: ${theme.default.color.background.sand.E02};
     border: 2px solid ${theme.default.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.default.color.text.plum};
         background-color: ${theme.default.color.background.sand.E02};
     }
 
-    &:hover {
+    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.default.color.text.plum};
         background-color: ${Button.shade.sand.E02.darker};
         border: 2px solid ${Button.shade.sand.E02.darker};
     }
 
-    &:active {
+    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
         color: ${theme.default.color.text.plum};
         background-color: ${Button.shade.sand.E02.lighter};
         border: 2px solid ${Button.shade.sand.E02.lighter};
     }
 
     &:disabled,
-    &[disabled] {
+    &[disabled],
+    &[aria-disabled='true'] {
         background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
         border: 2px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
         background-clip: padding-box;

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

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

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

@@ -17,18 +17,19 @@ const HERO_CONSTANTS = {
     mobileHeight: 220,
     desktopMinHeight: 460,
     logoMaxWidth: 500,
+    contentMaxWidth: 650,
 };
 const HeroContainer = styledComponents.styled.div `
     position: relative;
     margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
 
-    @media (min-width: ${theme.default.breakpoints.md}px) {
+    ${({ $variant }) => styledUtils.media.md `
         min-height: calc(
             ${HERO_CONSTANTS.desktopMinHeight}px + ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
         );
         display: flex;
-        justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
-    }
+        justify-content: ${$variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    `}
 `;
 const HeroImage = styledComponents.styled.div `
     position: relative;
@@ -43,14 +44,14 @@ const HeroImage = styledComponents.styled.div `
         background-position: bottom;
     `}
 
-    @media (min-width: ${theme.default.breakpoints.md}px) {
+    ${styledUtils.media.md `
         height: auto;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
-    }
+    `}
 
     img {
         width: 100%;
@@ -85,31 +86,32 @@ const LogoImageContainer = styledComponents.styled.div `
         object-fit: contain;
     }
 
-    @media (min-width: ${theme.default.breakpoints.md}px) {
+    ${styledUtils.media.md `
         top: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
         bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
         right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
         left: 50%;
-    }
+    `}
 
-    @media (min-width: ${theme.default.breakpoints.lg}px) {
-        left: calc(min(64%, 750px));
-    }
+    ${styledUtils.media.lg `
+        left: calc(min(64%, ${HERO_CONSTANTS.contentMaxWidth + 100}px));
+    `}
 `;
 const ContentWrap = styledComponents.styled.div `
     width: 100%;
+    max-width: ${theme.default.layout.content.containerMaxWidth.wide}px;
     padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
     margin: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)} auto 0;
     z-index: 1;
 
-    @media (min-width: ${theme.default.breakpoints.md}px) {
+    ${({ $variant }) => styledUtils.media.md `
         display: flex;
         align-items: flex-end;
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
             ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0;
         margin: 0 auto;
-        justify-content: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
-    }
+        justify-content: ${$variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
+    `}
 `;
 const Content = styledComponents.styled(Box.default).attrs({
     elevation: 'extraHigh',
@@ -118,19 +120,19 @@ const Content = styledComponents.styled(Box.default).attrs({
     position: relative;
     text-align: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'left')};
 
-    @media (min-width: ${theme.default.breakpoints.md}px) {
+    ${styledUtils.media.md `
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
         width: 50%;
-        max-width: 650px;
-    }
+        max-width: ${HERO_CONSTANTS.contentMaxWidth}px;
+    `}
 
-    @media (min-width: ${theme.default.breakpoints.lg}px) {
+    ${({ $variant }) => styledUtils.media.lg `
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
         width: 60%;
-        margin-left: ${({ $variant }) => $variant === 'centered' || $variant === 'centered-text-left'
+        margin-left: ${$variant === 'centered' || $variant === 'centered-text-left'
     ? '0'
     : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)}`};
-    }
+    `}
 `;
 const LabelContainer = styledComponents.styled.div `
     margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
@@ -161,14 +163,14 @@ const TextContent = styledComponents.styled.div `
 const CtaArea = styledComponents.styled.div `
     margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)} 0 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
     justify-content: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'flex-start')};
 
-    @media (min-width: ${theme.default.breakpoints.md}px) {
-        flex-direction: row;
+    ${styledUtils.media.md `
         margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0 0;
-    }
+    `}
 `;
 const renderImage = (ImageComponent, imageProps) => {
     if (!imageProps)

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

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

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

@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.default.createElement(React__default.default.Fragment, null,
+    const { isMobileMenu, loginComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem' }, !isLogged ? (loginLabel) : (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(icons.User, null),
         React__default.default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };

package/build/cjs/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/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -49,9 +49,7 @@ const Tooltip = styledComponents.styled.div `
     min-height: ${styledUtils.getMultipliedSize(theme.default.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) - ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 12)});
-    width: 100%;
     position: absolute;
-    right: 0;
     top: ${navigation.navMaxHeight};
     z-index: ${p => p.$zIndex};
     display: flex;
@@ -85,8 +83,8 @@ const Caret = styledComponents.styled.div `
     }
 `;
 const MainNavTooltipMenu = (_a) => {
-    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.default.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = tslib.__rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext.default);
+    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.default.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem' } = _a, props = tslib.__rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight"]);
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, navZIndex, } = React.useContext(NavContext.default);
     const ref = React.useRef(null);
     const globalStateKey = globalStateString;
     const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
@@ -113,8 +111,8 @@ const MainNavTooltipMenu = (_a) => {
     return (React__default.default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
         globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "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.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(Caret, { "$zIndex": zIndex, "$collapseSize": collapseSize }),
-            React__default.default.createElement(Tooltip, { "$zIndex": zIndex, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
+            React__default.default.createElement(Caret, { "$zIndex": navZIndex + 1, "$collapseSize": collapseSize }),
+            React__default.default.createElement(Tooltip, { "$zIndex": navZIndex + 1, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
                 React__default.default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
                     React__default.default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
 };

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

@@ -6,19 +6,15 @@ var icons = require('@dnanpm/icons');
 var React = require('react');
 var theme = require('../../../themes/theme.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
-var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
-    const { navZIndex } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.default.createElement(icons.Cart, null),
-        React__default.default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
-        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
-};
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => (React__default.default.createElement(MainNavTooltipMenu.default, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem" },
+    React__default.default.createElement(icons.Cart, null),
+    React__default.default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
+    minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 
 exports.default = MinicartTooltip;

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

@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+    const { searchComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0" },
         React__default.default.createElement(icons.Search, null),
         React__default.default.createElement("span", null, searchLabel)));
 };

package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js

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

package/build/cjs/components/Pill/Pill.js

@@ -118,13 +118,15 @@ const Input = styledComponents.styled.input `
     &:focus-visible {
         outline: 0 none;
     }
+
+    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
 `;
 const Pill = (_a) => {
     var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
     const isDefaultType = type === 'none';
     return (React__default.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.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.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 }))));
 };
 
 exports.default = Pill;

package/build/cjs/components/Tooltip/Tooltip.js

@@ -108,7 +108,7 @@ const Tooltip = (_a) => {
         scroll: true,
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        !props.hideTriggerElement && (React__default.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.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.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position, "aria-hidden": true }))),
         React__default.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/cjs/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/cjs/themes/theme.js

@@ -11,6 +11,7 @@ var fontFamily = require('./themeComponents/fontFamily.js');
 var fontSize = require('./themeComponents/fontSize.js');
 var fontWeight = require('./themeComponents/fontWeight.js');
 var forms = require('./themeComponents/forms.js');
+var layout = require('./themeComponents/layout.js');
 var lineHeight = require('./themeComponents/lineHeight.js');
 var radius = require('./themeComponents/radius.js');
 
@@ -23,6 +24,7 @@ const theme = {
     fontWeight: fontWeight.default,
     form: forms.default,
     grid: gridTheme.default,
+    layout: layout.default,
     lineHeight: lineHeight.default,
     media: styledUtils.media,
     radius: radius.default,

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

@@ -0,0 +1,43 @@
+/**
+ * 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;
+ *     `;
+ */
+declare const layout: {
+    /** Page-level layout constraints */
+    readonly page: {
+        /** Minimum page width: 320px */
+        readonly minWidth: 320;
+        /** Maximum page width: 2560px */
+        readonly maxWidth: 2560;
+    };
+    /** Content area layout constraints */
+    readonly content: {
+        /** Content max-width values (pure content area without padding) */
+        readonly maxWidth: {
+            /** Wide/Normal content: 1200px */
+            readonly wide: 1200;
+            /** Medium content: 860px */
+            readonly medium: 860;
+            /** Narrow/Small content: 640px */
+            readonly narrow: 640;
+        };
+        /** Container max-width values (content + 80px padding on each side) */
+        readonly containerMaxWidth: {
+            /** Wide container: 1280px (1200 + 80) */
+            readonly wide: 1280;
+            /** Medium container: 940px (860 + 80) */
+            readonly medium: 940;
+            /** Narrow container: 720px (640 + 80) */
+            readonly narrow: 720;
+        };
+    };
+};
+export type LayoutTheme = typeof layout;
+export default layout;