@czi-sds/components 23.0.0 → 23.2.0

package/dist/index.cjs.js

@@ -526,7 +526,7 @@ const Spaces = {
     xs: 6,
     s: 8,
     m: 12,
-    default: 12,
+    default: 8,
     l: 16,
     xl: 24,
     xxl: 32,
@@ -811,7 +811,7 @@ const SDSPaletteLight = (appTheme) => {
             backgroundPrimaryDark: appTheme.colors.gray[900],
             backgroundPrimaryInverse: appTheme.colors.gray[900],
             backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 40),
-            backgroundSecondaryOnDark: addOpacityToHex(appTheme.colors.gray[700], 62),
+            backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[700], 62),
             backgroundSecondaryInverse: appTheme.colors.gray[700],
             backgroundTertiary: appTheme.colors.gray[100],
             borderOnFill: appTheme.colors.gray[50],
@@ -819,27 +819,23 @@ const SDSPaletteLight = (appTheme) => {
             borderPrimaryDisabled: appTheme.colors.gray[300],
             borderPrimaryDisabledOnDark: appTheme.colors.gray[600],
             borderPrimaryDisabledInverse: appTheme.colors.gray[600],
-            borderPrimaryHover: appTheme.colors.gray[900],
-            borderPrimaryHoverOnDark: appTheme.colors.gray[50],
+            borderPrimaryInteraction: appTheme.colors.gray[900],
+            borderPrimaryInteractionOnDark: appTheme.colors.gray[50],
             borderPrimaryHoverInverse: appTheme.colors.gray[50],
             borderPrimaryOnDark: appTheme.colors.gray[300],
             borderPrimaryInverse: appTheme.colors.gray[300],
-            borderPrimaryPressed: appTheme.colors.gray[900],
-            borderPrimaryPressedOnDark: appTheme.colors.gray[50],
             borderPrimaryPressedInverse: appTheme.colors.gray[50],
             borderSecondary: appTheme.colors.gray[300],
             divider: appTheme.colors.gray[200],
             dividerOnDark: appTheme.colors.gray[700],
             dividerInverse: appTheme.colors.gray[700],
-            fillDisabled: appTheme.colors.gray[200],
-            fillHover: addOpacityToHex(appTheme.colors.gray[300], 20),
-            fillHoverOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
-            fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
-            fillOpen: addOpacityToHex(appTheme.colors.gray[300], 20),
-            fillOpenOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
+            fillDisabled: appTheme.colors.gray[100],
+            fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 20),
+            fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 20),
+            fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 20),
             fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
-            fillPressed: addOpacityToHex(appTheme.colors.gray[300], 20),
-            fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
+            fillPressed: addOpacityToHex(appTheme.colors.gray[300], 30),
+            fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
             fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
             fillPrimary: appTheme.colors.gray[50],
             fillSelected: appTheme.colors.gray[900],
@@ -851,16 +847,15 @@ const SDSPaletteLight = (appTheme) => {
             ornamentPrimaryOnDark: appTheme.colors.gray[50],
             ornamentPrimaryInverse: appTheme.colors.gray[50],
             ornamentSecondary: appTheme.colors.gray[600],
-            ornamentSecondaryHover: appTheme.colors.gray[900],
-            ornamentSecondaryHoverOnDark: appTheme.colors.gray[50],
+            ornamentSecondaryInteraction: appTheme.colors.gray[900],
+            ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
             ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
             ornamentSecondaryOnDark: appTheme.colors.gray[300],
             ornamentSecondaryInverse: appTheme.colors.gray[300],
-            ornamentSecondaryPressed: appTheme.colors.gray[900],
-            ornamentSecondaryPressedOnDark: appTheme.colors.gray[50],
             ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
-            surface: appTheme.colors.gray[50],
-            surfaceOnDark: appTheme.colors.gray[900],
+            surfacePrimary: appTheme.colors.gray[50],
+            surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
+            surfacePrimaryDark: appTheme.colors.gray[900],
             surfaceInverse: appTheme.colors.gray[900],
             textDisabled: appTheme.colors.gray[300],
             textDisabledOnDark: appTheme.colors.gray[600],
@@ -973,7 +968,7 @@ const SDSPaletteDark = (appTheme) => {
             backgroundPrimaryDark: appTheme.colors.gray[75],
             backgroundPrimaryInverse: appTheme.colors.gray[75],
             backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
-            backgroundSecondaryOnDark: addOpacityToHex(appTheme.colors.gray[100], 60),
+            backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
             backgroundSecondaryInverse: addOpacityToHex(appTheme.colors.gray[100], 60),
             backgroundTertiary: appTheme.colors.gray[100],
             borderOnFill: appTheme.colors.gray[900],
@@ -981,27 +976,23 @@ const SDSPaletteDark = (appTheme) => {
             borderPrimaryDisabled: appTheme.colors.gray[300],
             borderPrimaryDisabledOnDark: appTheme.colors.gray[300],
             borderPrimaryDisabledInverse: appTheme.colors.gray[300],
-            borderPrimaryHover: appTheme.colors.gray[900],
-            borderPrimaryHoverOnDark: appTheme.colors.gray[900],
+            borderPrimaryInteraction: appTheme.colors.gray[900],
+            borderPrimaryInteractionOnDark: appTheme.colors.gray[900],
             borderPrimaryHoverInverse: appTheme.colors.gray[900],
             borderPrimaryOnDark: appTheme.colors.gray[600],
             borderPrimaryInverse: appTheme.colors.gray[600],
-            borderPrimaryPressed: appTheme.colors.gray[900],
-            borderPrimaryPressedOnDark: appTheme.colors.gray[900],
             borderPrimaryPressedInverse: appTheme.colors.gray[900],
             borderSecondary: appTheme.colors.gray[300],
             divider: appTheme.colors.gray[200],
             dividerOnDark: appTheme.colors.gray[200],
             dividerInverse: appTheme.colors.gray[200],
-            fillDisabled: appTheme.colors.gray[200],
-            fillHover: addOpacityToHex(appTheme.colors.gray[300], 32),
-            fillHoverOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
+            fillDisabled: appTheme.colors.gray[100],
+            fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
+            fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
             fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
-            fillOpen: addOpacityToHex(appTheme.colors.gray[300], 32),
-            fillOpenOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
             fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
-            fillPressed: addOpacityToHex(appTheme.colors.gray[300], 32),
-            fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
+            fillPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
+            fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
             fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
             fillPrimary: appTheme.colors.gray[100],
             fillSelected: appTheme.colors.gray[900],
@@ -1013,16 +1004,15 @@ const SDSPaletteDark = (appTheme) => {
             ornamentPrimaryOnDark: appTheme.colors.gray[900],
             ornamentPrimaryInverse: appTheme.colors.gray[50],
             ornamentSecondary: appTheme.colors.gray[600],
-            ornamentSecondaryHover: appTheme.colors.gray[900],
-            ornamentSecondaryHoverOnDark: appTheme.colors.gray[900],
+            ornamentSecondaryInteraction: appTheme.colors.gray[900],
+            ornamentSecondaryInteractionOnDark: appTheme.colors.gray[900],
             ornamentSecondaryHoverInverse: appTheme.colors.gray[900],
             ornamentSecondaryOnDark: appTheme.colors.gray[600],
             ornamentSecondaryInverse: appTheme.colors.gray[600],
-            ornamentSecondaryPressed: appTheme.colors.gray[900],
-            ornamentSecondaryPressedOnDark: appTheme.colors.gray[900],
             ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
-            surface: appTheme.colors.gray[100],
-            surfaceOnDark: appTheme.colors.gray[100],
+            surfacePrimary: appTheme.colors.gray[100],
+            surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
+            surfacePrimaryDark: appTheme.colors.gray[100],
             surfaceInverse: appTheme.colors.gray[100],
             textDisabled: appTheme.colors.gray[300],
             textDisabledOnDark: appTheme.colors.gray[300],
@@ -1304,6 +1294,7 @@ function makeThemeOptions(appTheme, mode) {
             appTheme.spacing.l,
             appTheme.spacing.xl,
             appTheme.spacing.xxl,
+            appTheme.spacing.xxxl,
         ],
         transitions: {
             duration: {
@@ -1403,7 +1394,7 @@ function focusVisibleA11yStyle(props) {
     const semanticColors = getSemanticColors(props);
     return `
       &.Mui-focusVisible, &:focus-visible {
-        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
         outline-offset: 1px;
       }
   `;
@@ -1612,7 +1603,7 @@ const StyledAccordionHeader = styled__default.default(material.AccordionSummary,
       &:hover {
         & .${material.accordionSummaryClasses.expandIconWrapper} {
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
@@ -5113,12 +5104,12 @@ const Minimal = (props) => {
     }
 
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
     }
 
     &:active {
       color: ${semanticColors?.accent?.textActionPressed};
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
 
       svg {
         color: ${semanticColors?.accent?.ornamentPressed};
@@ -5225,7 +5216,7 @@ const primary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5253,7 +5244,7 @@ const secondary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5282,19 +5273,19 @@ const tertiary = (props) => {
 
     &:hover {
       background: none;
-      color: ${semanticColors?.base?.ornamentSecondaryHover};
+      color: ${semanticColors?.base?.ornamentSecondaryInteraction};
 
       svg {
-        color: ${semanticColors?.base?.ornamentSecondaryHover};
+        color: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
 
     &:active {
       background: none;
-      color: ${semanticColors?.base?.ornamentSecondaryPressed};
+      color: ${semanticColors?.base?.ornamentSecondaryInteraction};
 
       svg {
-        color: ${semanticColors?.base?.ornamentSecondaryPressed};
+        color: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
   `;
@@ -5514,7 +5505,7 @@ const applyIntentColor$2 = (props, intent) => {
       .${material.inputAdornmentClasses.root} .${material.buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${semanticColors?.base?.ornamentSecondaryPressed};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     }
@@ -5580,9 +5571,6 @@ const StyledSearchBase = styled__default.default(material.TextField, {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     return react.css `
-      margin-top: ${spaces?.m}px;
-      margin-bottom: ${spaces?.m}px;
-      margin-right: ${spaces?.xl}px;
       min-width: 120px;
       display: block;
 
@@ -5631,7 +5619,8 @@ const StyledSearchBase = styled__default.default(material.TextField, {
 
           &:hover {
             svg {
-              color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
+              color: ${semanticColors?.base
+        ?.ornamentSecondaryInteraction} !important;
             }
           }
 
@@ -5651,7 +5640,7 @@ const StyledSearchBase = styled__default.default(material.TextField, {
       }
 
       .${material.outlinedInputClasses.root}:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
 
         & .${material.buttonBaseClasses.root}:last-of-type {
           svg {
@@ -5659,7 +5648,7 @@ const StyledSearchBase = styled__default.default(material.TextField, {
           }
         }
         .${material.outlinedInputClasses.notchedOutline} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
       }
 
@@ -5673,13 +5662,13 @@ const StyledSearchBase = styled__default.default(material.TextField, {
         .${material.inputAdornmentClasses.root} .${material.buttonBaseClasses.root}:last-of-type {
           cursor: default;
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryPressed};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
 
       &.user-is-tabbing .${material.outlinedInputClasses.root}:focus-within {
-        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
         outline-offset: 1px;
       }
 
@@ -5718,10 +5707,10 @@ const StyledMenuItem$1 = styled__default.default(material.MenuItem) `
         opacity: 1;
 
         &:hover, &.${material.menuItemClasses.focusVisible} {
-          background-color: ${semanticColors?.base?.fillHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
 
           &[aria-selected="true"] {
-            background-color: ${semanticColors?.base?.fillHover};
+            background-color: ${semanticColors?.base?.fillInteraction};
           }
         }
       }
@@ -5738,7 +5727,7 @@ const StyledMenuItem$1 = styled__default.default(material.MenuItem) `
         background-color: unset !important;
 
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover} !important;
+          background-color: ${semanticColors?.base?.fillInteraction} !important;
         }
 
         ${StyledIcon$1}, ${DotIcon} {
@@ -5751,16 +5740,16 @@ const StyledMenuItem$1 = styled__default.default(material.MenuItem) `
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
         ${StyledIcon$1}, ${DotIcon} {
           color: ${selected ? semanticColors?.base?.ornamentPrimary : semanticColors?.base?.ornamentSecondary};
         }
       }
 
       &.Mui-selected.MuiListItem-root.MuiListItem-button {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
         }
       }
 
@@ -6099,7 +6088,7 @@ const StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
       // look at the useDetectUserTabbing hook.
       &[data-user-is-tabbing="true"]:focus-within {
         border-radius: 4px;
-        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
         outline-offset: 1px;
       }
 
@@ -6124,11 +6113,11 @@ const StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
             min-height: unset;
 
             &.${material.autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
 
             &[aria-selected="true"] {
-              background-color: ${semanticColors?.base?.surface};
+              background-color: ${semanticColors?.base?.surfacePrimary};
             }
 
             &[aria-disabled="true"] {
@@ -6136,7 +6125,7 @@ const StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
             }
 
             &[aria-selected="true"].${material.autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
           }
 
@@ -6150,7 +6139,7 @@ const StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
         .${material.autocompleteClasses.groupLabel} {
           top: 0;
           color: ${semanticColors?.base?.textSecondary};
-          background-color: ${semanticColors?.base?.surface};
+          background-color: ${semanticColors?.base?.surfacePrimary};
           padding: 0 ${spaces?.m}px;
         }
 
@@ -6218,7 +6207,7 @@ const StyledPaper$3 = styled__default.default(material.Paper) `
     return `
       background-image: none;
       padding: ${spaces?.xs}px 0;
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       border: ${borders?.none};
       outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000", 15)};
       border-radius: ${corners?.l}px;
@@ -6230,9 +6219,10 @@ const StyledPaper$3 = styled__default.default(material.Paper) `
 const StyledMenuItemDetails = styled__default.default("div") `
   ${fontBodyXxs$1}
   ${(props) => {
+    const { disabled } = props;
     const semanticColors = getSemanticColors(props);
     return `
-      color: ${semanticColors?.base?.textSecondary};
+      color: ${disabled ? semanticColors?.base?.textDisabled : semanticColors?.base?.textSecondary};
       white-space: pre-wrap;
     `;
 }}
@@ -6397,15 +6387,15 @@ const AutocompleteBase = (props) => {
     }
     function defaultRenderOption(optionProps, option, { selected }) {
         let MenuItemContent;
-        const { component, details, count, icon, sdsIconProps, ...restOptionProps } = option;
+        const { component, details, count, icon, sdsIconProps, disabled: optionDisabled, ...restOptionProps } = option;
         const menuItemLabel = getOptionLabel(option);
         if (component) {
             MenuItemContent = component;
         }
         else {
-            MenuItemContent = (jsxRuntime.jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsxRuntime.jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
+            MenuItemContent = (jsxRuntime.jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsxRuntime.jsx(StyledMenuItemDetails, { disabled: optionDisabled, className: "menuItem-details", children: details }))] }));
         }
-        return (React.createElement(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, restOptionProps, { key: option.name }), MenuItemContent));
+        return (React.createElement(MenuItem, __assign({ column: count, disabled: optionDisabled || optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, restOptionProps, { key: option.name }), MenuItemContent));
     }
 };
 
@@ -6489,7 +6479,7 @@ const StyledPopper$2 = styled__default.default(material.Popper, {
     const borders = getBorders(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       border: ${borders?.none};
       border-radius: ${corners?.l}px;
@@ -6516,7 +6506,7 @@ const StyledPaper$2 = styled__default.default(material.Paper, {
     const shadows = getShadows(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       box-shadow: ${shadows?.none};
       margin: 0;
@@ -6560,7 +6550,7 @@ const StyledColumnIcon = material.styled("span") `
     const iconSizes = getIconSizes(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       position: absolute;
       right: -${spaces?.xs}px;
       top: -${spaces?.xxxs}px;
@@ -6950,7 +6940,7 @@ const StyledButtonToggle = styled__default.default(ButtonIcon, {
     const { sdsStage } = props;
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillOpen : "transparent"};
+      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillInteraction : "transparent"};
     `;
 }}
 `;
@@ -7137,7 +7127,7 @@ const dark$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1.css `
     ${fontHeaderXs(props)}
-    background-color: ${semanticColors?.base?.surfaceOnDark};
+    background-color: ${semanticColors?.base?.surfacePrimaryDark};
     color: ${semanticColors?.base?.textPrimaryOnDark};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7147,7 +7137,7 @@ const light$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1.css `
     ${fontBodyXs$2(props)}
-    background-color: ${semanticColors?.base?.surface};
+    background-color: ${semanticColors?.base?.surfacePrimary};
     color: ${semanticColors?.base?.textPrimary};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7222,8 +7212,8 @@ const arrowCss = (props) => {
       /* (bethbertozzi): !important is needed to fight inline style */
       left: ${arrowOffset}px !important;
       color: ${hasInvertedStyle || inverted || sdsStyle === "dark"
-        ? semanticColors?.base?.surfaceOnDark
-        : semanticColors?.base?.surface};
+        ? semanticColors?.base?.surfacePrimaryDark
+        : semanticColors?.base?.surfacePrimary};
       &:before {
         box-sizing: border-box;
         width: 12px;
@@ -7646,7 +7636,7 @@ const StyledTableHeader$1 = styled__default.default("th", {
         }
 
         & svg {
-          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover};
+          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     `;
@@ -7882,6 +7872,21 @@ const StyledHeaderTitle = styled__default.default("div", {
     `;
 }}
 `;
+const StyledHeaderSubTitle = styled__default.default("div", {
+    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+}) `
+  ${fontBodyXxs$1}
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+      color: ${semanticColors?.base?.textSecondary};
+      padding-right: ${spaces?.m}px;
+      padding-top: ${spaces?.xxxs}px;
+    `;
+}}
+`;
 const StyledDropdownMenuAutocompleteWrapper = styled__default.default("div", {
     shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
 }) `
@@ -7928,7 +7933,7 @@ const StyledPopper = styled__default.default(material.Popper, {
     const shadows = getShadows(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       border: ${borders?.none};
       border-radius: ${corners?.l}px;
@@ -7951,7 +7956,7 @@ const StyledPaper$1 = styled__default.default(material.Paper, {
       border: none !important;
       outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
       border-radius: ${corners?.l}px;
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       margin: 0;
       padding: 0 0 ${spaces?.xs}px 0;
@@ -7990,9 +7995,15 @@ const StyledDropdownMenuHeader = styled__default.default("div") `
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     return `
+      & > div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+
       display: flex;
-      align-items: center;
-      justify-content: space-between;
+      flex-direction: column;
       padding: ${spaces?.xs}px ${spaces?.m}px ${search ? spaces?.xs : spaces?.s}px;
       ${search && `border-bottom: solid 1px ${semanticColors?.base?.divider};`}
     `;
@@ -8007,7 +8018,7 @@ const DEFAULT_POPPER_BASE_PROPS = {
 };
 const DropdownMenu = (props) => {
     const theme = material.useTheme();
-    const { anchorEl, id, InputBaseProps, open = false, PopperComponent = StyledPopper, PaperComponent = StyledPaper$1, PopperPlacement = "bottom-start", PopperBaseProps = {}, isSearchAutoFocus = true, search = false, title, headerComponentSlot, label = "Search", children, options, onClickAway = noop, ClickAwayListenerProps, width = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, onOpen, onClose, ...rest } = props;
+    const { anchorEl, id, InputBaseProps, open = false, PopperComponent = StyledPopper, PaperComponent = StyledPaper$1, PopperPlacement = "bottom-start", PopperBaseProps = {}, isSearchAutoFocus = true, search = false, title, subTitle, headerComponentSlot, label = "Search", children, options, onClickAway = noop, ClickAwayListenerProps, width = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, onOpen, onClose, ...rest } = props;
     const isMultiColumn = "options" in (options?.[0] || EMPTY_OBJECT);
     // (masoudmanson): The DropdownMenu's Popper component should have a minimum
     // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -8037,7 +8048,7 @@ const DropdownMenu = (props) => {
         ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
         // (masoudmanson): To override the width of the Popper,
         // the sx prop's value must be set after spreading the PopperBaseProps.
-        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [jsxRuntime.jsxs("div", { children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] }), title && subTitle && (jsxRuntime.jsx(StyledHeaderSubTitle, { children: subTitle }))] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
 const doNotForwardProps$u = [
@@ -8095,12 +8106,13 @@ const inputDropdownStyles = (props) => {
     }
 
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
-      box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
+      box-shadow: inset 0 0 0 1px
+        ${semanticColors?.base?.borderPrimaryInteraction};
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryHover};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
 
       .styled-label {
@@ -8114,7 +8126,7 @@ const inputDropdownStyles = (props) => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
 
@@ -8166,12 +8178,12 @@ const minimal$1 = (props) => {
     }
 
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
       border: none;
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryHover};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
 
       .styled-label {
@@ -8180,7 +8192,7 @@ const minimal$1 = (props) => {
     }
 
     &:active {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
       border: none;
     }
   `;
@@ -8250,7 +8262,7 @@ const isOpen = (props) => {
         : ""}
 
     path {
-      fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+      fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
     }
 
     box-shadow: ${sdsStyle === "minimal"
@@ -8258,15 +8270,15 @@ const isOpen = (props) => {
         : `inset 0 0 0 1px ${semanticColors?.[inputColor]?.border}`};
 
     background-color: ${sdsStyle === "minimal"
-        ? semanticColors?.base?.fillOpen
+        ? semanticColors?.base?.fillInteraction
         : "transparent"};
 
     &:hover {
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryHover};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
 
-      border-color: ${semanticColors?.base?.borderPrimaryHover};
+      border-color: ${semanticColors?.base?.borderPrimaryInteraction};
     }
   `;
 };
@@ -8276,11 +8288,13 @@ const applyIntentColor$1 = (props, intent) => {
     box-shadow: inset 0 0 0 1px ${semanticColors?.[intent]?.border};
 
     &:hover {
-      box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryHover};
+      box-shadow: inset 0 0 0 1px
+        ${semanticColors?.base?.borderPrimaryInteraction};
     }
 
     &:active {
-      box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryPressed};
+      box-shadow: inset 0 0 0 1px
+        ${semanticColors?.base?.borderPrimaryInteraction};
     }
   `;
 };
@@ -8844,7 +8858,6 @@ const tagSizeS = (props) => {
     const semanticColors = getSemanticColors(props);
     return react.css `
     height: unset;
-    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXxxs$1(props)}
@@ -8854,7 +8867,7 @@ const tagSizeS = (props) => {
     .MuiSvgIcon-root {
       height: ${iconSizes?.xs.height}px;
       width: ${iconSizes?.xs.width}px;
-      margin: 0 ${spaces?.xxs}px 0 -${spaces?.xxxs}px;
+      margin: 0 ${spaces?.xxs}px 0 0;
     }
 
     .MuiChip-deleteIcon {
@@ -8872,7 +8885,6 @@ const tagSizeL = (props) => {
     const semanticColors = getSemanticColors(props);
     return react.css `
     height: unset;
-    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXs$2(props)}
@@ -8882,7 +8894,7 @@ const tagSizeL = (props) => {
     .MuiSvgIcon-root {
       height: ${iconSizes?.l.height}px;
       width: ${iconSizes?.l.width}px;
-      margin: 0 ${spaces?.xxs}px 0 -${spaces?.xxxs}px;
+      margin: 0 ${spaces?.xxs}px 0 0px;
     }
 
     .MuiChip-deleteIcon {
@@ -8899,9 +8911,11 @@ const rounded = (props) => {
     const spaces = getSpaces(props);
     const { sdsSize = "s", icon } = props;
     const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
+    const rightPadding = sdsSize === "l" && icon ? spaces?.s : spaces?.xs;
     return react.css `
     border-radius: ${corners?.rounded}px;
-    padding: ${topBottomPadding}px ${spaces?.s}px;
+    padding: ${topBottomPadding}px ${rightPadding}px ${topBottomPadding}px
+      ${spaces?.xs}px;
 
     &:after {
       content: "";
@@ -8916,7 +8930,7 @@ const square = (props) => {
     const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
     return react.css `
     border-radius: ${corners?.m}px;
-    padding: ${topBottomPadding}px ${spaces?.s}px;
+    padding: ${topBottomPadding}px ${spaces?.xs}px;
 
     &:after {
       content: "";
@@ -8944,54 +8958,51 @@ const secondary = (props) => {
     return createTypeCss(props, "secondary");
 };
 function generatePrimaryTagColors(intent, colors, semanticColors) {
-    if (intent || colors.length) {
-        intent = intent || "neutral";
-        return {
-            background: colors.length >= 2 ? colors[1] : semanticColors?.[intent].fillPrimary,
-            backgroundClicked: colors.length >= 2
-                ? material.darken(colors[1], 0.3)
-                : semanticColors?.[intent].fillPressed,
-            backgroundHover: colors.length >= 2
-                ? material.darken(colors[1], 0.15)
-                : semanticColors?.[intent].fillHover,
-            iconColor: colors.length > 2 ? colors[2] : semanticColors?.base?.ornamentOnFill,
-            label: colors.length ? colors[0] : semanticColors?.base?.textOnFill
-        };
-    }
-    else {
-        return {
-            background: semanticColors?.neutral.fillPrimary,
-            backgroundClicked: semanticColors?.neutral.fillPressed,
-            backgroundHover: semanticColors?.neutral.fillHover,
-            iconColor: semanticColors?.base?.ornamentOnFill,
-            label: semanticColors?.base?.textOnFill
-        };
-    }
+    const effectiveIntent = intent || "neutral";
+    const intentColors = semanticColors?.[effectiveIntent];
+    const hasCustomColors = colors.length >= 2;
+    return {
+        background: hasCustomColors ? colors[1] : intentColors?.fillPrimary,
+        backgroundClicked: hasCustomColors
+            ? material.darken(colors[1], 0.3)
+            : intentColors?.fillPressed,
+        backgroundHover: hasCustomColors
+            ? material.darken(colors[1], 0.15)
+            : intentColors?.fillHover,
+        iconColor: hasCustomColors
+            ? colors[2]
+            : semanticColors?.base?.ornamentOnFill,
+        label: colors.length > 0 ? colors[0] : semanticColors?.base?.textOnFill,
+        borderColor: material.alpha(semanticColors?.neutral.border || "#000", 0.6)
+    };
 }
-function generateSecondaryTagColors(intent, colors, semanticColors) {
-    if (intent || colors.length) {
-        intent = intent || "neutral";
-        return {
-            background: colors.length >= 2 ? colors[1] : semanticColors?.[intent].fillSecondary,
-            backgroundClicked: colors.length >= 2
-                ? material.darken(colors[1], 0.3)
-                : semanticColors?.[intent].fillPressed,
-            backgroundHover: colors.length >= 2
-                ? material.darken(colors[1], 0.15)
-                : semanticColors?.[intent].fillHover,
-            iconColor: colors.length > 2 ? colors[2] : semanticColors?.[intent].ornament,
-            label: colors.length ? colors[0] : semanticColors?.[intent].text
-        };
-    }
-    else {
-        return {
-            background: semanticColors?.neutral.fillSecondary,
-            backgroundClicked: semanticColors?.neutral.fillPressed,
-            backgroundHover: semanticColors?.neutral.fillHover,
-            iconColor: semanticColors?.neutral.ornament,
-            label: semanticColors?.neutral.fillPressed
-        };
-    }
+function getSecondaryBorderColor(effectiveIntent, theme, intentColors) {
+    if (!theme || !theme.palette)
+        return material.alpha(intentColors?.border || "#000", 0.6);
+    if (effectiveIntent === "negative" && theme.palette.mode === "dark")
+        return material.alpha(intentColors?.border || "#000", 0.65);
+    if (effectiveIntent === "notice" && theme.palette.mode === "light")
+        return material.alpha(intentColors?.border || "#000", 0.85);
+    return material.alpha(intentColors?.border || "#000", 0.6);
+}
+function generateSecondaryTagColors(intent, colors, semanticColors, theme = defaultTheme$4) {
+    const effectiveIntent = intent || "neutral";
+    const intentColors = semanticColors?.[effectiveIntent];
+    const hasCustomColors = colors.length >= 2;
+    return {
+        background: hasCustomColors ? colors[1] : intentColors?.fillSecondary,
+        backgroundClicked: hasCustomColors
+            ? material.darken(colors[1], 0.3)
+            : intentColors?.fillPressed,
+        backgroundHover: hasCustomColors
+            ? material.darken(colors[1], 0.15)
+            : intentColors?.fillHover,
+        iconColor: hasCustomColors ? colors[2] : intentColors?.ornament,
+        label: colors.length > 0 ? colors[0] : intentColors?.text,
+        borderColor: hasCustomColors
+            ? material.alpha(colors[1], 0.6)
+            : getSecondaryBorderColor(effectiveIntent, theme, intentColors)
+    };
 }
 function createTypeCss(props, type) {
     const semanticColors = getSemanticColors(props);
@@ -8999,12 +9010,16 @@ function createTypeCss(props, type) {
     const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
     const typeToColors = {
         primary: generatePrimaryTagColors(intent, colors, semanticColors),
-        secondary: generateSecondaryTagColors(intent, colors, semanticColors)
+        secondary: generateSecondaryTagColors(intent, colors, semanticColors, props.theme)
     };
     const typeColors = typeToColors[type];
     return react.css `
     ${focusVisibleA11yStyle(props)}
 
+    ${type === "secondary" &&
+        react.css `
+      box-shadow: inset 0 0 0 1px ${typeColors.borderColor};
+    `}
     background-color: ${typeColors.background};
     position: relative;
 
@@ -9018,6 +9033,7 @@ function createTypeCss(props, type) {
 
     &:hover,
     &:active {
+      box-shadow: none;
       .MuiChip-label {
         color: ${semanticColors?.base?.textPrimaryInverse};
       }
@@ -9363,30 +9379,38 @@ const doNotForwardProps$r = [
     "cardSdsType",
     "classes",
 ];
-const StyledCard = styled__default.default(material.Card, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
-}) `
-  ${(props) => {
-    const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
-    const semanticColors = getSemanticColors(props);
-    const corners = getCorners(props);
-    const shadows = getShadows(props);
-    const flexDirection = sdsType === "wide" && visualElementType === "image"
+const getFlexDirection = (sdsType, visualElementType, imagePosition) => {
+    return sdsType === "wide" && visualElementType === "image"
         ? imagePosition === "left"
             ? "row"
             : "row-reverse"
         : visualElementType === "icon"
             ? "row"
             : "column";
-    const showDecorativeBorder = visualElementType === "image"
+};
+const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorder, imagePadding) => {
+    return visualElementType === "image"
         ? boundingBox && decorativeBorder && imagePadding
         : boundingBox && decorativeBorder;
+};
+const StyledCard = styled__default.default(material.Card, {
+    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+}) `
+  ${(props) => {
+    const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
+    const semanticColors = getSemanticColors(props);
+    const corners = getCorners(props);
+    const shadows = getShadows(props);
+    const spaces = getSpaces(props);
+    const flexDirection = getFlexDirection(sdsType, visualElementType, imagePosition);
+    const showDecorativeBorder = getShowDecorativeBorder(visualElementType, boundingBox, decorativeBorder, imagePadding);
     return react.css `
+      position: relative;
       display: flex;
       background-color: transparent;
       background-image: none;
       flex-direction: ${flexDirection};
-      overflow: auto;
+      overflow: visible;
       box-shadow: none;
       border-radius: ${corners?.xl}px;
 
@@ -9405,16 +9429,47 @@ const StyledCard = styled__default.default(material.Card, {
         background-color: ${semanticColors?.base?.backgroundPrimary};
       `}
 
+      ${showDecorativeBorder &&
+        react.css `
+        &:before {
+          content: "";
+          position: absolute;
+          background-color: ${semanticColors?.accent?.border};
+
+          ${sdsType === "wide" &&
+            react.css `
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            width: ${spaces?.xs}px;
+            border-top-left-radius: ${corners?.xl}px;
+            border-bottom-left-radius: ${corners?.xl}px;
+          `}
+
+          ${sdsType === "narrow" &&
+            react.css `
+            height: ${spaces?.xs}px;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            border-top-left-radius: ${corners?.xl}px;
+            border-top-right-radius: ${corners?.xl}px;
+          `}
+        }
+      `}
+
       ${sdsType === "wide" &&
         showDecorativeBorder &&
         react.css `
-        border-left: 4px solid ${semanticColors?.accent?.border};
+        border-top-left-radius: ${corners?.l}px;
+        border-bottom-left-radius: ${corners?.l}px;
       `}
 
       ${sdsType === "narrow" &&
         showDecorativeBorder &&
         react.css `
-        border-top: 4px solid ${semanticColors?.accent?.border};
+        border-top-left-radius: ${corners?.l}px;
+        border-top-right-radius: ${corners?.l}px;
       `}
     `;
 }}
@@ -9447,7 +9502,7 @@ const StyledCardActionArea = styled__default.default(Button, {
 
       &:hover,
       &:active {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
       }
     `;
 }}
@@ -9687,9 +9742,13 @@ const StyledImageMediaWrapper = material.styled("div", {
   ${(props) => {
     const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
     const spaces = getSpaces(props);
+    const corners = getCorners(props);
     return material.css `
       display: flex;
       align-items: start;
+      border-top-left-radius: calc(${corners?.xl}px - 1px);
+      border-bottom-left-radius: calc(${corners?.xl}px - 1px);
+      overflow: hidden;
 
       ${boundingBox
         ? imagePadding
@@ -9724,6 +9783,8 @@ const StyledImageMediaWrapper = material.styled("div", {
             `}
 
         justify-content: center;
+        border-top-left-radius: calc(${corners?.xl}px - 1px);
+        border-top-right-radius: calc(${corners?.xl}px - 1px);
       `}
     `;
 }}
@@ -9864,7 +9925,7 @@ const StyledPaper = styled__default.default(material.Paper, {
     const semanticColors = getSemanticColors(props);
     const isSmall = sdsSize === "xs" || sdsSize === "s";
     return `
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
         background-image: none;
         box-shadow: ${shadows?.l};
         max-height: calc(100vh - ${2 * (spaces?.xxxl || 40)}px);
@@ -10506,12 +10567,11 @@ const disabledStyles$1 = (props) => {
 const StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel) `
   ${(props) => {
     const { disabled } = props;
-    const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     const borders = getBorders(props);
     return `
       align-items: start;
-      margin-bottom: ${spaces?.l}px;
+      margin-bottom: 0;
       margin-left: 0;
       margin-right: 0;
       width: fit-content;
@@ -10519,7 +10579,7 @@ const StyledFormControlLabel$1 = styled__default.default(material.FormControlLab
       &:hover {
         ${StyledCheckboxDefaultIcon} {
           border: ${borders?.base?.hover};
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
         }
 
         ${StyledCheckboxCheckedIcon} {
@@ -10693,19 +10753,18 @@ const disabledStyles = (props) => {
 const StyledFormControlLabel = styled__default.default(material.FormControlLabel) `
   ${(props) => {
     const { disabled } = props;
-    const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     return `
       align-items: start;
-      margin-bottom: ${spaces?.l}px;
+      margin-bottom: 0;
       margin-left: 0;
       margin-right: 0;
       width: fit-content;
 
       &:hover {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};  
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};  
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -10715,7 +10774,7 @@ const StyledFormControlLabel = styled__default.default(material.FormControlLabel
 
       &:active {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryPressed};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -11009,12 +11068,12 @@ const textArea = (props) => {
 };
 const StyledLabel$2 = styled__default.default("label") `
   display: block;
-  ${fontBodyS$1}
+  ${fontBodySemiboldXxxs}
 
   ${(props) => {
     const spaces = getSpaces(props);
     return `
-      margin-bottom: ${spaces?.xxs}px;
+      margin-bottom: ${spaces?.s}px;
     `;
 }}
 `;
@@ -11030,8 +11089,6 @@ const StyledInputBase = styled__default.default(material.TextField, {
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
     return react.css `
-      margin-bottom: ${spaces?.l}px;
-      margin-right: ${spaces?.m}px;
       display: block;
 
       .${material.outlinedInputClasses.root} {
@@ -11068,7 +11125,7 @@ const StyledInputBase = styled__default.default(material.TextField, {
       .${material.outlinedInputClasses.root}:hover
         .${material.outlinedInputClasses.notchedOutline} {
         border: ${borders?.base?.hover};
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
 
       .${material.outlinedInputClasses.root}.${material.outlinedInputClasses.focused}
@@ -11247,7 +11304,7 @@ const toggleOff = (props) => {
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
     }
 
@@ -11269,7 +11326,7 @@ const toggleOff = (props) => {
         outline: ${borders?.base?.hover};
 
         .${material.switchClasses.thumb} {
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }`}
   `;
@@ -11301,6 +11358,123 @@ const InputToggle = (props) => {
     return (jsxRuntime.jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
 };
 
+const StyledIntentMessage = styled__default.default.div `
+  display: flex;
+  flex-direction: column;
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    const borderThickness = 2;
+    const borderColor = props.borderIntent
+        ? semanticColors?.[props.borderIntent]?.border
+        : "transparent";
+    return `
+      gap: ${spaces?.s}px;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -${(spaces?.xs || 0) + borderThickness}px;
+        top: 0;
+        bottom: 0;
+        width: ${borderThickness}px;
+        background-color: ${borderColor};
+        display: ${props.hasBorder ? "block" : "none"};
+      }
+    `;
+}}
+`;
+const StyledMessageItem = styled__default.default.div `
+  ${fontBodySemiboldXxxs}
+  display: flex;
+  align-items: start;
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    const intentColors = semanticColors?.[props.intent];
+    return `
+      gap: ${spaces?.xs}px;
+      color: ${intentColors?.text};
+
+      svg {
+        margin-top: ${spaces?.xxxs}px;
+        fill: ${intentColors?.ornament};
+        path {
+          fill: ${intentColors?.ornament};
+        }
+      }
+    `;
+}}
+`;
+
+const DEFAULT_INTENT_PRIORITY = {
+    negative: 0,
+    notice: 1,
+    positive: 2
+};
+const IntentMessage = (props) => {
+    const { messages = [], children, border = false, autoOrder = true, orderBy, ...rest } = props;
+    // const priorities = React.useMemo(() => {
+    //   return orderBy
+    //     ? orderBy.reduce(
+    //         (acc, intent, index) => {
+    //           acc[intent] = index;
+    //           return acc;
+    //         },
+    //         {} as Record<IntentMessageIntent, number>
+    //       )
+    //     : DEFAULT_INTENT_PRIORITY;
+    // }, [orderBy]);
+    const priorities = orderBy
+        ? Object.fromEntries(orderBy.map((value, index) => [value, index]))
+        : DEFAULT_INTENT_PRIORITY;
+    /**
+     * Determines the left border color based on message intent priority.
+     * When multiple IntentMessage items are rendered together, the border color
+     * corresponds to the highest-priority intent present.
+     */
+    const borderColorIntent = React__namespace.default.useMemo(() => {
+        if (!messages || messages.length === 0)
+            return undefined;
+        // Find the message with the highest priority (lowest number)
+        const highestPriorityMessage = messages.reduce((prev, current) => {
+            const priorityPrev = priorities[prev.intent] ?? 999;
+            const priorityCurrent = priorities[current.intent] ?? 999;
+            return priorityPrev <= priorityCurrent ? prev : current;
+        });
+        return highestPriorityMessage.intent;
+    }, [messages, priorities]);
+    const getIcon = (item) => {
+        const { icon, intent } = item;
+        if (icon) {
+            if (typeof icon !== "string") {
+                return icon;
+            }
+            return jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "xs" });
+        }
+        switch (intent) {
+            case "positive":
+                return jsxRuntime.jsx(Icon, { sdsIcon: "CheckCircle", sdsSize: "xs" });
+            case "negative":
+            case "notice":
+            default:
+                return jsxRuntime.jsx(Icon, { sdsIcon: "ExclamationMarkCircle", sdsSize: "xs" });
+        }
+    };
+    const sortedMessages = React__namespace.default.useMemo(() => {
+        if (!autoOrder)
+            return messages;
+        return [...messages].sort((a, b) => {
+            const priorityA = priorities[a.intent] ?? 999;
+            const priorityB = priorities[b.intent] ?? 999;
+            return priorityA - priorityB;
+        });
+    }, [messages, autoOrder, priorities]);
+    return (jsxRuntime.jsxs(StyledIntentMessage, __assign({ borderIntent: borderColorIntent, hasBorder: border }, rest, { children: [children, sortedMessages.map((message, index) => (jsxRuntime.jsxs(StyledMessageItem, { intent: message.intent, children: [getIcon(message), jsxRuntime.jsx("span", { children: message.text })] }, index)))] })));
+};
+
 const LegendContainer = styled__default.default("div") `
   display: flex;
   flex-wrap: wrap;
@@ -11742,7 +11916,7 @@ const StyledMenu = styled__default.default(material.Menu) `
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
     return `
-          background-color: ${semanticColors?.base?.surface};
+          background-color: ${semanticColors?.base?.surfacePrimary};
           background-image: none;
           padding: ${spaces?.xs}px;
           border-radius: ${corners?.l}px;
@@ -18080,7 +18254,7 @@ const NarrowNavItemLinkStyles = (props) => {
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
       background: ${props.hasInvertedStyle
-        ? semanticColors?.base.backgroundSecondaryOnDark
+        ? semanticColors?.base.backgroundSecondaryDark
         : semanticColors?.base.backgroundSecondary};
     }
   `;
@@ -18106,11 +18280,11 @@ const StyledNavItemLink = styled__default.default(Link, {
 
       &:hover {
         color: ${props.hasInvertedStyle
-        ? semanticColors?.base.textPrimaryOnDark
-        : semanticColors?.base.textPrimary};
+        ? semanticColors?.base?.textPrimaryOnDark
+        : semanticColors?.base?.textPrimary};
         background-color: ${props.hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base?.fillInteractionOnDark
+        : semanticColors?.base?.fillInteraction};
         text-decoration: none;
       }
 
@@ -18664,7 +18838,7 @@ const StyledSearch = styled__default.default(InputSearch, {
         &:hover {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryHoverOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -18682,7 +18856,7 @@ const StyledSearch = styled__default.default(InputSearch, {
         &.Mui-focused {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryPressedOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -18877,8 +19051,8 @@ const StyledAccordion = styled__default.default(Accordion, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return material.css `
       & > .MuiButtonBase-root {
         padding: ${spaces?.s}px ${spaces?.l}px !important;
@@ -18943,16 +19117,16 @@ const StyledAccordion = styled__default.default(Accordion, {
           width: 100%;
           box-shadow: none;
           background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
           color: ${hasInvertedStyle
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
 
           svg {
             color: ${hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover} !important;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction} !important;
           }
         }
 
@@ -19155,8 +19329,8 @@ const StyledHoverDrawerItem = styled__default.default(Button, {
         box-shadow: none;
         cursor: pointer;
         background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
         svg {
           color: ${semanticColors?.accent?.ornament};
         }
@@ -19330,8 +19504,8 @@ const NarrowPrimaryNavItem = (props) => {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return react.css `
     border-radius: ${corners?.l}px;
     justify-content: start;
@@ -19356,8 +19530,8 @@ const NarrowPrimaryNavItem = (props) => {
           `
         : react.css `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -19389,11 +19563,11 @@ styled__default.default(Button, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return react.css `
       border: none;
       padding: ${spaces?.xxxs}px ${spaces?.m}px;
@@ -19410,8 +19584,8 @@ styled__default.default(Button, {
 
       &:hover {
         background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover} !important;
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction} !important;
         box-shadow: none;
 
         ${StyledLabel$1} {
@@ -19491,8 +19665,8 @@ const NarrowNavItemStyles = (props) => {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base?.ornamentSecondaryInteraction;
     return react.css `
     ${active ? fontBodySemiboldL(props) : fontBodyMediumL(props)}
     border-radius: ${corners?.l}px;
@@ -19519,8 +19693,8 @@ const NarrowNavItemStyles = (props) => {
           `
         : react.css `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -19560,11 +19734,11 @@ const UnifiedNavItem = styled__default.default(Button, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return [
         navVariant === "secondary" &&
             (active ? fontBodySemiboldS(props) : fontBodyMediumS(props)),
@@ -19592,8 +19766,8 @@ const UnifiedNavItem = styled__default.default(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover} !important;
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction} !important;
           box-shadow: none;
 
           ${navVariant === "primary" && StyledLabel} {
@@ -19688,7 +19862,7 @@ const StyledSectionHeader = styled__default.default(ListSubheader, {
                 ? semanticColors?.base.backgroundPrimaryDark
                 : semanticColors?.base.backgroundPrimary;
         }
-        return semanticColors?.base?.surface;
+        return semanticColors?.base?.surfacePrimary;
     }
     function getTextColor() {
         if (isNarrow) {
@@ -19749,7 +19923,7 @@ const StyledAccordionSection = styled__default.default("div", {
         border-radius: ${corners?.xl}px;
         padding: ${spaces?.l}px;
         background-color: ${hasInvertedStyle
-            ? semanticColors?.base?.backgroundSecondaryOnDark
+            ? semanticColors?.base?.backgroundSecondaryDark
             : semanticColors?.base?.backgroundSecondary};
       `;
     }
@@ -20164,7 +20338,7 @@ function useNavigationState() {
     };
 }
 
-function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
+function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
     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);
@@ -20213,6 +20387,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
             }
         };
         return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
                 if (clickedDrawerKey !== key) {
                     onDrawerOpen(key);
                 }
@@ -20384,8 +20559,8 @@ const NarrowStyledTextItem = (props) => {
     &:hover {
       box-shadow: none;
       background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
     }
   `;
 };
@@ -20417,11 +20592,11 @@ styled__default.default(Button, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return [
         open ? fontBodySemiboldS(props) : fontBodyMediumS(props),
         react.css `
@@ -20442,8 +20617,8 @@ styled__default.default(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           box-shadow: none;
 
           color: ${hasInvertedStyle
@@ -20464,7 +20639,7 @@ const StyledTag = styled__default.default(Tag) `
   margin: 0;
 `;
 
-function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
+function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
     const theme = material.useTheme();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     function onClose() {
@@ -20488,7 +20663,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
         const handleClick = (e) => {
             parentOnClick?.(e);
         };
-        return (jsxRuntime.jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, 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: () => {
+                onDrawerStyleNavItemHover?.(item);
+                onDrawerOpen(key);
+            }, onMouseLeave: onDrawerClose, children: jsxRuntime.jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsxRuntime.jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, 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;
@@ -20660,7 +20838,7 @@ const NavigationHeader = React.forwardRef((props, ref) => {
     const { activePrimaryNavKey: controlledActivePrimaryNavKey, buttons, sdsStyle = "dropdown", menuProps = {
         disableScrollLock: true,
         disablePortal: true
-    }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, ...rest } = props;
+    }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, onDrawerStyleNavItemHover, ...rest } = props;
     const navRef = React.useRef(null);
     const topSlotRef = React.useRef(null);
     const [topOffset, setTopOffset] = React.useState(0);
@@ -20813,11 +20991,11 @@ const NavigationHeader = React.forwardRef((props, ref) => {
     };
     const renderPrimaryNav = () => {
         return (primaryNavItems &&
-            primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
+            primaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
     };
     const renderSecondaryNav = () => {
         return (secondaryNavItems &&
-            secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
+            secondaryNavItems.length > 0 && (jsxRuntime.jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
     };
     const renderButtonsNode = () => {
         if (!buttons || buttons.length === 0)
@@ -20992,7 +21170,7 @@ const StyledTabs$1 = styled__default.default(material.Tabs, {
 const StyledTab$1 = styled__default.default(material.Tab, {
     shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
-  ${fontBodyXs$2}
+  ${fontBodyMediumXs}
 
   ${(props) => {
     const spaces = getSpaces(props);
@@ -21019,20 +21197,20 @@ const StyledTab$1 = styled__default.default(material.Tab, {
         left: 0;
         width: ${spaces?.xxxs}px;
         height: 100%;
-        background-color: ${semanticColors?.base?.borderPrimaryHover};
+        background-color: ${semanticColors?.base?.borderPrimaryInteraction};
         display: none;
         border-radius: ${spaces?.xxxs}px;
       }
       &:hover {
         color: ${semanticColors?.base?.textPrimary};
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
         &:before {
           display: block;
         }
       }
       &.Mui-selected {
         color: ${semanticColors?.base?.textPrimary};
-        font-weight: 500;
+        font-weight: 600;
       }
       &.MuiButtonBase-root {
         text-align: left;
@@ -21389,7 +21567,7 @@ const StyledPaginationButton = styled__default.default(Button) `
 
       &:hover {
         & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.ornamentSecondaryHover}
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
     `;
@@ -21425,10 +21603,10 @@ const StyledPaginationChevronList = styled__default.default("li", {
       }
 
       &:hover {
-        background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+        background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
 
         & .MuiSvgIcon-root {
-          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryHover}
+          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
 
@@ -21450,28 +21628,29 @@ const StyledPagination = styled__default.default("ul", {
 `;
 const selectedPageStyle = (props) => {
     const semanticColors = getSemanticColors(props);
-    return `
-    background-color: ${semanticColors?.base?.fillOpen};
+    return react.css `
+    background-color: ${semanticColors?.base?.fillInteraction};
     color: ${semanticColors?.base?.textPrimary};
-    font-weight: 500;
     box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
 
     &:hover {
       box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
     }
+
+    ${fontTabularSemiboldS(props)}
   `;
 };
 const Page = styled__default.default("li", {
     shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
 }) `
-  ${fontTabularS}
+  ${fontTabularMediumS}
 
   ${(props) => {
     const { selected, sdsStyle } = props;
     const spaces = getSpaces(props);
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
-    return `
+    return react.css `
       color: ${semanticColors?.base?.textSecondary};
       cursor: pointer;
       list-style: none;
@@ -21485,15 +21664,15 @@ const Page = styled__default.default("li", {
       border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.l}px;
       user-select: none;
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
         color: ${semanticColors?.base?.textPrimary};
       }
 
-      &:nth-last-of-type(-n+2) {
+      &:nth-last-of-type(-n + 2) {
         margin-right: 0;
       }
 
-      ${selected && selectedPageStyle(props)};
+      ${selected && selectedPageStyle(props)}
       ${focusVisibleA11yStyle(props)}
     `;
 }}
@@ -21816,7 +21995,7 @@ const StyledSegmentedControl = styled__default.default(material.ToggleButtonGrou
       padding: ${spaces?.xxxs}px;
 
       &:hover {
-        box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryHover};
+        box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryInteraction};
       }
 
       .${material.toggleButtonClasses.root}.${material.toggleButtonClasses.disabled} {
@@ -21824,13 +22003,13 @@ const StyledSegmentedControl = styled__default.default(material.ToggleButtonGrou
       }
 
       .${material.toggleButtonClasses.root}.${material.toggleButtonClasses.selected} {
-        background-color: ${semanticColors?.base?.fillOpen};
+        background-color: ${semanticColors?.base?.fillInteraction};
         color: ${semanticColors?.accent?.ornamentSelected};
         border-color: ${semanticColors?.base?.borderPrimary};
 
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover};
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
 
@@ -21846,8 +22025,8 @@ const StyledSegmentedControl = styled__default.default(material.ToggleButtonGrou
 
         &:hover {
           border-color: ${semanticColors?.base?.borderPrimary};
-          background-color: ${semanticColors?.base?.fillHover};
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     `;
@@ -21930,6 +22109,7 @@ const disabledStyled = (props) => {
 
     & span, & div {
       color: ${semanticColors?.base?.textDisabled};
+      background-color: transparent !important;
     }
 
     .cell-component {
@@ -21938,11 +22118,12 @@ const disabledStyled = (props) => {
       user-select: none;
       & div {
         color: ${semanticColors?.base?.textDisabled};
-        background-color: ${semanticColors?.base?.backgroundSecondary};
+        background-color: transparent;
       }
 
       & .MuiChip-root {
         background-color: ${semanticColors?.base?.fillDisabled};
+        box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled} !important;
 
         & span {
           color: ${semanticColors?.base?.textDisabled} !important;
@@ -21961,7 +22142,7 @@ const hoverStyled = (props) => {
     const semanticColors = getSemanticColors(props);
     return `
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
     }
   `;
 };
@@ -22062,8 +22243,8 @@ const StyledTab = styled__default.default(material.Tab, {
       color: ${semanticColors?.base?.textSecondary};
 
       &:hover {
-        box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryHover};
-        background-color: ${semanticColors?.base?.fillOpen};
+        box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryInteraction};
+        background-color: ${semanticColors?.base?.fillInteraction};
         border-top-right-radius: ${corners?.l}px;
         border-top-left-radius: ${corners?.l}px;
 
@@ -22093,7 +22274,7 @@ const StyledTab = styled__default.default(material.Tab, {
 function tabFontMixin(props) {
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
-    return isLarge ? fontBodyS$1(props) : fontBodyXs$2(props);
+    return isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props);
 }
 const StyledWrapper = styled__default.default("div") `
   ${(props) => {
@@ -22112,7 +22293,7 @@ const StyledCount = styled__default.default("span") `
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
     return react.css `
-      ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
+      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
     `;
 }}
 `;
@@ -22121,9 +22302,9 @@ const StyledLabelTextWrapper = styled__default.default("span") `
     const { sdsSize, selected } = props;
     const isLarge = sdsSize === "large";
     return react.css `
-      ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
+      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
       ${selected &&
-        (isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props))}
+        (isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props))}
       position: absolute;
     `;
 }}
@@ -22133,7 +22314,7 @@ const StyledLabelTextWrapperShadow = styled__default.default("span") `
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
     return react.css `
-      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
+      ${isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props)}
       visibility: hidden;
       opacity: 0;
     `;
@@ -25813,7 +25994,7 @@ Object.assign(chroma, {
 const generateDiscreteColors = (count, options = {}) => {
     if (count === 0)
         return [];
-    const { isDarkMode = false, start = 250, rotations = 0.85, gamma = 0.7, lightness = [0.4, 0.7], correctLightness = true, } = options;
+    const { isDarkMode = false, start = 240, rotations = 0.85, gamma = 1, lightness = [0.4, 0.7], correctLightness = true, } = options;
     let scale = chroma
         .cubehelix()
         .start(start)
@@ -25883,6 +26064,7 @@ exports.InputSearch = InputSearch;
 exports.InputSlider = InputSlider;
 exports.InputText = InputText;
 exports.InputToggle = InputToggle;
+exports.IntentMessage = IntentMessage;
 exports.Legend = Legend;
 exports.Link = Link;
 exports.List = List;