@czi-sds/components 23.1.0 → 23.2.0

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, isValidElement, memo, Fragment as Fragment$1, createContext, useContext } from 'react';
 import { css as css$1, ThemeContext as ThemeContext$1 } from '@emotion/react';
-import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$2, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
+import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, alpha as alpha$1, darken as darken$2, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
 export { CardMedia as ContentCardMedia } from '@mui/material';
 import styled$2 from '@emotion/styled';
 import { Remove, Clear } from '@mui/icons-material';
@@ -503,7 +503,7 @@ const Spaces = {
     xs: 6,
     s: 8,
     m: 12,
-    default: 12,
+    default: 8,
     l: 16,
     xl: 24,
     xxl: 32,
@@ -788,7 +788,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],
@@ -796,27 +796,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],
@@ -828,16 +824,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],
@@ -950,7 +945,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],
@@ -958,27 +953,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],
@@ -990,16 +981,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],
@@ -1381,7 +1371,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;
       }
   `;
@@ -1590,7 +1580,7 @@ const StyledAccordionHeader = styled$2(AccordionSummary, {
       &:hover {
         & .${accordionSummaryClasses.expandIconWrapper} {
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
@@ -5091,12 +5081,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};
@@ -5203,7 +5193,7 @@ const primary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5231,7 +5221,7 @@ const secondary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5260,19 +5250,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};
       }
     }
   `;
@@ -5492,7 +5482,7 @@ const applyIntentColor$2 = (props, intent) => {
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${semanticColors?.base?.ornamentSecondaryPressed};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     }
@@ -5558,9 +5548,6 @@ const StyledSearchBase = styled$2(TextField, {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     return css$1 `
-      margin-top: ${spaces?.m}px;
-      margin-bottom: ${spaces?.m}px;
-      margin-right: ${spaces?.xl}px;
       min-width: 120px;
       display: block;
 
@@ -5609,7 +5596,8 @@ const StyledSearchBase = styled$2(TextField, {
 
           &:hover {
             svg {
-              color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
+              color: ${semanticColors?.base
+        ?.ornamentSecondaryInteraction} !important;
             }
           }
 
@@ -5629,7 +5617,7 @@ const StyledSearchBase = styled$2(TextField, {
       }
 
       .${outlinedInputClasses.root}:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
 
         & .${buttonBaseClasses.root}:last-of-type {
           svg {
@@ -5637,7 +5625,7 @@ const StyledSearchBase = styled$2(TextField, {
           }
         }
         .${outlinedInputClasses.notchedOutline} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
       }
 
@@ -5651,13 +5639,13 @@ const StyledSearchBase = styled$2(TextField, {
         .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
           cursor: default;
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryPressed};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
 
       &.user-is-tabbing .${outlinedInputClasses.root}:focus-within {
-        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
         outline-offset: 1px;
       }
 
@@ -5696,10 +5684,10 @@ const StyledMenuItem$1 = styled$2(MenuItem$1) `
         opacity: 1;
 
         &:hover, &.${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};
           }
         }
       }
@@ -5716,7 +5704,7 @@ const StyledMenuItem$1 = styled$2(MenuItem$1) `
         background-color: unset !important;
 
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover} !important;
+          background-color: ${semanticColors?.base?.fillInteraction} !important;
         }
 
         ${StyledIcon$1}, ${DotIcon} {
@@ -5729,16 +5717,16 @@ const StyledMenuItem$1 = styled$2(MenuItem$1) `
       }
 
       &: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};
         }
       }
 
@@ -6077,7 +6065,7 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
       // 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;
       }
 
@@ -6102,11 +6090,11 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
             min-height: unset;
 
             &.${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"] {
@@ -6114,7 +6102,7 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
             }
 
             &[aria-selected="true"].${autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
           }
 
@@ -6128,7 +6116,7 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
         .${autocompleteClasses.groupLabel} {
           top: 0;
           color: ${semanticColors?.base?.textSecondary};
-          background-color: ${semanticColors?.base?.surface};
+          background-color: ${semanticColors?.base?.surfacePrimary};
           padding: 0 ${spaces?.m}px;
         }
 
@@ -6196,7 +6184,7 @@ const StyledPaper$3 = styled$2(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;
@@ -6208,9 +6196,10 @@ const StyledPaper$3 = styled$2(Paper) `
 const StyledMenuItemDetails = styled$2("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;
     `;
 }}
@@ -6375,15 +6364,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 = (jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
+            MenuItemContent = (jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsx(StyledMenuItemDetails, { disabled: optionDisabled, className: "menuItem-details", children: details }))] }));
         }
-        return (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 (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));
     }
 };
 
@@ -6467,7 +6456,7 @@ const StyledPopper$2 = styled$2(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;
@@ -6494,7 +6483,7 @@ const StyledPaper$2 = styled$2(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;
@@ -6538,7 +6527,7 @@ const StyledColumnIcon = styled$3("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;
@@ -6928,7 +6917,7 @@ const StyledButtonToggle = styled$2(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"};
     `;
 }}
 `;
@@ -7115,7 +7104,7 @@ const dark$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$2 `
     ${fontHeaderXs(props)}
-    background-color: ${semanticColors?.base?.surfaceOnDark};
+    background-color: ${semanticColors?.base?.surfacePrimaryDark};
     color: ${semanticColors?.base?.textPrimaryOnDark};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7125,7 +7114,7 @@ const light$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$2 `
     ${fontBodyXs$2(props)}
-    background-color: ${semanticColors?.base?.surface};
+    background-color: ${semanticColors?.base?.surfacePrimary};
     color: ${semanticColors?.base?.textPrimary};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7200,8 +7189,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;
@@ -7624,7 +7613,7 @@ const StyledTableHeader$1 = styled$2("th", {
         }
 
         & svg {
-          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover};
+          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     `;
@@ -7860,6 +7849,21 @@ const StyledHeaderTitle = styled$2("div", {
     `;
 }}
 `;
+const StyledHeaderSubTitle = styled$2("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$2("div", {
     shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
 }) `
@@ -7906,7 +7910,7 @@ const StyledPopper = styled$2(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;
@@ -7929,7 +7933,7 @@ const StyledPaper$1 = styled$2(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;
@@ -7968,9 +7972,15 @@ const StyledDropdownMenuHeader = styled$2("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};`}
     `;
@@ -7985,7 +7995,7 @@ const DEFAULT_POPPER_BASE_PROPS = {
 };
 const DropdownMenu = (props) => {
     const theme = useTheme$4();
-    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
@@ -8015,7 +8025,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: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (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: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [jsxs("div", { children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] }), title && subTitle && (jsx(StyledHeaderSubTitle, { children: subTitle }))] })), anchorEl && (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 = [
@@ -8073,12 +8083,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 {
@@ -8092,7 +8103,7 @@ const inputDropdownStyles = (props) => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
 
@@ -8144,12 +8155,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 {
@@ -8158,7 +8169,7 @@ const minimal$1 = (props) => {
     }
 
     &:active {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
       border: none;
     }
   `;
@@ -8228,7 +8239,7 @@ const isOpen = (props) => {
         : ""}
 
     path {
-      fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+      fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
     }
 
     box-shadow: ${sdsStyle === "minimal"
@@ -8236,15 +8247,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};
     }
   `;
 };
@@ -8254,11 +8265,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};
     }
   `;
 };
@@ -8822,7 +8835,6 @@ const tagSizeS = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1 `
     height: unset;
-    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXxxs$1(props)}
@@ -8832,7 +8844,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 {
@@ -8850,7 +8862,6 @@ const tagSizeL = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1 `
     height: unset;
-    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXs$2(props)}
@@ -8860,7 +8871,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 {
@@ -8877,9 +8888,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 css$1 `
     border-radius: ${corners?.rounded}px;
-    padding: ${topBottomPadding}px ${spaces?.s}px;
+    padding: ${topBottomPadding}px ${rightPadding}px ${topBottomPadding}px
+      ${spaces?.xs}px;
 
     &:after {
       content: "";
@@ -8894,7 +8907,7 @@ const square = (props) => {
     const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
     return css$1 `
     border-radius: ${corners?.m}px;
-    padding: ${topBottomPadding}px ${spaces?.s}px;
+    padding: ${topBottomPadding}px ${spaces?.xs}px;
 
     &:after {
       content: "";
@@ -8922,54 +8935,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
-                ? darken$2(colors[1], 0.3)
-                : semanticColors?.[intent].fillPressed,
-            backgroundHover: colors.length >= 2
-                ? darken$2(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
+            ? darken$2(colors[1], 0.3)
+            : intentColors?.fillPressed,
+        backgroundHover: hasCustomColors
+            ? darken$2(colors[1], 0.15)
+            : intentColors?.fillHover,
+        iconColor: hasCustomColors
+            ? colors[2]
+            : semanticColors?.base?.ornamentOnFill,
+        label: colors.length > 0 ? colors[0] : semanticColors?.base?.textOnFill,
+        borderColor: alpha$1(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
-                ? darken$2(colors[1], 0.3)
-                : semanticColors?.[intent].fillPressed,
-            backgroundHover: colors.length >= 2
-                ? darken$2(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 alpha$1(intentColors?.border || "#000", 0.6);
+    if (effectiveIntent === "negative" && theme.palette.mode === "dark")
+        return alpha$1(intentColors?.border || "#000", 0.65);
+    if (effectiveIntent === "notice" && theme.palette.mode === "light")
+        return alpha$1(intentColors?.border || "#000", 0.85);
+    return alpha$1(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
+            ? darken$2(colors[1], 0.3)
+            : intentColors?.fillPressed,
+        backgroundHover: hasCustomColors
+            ? darken$2(colors[1], 0.15)
+            : intentColors?.fillHover,
+        iconColor: hasCustomColors ? colors[2] : intentColors?.ornament,
+        label: colors.length > 0 ? colors[0] : intentColors?.text,
+        borderColor: hasCustomColors
+            ? alpha$1(colors[1], 0.6)
+            : getSecondaryBorderColor(effectiveIntent, theme, intentColors)
+    };
 }
 function createTypeCss(props, type) {
     const semanticColors = getSemanticColors(props);
@@ -8977,12 +8987,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 css$1 `
     ${focusVisibleA11yStyle(props)}
 
+    ${type === "secondary" &&
+        css$1 `
+      box-shadow: inset 0 0 0 1px ${typeColors.borderColor};
+    `}
     background-color: ${typeColors.background};
     position: relative;
 
@@ -8996,6 +9010,7 @@ function createTypeCss(props, type) {
 
     &:hover,
     &:active {
+      box-shadow: none;
       .MuiChip-label {
         color: ${semanticColors?.base?.textPrimaryInverse};
       }
@@ -9341,30 +9356,38 @@ const doNotForwardProps$r = [
     "cardSdsType",
     "classes",
 ];
-const StyledCard = styled$2(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$2(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 css$1 `
+      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;
 
@@ -9383,16 +9406,47 @@ const StyledCard = styled$2(Card, {
         background-color: ${semanticColors?.base?.backgroundPrimary};
       `}
 
+      ${showDecorativeBorder &&
+        css$1 `
+        &:before {
+          content: "";
+          position: absolute;
+          background-color: ${semanticColors?.accent?.border};
+
+          ${sdsType === "wide" &&
+            css$1 `
+            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" &&
+            css$1 `
+            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 &&
         css$1 `
-        border-left: 4px solid ${semanticColors?.accent?.border};
+        border-top-left-radius: ${corners?.l}px;
+        border-bottom-left-radius: ${corners?.l}px;
       `}
 
       ${sdsType === "narrow" &&
         showDecorativeBorder &&
         css$1 `
-        border-top: 4px solid ${semanticColors?.accent?.border};
+        border-top-left-radius: ${corners?.l}px;
+        border-top-right-radius: ${corners?.l}px;
       `}
     `;
 }}
@@ -9425,7 +9479,7 @@ const StyledCardActionArea = styled$2(Button, {
 
       &:hover,
       &:active {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
       }
     `;
 }}
@@ -9665,9 +9719,13 @@ const StyledImageMediaWrapper = styled$3("div", {
   ${(props) => {
     const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
     const spaces = getSpaces(props);
+    const corners = getCorners(props);
     return css$3 `
       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
@@ -9702,6 +9760,8 @@ const StyledImageMediaWrapper = styled$3("div", {
             `}
 
         justify-content: center;
+        border-top-left-radius: calc(${corners?.xl}px - 1px);
+        border-top-right-radius: calc(${corners?.xl}px - 1px);
       `}
     `;
 }}
@@ -9842,7 +9902,7 @@ const StyledPaper = styled$2(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);
@@ -10484,12 +10544,11 @@ const disabledStyles$1 = (props) => {
 const StyledFormControlLabel$1 = styled$2(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;
@@ -10497,7 +10556,7 @@ const StyledFormControlLabel$1 = styled$2(FormControlLabel) `
       &:hover {
         ${StyledCheckboxDefaultIcon} {
           border: ${borders?.base?.hover};
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
         }
 
         ${StyledCheckboxCheckedIcon} {
@@ -10671,19 +10730,18 @@ const disabledStyles = (props) => {
 const StyledFormControlLabel = styled$2(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} {
@@ -10693,7 +10751,7 @@ const StyledFormControlLabel = styled$2(FormControlLabel) `
 
       &:active {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryPressed};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -10987,12 +11045,12 @@ const textArea = (props) => {
 };
 const StyledLabel$2 = styled$2("label") `
   display: block;
-  ${fontBodyS$1}
+  ${fontBodySemiboldXxxs}
 
   ${(props) => {
     const spaces = getSpaces(props);
     return `
-      margin-bottom: ${spaces?.xxs}px;
+      margin-bottom: ${spaces?.s}px;
     `;
 }}
 `;
@@ -11008,8 +11066,6 @@ const StyledInputBase = styled$2(TextField, {
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
     return css$1 `
-      margin-bottom: ${spaces?.l}px;
-      margin-right: ${spaces?.m}px;
       display: block;
 
       .${outlinedInputClasses.root} {
@@ -11046,7 +11102,7 @@ const StyledInputBase = styled$2(TextField, {
       .${outlinedInputClasses.root}:hover
         .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.base?.hover};
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
 
       .${outlinedInputClasses.root}.${outlinedInputClasses.focused}
@@ -11225,7 +11281,7 @@ const toggleOff = (props) => {
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
     }
 
@@ -11247,7 +11303,7 @@ const toggleOff = (props) => {
         outline: ${borders?.base?.hover};
 
         .${switchClasses.thumb} {
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }`}
   `;
@@ -11279,6 +11335,123 @@ const InputToggle = (props) => {
     return (jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
 };
 
+const StyledIntentMessage = styled$2.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$2.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__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 jsx(Icon, { sdsIcon: icon, sdsSize: "xs" });
+        }
+        switch (intent) {
+            case "positive":
+                return jsx(Icon, { sdsIcon: "CheckCircle", sdsSize: "xs" });
+            case "negative":
+            case "notice":
+            default:
+                return jsx(Icon, { sdsIcon: "ExclamationMarkCircle", sdsSize: "xs" });
+        }
+    };
+    const sortedMessages = React__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 (jsxs(StyledIntentMessage, __assign({ borderIntent: borderColorIntent, hasBorder: border }, rest, { children: [children, sortedMessages.map((message, index) => (jsxs(StyledMessageItem, { intent: message.intent, children: [getIcon(message), jsx("span", { children: message.text })] }, index)))] })));
+};
+
 const LegendContainer = styled$2("div") `
   display: flex;
   flex-wrap: wrap;
@@ -11720,7 +11893,7 @@ const StyledMenu = styled$2(Menu$1) `
     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;
@@ -18058,7 +18231,7 @@ const NarrowNavItemLinkStyles = (props) => {
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
       background: ${props.hasInvertedStyle
-        ? semanticColors?.base.backgroundSecondaryOnDark
+        ? semanticColors?.base.backgroundSecondaryDark
         : semanticColors?.base.backgroundSecondary};
     }
   `;
@@ -18084,11 +18257,11 @@ const StyledNavItemLink = styled$2(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;
       }
 
@@ -18642,7 +18815,7 @@ const StyledSearch = styled$2(InputSearch, {
         &:hover {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryHoverOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -18660,7 +18833,7 @@ const StyledSearch = styled$2(InputSearch, {
         &.Mui-focused {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryPressedOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -18855,8 +19028,8 @@ const StyledAccordion = styled$2(Accordion, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return css$3 `
       & > .MuiButtonBase-root {
         padding: ${spaces?.s}px ${spaces?.l}px !important;
@@ -18921,16 +19094,16 @@ const StyledAccordion = styled$2(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;
           }
         }
 
@@ -19133,8 +19306,8 @@ const StyledHoverDrawerItem = styled$2(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};
         }
@@ -19308,8 +19481,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 css$1 `
     border-radius: ${corners?.l}px;
     justify-content: start;
@@ -19334,8 +19507,8 @@ const NarrowPrimaryNavItem = (props) => {
           `
         : css$1 `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -19367,11 +19540,11 @@ styled$2(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 css$1 `
       border: none;
       padding: ${spaces?.xxxs}px ${spaces?.m}px;
@@ -19388,8 +19561,8 @@ styled$2(Button, {
 
       &:hover {
         background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover} !important;
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction} !important;
         box-shadow: none;
 
         ${StyledLabel$1} {
@@ -19469,8 +19642,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 css$1 `
     ${active ? fontBodySemiboldL(props) : fontBodyMediumL(props)}
     border-radius: ${corners?.l}px;
@@ -19497,8 +19670,8 @@ const NarrowNavItemStyles = (props) => {
           `
         : css$1 `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -19538,11 +19711,11 @@ const UnifiedNavItem = styled$2(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)),
@@ -19570,8 +19743,8 @@ const UnifiedNavItem = styled$2(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover} !important;
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction} !important;
           box-shadow: none;
 
           ${navVariant === "primary" && StyledLabel} {
@@ -19666,7 +19839,7 @@ const StyledSectionHeader = styled$2(ListSubheader, {
                 ? semanticColors?.base.backgroundPrimaryDark
                 : semanticColors?.base.backgroundPrimary;
         }
-        return semanticColors?.base?.surface;
+        return semanticColors?.base?.surfacePrimary;
     }
     function getTextColor() {
         if (isNarrow) {
@@ -19727,7 +19900,7 @@ const StyledAccordionSection = styled$2("div", {
         border-radius: ${corners?.xl}px;
         padding: ${spaces?.l}px;
         background-color: ${hasInvertedStyle
-            ? semanticColors?.base?.backgroundSecondaryOnDark
+            ? semanticColors?.base?.backgroundSecondaryDark
             : semanticColors?.base?.backgroundSecondary};
       `;
     }
@@ -20363,8 +20536,8 @@ const NarrowStyledTextItem = (props) => {
     &:hover {
       box-shadow: none;
       background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
     }
   `;
 };
@@ -20396,11 +20569,11 @@ styled$2(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),
         css$1 `
@@ -20421,8 +20594,8 @@ styled$2(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           box-shadow: none;
 
           color: ${hasInvertedStyle
@@ -20974,7 +21147,7 @@ const StyledTabs$1 = styled$2(Tabs$1, {
 const StyledTab$1 = styled$2(Tab$1, {
     shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
-  ${fontBodyXs$2}
+  ${fontBodyMediumXs}
 
   ${(props) => {
     const spaces = getSpaces(props);
@@ -21001,20 +21174,20 @@ const StyledTab$1 = styled$2(Tab$1, {
         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;
@@ -21371,7 +21544,7 @@ const StyledPaginationButton = styled$2(Button) `
 
       &:hover {
         & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.ornamentSecondaryHover}
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
     `;
@@ -21407,10 +21580,10 @@ const StyledPaginationChevronList = styled$2("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}
         }
       }
 
@@ -21432,28 +21605,29 @@ const StyledPagination = styled$2("ul", {
 `;
 const selectedPageStyle = (props) => {
     const semanticColors = getSemanticColors(props);
-    return `
-    background-color: ${semanticColors?.base?.fillOpen};
+    return css$1 `
+    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$2("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 css$1 `
       color: ${semanticColors?.base?.textSecondary};
       cursor: pointer;
       list-style: none;
@@ -21467,15 +21641,15 @@ const Page = styled$2("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)}
     `;
 }}
@@ -21798,7 +21972,7 @@ const StyledSegmentedControl = styled$2(ToggleButtonGroup, {
       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};
       }
 
       .${toggleButtonClasses.root}.${toggleButtonClasses.disabled} {
@@ -21806,13 +21980,13 @@ const StyledSegmentedControl = styled$2(ToggleButtonGroup, {
       }
 
       .${toggleButtonClasses.root}.${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};
         }
       }
 
@@ -21828,8 +22002,8 @@ const StyledSegmentedControl = styled$2(ToggleButtonGroup, {
 
         &:hover {
           border-color: ${semanticColors?.base?.borderPrimary};
-          background-color: ${semanticColors?.base?.fillHover};
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     `;
@@ -21912,6 +22086,7 @@ const disabledStyled = (props) => {
 
     & span, & div {
       color: ${semanticColors?.base?.textDisabled};
+      background-color: transparent !important;
     }
 
     .cell-component {
@@ -21920,11 +22095,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;
@@ -21943,7 +22119,7 @@ const hoverStyled = (props) => {
     const semanticColors = getSemanticColors(props);
     return `
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
     }
   `;
 };
@@ -22044,8 +22220,8 @@ const StyledTab = styled$2(Tab$1, {
       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;
 
@@ -22075,7 +22251,7 @@ const StyledTab = styled$2(Tab$1, {
 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$2("div") `
   ${(props) => {
@@ -22094,7 +22270,7 @@ const StyledCount = styled$2("span") `
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
     return css$1 `
-      ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
+      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
     `;
 }}
 `;
@@ -22103,9 +22279,9 @@ const StyledLabelTextWrapper = styled$2("span") `
     const { sdsSize, selected } = props;
     const isLarge = sdsSize === "large";
     return css$1 `
-      ${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;
     `;
 }}
@@ -22115,7 +22291,7 @@ const StyledLabelTextWrapperShadow = styled$2("span") `
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
     return css$1 `
-      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
+      ${isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props)}
       visibility: hidden;
       opacity: 0;
     `;
@@ -25795,7 +25971,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)
@@ -25811,4 +25987,4 @@ const generateDiscreteColors = (count, options = {}) => {
     return isDarkMode ? colors.reverse() : colors;
 };
 
-export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
+export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };