@czi-sds/data-viz 0.16.0 → 0.16.1

package/dist/index.cjs.js

@@ -994,7 +994,7 @@ const Spaces = {
     xs: 6,
     s: 8,
     m: 12,
-    default: 12,
+    default: 8,
     l: 16,
     xl: 24,
     xxl: 32,
@@ -1268,7 +1268,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],
@@ -1276,27 +1276,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],
@@ -1308,16 +1304,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],
@@ -1430,7 +1425,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],
@@ -1438,27 +1433,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],
@@ -1470,16 +1461,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],
@@ -1811,7 +1801,7 @@ const Theme = (t) => material.createTheme(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;
@@ -1854,7 +1844,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;
       }
   `;
@@ -1907,6 +1897,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",
@@ -1930,8 +1921,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 react.css `
     font-family: ${fontFamily};
@@ -1999,7 +1991,7 @@ const StyledAccordionHeader = styled$2__default.default(material.AccordionSummar
       &:hover {
         & .${material.accordionSummaryClasses.expandIconWrapper} {
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryHover};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
@@ -5487,12 +5479,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};
@@ -5599,7 +5591,7 @@ const primary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5627,7 +5619,7 @@ const secondary$2 = (props) => {
     }
 
     &:hover {
-      background: ${semanticColors?.base?.fillHover};
+      background: ${semanticColors?.base?.fillInteraction};
       color: ${semanticColors?.accent?.ornamentHover};
 
       svg {
@@ -5656,19 +5648,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};
       }
     }
   `;
@@ -5888,7 +5880,7 @@ const applyIntentColor$2 = (props, intent) => {
       .${material.inputAdornmentClasses.root} .${material.buttonBaseClasses.root}:last-of-type {
         cursor: default;
         svg {
-          color: ${semanticColors?.base?.ornamentSecondaryPressed};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     }
@@ -5954,9 +5946,6 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     return react.css `
-      margin-top: ${spaces?.m}px;
-      margin-bottom: ${spaces?.m}px;
-      margin-right: ${spaces?.xl}px;
       min-width: 120px;
       display: block;
 
@@ -6005,7 +5994,8 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
 
           &:hover {
             svg {
-              color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
+              color: ${semanticColors?.base
+        ?.ornamentSecondaryInteraction} !important;
             }
           }
 
@@ -6025,7 +6015,7 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
       }
 
       .${material.outlinedInputClasses.root}:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
 
         & .${material.buttonBaseClasses.root}:last-of-type {
           svg {
@@ -6033,7 +6023,7 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
           }
         }
         .${material.outlinedInputClasses.notchedOutline} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
       }
 
@@ -6047,13 +6037,13 @@ const StyledSearchBase = styled$2__default.default(material.TextField, {
         .${material.inputAdornmentClasses.root} .${material.buttonBaseClasses.root}:last-of-type {
           cursor: default;
           svg {
-            color: ${semanticColors?.base?.ornamentSecondaryPressed};
+            color: ${semanticColors?.base?.ornamentSecondaryInteraction};
           }
         }
       }
 
       &.user-is-tabbing .${material.outlinedInputClasses.root}:focus-within {
-        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
         outline-offset: 1px;
       }
 
@@ -6092,10 +6082,10 @@ const StyledMenuItem$1 = styled$2__default.default(material.MenuItem) `
         opacity: 1;
 
         &:hover, &.${material.menuItemClasses.focusVisible} {
-          background-color: ${semanticColors?.base?.fillHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
 
           &[aria-selected="true"] {
-            background-color: ${semanticColors?.base?.fillHover};
+            background-color: ${semanticColors?.base?.fillInteraction};
           }
         }
       }
@@ -6112,7 +6102,7 @@ const StyledMenuItem$1 = styled$2__default.default(material.MenuItem) `
         background-color: unset !important;
 
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover} !important;
+          background-color: ${semanticColors?.base?.fillInteraction} !important;
         }
 
         ${StyledIcon$1}, ${DotIcon} {
@@ -6125,16 +6115,16 @@ const StyledMenuItem$1 = styled$2__default.default(material.MenuItem) `
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
         ${StyledIcon$1}, ${DotIcon} {
           color: ${selected ? semanticColors?.base?.ornamentPrimary : semanticColors?.base?.ornamentSecondary};
         }
       }
 
       &.Mui-selected.MuiListItem-root.MuiListItem-button {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
         }
       }
 
@@ -6473,7 +6463,7 @@ styled$2__default.default(material.Autocomplete, {
       // look at the useDetectUserTabbing hook.
       &[data-user-is-tabbing="true"]:focus-within {
         border-radius: 4px;
-        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
         outline-offset: 1px;
       }
 
@@ -6498,11 +6488,11 @@ styled$2__default.default(material.Autocomplete, {
             min-height: unset;
 
             &.${material.autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
 
             &[aria-selected="true"] {
-              background-color: ${semanticColors?.base?.surface};
+              background-color: ${semanticColors?.base?.surfacePrimary};
             }
 
             &[aria-disabled="true"] {
@@ -6510,7 +6500,7 @@ styled$2__default.default(material.Autocomplete, {
             }
 
             &[aria-selected="true"].${material.autocompleteClasses.focused} {
-              background-color: ${semanticColors?.base?.fillHover};
+              background-color: ${semanticColors?.base?.fillInteraction};
             }
           }
 
@@ -6524,7 +6514,7 @@ styled$2__default.default(material.Autocomplete, {
         .${material.autocompleteClasses.groupLabel} {
           top: 0;
           color: ${semanticColors?.base?.textSecondary};
-          background-color: ${semanticColors?.base?.surface};
+          background-color: ${semanticColors?.base?.surfacePrimary};
           padding: 0 ${spaces?.m}px;
         }
 
@@ -6592,7 +6582,7 @@ styled$2__default.default(material.Paper) `
     return `
       background-image: none;
       padding: ${spaces?.xs}px 0;
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       border: ${borders?.none};
       outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000", 15)};
       border-radius: ${corners?.l}px;
@@ -6604,9 +6594,10 @@ styled$2__default.default(material.Paper) `
 styled$2__default.default("div") `
   ${fontBodyXxs$1}
   ${(props) => {
+    const { disabled } = props;
     const semanticColors = getSemanticColors(props);
     return `
-      color: ${semanticColors?.base?.textSecondary};
+      color: ${disabled ? semanticColors?.base?.textDisabled : semanticColors?.base?.textSecondary};
       white-space: pre-wrap;
     `;
 }}
@@ -6659,7 +6650,7 @@ styled$2__default.default(material.Popper, {
     const borders = getBorders(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       border: ${borders?.none};
       border-radius: ${corners?.l}px;
@@ -6686,7 +6677,7 @@ styled$2__default.default(material.Paper, {
     const shadows = getShadows(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       box-shadow: ${shadows?.none};
       margin: 0;
@@ -6730,7 +6721,7 @@ material.styled("span") `
     const iconSizes = getIconSizes(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       position: absolute;
       right: -${spaces?.xs}px;
       top: -${spaces?.xxxs}px;
@@ -6921,7 +6912,7 @@ const StyledButtonToggle = styled$2__default.default(ButtonIcon, {
     const { sdsStage } = props;
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillOpen : "transparent"};
+      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillInteraction : "transparent"};
     `;
 }}
 `;
@@ -7034,7 +7025,7 @@ const dark$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1.css `
     ${fontHeaderXs(props)}
-    background-color: ${semanticColors?.base?.surfaceOnDark};
+    background-color: ${semanticColors?.base?.surfacePrimaryDark};
     color: ${semanticColors?.base?.textPrimaryOnDark};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7044,7 +7035,7 @@ const light$1 = (props) => {
     const semanticColors = getSemanticColors(props);
     return css$1.css `
     ${fontBodyXs$2(props)}
-    background-color: ${semanticColors?.base?.surface};
+    background-color: ${semanticColors?.base?.surfacePrimary};
     color: ${semanticColors?.base?.textPrimary};
     padding: ${spaces?.s}px ${spaces?.m}px;
   `;
@@ -7119,8 +7110,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;
@@ -7543,7 +7534,7 @@ const StyledTableHeader$1 = styled$2__default.default("th", {
         }
 
         & svg {
-          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover};
+          color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
     `;
@@ -7763,6 +7754,21 @@ styled$2__default.default("div", {
     `;
 }}
 `;
+styled$2__default.default("div", {
+    shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
+}) `
+  ${fontBodyXxs$1}
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    return `
+      color: ${semanticColors?.base?.textSecondary};
+      padding-right: ${spaces?.m}px;
+      padding-top: ${spaces?.xxxs}px;
+    `;
+}}
+`;
 styled$2__default.default("div", {
     shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
 }) `
@@ -7809,7 +7815,7 @@ styled$2__default.default(material.Popper, {
     const shadows = getShadows(props);
     const semanticColors = getSemanticColors(props);
     return `
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       border: ${borders?.none};
       border-radius: ${corners?.l}px;
@@ -7832,7 +7838,7 @@ styled$2__default.default(material.Paper, {
       border: none !important;
       outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
       border-radius: ${corners?.l}px;
-      background-color: ${semanticColors?.base?.surface};
+      background-color: ${semanticColors?.base?.surfacePrimary};
       background-image: none;
       margin: 0;
       padding: 0 0 ${spaces?.xs}px 0;
@@ -7871,9 +7877,15 @@ styled$2__default.default("div") `
     const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     return `
+      & > div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+
       display: flex;
-      align-items: center;
-      justify-content: space-between;
+      flex-direction: column;
       padding: ${spaces?.xs}px ${spaces?.m}px ${search ? spaces?.xs : spaces?.s}px;
       ${search && `border-bottom: solid 1px ${semanticColors?.base?.divider};`}
     `;
@@ -7935,12 +7947,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 {
@@ -7954,7 +7967,7 @@ const inputDropdownStyles = (props) => {
       color: ${semanticColors?.base?.textPrimary};
 
       path {
-        fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+        fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
       }
     }
 
@@ -8006,12 +8019,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 {
@@ -8020,7 +8033,7 @@ const minimal$1 = (props) => {
     }
 
     &:active {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
       border: none;
     }
   `;
@@ -8090,7 +8103,7 @@ const isOpen = (props) => {
         : ""}
 
     path {
-      fill: ${semanticColors?.base?.ornamentSecondaryPressed};
+      fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
     }
 
     box-shadow: ${sdsStyle === "minimal"
@@ -8098,15 +8111,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};
     }
   `;
 };
@@ -8116,11 +8129,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};
     }
   `;
 };
@@ -8340,7 +8355,6 @@ const tagSizeS = (props) => {
     const semanticColors = getSemanticColors(props);
     return react.css `
     height: unset;
-    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXxxs$1(props)}
@@ -8350,7 +8364,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 {
@@ -8368,7 +8382,6 @@ const tagSizeL = (props) => {
     const semanticColors = getSemanticColors(props);
     return react.css `
     height: unset;
-    margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
 
     .MuiChip-label {
       ${fontBodyXs$2(props)}
@@ -8378,7 +8391,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 {
@@ -8395,9 +8408,11 @@ const rounded = (props) => {
     const spaces = getSpaces(props);
     const { sdsSize = "s", icon } = props;
     const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
+    const rightPadding = sdsSize === "l" && icon ? spaces?.s : spaces?.xs;
     return react.css `
     border-radius: ${corners?.rounded}px;
-    padding: ${topBottomPadding}px ${spaces?.s}px;
+    padding: ${topBottomPadding}px ${rightPadding}px ${topBottomPadding}px
+      ${spaces?.xs}px;
 
     &:after {
       content: "";
@@ -8412,7 +8427,7 @@ const square = (props) => {
     const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
     return react.css `
     border-radius: ${corners?.m}px;
-    padding: ${topBottomPadding}px ${spaces?.s}px;
+    padding: ${topBottomPadding}px ${spaces?.xs}px;
 
     &:after {
       content: "";
@@ -8440,54 +8455,51 @@ const secondary = (props) => {
     return createTypeCss(props, "secondary");
 };
 function generatePrimaryTagColors(intent, colors, semanticColors) {
-    if (intent || colors.length) {
-        intent = intent || "neutral";
-        return {
-            background: colors.length >= 2 ? colors[1] : semanticColors?.[intent].fillPrimary,
-            backgroundClicked: colors.length >= 2
-                ? material.darken(colors[1], 0.3)
-                : semanticColors?.[intent].fillPressed,
-            backgroundHover: colors.length >= 2
-                ? material.darken(colors[1], 0.15)
-                : semanticColors?.[intent].fillHover,
-            iconColor: colors.length > 2 ? colors[2] : semanticColors?.base?.ornamentOnFill,
-            label: colors.length ? colors[0] : semanticColors?.base?.textOnFill
-        };
-    }
-    else {
-        return {
-            background: semanticColors?.neutral.fillPrimary,
-            backgroundClicked: semanticColors?.neutral.fillPressed,
-            backgroundHover: semanticColors?.neutral.fillHover,
-            iconColor: semanticColors?.base?.ornamentOnFill,
-            label: semanticColors?.base?.textOnFill
-        };
-    }
+    const effectiveIntent = intent || "neutral";
+    const intentColors = semanticColors?.[effectiveIntent];
+    const hasCustomColors = colors.length >= 2;
+    return {
+        background: hasCustomColors ? colors[1] : intentColors?.fillPrimary,
+        backgroundClicked: hasCustomColors
+            ? material.darken(colors[1], 0.3)
+            : intentColors?.fillPressed,
+        backgroundHover: hasCustomColors
+            ? material.darken(colors[1], 0.15)
+            : intentColors?.fillHover,
+        iconColor: hasCustomColors
+            ? colors[2]
+            : semanticColors?.base?.ornamentOnFill,
+        label: colors.length > 0 ? colors[0] : semanticColors?.base?.textOnFill,
+        borderColor: material.alpha(semanticColors?.neutral.border || "#000", 0.6)
+    };
 }
-function generateSecondaryTagColors(intent, colors, semanticColors) {
-    if (intent || colors.length) {
-        intent = intent || "neutral";
-        return {
-            background: colors.length >= 2 ? colors[1] : semanticColors?.[intent].fillSecondary,
-            backgroundClicked: colors.length >= 2
-                ? material.darken(colors[1], 0.3)
-                : semanticColors?.[intent].fillPressed,
-            backgroundHover: colors.length >= 2
-                ? material.darken(colors[1], 0.15)
-                : semanticColors?.[intent].fillHover,
-            iconColor: colors.length > 2 ? colors[2] : semanticColors?.[intent].ornament,
-            label: colors.length ? colors[0] : semanticColors?.[intent].text
-        };
-    }
-    else {
-        return {
-            background: semanticColors?.neutral.fillSecondary,
-            backgroundClicked: semanticColors?.neutral.fillPressed,
-            backgroundHover: semanticColors?.neutral.fillHover,
-            iconColor: semanticColors?.neutral.ornament,
-            label: semanticColors?.neutral.fillPressed
-        };
-    }
+function getSecondaryBorderColor(effectiveIntent, theme, intentColors) {
+    if (!theme || !theme.palette)
+        return material.alpha(intentColors?.border || "#000", 0.6);
+    if (effectiveIntent === "negative" && theme.palette.mode === "dark")
+        return material.alpha(intentColors?.border || "#000", 0.65);
+    if (effectiveIntent === "notice" && theme.palette.mode === "light")
+        return material.alpha(intentColors?.border || "#000", 0.85);
+    return material.alpha(intentColors?.border || "#000", 0.6);
+}
+function generateSecondaryTagColors(intent, colors, semanticColors, theme = defaultTheme$4) {
+    const effectiveIntent = intent || "neutral";
+    const intentColors = semanticColors?.[effectiveIntent];
+    const hasCustomColors = colors.length >= 2;
+    return {
+        background: hasCustomColors ? colors[1] : intentColors?.fillSecondary,
+        backgroundClicked: hasCustomColors
+            ? material.darken(colors[1], 0.3)
+            : intentColors?.fillPressed,
+        backgroundHover: hasCustomColors
+            ? material.darken(colors[1], 0.15)
+            : intentColors?.fillHover,
+        iconColor: hasCustomColors ? colors[2] : intentColors?.ornament,
+        label: colors.length > 0 ? colors[0] : intentColors?.text,
+        borderColor: hasCustomColors
+            ? material.alpha(colors[1], 0.6)
+            : getSecondaryBorderColor(effectiveIntent, theme, intentColors)
+    };
 }
 function createTypeCss(props, type) {
     const semanticColors = getSemanticColors(props);
@@ -8495,12 +8507,16 @@ function createTypeCss(props, type) {
     const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
     const typeToColors = {
         primary: generatePrimaryTagColors(intent, colors, semanticColors),
-        secondary: generateSecondaryTagColors(intent, colors, semanticColors)
+        secondary: generateSecondaryTagColors(intent, colors, semanticColors, props.theme)
     };
     const typeColors = typeToColors[type];
     return react.css `
     ${focusVisibleA11yStyle(props)}
 
+    ${type === "secondary" &&
+        react.css `
+      box-shadow: inset 0 0 0 1px ${typeColors.borderColor};
+    `}
     background-color: ${typeColors.background};
     position: relative;
 
@@ -8514,6 +8530,7 @@ function createTypeCss(props, type) {
 
     &:hover,
     &:active {
+      box-shadow: none;
       .MuiChip-label {
         color: ${semanticColors?.base?.textPrimaryInverse};
       }
@@ -8668,30 +8685,38 @@ const doNotForwardProps$r = [
     "cardSdsType",
     "classes",
 ];
-const StyledCard = styled$2__default.default(material.Card, {
-    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
-}) `
-  ${(props) => {
-    const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
-    const semanticColors = getSemanticColors(props);
-    const corners = getCorners(props);
-    const shadows = getShadows(props);
-    const flexDirection = sdsType === "wide" && visualElementType === "image"
+const getFlexDirection = (sdsType, visualElementType, imagePosition) => {
+    return sdsType === "wide" && visualElementType === "image"
         ? imagePosition === "left"
             ? "row"
             : "row-reverse"
         : visualElementType === "icon"
             ? "row"
             : "column";
-    const showDecorativeBorder = visualElementType === "image"
+};
+const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorder, imagePadding) => {
+    return visualElementType === "image"
         ? boundingBox && decorativeBorder && imagePadding
         : boundingBox && decorativeBorder;
+};
+const StyledCard = styled$2__default.default(material.Card, {
+    shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
+}) `
+  ${(props) => {
+    const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
+    const semanticColors = getSemanticColors(props);
+    const corners = getCorners(props);
+    const shadows = getShadows(props);
+    const spaces = getSpaces(props);
+    const flexDirection = getFlexDirection(sdsType, visualElementType, imagePosition);
+    const showDecorativeBorder = getShowDecorativeBorder(visualElementType, boundingBox, decorativeBorder, imagePadding);
     return react.css `
+      position: relative;
       display: flex;
       background-color: transparent;
       background-image: none;
       flex-direction: ${flexDirection};
-      overflow: auto;
+      overflow: visible;
       box-shadow: none;
       border-radius: ${corners?.xl}px;
 
@@ -8710,16 +8735,47 @@ const StyledCard = styled$2__default.default(material.Card, {
         background-color: ${semanticColors?.base?.backgroundPrimary};
       `}
 
+      ${showDecorativeBorder &&
+        react.css `
+        &:before {
+          content: "";
+          position: absolute;
+          background-color: ${semanticColors?.accent?.border};
+
+          ${sdsType === "wide" &&
+            react.css `
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            width: ${spaces?.xs}px;
+            border-top-left-radius: ${corners?.xl}px;
+            border-bottom-left-radius: ${corners?.xl}px;
+          `}
+
+          ${sdsType === "narrow" &&
+            react.css `
+            height: ${spaces?.xs}px;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            border-top-left-radius: ${corners?.xl}px;
+            border-top-right-radius: ${corners?.xl}px;
+          `}
+        }
+      `}
+
       ${sdsType === "wide" &&
         showDecorativeBorder &&
         react.css `
-        border-left: 4px solid ${semanticColors?.accent?.border};
+        border-top-left-radius: ${corners?.l}px;
+        border-bottom-left-radius: ${corners?.l}px;
       `}
 
       ${sdsType === "narrow" &&
         showDecorativeBorder &&
         react.css `
-        border-top: 4px solid ${semanticColors?.accent?.border};
+        border-top-left-radius: ${corners?.l}px;
+        border-top-right-radius: ${corners?.l}px;
       `}
     `;
 }}
@@ -8752,7 +8808,7 @@ const StyledCardActionArea = styled$2__default.default(Button, {
 
       &:hover,
       &:active {
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
       }
     `;
 }}
@@ -8992,9 +9048,13 @@ const StyledImageMediaWrapper = material.styled("div", {
   ${(props) => {
     const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
     const spaces = getSpaces(props);
+    const corners = getCorners(props);
     return material.css `
       display: flex;
       align-items: start;
+      border-top-left-radius: calc(${corners?.xl}px - 1px);
+      border-bottom-left-radius: calc(${corners?.xl}px - 1px);
+      overflow: hidden;
 
       ${boundingBox
         ? imagePadding
@@ -9029,6 +9089,8 @@ const StyledImageMediaWrapper = material.styled("div", {
             `}
 
         justify-content: center;
+        border-top-left-radius: calc(${corners?.xl}px - 1px);
+        border-top-right-radius: calc(${corners?.xl}px - 1px);
       `}
     `;
 }}
@@ -9169,7 +9231,7 @@ const StyledPaper = styled$2__default.default(material.Paper, {
     const semanticColors = getSemanticColors(props);
     const isSmall = sdsSize === "xs" || sdsSize === "s";
     return `
-        background-color: ${semanticColors?.base?.surface};
+        background-color: ${semanticColors?.base?.surfacePrimary};
         background-image: none;
         box-shadow: ${shadows?.l};
         max-height: calc(100vh - ${2 * (spaces?.xxxl || 40)}px);
@@ -9811,12 +9873,11 @@ const disabledStyles$1 = (props) => {
 styled$2__default.default(material.FormControlLabel) `
   ${(props) => {
     const { disabled } = props;
-    const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     const borders = getBorders(props);
     return `
       align-items: start;
-      margin-bottom: ${spaces?.l}px;
+      margin-bottom: 0;
       margin-left: 0;
       margin-right: 0;
       width: fit-content;
@@ -9824,7 +9885,7 @@ styled$2__default.default(material.FormControlLabel) `
       &:hover {
         ${StyledCheckboxDefaultIcon} {
           border: ${borders?.base?.hover};
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
         }
 
         ${StyledCheckboxCheckedIcon} {
@@ -9961,19 +10022,18 @@ const disabledStyles = (props) => {
 styled$2__default.default(material.FormControlLabel) `
   ${(props) => {
     const { disabled } = props;
-    const spaces = getSpaces(props);
     const semanticColors = getSemanticColors(props);
     return `
       align-items: start;
-      margin-bottom: ${spaces?.l}px;
+      margin-bottom: 0;
       margin-left: 0;
       margin-right: 0;
       width: fit-content;
 
       &:hover {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryHover};  
-          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};  
+          background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -9983,7 +10043,7 @@ styled$2__default.default(material.FormControlLabel) `
 
       &:active {
         ${StyledRadioDefaultIcon} {
-          border: 1px solid ${semanticColors?.base?.borderPrimaryPressed};
+          border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
         }
 
         ${StyledRadioCheckedIcon} {
@@ -10241,12 +10301,12 @@ const textArea = (props) => {
 };
 const StyledLabel$2 = styled$2__default.default("label") `
   display: block;
-  ${fontBodyS$1}
+  ${fontBodySemiboldXxxs}
 
   ${(props) => {
     const spaces = getSpaces(props);
     return `
-      margin-bottom: ${spaces?.xxs}px;
+      margin-bottom: ${spaces?.s}px;
     `;
 }}
 `;
@@ -10262,8 +10322,6 @@ const StyledInputBase = styled$2__default.default(material.TextField, {
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
     return react.css `
-      margin-bottom: ${spaces?.l}px;
-      margin-right: ${spaces?.m}px;
       display: block;
 
       .${material.outlinedInputClasses.root} {
@@ -10300,7 +10358,7 @@ const StyledInputBase = styled$2__default.default(material.TextField, {
       .${material.outlinedInputClasses.root}:hover
         .${material.outlinedInputClasses.notchedOutline} {
         border: ${borders?.base?.hover};
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
 
       .${material.outlinedInputClasses.root}.${material.outlinedInputClasses.focused}
@@ -10479,7 +10537,7 @@ const toggleOff = (props) => {
       }
 
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
       }
     }
 
@@ -10501,7 +10559,7 @@ const toggleOff = (props) => {
         outline: ${borders?.base?.hover};
 
         .${material.switchClasses.thumb} {
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }`}
   `;
@@ -10517,6 +10575,57 @@ styled$2__default.default(material.Switch) `
 }}
 `;
 
+styled$2__default.default.div `
+  display: flex;
+  flex-direction: column;
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    const borderThickness = 2;
+    const borderColor = props.borderIntent
+        ? semanticColors?.[props.borderIntent]?.border
+        : "transparent";
+    return `
+      gap: ${spaces?.s}px;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -${(spaces?.xs || 0) + borderThickness}px;
+        top: 0;
+        bottom: 0;
+        width: ${borderThickness}px;
+        background-color: ${borderColor};
+        display: ${props.hasBorder ? "block" : "none"};
+      }
+    `;
+}}
+`;
+styled$2__default.default.div `
+  ${fontBodySemiboldXxxs}
+  display: flex;
+  align-items: start;
+
+  ${(props) => {
+    const spaces = getSpaces(props);
+    const semanticColors = getSemanticColors(props);
+    const intentColors = semanticColors?.[props.intent];
+    return `
+      gap: ${spaces?.xs}px;
+      color: ${intentColors?.text};
+
+      svg {
+        margin-top: ${spaces?.xxxs}px;
+        fill: ${intentColors?.ornament};
+        path {
+          fill: ${intentColors?.ornament};
+        }
+      }
+    `;
+}}
+`;
+
 const LegendContainer = styled$2__default.default("div") `
   display: flex;
   flex-wrap: wrap;
@@ -10939,7 +11048,7 @@ const StyledMenu = styled$2__default.default(material.Menu) `
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
     return `
-          background-color: ${semanticColors?.base?.surface};
+          background-color: ${semanticColors?.base?.surfacePrimary};
           background-image: none;
           padding: ${spaces?.xs}px;
           border-radius: ${corners?.l}px;
@@ -17220,7 +17329,7 @@ const NarrowNavItemLinkStyles = (props) => {
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
       background: ${props.hasInvertedStyle
-        ? semanticColors?.base.backgroundSecondaryOnDark
+        ? semanticColors?.base.backgroundSecondaryDark
         : semanticColors?.base.backgroundSecondary};
     }
   `;
@@ -17246,11 +17355,11 @@ const StyledNavItemLink = styled$2__default.default(Link, {
 
       &:hover {
         color: ${props.hasInvertedStyle
-        ? semanticColors?.base.textPrimaryOnDark
-        : semanticColors?.base.textPrimary};
+        ? semanticColors?.base?.textPrimaryOnDark
+        : semanticColors?.base?.textPrimary};
         background-color: ${props.hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base?.fillInteractionOnDark
+        : semanticColors?.base?.fillInteraction};
         text-decoration: none;
       }
 
@@ -17717,7 +17826,7 @@ const StyledSearch = styled$2__default.default(InputSearch, {
         &:hover {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryHoverOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -17735,7 +17844,7 @@ const StyledSearch = styled$2__default.default(InputSearch, {
         &.Mui-focused {
           fieldset {
             border-color: ${hasInvertedStyle
-        ? semanticColors?.base?.borderPrimaryPressedOnDark
+        ? semanticColors?.base?.borderPrimaryInteractionOnDark
         : ""} !important;
           }
 
@@ -17930,8 +18039,8 @@ const StyledAccordion = styled$2__default.default(Accordion, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return material.css `
       & > .MuiButtonBase-root {
         padding: ${spaces?.s}px ${spaces?.l}px !important;
@@ -17996,16 +18105,16 @@ const StyledAccordion = styled$2__default.default(Accordion, {
           width: 100%;
           box-shadow: none;
           background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
           color: ${hasInvertedStyle
         ? semanticColors?.base.textPrimaryOnDark
         : semanticColors?.base.textPrimary};
 
           svg {
             color: ${hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover} !important;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction} !important;
           }
         }
 
@@ -18208,8 +18317,8 @@ const StyledHoverDrawerItem = styled$2__default.default(Button, {
         box-shadow: none;
         cursor: pointer;
         background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
         svg {
           color: ${semanticColors?.accent?.ornament};
         }
@@ -18383,8 +18492,8 @@ const NarrowPrimaryNavItem = (props) => {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return react.css `
     border-radius: ${corners?.l}px;
     justify-content: start;
@@ -18409,8 +18518,8 @@ const NarrowPrimaryNavItem = (props) => {
           `
         : react.css `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -18442,11 +18551,11 @@ styled$2__default.default(Button, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return react.css `
       border: none;
       padding: ${spaces?.xxxs}px ${spaces?.m}px;
@@ -18463,8 +18572,8 @@ styled$2__default.default(Button, {
 
       &:hover {
         background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover} !important;
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction} !important;
         box-shadow: none;
 
         ${StyledLabel$1} {
@@ -18544,8 +18653,8 @@ const NarrowNavItemStyles = (props) => {
     const semanticColors = getSemanticColors(props);
     const corners = getCorners(props);
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base?.ornamentSecondaryInteraction;
     return react.css `
     ${active ? fontBodySemiboldL(props) : fontBodyMediumL(props)}
     border-radius: ${corners?.l}px;
@@ -18572,8 +18681,8 @@ const NarrowNavItemStyles = (props) => {
           `
         : react.css `
             background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           `}
       box-shadow: none;
 
@@ -18613,11 +18722,11 @@ const UnifiedNavItem = styled$2__default.default(Button, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return [
         navVariant === "secondary" &&
             (active ? fontBodySemiboldS(props) : fontBodyMediumS(props)),
@@ -18645,8 +18754,8 @@ const UnifiedNavItem = styled$2__default.default(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover} !important;
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction} !important;
           box-shadow: none;
 
           ${navVariant === "primary" && StyledLabel} {
@@ -18741,7 +18850,7 @@ const StyledSectionHeader = styled$2__default.default(ListSubheader, {
                 ? semanticColors?.base.backgroundPrimaryDark
                 : semanticColors?.base.backgroundPrimary;
         }
-        return semanticColors?.base?.surface;
+        return semanticColors?.base?.surfacePrimary;
     }
     function getTextColor() {
         if (isNarrow) {
@@ -18802,7 +18911,7 @@ const StyledAccordionSection = styled$2__default.default("div", {
         border-radius: ${corners?.xl}px;
         padding: ${spaces?.l}px;
         background-color: ${hasInvertedStyle
-            ? semanticColors?.base?.backgroundSecondaryOnDark
+            ? semanticColors?.base?.backgroundSecondaryDark
             : semanticColors?.base?.backgroundSecondary};
       `;
     }
@@ -19438,8 +19547,8 @@ const NarrowStyledTextItem = (props) => {
     &:hover {
       box-shadow: none;
       background: ${hasInvertedStyle
-        ? semanticColors?.base.fillHoverOnDark
-        : semanticColors?.base.fillHover};
+        ? semanticColors?.base.fillInteractionOnDark
+        : semanticColors?.base.fillInteraction};
     }
   `;
 };
@@ -19471,11 +19580,11 @@ styled$2__default.default(Button, {
         ? semanticColors?.base.ornamentSecondaryOnDark
         : semanticColors?.base.ornamentSecondary;
     const ChevronHoverColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryHoverOnDark
-        : semanticColors?.base.ornamentSecondaryHover;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     const ChevronOpenColor = hasInvertedStyle
-        ? semanticColors?.base?.ornamentSecondaryPressedOnDark
-        : semanticColors?.base.ornamentSecondaryPressed;
+        ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
+        : semanticColors?.base.ornamentSecondaryInteraction;
     return [
         open ? fontBodySemiboldS(props) : fontBodyMediumS(props),
         react.css `
@@ -19496,8 +19605,8 @@ styled$2__default.default(Button, {
 
         &:hover {
           background: ${hasInvertedStyle
-            ? semanticColors?.base.fillHoverOnDark
-            : semanticColors?.base.fillHover};
+            ? semanticColors?.base.fillInteractionOnDark
+            : semanticColors?.base.fillInteraction};
           box-shadow: none;
 
           color: ${hasInvertedStyle
@@ -20049,7 +20158,7 @@ const StyledTabs$1 = styled$2__default.default(material.Tabs, {
 const StyledTab$1 = styled$2__default.default(material.Tab, {
     shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
 }) `
-  ${fontBodyXs$2}
+  ${fontBodyMediumXs}
 
   ${(props) => {
     const spaces = getSpaces(props);
@@ -20076,20 +20185,20 @@ const StyledTab$1 = styled$2__default.default(material.Tab, {
         left: 0;
         width: ${spaces?.xxxs}px;
         height: 100%;
-        background-color: ${semanticColors?.base?.borderPrimaryHover};
+        background-color: ${semanticColors?.base?.borderPrimaryInteraction};
         display: none;
         border-radius: ${spaces?.xxxs}px;
       }
       &:hover {
         color: ${semanticColors?.base?.textPrimary};
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
         &:before {
           display: block;
         }
       }
       &.Mui-selected {
         color: ${semanticColors?.base?.textPrimary};
-        font-weight: 500;
+        font-weight: 600;
       }
       &.MuiButtonBase-root {
         text-align: left;
@@ -20401,7 +20510,7 @@ const StyledPaginationButton = styled$2__default.default(Button) `
 
       &:hover {
         & .MuiSvgIcon-root {
-          color: ${semanticColors?.base?.ornamentSecondaryHover}
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
     `;
@@ -20437,10 +20546,10 @@ const StyledPaginationChevronList = styled$2__default.default("li", {
       }
 
       &:hover {
-        background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
+        background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
 
         & .MuiSvgIcon-root {
-          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryHover}
+          color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryInteraction}
         }
       }
 
@@ -20462,28 +20571,29 @@ const StyledPagination = styled$2__default.default("ul", {
 `;
 const selectedPageStyle = (props) => {
     const semanticColors = getSemanticColors(props);
-    return `
-    background-color: ${semanticColors?.base?.fillOpen};
+    return react.css `
+    background-color: ${semanticColors?.base?.fillInteraction};
     color: ${semanticColors?.base?.textPrimary};
-    font-weight: 500;
     box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
 
     &:hover {
       box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
     }
+
+    ${fontTabularSemiboldS(props)}
   `;
 };
 const Page = styled$2__default.default("li", {
     shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
 }) `
-  ${fontTabularS}
+  ${fontTabularMediumS}
 
   ${(props) => {
     const { selected, sdsStyle } = props;
     const spaces = getSpaces(props);
     const corners = getCorners(props);
     const semanticColors = getSemanticColors(props);
-    return `
+    return react.css `
       color: ${semanticColors?.base?.textSecondary};
       cursor: pointer;
       list-style: none;
@@ -20497,15 +20607,15 @@ const Page = styled$2__default.default("li", {
       border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.l}px;
       user-select: none;
       &:hover {
-        background-color: ${semanticColors?.base?.fillHover};
+        background-color: ${semanticColors?.base?.fillInteraction};
         color: ${semanticColors?.base?.textPrimary};
       }
 
-      &:nth-last-of-type(-n+2) {
+      &:nth-last-of-type(-n + 2) {
         margin-right: 0;
       }
 
-      ${selected && selectedPageStyle(props)};
+      ${selected && selectedPageStyle(props)}
       ${focusVisibleA11yStyle(props)}
     `;
 }}
@@ -20828,7 +20938,7 @@ styled$2__default.default(material.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};
       }
 
       .${material.toggleButtonClasses.root}.${material.toggleButtonClasses.disabled} {
@@ -20836,13 +20946,13 @@ styled$2__default.default(material.ToggleButtonGroup, {
       }
 
       .${material.toggleButtonClasses.root}.${material.toggleButtonClasses.selected} {
-        background-color: ${semanticColors?.base?.fillOpen};
+        background-color: ${semanticColors?.base?.fillInteraction};
         color: ${semanticColors?.accent?.ornamentSelected};
         border-color: ${semanticColors?.base?.borderPrimary};
 
         &:hover {
-          background-color: ${semanticColors?.base?.fillHover};
-          color: ${semanticColors?.base?.ornamentSecondaryHover};
+          background-color: ${semanticColors?.base?.fillInteraction};
+          color: ${semanticColors?.base?.ornamentSecondaryInteraction};
         }
       }
 
@@ -20858,8 +20968,8 @@ styled$2__default.default(material.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};
         }
       }
     `;
@@ -20915,6 +21025,7 @@ const disabledStyled = (props) => {
 
     & span, & div {
       color: ${semanticColors?.base?.textDisabled};
+      background-color: transparent !important;
     }
 
     .cell-component {
@@ -20923,11 +21034,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;
@@ -20946,7 +21058,7 @@ const hoverStyled = (props) => {
     const semanticColors = getSemanticColors(props);
     return `
     &:hover {
-      background-color: ${semanticColors?.base?.fillHover};
+      background-color: ${semanticColors?.base?.fillInteraction};
     }
   `;
 };
@@ -21047,8 +21159,8 @@ const StyledTab = styled$2__default.default(material.Tab, {
       color: ${semanticColors?.base?.textSecondary};
 
       &:hover {
-        box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryHover};
-        background-color: ${semanticColors?.base?.fillOpen};
+        box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryInteraction};
+        background-color: ${semanticColors?.base?.fillInteraction};
         border-top-right-radius: ${corners?.l}px;
         border-top-left-radius: ${corners?.l}px;
 
@@ -21078,7 +21190,7 @@ const StyledTab = styled$2__default.default(material.Tab, {
 function tabFontMixin(props) {
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
-    return isLarge ? fontBodyS$1(props) : fontBodyXs$2(props);
+    return isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props);
 }
 const StyledWrapper = styled$2__default.default("div") `
   ${(props) => {
@@ -21097,7 +21209,7 @@ const StyledCount = styled$2__default.default("span") `
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
     return react.css `
-      ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
+      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
     `;
 }}
 `;
@@ -21106,9 +21218,9 @@ const StyledLabelTextWrapper = styled$2__default.default("span") `
     const { sdsSize, selected } = props;
     const isLarge = sdsSize === "large";
     return react.css `
-      ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
+      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
       ${selected &&
-        (isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props))}
+        (isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props))}
       position: absolute;
     `;
 }}
@@ -21118,7 +21230,7 @@ const StyledLabelTextWrapperShadow = styled$2__default.default("span") `
     const { sdsSize } = props;
     const isLarge = sdsSize === "large";
     return react.css `
-      ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
+      ${isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props)}
       visibility: hidden;
       opacity: 0;
     `;
@@ -24798,7 +24910,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)