@czi-sds/components 22.17.1 → 23.0.0

package/dist/index.cjs.d.ts

@@ -379,6 +379,7 @@ interface Spaces {
     l: number;
     xl: number;
     xxl: number;
+    xxxl: number;
 }
 /**
  * @deprecated
@@ -1087,7 +1088,7 @@ interface BannerExtraProps extends CommonThemeProps {
 type ButtonType$0 = ButtonProps & {
     bannerType: string;
 } & CommonThemeProps;
-type BannerIntentType = "info" | "negative" | "notice" | "positive";
+type BannerIntentType = "accent" | "info" | "negative" | "notice" | "positive";
 interface BannerProps extends BannerExtraProps {
     children: React.ReactNode;
     icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
@@ -1165,7 +1166,7 @@ interface ButtonToggleProps extends ButtonProps$0 {
 declare const ButtonToggle: React.ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SDS_STAGE_OPEN = "open";
 declare const SDS_STAGE_CLOSED = "closed";
-type CalloutIntentType = "info" | "negative" | "notice" | "positive";
+type CalloutIntentType = "accent" | "info" | "negative" | "notice" | "positive";
 type CalloutSdsStyleType = "persistent" | "expandable" | "dismissible";
 interface CalloutProps {
     autoDismiss?: boolean | number;
@@ -2052,7 +2053,7 @@ interface NavigationJumpToProps extends NavigationJumpToExtraProps {
     width?: CSSProperties["width"];
 }
 declare const NavigationJumpTo: React.ForwardRefExoticComponent<Omit<NavigationJumpToProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type NotificationIntentType = "info" | "negative" | "positive" | "notice";
+type NotificationIntentType = "accent" | "info" | "negative" | "positive" | "notice";
 interface NotificationProps {
     autoDismiss?: boolean | number;
     buttonOnClick?: (event: React.SyntheticEvent) => void;

package/dist/index.cjs.js

@@ -521,15 +521,16 @@ const Shadows = {
 };
 
 const Spaces = {
+    xxxs: 2,
+    xxs: 4,
+    xs: 6,
+    s: 8,
+    m: 12,
     default: 12,
     l: 16,
-    m: 12,
-    s: 8,
     xl: 24,
-    xs: 6,
-    xxl: 40,
-    xxs: 4,
-    xxxs: 2
+    xxl: 32,
+    xxxl: 40
 };
 
 const SDSLightThemeColors = {
@@ -9866,9 +9867,9 @@ const StyledPaper = styled__default.default(material.Paper, {
         background-color: ${semanticColors?.base?.surface};
         background-image: none;
         box-shadow: ${shadows?.l};
-        max-height: calc(100vh - ${2 * (spaces?.xxl || 0)}px);
+        max-height: calc(100vh - ${2 * (spaces?.xxxl || 40)}px);
         border-radius: ${corners?.xl}px;
-        padding: ${isSmall ? spaces?.xl : spaces?.xxl}px;
+        padding: ${isSmall ? spaces?.xl : spaces?.xxxl}px;
         outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
       `;
 }}
@@ -9918,7 +9919,7 @@ const StyledButton$1 = styled__default.default(Button) `
     const { sdsSize } = props;
     const isSmall = sdsSize === "small" || sdsSize === "medium";
     const spaces = getSpaces(props);
-    const right = isSmall ? spaces?.xl : spaces?.xxl;
+    const right = isSmall ? spaces?.xl : spaces?.xxxl;
     return `
       right: ${right}px;
     `;
@@ -10018,7 +10019,7 @@ const StyledDialogActions = styled__default.default(material.DialogActions, {
     return `
       justify-content: ${buttonPosition === "right" ? "flex-end" : "flex-start"};;
 
-      margin-top: ${isSmall ? spaces?.xl : spaces?.xxl}px;
+      margin-top: ${isSmall ? spaces?.xl : spaces?.xxxl}px;
 
       &.${material.dialogActionsClasses.spacing} > :not(:first-of-type) {
         margin-left: ${spaces?.m}px;
@@ -10125,16 +10126,16 @@ const getResponsivePadding = (props) => {
     const spaces = getSpaces(props);
     const breakpoints = getBreakpoints(props);
     return react.css `
-    padding: ${spaces?.xxl}px
+    padding: ${spaces?.xxxl}px
       ${overlayContainerMinMargin?.small || HeroMargins.SMALL};
 
     ${breakpoints?.up("md")} {
-      padding: ${spaces?.xxl}px
+      padding: ${spaces?.xxxl}px
         ${overlayContainerMinMargin?.medium || HeroMargins.MEDIUM};
     }
 
     ${breakpoints?.up("lg")} {
-      padding: ${spaces?.xxl}px
+      padding: ${spaces?.xxxl}px
         ${overlayContainerMinMargin?.large || HeroMargins.LARGE};
     }
   `;
@@ -11315,7 +11316,7 @@ const LegendContainer = styled__default.default("div") `
 `;
 const LegendItem = styled__default.default("div") `
   ${(props) => {
-    const { isSelected, disabled } = props;
+    const { isSelected, disabled, isHovered } = props;
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
@@ -11326,7 +11327,7 @@ const LegendItem = styled__default.default("div") `
       transition: background-color 0.2s ease-in-out;
       padding: ${spaces?.xxxs}px ${spaces?.xxs}px;
       border-radius: ${corners?.s}px;
-      background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : "transparent"};
+      background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : isHovered ? semanticColors?.base?.backgroundSecondary : "transparent"};
       pointer-events: ${disabled ? "none" : "auto"};
 
       &:hover {
@@ -11425,7 +11426,7 @@ const Legend = (props) => {
                     : hasSelection && !isSelected;
             // Determine color: use colors prop, then item color, then fallback to gray
             const itemColor = colors?.[index] || item.color || fallbackColor;
-            return (jsxRuntime.jsxs(LegendItem, { onMouseEnter: () => handleMouseEnter(item, index), onMouseLeave: () => handleMouseLeave(item, index), onClick: () => handleClick(item, index), role: "button", tabIndex: item.disabled ? -1 : 0, "aria-label": `${item.name}${item.value ? `: ${item.value}` : ""}`, "aria-pressed": isSelected, "aria-disabled": item.disabled, isSelected: isSelected, disabled: item.disabled, children: [jsxRuntime.jsx(LegendIcon, { color: itemColor, isDimmed: isDimmed }), jsxRuntime.jsx(LegendLabel, { disabled: item.disabled, children: item.name }), showValues && item.value !== undefined && (jsxRuntime.jsx(LegendValue, { disabled: item.disabled, children: typeof item.value === "number"
+            return (jsxRuntime.jsxs(LegendItem, { onMouseEnter: () => handleMouseEnter(item, index), onMouseLeave: () => handleMouseLeave(item, index), onClick: () => handleClick(item, index), role: "button", tabIndex: item.disabled ? -1 : 0, "aria-label": `${item.name}${item.value ? `: ${item.value}` : ""}`, "aria-pressed": isSelected, "aria-disabled": item.disabled, isSelected: isSelected, disabled: item.disabled, isHovered: isHovered, children: [jsxRuntime.jsx(LegendIcon, { color: itemColor, isDimmed: isDimmed }), jsxRuntime.jsx(LegendLabel, { disabled: item.disabled, children: item.name }), showValues && item.value !== undefined && (jsxRuntime.jsx(LegendValue, { disabled: item.disabled, children: typeof item.value === "number"
                             ? item.value.toLocaleString()
                             : item.value }))] }, `${item.name}-${index}`));
         }) })));
@@ -18346,6 +18347,7 @@ function NavigationFooter({ backgroundAppearance = "matchBackground", images, lo
 
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable sonarjs/no-duplicate-string */
+const TOOLBAR_HEIGHT = 48;
 const doNotForwardProps$a = [
     "hasInvertedStyle",
     "isNarrow",
@@ -18361,7 +18363,7 @@ const doNotForwardProps$a = [
 const StyledTopComponentSlot = styled__default.default("div") `
   position: sticky;
   top: 0;
-  z-index: 1300;
+  z-index: 2100;
 `;
 const StyledAppBar = styled__default.default(material.AppBar, {
     shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
@@ -18373,7 +18375,7 @@ const StyledAppBar = styled__default.default(material.AppBar, {
       background-image: none;
       max-width: 100%;
       overflow-x: auto;
-      z-index: ${props.theme?.zIndex?.drawer ? props.theme.zIndex.drawer + 10 : 1210};
+      z-index: 2100;
     `;
 }}
 `;
@@ -18402,8 +18404,8 @@ const StyledToolbar = styled__default.default(material.Toolbar, {
     const spaces = getSpaces(props);
     return material.css `
       &.MuiToolbar-root {
-        min-height: 48px;
-        max-height: 48px;
+        min-height: ${TOOLBAR_HEIGHT}px;
+        max-height: ${TOOLBAR_HEIGHT}px;
         padding: ${spaces?.s}px ${spaces?.l}px;
 
         ${isNarrow && NarrowToolbar(props)}
@@ -18566,7 +18568,7 @@ const StyledTitleContainer = styled__default.default("div", {
       color: ${props.hasInvertedStyle
         ? colors?.base.textPrimaryOnDark
         : colors?.base.textPrimary};
-      margin-right: ${spaces?.xxl}px;
+      margin-right: ${spaces?.xxxl}px;
       width: 100%;
 
       ${isNarrow && NarrowTitleContainer()}
@@ -18608,8 +18610,8 @@ const StyledPrimaryNavContainer = styled__default.default("div", {
     const primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
     return material.css `
       flex-direction: ${isNarrow ? "column" : "row"};
-      gap: ${spaces?.xxl}px;
-      margin-right: ${spaces?.xxl}px;
+      gap: ${spaces?.xxxl}px;
+      margin-right: ${spaces?.xxxl}px;
       flex: 1;
       justify-content: ${showSearch
         ? primaryNavPositionWithSearch
@@ -18736,14 +18738,14 @@ const NarrowButtonStyles = (props) => {
     &::before {
       content: "";
       position: absolute;
-      height: ${spaces?.xxl}px;
+      height: ${spaces?.xxxl}px;
       width: 100%;
       background: linear-gradient(
         to top,
         ${backgroundColor} 0%,
         ${backgroundColor}00 100%
       );
-      top: -${spaces?.xxl}px;
+      top: -${spaces?.xxxl}px;
     }
 
     .MuiButton-icon .MuiSvgIcon-root {
@@ -18764,7 +18766,7 @@ const StyledButtonSection = styled__default.default("section", {
     const spaces = getSpaces(props);
     return material.css `
       gap: ${spaces?.m}px;
-      margin-left: ${spaces?.xxl}px;
+      margin-left: ${spaces?.xxxl}px;
 
       ${isNarrow && NarrowButtonStyles(props)}
     `;
@@ -18784,8 +18786,8 @@ const StyledDrawer$1 = styled__default.default(material.Drawer, {
         width: 100%;
         display: flex;
         flex-direction: column;
-        top: ${topOffset}px;
-        height: calc(100% - ${topOffset}px);
+        top: ${topOffset + TOOLBAR_HEIGHT}px;
+        height: calc(100% - ${topOffset + TOOLBAR_HEIGHT}px);
         justify-content: space-between;
       }
     `;
@@ -18835,7 +18837,7 @@ const DrawerAccordionStyles = (props) => {
     &[aria-expanded="true"] {
       position: sticky;
       border-radius: 0;
-      top: calc(48px + ${spaces?.s}px);
+      top: ${spaces?.s}px;
       z-index: 11;
       backdrop-filter: blur(0px);
       color: ${textOpenColor};
@@ -19020,6 +19022,7 @@ const StyledMegaMenuDrawer = styled__default.default(material.Drawer, {
     return material.css `
       pointer-events: none;
       top: ${topOffset}px;
+      z-index: 2000;
 
       .MuiDrawer-paper {
         background-color: ${hasInvertedStyle
@@ -19032,7 +19035,7 @@ const StyledMegaMenuDrawer = styled__default.default(material.Drawer, {
         box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
         background-image: none;
         padding: ${spaces?.xl ? spaces?.xl + 48 : 48}px ${spaces?.xl}px
-          ${spaces?.xxl}px;
+          ${spaces?.xxxl}px;
         transform: translateY(48px);
         top: ${topOffset}px;
       }
@@ -19058,7 +19061,7 @@ const StyledMegaMenuContent = styled__default.default("div", {
         : semanticColors?.base.backgroundPrimary};
       display: flex;
       flex-wrap: wrap;
-      gap: ${spaces?.xxl}px;
+      gap: ${spaces?.xxxl}px;
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
@@ -19077,7 +19080,7 @@ const StyledHoverDrawerColumn = styled__default.default("div", {
     // Account for gaps between columns
     const columnsPerRow = totalColumns > 4 ? 4 : totalColumns;
     const gapCount = columnsPerRow - 1;
-    const columnWidth = `calc((100% - (${gapCount} * ${spaces?.xxl}px)) / ${columnsPerRow})`;
+    const columnWidth = `calc((100% - (${gapCount} * ${spaces?.xxxl}px)) / ${columnsPerRow})`;
     return material.css `
       display: flex;
       flex-direction: column;
@@ -19278,7 +19281,7 @@ const StyledHoverDrawerActions = styled__default.default("div", {
       margin-top: ${spaces?.l}px;
       padding-left: ${isNarrow
         ? `calc(${spaces?.l}px + ${spaces?.m}px)`
-        : `calc(${spaces?.xxl}px + ${spaces?.xs}px)`};
+        : `calc(${spaces?.xxxl}px + ${spaces?.xs}px)`};
       flex-wrap: wrap;
     `;
 }}
@@ -20164,6 +20167,7 @@ function useNavigationState() {
 function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
     const theme = material.useTheme();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
+    const [clickedDrawerKey, setClickedDrawerKey] = React.useState(null);
     // Helper function to wrap dropdown items' onClick handlers
     // This automatically sets the parent dropdown as active when an item is clicked
     const wrapDropdownItemsWithActiveKey = (dropdownItems, parentKey) => {
@@ -20202,8 +20206,22 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
         const handleClick = (e) => {
             onChange(key);
             parentOnClick?.(e);
+            if (drawerOpen) {
+                setActiveDrawerKey(null);
+                setContentKey(null);
+                setClickedDrawerKey(key);
+            }
         };
-        return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: jsxRuntime.jsx(UnifiedNavItem, __assign({}, rest, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", onClick: handleClick, innerSdsStyle: sdsStyle, navVariant: "primary", component: componentProp, href: defaultUrl, target: target, rel: rel, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })) }, key));
+        return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                if (clickedDrawerKey !== key) {
+                    onDrawerOpen(key);
+                }
+            }, onMouseLeave: () => {
+                if (clickedDrawerKey === key) {
+                    setClickedDrawerKey(null);
+                }
+                onDrawerClose();
+            }, children: jsxRuntime.jsx(UnifiedNavItem, __assign({}, rest, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", onClick: handleClick, innerSdsStyle: sdsStyle, navVariant: "primary", component: componentProp, href: defaultUrl, target: target, rel: rel, children: jsxRuntime.jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsxRuntime.jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsxRuntime.jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })) }, key));
     };
     const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
         const isDropdownOpen = open && activeDropdownKey === key;
@@ -20879,7 +20897,7 @@ const NavigationHeader = React.forwardRef((props, ref) => {
     const position = sdsStyle === "drawer" ? "sticky" : isSticky ? "sticky" : "relative";
     // Disable elevation when drawer style is active and any drawer is open
     const effectiveScrollElevation = scrollElevation && !(sdsStyle === "drawer" && isAnyDrawerOpen);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [topComponentSlot && (jsxRuntime.jsx(StyledTopComponentSlot, { ref: topSlotRef, children: topComponentSlot })), jsxRuntime.jsx(ElevationScroll, __assign({}, props, { shouldElevate: effectiveScrollElevation, children: jsxRuntime.jsx(StyledAppBar, __assign({ elevation: 0, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: position, style: { top: topOffset } }, rest, { children: headerContent })) })), dimensions.isNarrow && drawerOpen && (jsxRuntime.jsxs(StyledDrawer$1, { anchor: "right", open: drawerOpen, onClose: () => setDrawerOpen(false), hasInvertedStyle: hasInvertedStyle, topOffset: topOffset, role: "dialog", "aria-label": "Navigation menu", children: [jsxRuntime.jsx(ElevationScroll, __assign({}, props, { shouldElevate: effectiveScrollElevation, children: jsxRuntime.jsx(StyledAppBar, __assign({ elevation: 10, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: "sticky" }, rest, { children: headerContent })) })), jsxRuntime.jsxs(StyledDrawerContent, { children: [jsxRuntime.jsxs("div", { children: [search, primaryNav, primaryNav && secondaryNav && (jsxRuntime.jsx(StyledSectionDivider, { hasInvertedStyle: hasInvertedStyle })), secondaryNav] }), buttonsNode] })] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [topComponentSlot && (jsxRuntime.jsx(StyledTopComponentSlot, { ref: topSlotRef, children: topComponentSlot })), jsxRuntime.jsx(ElevationScroll, __assign({}, props, { shouldElevate: effectiveScrollElevation, children: jsxRuntime.jsx(StyledAppBar, __assign({ elevation: 0, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: position, style: { top: topOffset } }, rest, { children: headerContent })) })), dimensions.isNarrow && drawerOpen && (jsxRuntime.jsx(StyledDrawer$1, { anchor: "right", open: drawerOpen, onClose: () => setDrawerOpen(false), hasInvertedStyle: hasInvertedStyle, topOffset: topOffset, role: "dialog", "aria-label": "Navigation menu", disableScrollLock: false, children: jsxRuntime.jsxs(StyledDrawerContent, { children: [jsxRuntime.jsxs("div", { children: [search, primaryNav, primaryNav && secondaryNav && (jsxRuntime.jsx(StyledSectionDivider, { hasInvertedStyle: hasInvertedStyle })), secondaryNav] }), buttonsNode] }) }))] }));
 });
 
 /**

package/dist/index.esm.d.ts

@@ -379,6 +379,7 @@ interface Spaces {
     l: number;
     xl: number;
     xxl: number;
+    xxxl: number;
 }
 /**
  * @deprecated
@@ -1087,7 +1088,7 @@ interface BannerExtraProps extends CommonThemeProps {
 type ButtonType$0 = ButtonProps & {
     bannerType: string;
 } & CommonThemeProps;
-type BannerIntentType = "info" | "negative" | "notice" | "positive";
+type BannerIntentType = "accent" | "info" | "negative" | "notice" | "positive";
 interface BannerProps extends BannerExtraProps {
     children: React.ReactNode;
     icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
@@ -1165,7 +1166,7 @@ interface ButtonToggleProps extends ButtonProps$0 {
 declare const ButtonToggle: React.ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SDS_STAGE_OPEN = "open";
 declare const SDS_STAGE_CLOSED = "closed";
-type CalloutIntentType = "info" | "negative" | "notice" | "positive";
+type CalloutIntentType = "accent" | "info" | "negative" | "notice" | "positive";
 type CalloutSdsStyleType = "persistent" | "expandable" | "dismissible";
 interface CalloutProps {
     autoDismiss?: boolean | number;
@@ -2052,7 +2053,7 @@ interface NavigationJumpToProps extends NavigationJumpToExtraProps {
     width?: CSSProperties["width"];
 }
 declare const NavigationJumpTo: React.ForwardRefExoticComponent<Omit<NavigationJumpToProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type NotificationIntentType = "info" | "negative" | "positive" | "notice";
+type NotificationIntentType = "accent" | "info" | "negative" | "positive" | "notice";
 interface NotificationProps {
     autoDismiss?: boolean | number;
     buttonOnClick?: (event: React.SyntheticEvent) => void;

package/dist/index.esm.js

@@ -498,15 +498,16 @@ const Shadows = {
 };
 
 const Spaces = {
+    xxxs: 2,
+    xxs: 4,
+    xs: 6,
+    s: 8,
+    m: 12,
     default: 12,
     l: 16,
-    m: 12,
-    s: 8,
     xl: 24,
-    xs: 6,
-    xxl: 40,
-    xxs: 4,
-    xxxs: 2
+    xxl: 32,
+    xxxl: 40
 };
 
 const SDSLightThemeColors = {
@@ -9843,9 +9844,9 @@ const StyledPaper = styled$2(Paper, {
         background-color: ${semanticColors?.base?.surface};
         background-image: none;
         box-shadow: ${shadows?.l};
-        max-height: calc(100vh - ${2 * (spaces?.xxl || 0)}px);
+        max-height: calc(100vh - ${2 * (spaces?.xxxl || 40)}px);
         border-radius: ${corners?.xl}px;
-        padding: ${isSmall ? spaces?.xl : spaces?.xxl}px;
+        padding: ${isSmall ? spaces?.xl : spaces?.xxxl}px;
         outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
       `;
 }}
@@ -9895,7 +9896,7 @@ const StyledButton$1 = styled$2(Button) `
     const { sdsSize } = props;
     const isSmall = sdsSize === "small" || sdsSize === "medium";
     const spaces = getSpaces(props);
-    const right = isSmall ? spaces?.xl : spaces?.xxl;
+    const right = isSmall ? spaces?.xl : spaces?.xxxl;
     return `
       right: ${right}px;
     `;
@@ -9995,7 +9996,7 @@ const StyledDialogActions = styled$2(DialogActions$1, {
     return `
       justify-content: ${buttonPosition === "right" ? "flex-end" : "flex-start"};;
 
-      margin-top: ${isSmall ? spaces?.xl : spaces?.xxl}px;
+      margin-top: ${isSmall ? spaces?.xl : spaces?.xxxl}px;
 
       &.${dialogActionsClasses.spacing} > :not(:first-of-type) {
         margin-left: ${spaces?.m}px;
@@ -10102,16 +10103,16 @@ const getResponsivePadding = (props) => {
     const spaces = getSpaces(props);
     const breakpoints = getBreakpoints(props);
     return css$1 `
-    padding: ${spaces?.xxl}px
+    padding: ${spaces?.xxxl}px
       ${overlayContainerMinMargin?.small || HeroMargins.SMALL};
 
     ${breakpoints?.up("md")} {
-      padding: ${spaces?.xxl}px
+      padding: ${spaces?.xxxl}px
         ${overlayContainerMinMargin?.medium || HeroMargins.MEDIUM};
     }
 
     ${breakpoints?.up("lg")} {
-      padding: ${spaces?.xxl}px
+      padding: ${spaces?.xxxl}px
         ${overlayContainerMinMargin?.large || HeroMargins.LARGE};
     }
   `;
@@ -11292,7 +11293,7 @@ const LegendContainer = styled$2("div") `
 `;
 const LegendItem = styled$2("div") `
   ${(props) => {
-    const { isSelected, disabled } = props;
+    const { isSelected, disabled, isHovered } = props;
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
@@ -11303,7 +11304,7 @@ const LegendItem = styled$2("div") `
       transition: background-color 0.2s ease-in-out;
       padding: ${spaces?.xxxs}px ${spaces?.xxs}px;
       border-radius: ${corners?.s}px;
-      background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : "transparent"};
+      background-color: ${isSelected ? semanticColors?.base?.backgroundTertiary : isHovered ? semanticColors?.base?.backgroundSecondary : "transparent"};
       pointer-events: ${disabled ? "none" : "auto"};
 
       &:hover {
@@ -11402,7 +11403,7 @@ const Legend = (props) => {
                     : hasSelection && !isSelected;
             // Determine color: use colors prop, then item color, then fallback to gray
             const itemColor = colors?.[index] || item.color || fallbackColor;
-            return (jsxs(LegendItem, { onMouseEnter: () => handleMouseEnter(item, index), onMouseLeave: () => handleMouseLeave(item, index), onClick: () => handleClick(item, index), role: "button", tabIndex: item.disabled ? -1 : 0, "aria-label": `${item.name}${item.value ? `: ${item.value}` : ""}`, "aria-pressed": isSelected, "aria-disabled": item.disabled, isSelected: isSelected, disabled: item.disabled, children: [jsx(LegendIcon, { color: itemColor, isDimmed: isDimmed }), jsx(LegendLabel, { disabled: item.disabled, children: item.name }), showValues && item.value !== undefined && (jsx(LegendValue, { disabled: item.disabled, children: typeof item.value === "number"
+            return (jsxs(LegendItem, { onMouseEnter: () => handleMouseEnter(item, index), onMouseLeave: () => handleMouseLeave(item, index), onClick: () => handleClick(item, index), role: "button", tabIndex: item.disabled ? -1 : 0, "aria-label": `${item.name}${item.value ? `: ${item.value}` : ""}`, "aria-pressed": isSelected, "aria-disabled": item.disabled, isSelected: isSelected, disabled: item.disabled, isHovered: isHovered, children: [jsx(LegendIcon, { color: itemColor, isDimmed: isDimmed }), jsx(LegendLabel, { disabled: item.disabled, children: item.name }), showValues && item.value !== undefined && (jsx(LegendValue, { disabled: item.disabled, children: typeof item.value === "number"
                             ? item.value.toLocaleString()
                             : item.value }))] }, `${item.name}-${index}`));
         }) })));
@@ -18323,6 +18324,7 @@ function NavigationFooter({ backgroundAppearance = "matchBackground", images, lo
 
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable sonarjs/no-duplicate-string */
+const TOOLBAR_HEIGHT = 48;
 const doNotForwardProps$a = [
     "hasInvertedStyle",
     "isNarrow",
@@ -18338,7 +18340,7 @@ const doNotForwardProps$a = [
 const StyledTopComponentSlot = styled$2("div") `
   position: sticky;
   top: 0;
-  z-index: 1300;
+  z-index: 2100;
 `;
 const StyledAppBar = styled$2(AppBar, {
     shouldForwardProp: (prop) => ![...doNotForwardProps$a, "sdsStyle"].includes(prop)
@@ -18350,7 +18352,7 @@ const StyledAppBar = styled$2(AppBar, {
       background-image: none;
       max-width: 100%;
       overflow-x: auto;
-      z-index: ${props.theme?.zIndex?.drawer ? props.theme.zIndex.drawer + 10 : 1210};
+      z-index: 2100;
     `;
 }}
 `;
@@ -18379,8 +18381,8 @@ const StyledToolbar = styled$2(Toolbar, {
     const spaces = getSpaces(props);
     return css$3 `
       &.MuiToolbar-root {
-        min-height: 48px;
-        max-height: 48px;
+        min-height: ${TOOLBAR_HEIGHT}px;
+        max-height: ${TOOLBAR_HEIGHT}px;
         padding: ${spaces?.s}px ${spaces?.l}px;
 
         ${isNarrow && NarrowToolbar(props)}
@@ -18543,7 +18545,7 @@ const StyledTitleContainer = styled$2("div", {
       color: ${props.hasInvertedStyle
         ? colors?.base.textPrimaryOnDark
         : colors?.base.textPrimary};
-      margin-right: ${spaces?.xxl}px;
+      margin-right: ${spaces?.xxxl}px;
       width: 100%;
 
       ${isNarrow && NarrowTitleContainer()}
@@ -18585,8 +18587,8 @@ const StyledPrimaryNavContainer = styled$2("div", {
     const primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
     return css$3 `
       flex-direction: ${isNarrow ? "column" : "row"};
-      gap: ${spaces?.xxl}px;
-      margin-right: ${spaces?.xxl}px;
+      gap: ${spaces?.xxxl}px;
+      margin-right: ${spaces?.xxxl}px;
       flex: 1;
       justify-content: ${showSearch
         ? primaryNavPositionWithSearch
@@ -18713,14 +18715,14 @@ const NarrowButtonStyles = (props) => {
     &::before {
       content: "";
       position: absolute;
-      height: ${spaces?.xxl}px;
+      height: ${spaces?.xxxl}px;
       width: 100%;
       background: linear-gradient(
         to top,
         ${backgroundColor} 0%,
         ${backgroundColor}00 100%
       );
-      top: -${spaces?.xxl}px;
+      top: -${spaces?.xxxl}px;
     }
 
     .MuiButton-icon .MuiSvgIcon-root {
@@ -18741,7 +18743,7 @@ const StyledButtonSection = styled$2("section", {
     const spaces = getSpaces(props);
     return css$3 `
       gap: ${spaces?.m}px;
-      margin-left: ${spaces?.xxl}px;
+      margin-left: ${spaces?.xxxl}px;
 
       ${isNarrow && NarrowButtonStyles(props)}
     `;
@@ -18761,8 +18763,8 @@ const StyledDrawer$1 = styled$2(Drawer, {
         width: 100%;
         display: flex;
         flex-direction: column;
-        top: ${topOffset}px;
-        height: calc(100% - ${topOffset}px);
+        top: ${topOffset + TOOLBAR_HEIGHT}px;
+        height: calc(100% - ${topOffset + TOOLBAR_HEIGHT}px);
         justify-content: space-between;
       }
     `;
@@ -18812,7 +18814,7 @@ const DrawerAccordionStyles = (props) => {
     &[aria-expanded="true"] {
       position: sticky;
       border-radius: 0;
-      top: calc(48px + ${spaces?.s}px);
+      top: ${spaces?.s}px;
       z-index: 11;
       backdrop-filter: blur(0px);
       color: ${textOpenColor};
@@ -18997,6 +18999,7 @@ const StyledMegaMenuDrawer = styled$2(Drawer, {
     return css$3 `
       pointer-events: none;
       top: ${topOffset}px;
+      z-index: 2000;
 
       .MuiDrawer-paper {
         background-color: ${hasInvertedStyle
@@ -19009,7 +19012,7 @@ const StyledMegaMenuDrawer = styled$2(Drawer, {
         box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1);
         background-image: none;
         padding: ${spaces?.xl ? spaces?.xl + 48 : 48}px ${spaces?.xl}px
-          ${spaces?.xxl}px;
+          ${spaces?.xxxl}px;
         transform: translateY(48px);
         top: ${topOffset}px;
       }
@@ -19035,7 +19038,7 @@ const StyledMegaMenuContent = styled$2("div", {
         : semanticColors?.base.backgroundPrimary};
       display: flex;
       flex-wrap: wrap;
-      gap: ${spaces?.xxl}px;
+      gap: ${spaces?.xxxl}px;
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
@@ -19054,7 +19057,7 @@ const StyledHoverDrawerColumn = styled$2("div", {
     // Account for gaps between columns
     const columnsPerRow = totalColumns > 4 ? 4 : totalColumns;
     const gapCount = columnsPerRow - 1;
-    const columnWidth = `calc((100% - (${gapCount} * ${spaces?.xxl}px)) / ${columnsPerRow})`;
+    const columnWidth = `calc((100% - (${gapCount} * ${spaces?.xxxl}px)) / ${columnsPerRow})`;
     return css$3 `
       display: flex;
       flex-direction: column;
@@ -19255,7 +19258,7 @@ const StyledHoverDrawerActions = styled$2("div", {
       margin-top: ${spaces?.l}px;
       padding-left: ${isNarrow
         ? `calc(${spaces?.l}px + ${spaces?.m}px)`
-        : `calc(${spaces?.xxl}px + ${spaces?.xs}px)`};
+        : `calc(${spaces?.xxxl}px + ${spaces?.xs}px)`};
       flex-wrap: wrap;
     `;
 }}
@@ -20141,6 +20144,7 @@ function useNavigationState() {
 function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
     const theme = useTheme$4();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
+    const [clickedDrawerKey, setClickedDrawerKey] = useState(null);
     // Helper function to wrap dropdown items' onClick handlers
     // This automatically sets the parent dropdown as active when an item is clicked
     const wrapDropdownItemsWithActiveKey = (dropdownItems, parentKey) => {
@@ -20179,8 +20183,22 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
         const handleClick = (e) => {
             onChange(key);
             parentOnClick?.(e);
+            if (drawerOpen) {
+                setActiveDrawerKey(null);
+                setContentKey(null);
+                setClickedDrawerKey(key);
+            }
         };
-        return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: jsx(UnifiedNavItem, __assign({}, rest, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", onClick: handleClick, innerSdsStyle: sdsStyle, navVariant: "primary", component: componentProp, href: defaultUrl, target: target, rel: rel, children: jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })) }, key));
+        return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                if (clickedDrawerKey !== key) {
+                    onDrawerOpen(key);
+                }
+            }, onMouseLeave: () => {
+                if (clickedDrawerKey === key) {
+                    setClickedDrawerKey(null);
+                }
+                onDrawerClose();
+            }, children: jsx(UnifiedNavItem, __assign({}, rest, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, sdsStyle: "minimal", onClick: handleClick, innerSdsStyle: sdsStyle, navVariant: "primary", component: componentProp, href: defaultUrl, target: target, rel: rel, children: jsxs(StyledLabel, { itemType: item.itemType, active: isActive, hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, navVariant: "primary", children: [jsx(StyledLabelTextWrapper$1, { active: isActive, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] }) })) }, key));
     };
     const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
         const isDropdownOpen = open && activeDropdownKey === key;
@@ -20856,7 +20874,7 @@ const NavigationHeader = forwardRef((props, ref) => {
     const position = sdsStyle === "drawer" ? "sticky" : isSticky ? "sticky" : "relative";
     // Disable elevation when drawer style is active and any drawer is open
     const effectiveScrollElevation = scrollElevation && !(sdsStyle === "drawer" && isAnyDrawerOpen);
-    return (jsxs(Fragment, { children: [topComponentSlot && (jsx(StyledTopComponentSlot, { ref: topSlotRef, children: topComponentSlot })), jsx(ElevationScroll, __assign({}, props, { shouldElevate: effectiveScrollElevation, children: jsx(StyledAppBar, __assign({ elevation: 0, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: position, style: { top: topOffset } }, rest, { children: headerContent })) })), dimensions.isNarrow && drawerOpen && (jsxs(StyledDrawer$1, { anchor: "right", open: drawerOpen, onClose: () => setDrawerOpen(false), hasInvertedStyle: hasInvertedStyle, topOffset: topOffset, role: "dialog", "aria-label": "Navigation menu", children: [jsx(ElevationScroll, __assign({}, props, { shouldElevate: effectiveScrollElevation, children: jsx(StyledAppBar, __assign({ elevation: 10, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: "sticky" }, rest, { children: headerContent })) })), jsxs(StyledDrawerContent, { children: [jsxs("div", { children: [search, primaryNav, primaryNav && secondaryNav && (jsx(StyledSectionDivider, { hasInvertedStyle: hasInvertedStyle })), secondaryNav] }), buttonsNode] })] }))] }));
+    return (jsxs(Fragment, { children: [topComponentSlot && (jsx(StyledTopComponentSlot, { ref: topSlotRef, children: topComponentSlot })), jsx(ElevationScroll, __assign({}, props, { shouldElevate: effectiveScrollElevation, children: jsx(StyledAppBar, __assign({ elevation: 0, hasInvertedStyle: hasInvertedStyle, ref: mergeRefs([ref, navRef]), "aria-label": "Main navigation", tabIndex: 0, position: position, style: { top: topOffset } }, rest, { children: headerContent })) })), dimensions.isNarrow && drawerOpen && (jsx(StyledDrawer$1, { anchor: "right", open: drawerOpen, onClose: () => setDrawerOpen(false), hasInvertedStyle: hasInvertedStyle, topOffset: topOffset, role: "dialog", "aria-label": "Navigation menu", disableScrollLock: false, children: jsxs(StyledDrawerContent, { children: [jsxs("div", { children: [search, primaryNav, primaryNav && secondaryNav && (jsx(StyledSectionDivider, { hasInvertedStyle: hasInvertedStyle })), secondaryNav] }), buttonsNode] }) }))] }));
 });
 
 /**