@czi-sds/data-viz 0.15.0 → 0.16.1

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import React__default, { useMemo, useEffect, forwardRef, useRef, useState, useCa
 import { throttle } from 'lodash';
 import styled$2 from '@emotion/styled';
 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$1, Button as Button$1, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete, Paper, Popper, styled as styled$3, alertClasses, alertTitleClasses, AlertTitle, useTheme as useTheme$4, Tooltip as Tooltip$1, Chip, Card, CardContent, CardActions, css as css$2, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, Switch, Link as Link$1, List, ListItem, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, AppBar, Toolbar, Drawer, useMediaQuery, tabsClasses, Tabs, Tab, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, buttonClasses, sliderClasses, switchClasses, useScrollTrigger, darken as darken$2, Table, 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$1, Button as Button$1, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete, Paper, Popper, styled as styled$3, alertClasses, alertTitleClasses, AlertTitle, useTheme as useTheme$4, Tooltip as Tooltip$1, Chip, Card, CardContent, CardActions, css as css$2, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, Switch, Link as Link$1, List, ListItem, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, AppBar, Toolbar, Drawer, useMediaQuery, tabsClasses, Tabs, Tab, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, buttonClasses, sliderClasses, switchClasses, useScrollTrigger, alpha as alpha$1, darken as darken$2, Table, TableBody, TableRow as TableRow$1 } from '@mui/material';
 import { Remove } from '@mui/icons-material';
 import { css as css$3 } from '@emotion/css';
 
@@ -970,7 +970,7 @@ const Spaces = {
     xs: 6,
     s: 8,
     m: 12,
-    default: 12,
+    default: 8,
     l: 16,
     xl: 24,
     xxl: 32,
@@ -1244,7 +1244,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],
@@ -1252,27 +1252,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],
@@ -1284,16 +1280,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],
@@ -1406,7 +1401,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],
@@ -1414,27 +1409,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],
@@ -1446,16 +1437,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],
@@ -1737,6 +1727,7 @@ function makeThemeOptions(appTheme, mode) {
             appTheme.spacing.l,
             appTheme.spacing.xl,
             appTheme.spacing.xxl,
+            appTheme.spacing.xxxl,
         ],
         transitions: {
             duration: {
@@ -1786,7 +1777,7 @@ const Theme = (t) => createTheme$2(makeThemeOptions(SDSChooseTheme(), t));
  *
  * Use the `theme` export to get a flexible light/dark mode theme function
  */
-Theme("light");
+const defaultTheme$4 = Theme("light");
 
 const getSpaces = ({ theme }) => {
     return theme?.app?.spacing || null;
@@ -1829,7 +1820,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;
       }
   `;
@@ -1882,6 +1873,7 @@ const fontBodySemiboldL = fontBody("l", "semibold");
 const fontBodySemiboldM = fontBody("m", "semibold");
 const fontBodySemiboldS = fontBody("s", "semibold");
 const fontBodySemiboldXs = fontBody("xs", "semibold");
+const fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
 const fontCaps = createFontFunction({
     additionalCss: "text-transform: uppercase;",
     defaultWeight: "semibold",
@@ -1905,8 +1897,9 @@ const fontTabular = createFontFunction({
     type: "tabular"
 });
 const fontTabularXs = fontTabular("xs", "regular");
-const fontTabularS = fontTabular("s", "regular");
+const fontTabularMediumS = fontTabular("s", "medium");
 const fontTabularSemiboldXxxxs = fontTabular("xxxxs", "semibold");
+const fontTabularSemiboldS = fontTabular("s", "semibold");
 function themeToCss(fontTheme, fontFamily = "inherit") {
     return css$1 `
     font-family: ${fontFamily};
@@ -1974,7 +1967,7 @@ const StyledAccordionHeader = styled$2(AccordionSummary, {
       &:hover {
         & .${accordionSummaryClasses.expandIconWrapper} {
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
@@ -5462,12 +5455,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};
@@ -5574,7 +5567,7 @@ const primary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5602,7 +5595,7 @@ const secondary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5631,19 +5624,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};
       }
     }
   `;
@@ -5863,7 +5856,7 @@ const applyIntentColor$2 = (props, intent) => {
       .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${semanticColors?.base?.ornamentSecondaryPressed};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     }
@@ -5929,9 +5922,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;
 
@@ -5980,7 +5970,8 @@ const StyledSearchBase = styled$2(TextField, {
 
           &:hover {
             svg {
-              color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
+              color: ${semanticColors?.base
+        ?.ornamentSecondaryInteraction} !important;
             }
           }
 
@@ -6000,7 +5991,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 {
@@ -6008,7 +5999,7 @@ const StyledSearchBase = styled$2(TextField, {
           }
         }
         .${outlinedInputClasses.notchedOutline} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
       }
 
@@ -6022,13 +6013,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;
       }
 
@@ -6067,10 +6058,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};
           }
         }
       }
@@ -6087,7 +6078,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} {
@@ -6100,16 +6091,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};
         }
       }
 
@@ -6448,7 +6439,7 @@ styled$2(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;
       }
 
@@ -6473,11 +6464,11 @@ styled$2(Autocomplete, {
             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"] {
@@ -6485,7 +6476,7 @@ styled$2(Autocomplete, {
             }
 
             &[aria-selected="true"].${autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
           }
 
@@ -6499,7 +6490,7 @@ styled$2(Autocomplete, {
         .${autocompleteClasses.groupLabel} {
           top: 0;
           color: ${semanticColors?.base?.textSecondary};
-          background-color: ${semanticColors?.base?.surface};
+          background-color: ${semanticColors?.base?.surfacePrimary};
           padding: 0 ${spaces?.m}px;
         }
 
@@ -6567,7 +6558,7 @@ 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;
@@ -6579,9 +6570,10 @@ styled$2(Paper) `
 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;
     `;
 }}
@@ -6634,7 +6626,7 @@ 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;
@@ -6661,7 +6653,7 @@ 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;
@@ -6705,7 +6697,7 @@ 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;
@@ -6896,7 +6888,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"};
     `;
 }}
 `;
@@ -7009,7 +7001,7 @@ const dark$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$3 `
     ${fontHeaderXs(props)}
-    background-color: ${semanticColors?.base?.surfaceOnDark};
+    background-color: ${semanticColors?.base?.surfacePrimaryDark};
     color: ${semanticColors?.base?.textPrimaryOnDark};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7019,7 +7011,7 @@ const light$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$3 `
     ${fontBodyXs$2(props)}
-    background-color: ${semanticColors?.base?.surface};
+    background-color: ${semanticColors?.base?.surfacePrimary};
     color: ${semanticColors?.base?.textPrimary};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7094,8 +7086,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;
@@ -7518,7 +7510,7 @@ const StyledTableHeader$1 = styled$2("th", {
         }
 
         & svg {
-          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover};
+          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     `;
@@ -7738,6 +7730,21 @@ styled$2("div", {
     `;
 }}
 `;
+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;
+    `;
+}}
+`;
 styled$2("div", {
     shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
 }) `
@@ -7784,7 +7791,7 @@ 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;
@@ -7807,7 +7814,7 @@ 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;
@@ -7846,9 +7853,15 @@ 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};`}
     `;
@@ -7910,12 +7923,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 {
@@ -7929,7 +7943,7 @@ const inputDropdownStyles = (props) => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
 
@@ -7981,12 +7995,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 {
@@ -7995,7 +8009,7 @@ const minimal$1 = (props) => {
     }
 
     &:active {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
       border: none;
     }
   `;
@@ -8065,7 +8079,7 @@ const isOpen = (props) => {
         : ""}
 
     path {
-      fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+      fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
     }
 
     box-shadow: ${sdsStyle === "minimal"
@@ -8073,15 +8087,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};
     }
   `;
 };
@@ -8091,11 +8105,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};
     }
   `;
 };
@@ -8315,7 +8331,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)}
@@ -8325,7 +8340,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 {
@@ -8343,7 +8358,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)}
@@ -8353,7 +8367,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 {
@@ -8370,9 +8384,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: "";
@@ -8387,7 +8403,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: "";
@@ -8415,54 +8431,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);
@@ -8470,12 +8483,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;
 
@@ -8489,6 +8506,7 @@ function createTypeCss(props, type) {
 
     &:hover,
     &:active {
+      box-shadow: none;
       .MuiChip-label {
         color: ${semanticColors?.base?.textPrimaryInverse};
       }
@@ -8643,30 +8661,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;
 
@@ -8685,16 +8711,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;
       `}
     `;
 }}
@@ -8727,7 +8784,7 @@ const StyledCardActionArea = styled$2(Button, {
 
       &:hover,
       &:active {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
       }
     `;
 }}
@@ -8967,9 +9024,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$2 `
       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
@@ -9004,6 +9065,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);
       `}
     `;
 }}
@@ -9144,7 +9207,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);
@@ -9786,12 +9849,11 @@ const disabledStyles$1 = (props) => {
 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;
@@ -9799,7 +9861,7 @@ styled$2(FormControlLabel) `
       &:hover {
         ${StyledCheckboxDefaultIcon} {
           border: ${borders?.base?.hover};
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
         }
 
         ${StyledCheckboxCheckedIcon} {
@@ -9936,19 +9998,18 @@ const disabledStyles = (props) => {
 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} {
@@ -9958,7 +10019,7 @@ styled$2(FormControlLabel) `
 
       &:active {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryPressed};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -10216,12 +10277,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;
     `;
 }}
 `;
@@ -10237,8 +10298,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} {
@@ -10275,7 +10334,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}
@@ -10454,7 +10513,7 @@ const toggleOff = (props) => {
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
     }
 
@@ -10476,7 +10535,7 @@ const toggleOff = (props) => {
         outline: ${borders?.base?.hover};
 
         .${switchClasses.thumb} {
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }`}
   `;
@@ -10492,6 +10551,57 @@ styled$2(Switch) `
 }}
 `;
 
+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"};
+      }
+    `;
+}}
+`;
+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 LegendContainer = styled$2("div") `
   display: flex;
   flex-wrap: wrap;
@@ -10914,7 +11024,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;
@@ -17195,7 +17305,7 @@ const NarrowNavItemLinkStyles = (props) => {
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
       background: ${props.hasInvertedStyle
-        ? semanticColors?.base.backgroundSecondaryOnDark
+        ? semanticColors?.base.backgroundSecondaryDark
         : semanticColors?.base.backgroundSecondary};
     }
   `;
@@ -17221,11 +17331,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;
       }
 
@@ -17692,7 +17802,7 @@ const StyledSearch = styled$2(InputSearch, {
         &:hover {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryHoverOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -17710,7 +17820,7 @@ const StyledSearch = styled$2(InputSearch, {
         &.Mui-focused {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryPressedOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -17905,8 +18015,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$2 `
       & > .MuiButtonBase-root {
         padding: ${spaces?.s}px ${spaces?.l}px !important;
@@ -17971,16 +18081,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;
           }
         }
 
@@ -18183,8 +18293,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};
         }
@@ -18358,8 +18468,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;
@@ -18384,8 +18494,8 @@ const NarrowPrimaryNavItem = (props) => {
           `
         : css$1 `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -18417,11 +18527,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;
@@ -18438,8 +18548,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} {
@@ -18519,8 +18629,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;
@@ -18547,8 +18657,8 @@ const NarrowNavItemStyles = (props) => {
           `
         : css$1 `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -18588,11 +18698,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)),
@@ -18620,8 +18730,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} {
@@ -18716,7 +18826,7 @@ const StyledSectionHeader = styled$2(ListSubheader, {
                 ? semanticColors?.base.backgroundPrimaryDark
                 : semanticColors?.base.backgroundPrimary;
         }
-        return semanticColors?.base?.surface;
+        return semanticColors?.base?.surfacePrimary;
     }
     function getTextColor() {
         if (isNarrow) {
@@ -18777,7 +18887,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};
       `;
     }
@@ -19192,7 +19302,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 = useTheme$4();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     const [clickedDrawerKey, setClickedDrawerKey] = useState(null);
@@ -19241,6 +19351,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
             }
         };
         return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
                 if (clickedDrawerKey !== key) {
                     onDrawerOpen(key);
                 }
@@ -19412,8 +19523,8 @@ const NarrowStyledTextItem = (props) => {
     &:hover {
       box-shadow: none;
       background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
     }
   `;
 };
@@ -19445,11 +19556,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 `
@@ -19470,8 +19581,8 @@ styled$2(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           box-shadow: none;
 
           color: ${hasInvertedStyle
@@ -19492,7 +19603,7 @@ const StyledTag = styled$2(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 = useTheme$4();
     const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
     function onClose() {
@@ -19516,7 +19627,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
         const handleClick = (e) => {
             parentOnClick?.(e);
         };
-        return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: 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: [jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
+        return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
+                onDrawerStyleNavItemHover?.(item);
+                onDrawerOpen(key);
+            }, onMouseLeave: onDrawerClose, children: 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: [jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
     };
     const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
         const isDropdownOpen = open && activeDropdownKey === key;
@@ -19688,7 +19802,7 @@ 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 = useRef(null);
     const topSlotRef = useRef(null);
     const [topOffset, setTopOffset] = useState(0);
@@ -19841,11 +19955,11 @@ forwardRef((props, ref) => {
     };
     const renderPrimaryNav = () => {
         return (primaryNavItems &&
-            primaryNavItems.length > 0 && (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 && (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 && (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 && (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)
@@ -20020,7 +20134,7 @@ const StyledTabs$1 = styled$2(Tabs, {
 const StyledTab$1 = styled$2(Tab, {
     shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
-  ${fontBodyXs$2}
+  ${fontBodyMediumXs}
 
   ${(props) => {
     const spaces = getSpaces(props);
@@ -20047,20 +20161,20 @@ const StyledTab$1 = styled$2(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;
@@ -20372,7 +20486,7 @@ const StyledPaginationButton = styled$2(Button) `
 
       &:hover {
         & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.ornamentSecondaryHover}
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
     `;
@@ -20408,10 +20522,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}
         }
       }
 
@@ -20433,28 +20547,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;
@@ -20468,15 +20583,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)}
     `;
 }}
@@ -20799,7 +20914,7 @@ 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} {
@@ -20807,13 +20922,13 @@ 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};
         }
       }
 
@@ -20829,8 +20944,8 @@ 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};
         }
       }
     `;
@@ -20886,6 +21001,7 @@ const disabledStyled = (props) => {
 
     & span, & div {
       color: ${semanticColors?.base?.textDisabled};
+      background-color: transparent !important;
     }
 
     .cell-component {
@@ -20894,11 +21010,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;
@@ -20917,7 +21034,7 @@ const hoverStyled = (props) => {
     const semanticColors = getSemanticColors(props);
     return `
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
     }
   `;
 };
@@ -21018,8 +21135,8 @@ const StyledTab = styled$2(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;
 
@@ -21049,7 +21166,7 @@ const StyledTab = styled$2(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$2("div") `
   ${(props) => {
@@ -21068,7 +21185,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)}
     `;
 }}
 `;
@@ -21077,9 +21194,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;
     `;
 }}
@@ -21089,7 +21206,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;
     `;
@@ -24769,7 +24886,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)
@@ -24975,7 +25092,7 @@ var renderBarSegment = function (item, index, options) {
 };
 var StackedBarChart = function (props) {
     var _a, _b, _c;
-    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
+    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, onSegmentMouseEnter = props.onSegmentMouseEnter, onSegmentMouseLeave = props.onSegmentMouseLeave, onLegendItemMouseEnter = props.onLegendItemMouseEnter, onLegendItemMouseLeave = props.onLegendItemMouseLeave, onSegmentClick = props.onSegmentClick, onLegendItemClick = props.onLegendItemClick, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "onSegmentMouseEnter", "onSegmentMouseLeave", "onLegendItemMouseEnter", "onLegendItemMouseLeave", "onSegmentClick", "onLegendItemClick", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
     // Ensure barHeight is at least 1px
     var barHeight = Math.max(1, barHeightProp);
     var theme = useTheme$4();
@@ -25208,8 +25325,24 @@ var StackedBarChart = function (props) {
         theme,
     ]);
     // Handle legend item hover and leave
-    var handleLegendItemHover = useCallback(function (_item, index) { return setHoveredIndex(index); }, []);
-    var handleLegendItemLeave = useCallback(function () { return setHoveredIndex(null); }, []);
+    var handleLegendItemHover = useCallback(function (_item, index) {
+        setHoveredIndex(index);
+        if (onLegendItemMouseEnter && data[index]) {
+            onLegendItemMouseEnter(data[index], index);
+        }
+    }, [onLegendItemMouseEnter, data]);
+    var handleLegendItemLeave = useCallback(function (_item, index) {
+        setHoveredIndex(null);
+        if (onLegendItemMouseLeave && data[index]) {
+            onLegendItemMouseLeave(data[index], index);
+        }
+    }, [onLegendItemMouseLeave, data]);
+    // Handle legend item click
+    var handleLegendItemClickInternal = useCallback(function (_item, index) {
+        if (onLegendItemClick && data[index]) {
+            onLegendItemClick(data[index], index);
+        }
+    }, [onLegendItemClick, data]);
     // Handle selection change - reusable logic for both segment and legend
     var handleSelectionChange = useCallback(function (newSelectedIndices) {
         if (!onSelectionChange)
@@ -25219,8 +25352,13 @@ var StackedBarChart = function (props) {
         });
         onSelectionChange(newSelectedIndices, selectedData);
     }, [onSelectionChange, data]);
-    // Handle segment click - toggle selection
+    // Handle segment click - toggle selection and call onSegmentClick
     var handleSegmentClick = useCallback(function (index) {
+        // Call onSegmentClick callback if provided
+        if (onSegmentClick && data[index]) {
+            onSegmentClick(data[index], index);
+        }
+        // Handle selection change
         if (!onSelectionChange)
             return;
         var isSelected = selectedIndicesSet.has(index);
@@ -25230,6 +25368,8 @@ var StackedBarChart = function (props) {
         handleSelectionChange(newSelectedIndices);
     }, [
         onSelectionChange,
+        onSegmentClick,
+        data,
         selectedIndices,
         selectedIndicesSet,
         handleSelectionChange,
@@ -25252,14 +25392,24 @@ var StackedBarChart = function (props) {
                             selectionBehavior: selectionBehavior,
                             isLast: isLastVisible,
                             onMouseEnter: function () {
-                                return !item.isExiting && setHoveredIndex(item.originalIndex);
+                                if (!item.isExiting) {
+                                    setHoveredIndex(item.originalIndex);
+                                    if (onSegmentMouseEnter && data[item.originalIndex]) {
+                                        onSegmentMouseEnter(data[item.originalIndex], item.originalIndex);
+                                    }
+                                }
+                            },
+                            onMouseLeave: function () {
+                                setHoveredIndex(null);
+                                if (onSegmentMouseLeave && data[item.originalIndex]) {
+                                    onSegmentMouseLeave(data[item.originalIndex], item.originalIndex);
+                                }
                             },
-                            onMouseLeave: function () { return setHoveredIndex(null); },
                             onClick: function () {
                                 return !item.isExiting && handleSegmentClick(item.originalIndex);
                             },
                         });
-                    }), hasRemaining && (jsx(BarSegment, { color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary, percentage: displayRemainingPercentage, height: barHeight, isLast: true, opacity: 1, disabled: true }, "remaining"))] }), showLegend && (jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
+                    }), hasRemaining && (jsx(BarSegment, { color: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.sds) === null || _b === void 0 ? void 0 : _b.base) === null || _c === void 0 ? void 0 : _c.backgroundTertiary, percentage: displayRemainingPercentage, height: barHeight, isLast: true, opacity: 1, disabled: true }, "remaining"))] }), showLegend && (jsx(Legend, { items: legendItems, showValues: showLegendValues, onItemMouseEnter: handleLegendItemHover, onItemMouseLeave: handleLegendItemLeave, onItemClick: onLegendItemClick ? handleLegendItemClickInternal : undefined, selectedIndices: selectedIndices, onSelectionChange: onSelectionChange ? handleSelectionChange : undefined, hoveredIndex: hoveredIndex }))] }));
     // If no title, render chart and optional legend without wrapper
     if (!title) {
         return (jsx(ChartWrapper, __assign$1({ width: width }, rest, { children: chartContent })));