@czi-sds/data-viz 0.16.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],
@@ -1787,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;
@@ -1830,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;
       }
   `;
@@ -1883,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",
@@ -1906,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};
@@ -1975,7 +1967,7 @@ const StyledAccordionHeader = styled$2(AccordionSummary, {
       &:hover {
         & .${accordionSummaryClasses.expandIconWrapper} {
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
@@ -5463,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};
@@ -5575,7 +5567,7 @@ const primary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5603,7 +5595,7 @@ const secondary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5632,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};
       }
     }
   `;
@@ -5864,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};
         }
       }
     }
@@ -5930,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;
 
@@ -5981,7 +5970,8 @@ const StyledSearchBase = styled$2(TextField, {
 
           &:hover {
             svg {
-              color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
+              color: ${semanticColors?.base
+        ?.ornamentSecondaryInteraction} !important;
             }
           }
 
@@ -6001,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 {
@@ -6009,7 +5999,7 @@ const StyledSearchBase = styled$2(TextField, {
           }
         }
         .${outlinedInputClasses.notchedOutline} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
       }
 
@@ -6023,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;
       }
 
@@ -6068,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};
           }
         }
       }
@@ -6088,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} {
@@ -6101,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};
         }
       }
 
@@ -6449,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;
       }
 
@@ -6474,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"] {
@@ -6486,7 +6476,7 @@ styled$2(Autocomplete, {
             }
 
             &[aria-selected="true"].${autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
           }
 
@@ -6500,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;
         }
 
@@ -6568,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;
@@ -6580,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;
     `;
 }}
@@ -6635,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;
@@ -6662,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;
@@ -6706,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;
@@ -6897,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"};
     `;
 }}
 `;
@@ -7010,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;
   `;
@@ -7020,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;
   `;
@@ -7095,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;
@@ -7519,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};
         }
       }
     `;
@@ -7739,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)
 }) `
@@ -7785,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;
@@ -7808,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;
@@ -7847,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};`}
     `;
@@ -7911,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 {
@@ -7930,7 +7943,7 @@ const inputDropdownStyles = (props) => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
 
@@ -7982,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 {
@@ -7996,7 +8009,7 @@ const minimal$1 = (props) => {
     }
 
     &:active {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
       border: none;
     }
   `;
@@ -8066,7 +8079,7 @@ const isOpen = (props) => {
         : ""}
 
     path {
-      fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+      fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
     }
 
     box-shadow: ${sdsStyle === "minimal"
@@ -8074,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};
     }
   `;
 };
@@ -8092,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};
     }
   `;
 };
@@ -8316,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)}
@@ -8326,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 {
@@ -8344,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)}
@@ -8354,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 {
@@ -8371,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: "";
@@ -8388,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: "";
@@ -8416,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);
@@ -8471,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;
 
@@ -8490,6 +8506,7 @@ function createTypeCss(props, type) {
 
     &:hover,
     &:active {
+      box-shadow: none;
       .MuiChip-label {
         color: ${semanticColors?.base?.textPrimaryInverse};
       }
@@ -8644,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;
 
@@ -8686,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;
       `}
     `;
 }}
@@ -8728,7 +8784,7 @@ const StyledCardActionArea = styled$2(Button, {
 
       &:hover,
       &:active {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
       }
     `;
 }}
@@ -8968,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
@@ -9005,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);
       `}
     `;
 }}
@@ -9145,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);
@@ -9787,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;
@@ -9800,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} {
@@ -9937,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} {
@@ -9959,7 +10019,7 @@ styled$2(FormControlLabel) `
 
       &:active {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryPressed};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -10217,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;
     `;
 }}
 `;
@@ -10238,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} {
@@ -10276,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}
@@ -10455,7 +10513,7 @@ const toggleOff = (props) => {
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
     }
 
@@ -10477,7 +10535,7 @@ const toggleOff = (props) => {
         outline: ${borders?.base?.hover};
 
         .${switchClasses.thumb} {
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }`}
   `;
@@ -10493,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;
@@ -10915,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;
@@ -17196,7 +17305,7 @@ const NarrowNavItemLinkStyles = (props) => {
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
       background: ${props.hasInvertedStyle
-        ? semanticColors?.base.backgroundSecondaryOnDark
+        ? semanticColors?.base.backgroundSecondaryDark
         : semanticColors?.base.backgroundSecondary};
     }
   `;
@@ -17222,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;
       }
 
@@ -17693,7 +17802,7 @@ const StyledSearch = styled$2(InputSearch, {
         &:hover {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryHoverOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -17711,7 +17820,7 @@ const StyledSearch = styled$2(InputSearch, {
         &.Mui-focused {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryPressedOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -17906,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;
@@ -17972,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;
           }
         }
 
@@ -18184,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};
         }
@@ -18359,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;
@@ -18385,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;
 
@@ -18418,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;
@@ -18439,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} {
@@ -18520,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;
@@ -18548,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;
 
@@ -18589,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)),
@@ -18621,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} {
@@ -18717,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) {
@@ -18778,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};
       `;
     }
@@ -19414,8 +19523,8 @@ const NarrowStyledTextItem = (props) => {
     &:hover {
       box-shadow: none;
       background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
     }
   `;
 };
@@ -19447,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 `
@@ -19472,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
@@ -20025,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);
@@ -20052,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;
@@ -20377,7 +20486,7 @@ const StyledPaginationButton = styled$2(Button) `
 
       &:hover {
         & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.ornamentSecondaryHover}
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
     `;
@@ -20413,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}
         }
       }
 
@@ -20438,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;
@@ -20473,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)}
     `;
 }}
@@ -20804,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} {
@@ -20812,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};
         }
       }
 
@@ -20834,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};
         }
       }
     `;
@@ -20891,6 +21001,7 @@ const disabledStyled = (props) => {
 
     & span, & div {
       color: ${semanticColors?.base?.textDisabled};
+      background-color: transparent !important;
     }
 
     .cell-component {
@@ -20899,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;
@@ -20922,7 +21034,7 @@ const hoverStyled = (props) => {
     const semanticColors = getSemanticColors(props);
     return `
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
     }
   `;
 };
@@ -21023,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;
 
@@ -21054,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) => {
@@ -21073,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)}
     `;
 }}
 `;
@@ -21082,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;
     `;
 }}
@@ -21094,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;
     `;
@@ -24774,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)