@dnanpm/styleguide 4.0.1 → 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/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/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;

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/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/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,

package/build/es/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;

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

@@ -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;
+ *     `;
+ */
+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,
+        },
+    },
+};
+
+export { layout as default };

package/build/es/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/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v4.0.1",
+    "version": "v4.0.2",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -49,7 +49,7 @@
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.28.5",
         "@dnanpm/icons": "^2.0.9",
-        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/eslintrc": "^3.3.3",
         "@eslint/js": "^9.39.1",
         "@rollup/plugin-commonjs": "^29.0.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
@@ -66,7 +66,7 @@
         "@types/react-modal": "^3.13.1",
         "@types/resize-observer-browser": "^0.1.8",
         "@typescript-eslint/eslint-plugin": "^8.46.4",
-        "@typescript-eslint/parser": "^8.48.0",
+        "@typescript-eslint/parser": "^8.48.1",
         "babel-loader": "^9.2.1",
         "cross-env": "^10.0.0",
         "css-loader": "^6.11.0",
@@ -100,7 +100,7 @@
     },
     "dependencies": {
         "ramda": "^0.32.0",
-        "react-datepicker": "8.9.0",
+        "react-datepicker": "8.10.0",
         "react-modal": "^3.16.1",
         "react-select": "^5.8.1",
         "react-spring": "^8.0.27",