@czi-sds/components 23.0.0 → 23.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +31 -17
  2. package/dist/index.cjs.js +450 -268
  3. package/dist/index.esm.d.ts +31 -17
  4. package/dist/index.esm.js +451 -270
  5. package/dist/tailwind.json +28 -38
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +29 -39
  8. package/dist/variables.scss +28 -38
  9. package/package.json +2 -2
package/dist/index.esm.js CHANGED
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
4
  import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, isValidElement, memo, Fragment as Fragment$1, createContext, useContext } from 'react';
5
5
  import { css as css$1, ThemeContext as ThemeContext$1 } from '@emotion/react';
6
- import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$2, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
6
+ import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, accordionSummaryClasses, AccordionSummary, SvgIcon, accordionClasses, accordionDetailsClasses, Accordion as Accordion$1, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, TextField, InputAdornment, menuItemClasses, MenuItem as MenuItem$1, autocompleteClasses, Autocomplete as Autocomplete$1, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, alpha as alpha$1, darken as darken$2, Card, CardContent, CardActions, css as css$3, CardMedia, DialogTitle as DialogTitle$1, Typography, dialogActionsClasses, DialogActions as DialogActions$1, Dialog as Dialog$1, DialogContent, checkboxClasses, Checkbox, FormControlLabel, radioClasses, Radio, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, menuClasses, Menu as Menu$1, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, tabsClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, toggleButtonClasses, ToggleButtonGroup, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
7
7
  export { CardMedia as ContentCardMedia } from '@mui/material';
8
8
  import styled$2 from '@emotion/styled';
9
9
  import { Remove, Clear } from '@mui/icons-material';
@@ -503,7 +503,7 @@ const Spaces = {
503
503
  xs: 6,
504
504
  s: 8,
505
505
  m: 12,
506
- default: 12,
506
+ default: 8,
507
507
  l: 16,
508
508
  xl: 24,
509
509
  xxl: 32,
@@ -788,7 +788,7 @@ const SDSPaletteLight = (appTheme) => {
788
788
  backgroundPrimaryDark: appTheme.colors.gray[900],
789
789
  backgroundPrimaryInverse: appTheme.colors.gray[900],
790
790
  backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 40),
791
- backgroundSecondaryOnDark: addOpacityToHex(appTheme.colors.gray[700], 62),
791
+ backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[700], 62),
792
792
  backgroundSecondaryInverse: appTheme.colors.gray[700],
793
793
  backgroundTertiary: appTheme.colors.gray[100],
794
794
  borderOnFill: appTheme.colors.gray[50],
@@ -796,27 +796,23 @@ const SDSPaletteLight = (appTheme) => {
796
796
  borderPrimaryDisabled: appTheme.colors.gray[300],
797
797
  borderPrimaryDisabledOnDark: appTheme.colors.gray[600],
798
798
  borderPrimaryDisabledInverse: appTheme.colors.gray[600],
799
- borderPrimaryHover: appTheme.colors.gray[900],
800
- borderPrimaryHoverOnDark: appTheme.colors.gray[50],
799
+ borderPrimaryInteraction: appTheme.colors.gray[900],
800
+ borderPrimaryInteractionOnDark: appTheme.colors.gray[50],
801
801
  borderPrimaryHoverInverse: appTheme.colors.gray[50],
802
802
  borderPrimaryOnDark: appTheme.colors.gray[300],
803
803
  borderPrimaryInverse: appTheme.colors.gray[300],
804
- borderPrimaryPressed: appTheme.colors.gray[900],
805
- borderPrimaryPressedOnDark: appTheme.colors.gray[50],
806
804
  borderPrimaryPressedInverse: appTheme.colors.gray[50],
807
805
  borderSecondary: appTheme.colors.gray[300],
808
806
  divider: appTheme.colors.gray[200],
809
807
  dividerOnDark: appTheme.colors.gray[700],
810
808
  dividerInverse: appTheme.colors.gray[700],
811
- fillDisabled: appTheme.colors.gray[200],
812
- fillHover: addOpacityToHex(appTheme.colors.gray[300], 20),
813
- fillHoverOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
814
- fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
815
- fillOpen: addOpacityToHex(appTheme.colors.gray[300], 20),
816
- fillOpenOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
809
+ fillDisabled: appTheme.colors.gray[100],
810
+ fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 20),
811
+ fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 20),
812
+ fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 20),
817
813
  fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
818
- fillPressed: addOpacityToHex(appTheme.colors.gray[300], 20),
819
- fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 34),
814
+ fillPressed: addOpacityToHex(appTheme.colors.gray[300], 30),
815
+ fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 24),
820
816
  fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 34),
821
817
  fillPrimary: appTheme.colors.gray[50],
822
818
  fillSelected: appTheme.colors.gray[900],
@@ -828,16 +824,15 @@ const SDSPaletteLight = (appTheme) => {
828
824
  ornamentPrimaryOnDark: appTheme.colors.gray[50],
829
825
  ornamentPrimaryInverse: appTheme.colors.gray[50],
830
826
  ornamentSecondary: appTheme.colors.gray[600],
831
- ornamentSecondaryHover: appTheme.colors.gray[900],
832
- ornamentSecondaryHoverOnDark: appTheme.colors.gray[50],
827
+ ornamentSecondaryInteraction: appTheme.colors.gray[900],
828
+ ornamentSecondaryInteractionOnDark: appTheme.colors.gray[50],
833
829
  ornamentSecondaryHoverInverse: appTheme.colors.gray[50],
834
830
  ornamentSecondaryOnDark: appTheme.colors.gray[300],
835
831
  ornamentSecondaryInverse: appTheme.colors.gray[300],
836
- ornamentSecondaryPressed: appTheme.colors.gray[900],
837
- ornamentSecondaryPressedOnDark: appTheme.colors.gray[50],
838
832
  ornamentSecondaryPressedInverse: appTheme.colors.gray[50],
839
- surface: appTheme.colors.gray[50],
840
- surfaceOnDark: appTheme.colors.gray[900],
833
+ surfacePrimary: appTheme.colors.gray[50],
834
+ surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 20),
835
+ surfacePrimaryDark: appTheme.colors.gray[900],
841
836
  surfaceInverse: appTheme.colors.gray[900],
842
837
  textDisabled: appTheme.colors.gray[300],
843
838
  textDisabledOnDark: appTheme.colors.gray[600],
@@ -950,7 +945,7 @@ const SDSPaletteDark = (appTheme) => {
950
945
  backgroundPrimaryDark: appTheme.colors.gray[75],
951
946
  backgroundPrimaryInverse: appTheme.colors.gray[75],
952
947
  backgroundSecondary: addOpacityToHex(appTheme.colors.gray[100], 60),
953
- backgroundSecondaryOnDark: addOpacityToHex(appTheme.colors.gray[100], 60),
948
+ backgroundSecondaryDark: addOpacityToHex(appTheme.colors.gray[100], 60),
954
949
  backgroundSecondaryInverse: addOpacityToHex(appTheme.colors.gray[100], 60),
955
950
  backgroundTertiary: appTheme.colors.gray[100],
956
951
  borderOnFill: appTheme.colors.gray[900],
@@ -958,27 +953,23 @@ const SDSPaletteDark = (appTheme) => {
958
953
  borderPrimaryDisabled: appTheme.colors.gray[300],
959
954
  borderPrimaryDisabledOnDark: appTheme.colors.gray[300],
960
955
  borderPrimaryDisabledInverse: appTheme.colors.gray[300],
961
- borderPrimaryHover: appTheme.colors.gray[900],
962
- borderPrimaryHoverOnDark: appTheme.colors.gray[900],
956
+ borderPrimaryInteraction: appTheme.colors.gray[900],
957
+ borderPrimaryInteractionOnDark: appTheme.colors.gray[900],
963
958
  borderPrimaryHoverInverse: appTheme.colors.gray[900],
964
959
  borderPrimaryOnDark: appTheme.colors.gray[600],
965
960
  borderPrimaryInverse: appTheme.colors.gray[600],
966
- borderPrimaryPressed: appTheme.colors.gray[900],
967
- borderPrimaryPressedOnDark: appTheme.colors.gray[900],
968
961
  borderPrimaryPressedInverse: appTheme.colors.gray[900],
969
962
  borderSecondary: appTheme.colors.gray[300],
970
963
  divider: appTheme.colors.gray[200],
971
964
  dividerOnDark: appTheme.colors.gray[200],
972
965
  dividerInverse: appTheme.colors.gray[200],
973
- fillDisabled: appTheme.colors.gray[200],
974
- fillHover: addOpacityToHex(appTheme.colors.gray[300], 32),
975
- fillHoverOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
966
+ fillDisabled: appTheme.colors.gray[100],
967
+ fillInteraction: addOpacityToHex(appTheme.colors.gray[300], 32),
968
+ fillInteractionOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
976
969
  fillHoverInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
977
- fillOpen: addOpacityToHex(appTheme.colors.gray[300], 32),
978
- fillOpenOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
979
970
  fillOpenInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
980
- fillPressed: addOpacityToHex(appTheme.colors.gray[300], 32),
981
- fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 32),
971
+ fillPressed: addOpacityToHex(appTheme.colors.gray[300], 40),
972
+ fillPressedOnDark: addOpacityToHex(appTheme.colors.gray[300], 40),
982
973
  fillPressedInverse: addOpacityToHex(appTheme.colors.gray[300], 32),
983
974
  fillPrimary: appTheme.colors.gray[100],
984
975
  fillSelected: appTheme.colors.gray[900],
@@ -990,16 +981,15 @@ const SDSPaletteDark = (appTheme) => {
990
981
  ornamentPrimaryOnDark: appTheme.colors.gray[900],
991
982
  ornamentPrimaryInverse: appTheme.colors.gray[50],
992
983
  ornamentSecondary: appTheme.colors.gray[600],
993
- ornamentSecondaryHover: appTheme.colors.gray[900],
994
- ornamentSecondaryHoverOnDark: appTheme.colors.gray[900],
984
+ ornamentSecondaryInteraction: appTheme.colors.gray[900],
985
+ ornamentSecondaryInteractionOnDark: appTheme.colors.gray[900],
995
986
  ornamentSecondaryHoverInverse: appTheme.colors.gray[900],
996
987
  ornamentSecondaryOnDark: appTheme.colors.gray[600],
997
988
  ornamentSecondaryInverse: appTheme.colors.gray[600],
998
- ornamentSecondaryPressed: appTheme.colors.gray[900],
999
- ornamentSecondaryPressedOnDark: appTheme.colors.gray[900],
1000
989
  ornamentSecondaryPressedInverse: appTheme.colors.gray[900],
1001
- surface: appTheme.colors.gray[100],
1002
- surfaceOnDark: appTheme.colors.gray[100],
990
+ surfacePrimary: appTheme.colors.gray[100],
991
+ surfaceSecondary: addOpacityToHex(appTheme.colors.gray[300], 32),
992
+ surfacePrimaryDark: appTheme.colors.gray[100],
1003
993
  surfaceInverse: appTheme.colors.gray[100],
1004
994
  textDisabled: appTheme.colors.gray[300],
1005
995
  textDisabledOnDark: appTheme.colors.gray[300],
@@ -1281,6 +1271,7 @@ function makeThemeOptions(appTheme, mode) {
1281
1271
  appTheme.spacing.l,
1282
1272
  appTheme.spacing.xl,
1283
1273
  appTheme.spacing.xxl,
1274
+ appTheme.spacing.xxxl,
1284
1275
  ],
1285
1276
  transitions: {
1286
1277
  duration: {
@@ -1380,7 +1371,7 @@ function focusVisibleA11yStyle(props) {
1380
1371
  const semanticColors = getSemanticColors(props);
1381
1372
  return `
1382
1373
  &.Mui-focusVisible, &:focus-visible {
1383
- outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
1374
+ outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
1384
1375
  outline-offset: 1px;
1385
1376
  }
1386
1377
  `;
@@ -1589,7 +1580,7 @@ const StyledAccordionHeader = styled$2(AccordionSummary, {
1589
1580
  &:hover {
1590
1581
  & .${accordionSummaryClasses.expandIconWrapper} {
1591
1582
  svg {
1592
- color: ${semanticColors?.base?.ornamentSecondaryHover};
1583
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
1593
1584
  }
1594
1585
  }
1595
1586
  }
@@ -5090,12 +5081,12 @@ const Minimal = (props) => {
5090
5081
  }
5091
5082
 
5092
5083
  &:hover {
5093
- background-color: ${semanticColors?.base?.fillHover};
5084
+ background-color: ${semanticColors?.base?.fillInteraction};
5094
5085
  }
5095
5086
 
5096
5087
  &:active {
5097
5088
  color: ${semanticColors?.accent?.textActionPressed};
5098
- background-color: ${semanticColors?.base?.fillHover};
5089
+ background-color: ${semanticColors?.base?.fillInteraction};
5099
5090
 
5100
5091
  svg {
5101
5092
  color: ${semanticColors?.accent?.ornamentPressed};
@@ -5202,7 +5193,7 @@ const primary$2 = (props) => {
5202
5193
  }
5203
5194
 
5204
5195
  &:hover {
5205
- background: ${semanticColors?.base?.fillHover};
5196
+ background: ${semanticColors?.base?.fillInteraction};
5206
5197
  color: ${semanticColors?.accent?.ornamentHover};
5207
5198
 
5208
5199
  svg {
@@ -5230,7 +5221,7 @@ const secondary$2 = (props) => {
5230
5221
  }
5231
5222
 
5232
5223
  &:hover {
5233
- background: ${semanticColors?.base?.fillHover};
5224
+ background: ${semanticColors?.base?.fillInteraction};
5234
5225
  color: ${semanticColors?.accent?.ornamentHover};
5235
5226
 
5236
5227
  svg {
@@ -5259,19 +5250,19 @@ const tertiary = (props) => {
5259
5250
 
5260
5251
  &:hover {
5261
5252
  background: none;
5262
- color: ${semanticColors?.base?.ornamentSecondaryHover};
5253
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
5263
5254
 
5264
5255
  svg {
5265
- color: ${semanticColors?.base?.ornamentSecondaryHover};
5256
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
5266
5257
  }
5267
5258
  }
5268
5259
 
5269
5260
  &:active {
5270
5261
  background: none;
5271
- color: ${semanticColors?.base?.ornamentSecondaryPressed};
5262
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
5272
5263
 
5273
5264
  svg {
5274
- color: ${semanticColors?.base?.ornamentSecondaryPressed};
5265
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
5275
5266
  }
5276
5267
  }
5277
5268
  `;
@@ -5491,7 +5482,7 @@ const applyIntentColor$2 = (props, intent) => {
5491
5482
  .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
5492
5483
  cursor: default;
5493
5484
  svg {
5494
- color: ${semanticColors?.base?.ornamentSecondaryPressed};
5485
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
5495
5486
  }
5496
5487
  }
5497
5488
  }
@@ -5557,9 +5548,6 @@ const StyledSearchBase = styled$2(TextField, {
5557
5548
  const semanticColors = getSemanticColors(props);
5558
5549
  const corners = getCorners(props);
5559
5550
  return css$1 `
5560
- margin-top: ${spaces?.m}px;
5561
- margin-bottom: ${spaces?.m}px;
5562
- margin-right: ${spaces?.xl}px;
5563
5551
  min-width: 120px;
5564
5552
  display: block;
5565
5553
 
@@ -5608,7 +5596,8 @@ const StyledSearchBase = styled$2(TextField, {
5608
5596
 
5609
5597
  &:hover {
5610
5598
  svg {
5611
- color: ${semanticColors?.base?.ornamentSecondaryHover} !important;
5599
+ color: ${semanticColors?.base
5600
+ ?.ornamentSecondaryInteraction} !important;
5612
5601
  }
5613
5602
  }
5614
5603
 
@@ -5628,7 +5617,7 @@ const StyledSearchBase = styled$2(TextField, {
5628
5617
  }
5629
5618
 
5630
5619
  .${outlinedInputClasses.root}:hover {
5631
- background-color: ${semanticColors?.base?.fillHover};
5620
+ background-color: ${semanticColors?.base?.fillInteraction};
5632
5621
 
5633
5622
  & .${buttonBaseClasses.root}:last-of-type {
5634
5623
  svg {
@@ -5636,7 +5625,7 @@ const StyledSearchBase = styled$2(TextField, {
5636
5625
  }
5637
5626
  }
5638
5627
  .${outlinedInputClasses.notchedOutline} {
5639
- border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
5628
+ border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
5640
5629
  }
5641
5630
  }
5642
5631
 
@@ -5650,13 +5639,13 @@ const StyledSearchBase = styled$2(TextField, {
5650
5639
  .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
5651
5640
  cursor: default;
5652
5641
  svg {
5653
- color: ${semanticColors?.base?.ornamentSecondaryPressed};
5642
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
5654
5643
  }
5655
5644
  }
5656
5645
  }
5657
5646
 
5658
5647
  &.user-is-tabbing .${outlinedInputClasses.root}:focus-within {
5659
- outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
5648
+ outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
5660
5649
  outline-offset: 1px;
5661
5650
  }
5662
5651
 
@@ -5695,10 +5684,10 @@ const StyledMenuItem$1 = styled$2(MenuItem$1) `
5695
5684
  opacity: 1;
5696
5685
 
5697
5686
  &:hover, &.${menuItemClasses.focusVisible} {
5698
- background-color: ${semanticColors?.base?.fillHover};
5687
+ background-color: ${semanticColors?.base?.fillInteraction};
5699
5688
 
5700
5689
  &[aria-selected="true"] {
5701
- background-color: ${semanticColors?.base?.fillHover};
5690
+ background-color: ${semanticColors?.base?.fillInteraction};
5702
5691
  }
5703
5692
  }
5704
5693
  }
@@ -5715,7 +5704,7 @@ const StyledMenuItem$1 = styled$2(MenuItem$1) `
5715
5704
  background-color: unset !important;
5716
5705
 
5717
5706
  &:hover {
5718
- background-color: ${semanticColors?.base?.fillHover} !important;
5707
+ background-color: ${semanticColors?.base?.fillInteraction} !important;
5719
5708
  }
5720
5709
 
5721
5710
  ${StyledIcon$1}, ${DotIcon} {
@@ -5728,16 +5717,16 @@ const StyledMenuItem$1 = styled$2(MenuItem$1) `
5728
5717
  }
5729
5718
 
5730
5719
  &:hover {
5731
- background-color: ${semanticColors?.base?.fillHover};
5720
+ background-color: ${semanticColors?.base?.fillInteraction};
5732
5721
  ${StyledIcon$1}, ${DotIcon} {
5733
5722
  color: ${selected ? semanticColors?.base?.ornamentPrimary : semanticColors?.base?.ornamentSecondary};
5734
5723
  }
5735
5724
  }
5736
5725
 
5737
5726
  &.Mui-selected.MuiListItem-root.MuiListItem-button {
5738
- background-color: ${semanticColors?.base?.surface};
5727
+ background-color: ${semanticColors?.base?.surfacePrimary};
5739
5728
  &:hover {
5740
- background-color: ${semanticColors?.base?.fillHover};
5729
+ background-color: ${semanticColors?.base?.fillInteraction};
5741
5730
  }
5742
5731
  }
5743
5732
 
@@ -6076,7 +6065,7 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
6076
6065
  // look at the useDetectUserTabbing hook.
6077
6066
  &[data-user-is-tabbing="true"]:focus-within {
6078
6067
  border-radius: 4px;
6079
- outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
6068
+ outline: 2px solid ${semanticColors?.base?.borderPrimaryInteraction};
6080
6069
  outline-offset: 1px;
6081
6070
  }
6082
6071
 
@@ -6101,11 +6090,11 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
6101
6090
  min-height: unset;
6102
6091
 
6103
6092
  &.${autocompleteClasses.focused} {
6104
- background-color: ${semanticColors?.base?.fillHover};
6093
+ background-color: ${semanticColors?.base?.fillInteraction};
6105
6094
  }
6106
6095
 
6107
6096
  &[aria-selected="true"] {
6108
- background-color: ${semanticColors?.base?.surface};
6097
+ background-color: ${semanticColors?.base?.surfacePrimary};
6109
6098
  }
6110
6099
 
6111
6100
  &[aria-disabled="true"] {
@@ -6113,7 +6102,7 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
6113
6102
  }
6114
6103
 
6115
6104
  &[aria-selected="true"].${autocompleteClasses.focused} {
6116
- background-color: ${semanticColors?.base?.fillHover};
6105
+ background-color: ${semanticColors?.base?.fillInteraction};
6117
6106
  }
6118
6107
  }
6119
6108
 
@@ -6127,7 +6116,7 @@ const StyledAutocompleteBase = styled$2(Autocomplete$1, {
6127
6116
  .${autocompleteClasses.groupLabel} {
6128
6117
  top: 0;
6129
6118
  color: ${semanticColors?.base?.textSecondary};
6130
- background-color: ${semanticColors?.base?.surface};
6119
+ background-color: ${semanticColors?.base?.surfacePrimary};
6131
6120
  padding: 0 ${spaces?.m}px;
6132
6121
  }
6133
6122
 
@@ -6195,7 +6184,7 @@ const StyledPaper$3 = styled$2(Paper) `
6195
6184
  return `
6196
6185
  background-image: none;
6197
6186
  padding: ${spaces?.xs}px 0;
6198
- background-color: ${semanticColors?.base?.surface};
6187
+ background-color: ${semanticColors?.base?.surfacePrimary};
6199
6188
  border: ${borders?.none};
6200
6189
  outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000", 15)};
6201
6190
  border-radius: ${corners?.l}px;
@@ -6207,9 +6196,10 @@ const StyledPaper$3 = styled$2(Paper) `
6207
6196
  const StyledMenuItemDetails = styled$2("div") `
6208
6197
  ${fontBodyXxs$1}
6209
6198
  ${(props) => {
6199
+ const { disabled } = props;
6210
6200
  const semanticColors = getSemanticColors(props);
6211
6201
  return `
6212
- color: ${semanticColors?.base?.textSecondary};
6202
+ color: ${disabled ? semanticColors?.base?.textDisabled : semanticColors?.base?.textSecondary};
6213
6203
  white-space: pre-wrap;
6214
6204
  `;
6215
6205
  }}
@@ -6374,15 +6364,15 @@ const AutocompleteBase = (props) => {
6374
6364
  }
6375
6365
  function defaultRenderOption(optionProps, option, { selected }) {
6376
6366
  let MenuItemContent;
6377
- const { component, details, count, icon, sdsIconProps, ...restOptionProps } = option;
6367
+ const { component, details, count, icon, sdsIconProps, disabled: optionDisabled, ...restOptionProps } = option;
6378
6368
  const menuItemLabel = getOptionLabel(option);
6379
6369
  if (component) {
6380
6370
  MenuItemContent = component;
6381
6371
  }
6382
6372
  else {
6383
- MenuItemContent = (jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
6373
+ MenuItemContent = (jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsx(StyledMenuItemDetails, { disabled: optionDisabled, className: "menuItem-details", children: details }))] }));
6384
6374
  }
6385
- return (createElement(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, restOptionProps, { key: option.name }), MenuItemContent));
6375
+ return (createElement(MenuItem, __assign({ column: count, disabled: optionDisabled || optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, restOptionProps, { key: option.name }), MenuItemContent));
6386
6376
  }
6387
6377
  };
6388
6378
 
@@ -6466,7 +6456,7 @@ const StyledPopper$2 = styled$2(Popper, {
6466
6456
  const borders = getBorders(props);
6467
6457
  const semanticColors = getSemanticColors(props);
6468
6458
  return `
6469
- background-color: ${semanticColors?.base?.surface};
6459
+ background-color: ${semanticColors?.base?.surfacePrimary};
6470
6460
  background-image: none;
6471
6461
  border: ${borders?.none};
6472
6462
  border-radius: ${corners?.l}px;
@@ -6493,7 +6483,7 @@ const StyledPaper$2 = styled$2(Paper, {
6493
6483
  const shadows = getShadows(props);
6494
6484
  const semanticColors = getSemanticColors(props);
6495
6485
  return `
6496
- background-color: ${semanticColors?.base?.surface};
6486
+ background-color: ${semanticColors?.base?.surfacePrimary};
6497
6487
  background-image: none;
6498
6488
  box-shadow: ${shadows?.none};
6499
6489
  margin: 0;
@@ -6537,7 +6527,7 @@ const StyledColumnIcon = styled$3("span") `
6537
6527
  const iconSizes = getIconSizes(props);
6538
6528
  const semanticColors = getSemanticColors(props);
6539
6529
  return `
6540
- background-color: ${semanticColors?.base?.surface};
6530
+ background-color: ${semanticColors?.base?.surfacePrimary};
6541
6531
  position: absolute;
6542
6532
  right: -${spaces?.xs}px;
6543
6533
  top: -${spaces?.xxxs}px;
@@ -6927,7 +6917,7 @@ const StyledButtonToggle = styled$2(ButtonIcon, {
6927
6917
  const { sdsStage } = props;
6928
6918
  const semanticColors = getSemanticColors(props);
6929
6919
  return `
6930
- background-color: ${sdsStage === "on" ? semanticColors?.base?.fillOpen : "transparent"};
6920
+ background-color: ${sdsStage === "on" ? semanticColors?.base?.fillInteraction : "transparent"};
6931
6921
  `;
6932
6922
  }}
6933
6923
  `;
@@ -7114,7 +7104,7 @@ const dark$1 = (props) => {
7114
7104
  const semanticColors = getSemanticColors(props);
7115
7105
  return css$2 `
7116
7106
  ${fontHeaderXs(props)}
7117
- background-color: ${semanticColors?.base?.surfaceOnDark};
7107
+ background-color: ${semanticColors?.base?.surfacePrimaryDark};
7118
7108
  color: ${semanticColors?.base?.textPrimaryOnDark};
7119
7109
  padding: ${spaces?.s}px ${spaces?.m}px;
7120
7110
  `;
@@ -7124,7 +7114,7 @@ const light$1 = (props) => {
7124
7114
  const semanticColors = getSemanticColors(props);
7125
7115
  return css$2 `
7126
7116
  ${fontBodyXs$2(props)}
7127
- background-color: ${semanticColors?.base?.surface};
7117
+ background-color: ${semanticColors?.base?.surfacePrimary};
7128
7118
  color: ${semanticColors?.base?.textPrimary};
7129
7119
  padding: ${spaces?.s}px ${spaces?.m}px;
7130
7120
  `;
@@ -7199,8 +7189,8 @@ const arrowCss = (props) => {
7199
7189
  /* (bethbertozzi): !important is needed to fight inline style */
7200
7190
  left: ${arrowOffset}px !important;
7201
7191
  color: ${hasInvertedStyle || inverted || sdsStyle === "dark"
7202
- ? semanticColors?.base?.surfaceOnDark
7203
- : semanticColors?.base?.surface};
7192
+ ? semanticColors?.base?.surfacePrimaryDark
7193
+ : semanticColors?.base?.surfacePrimary};
7204
7194
  &:before {
7205
7195
  box-sizing: border-box;
7206
7196
  width: 12px;
@@ -7623,7 +7613,7 @@ const StyledTableHeader$1 = styled$2("th", {
7623
7613
  }
7624
7614
 
7625
7615
  & svg {
7626
- color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover};
7616
+ color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryInteraction};
7627
7617
  }
7628
7618
  }
7629
7619
  `;
@@ -7859,6 +7849,21 @@ const StyledHeaderTitle = styled$2("div", {
7859
7849
  `;
7860
7850
  }}
7861
7851
  `;
7852
+ const StyledHeaderSubTitle = styled$2("div", {
7853
+ shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
7854
+ }) `
7855
+ ${fontBodyXxs$1}
7856
+
7857
+ ${(props) => {
7858
+ const spaces = getSpaces(props);
7859
+ const semanticColors = getSemanticColors(props);
7860
+ return `
7861
+ color: ${semanticColors?.base?.textSecondary};
7862
+ padding-right: ${spaces?.m}px;
7863
+ padding-top: ${spaces?.xxxs}px;
7864
+ `;
7865
+ }}
7866
+ `;
7862
7867
  const StyledDropdownMenuAutocompleteWrapper = styled$2("div", {
7863
7868
  shouldForwardProp: (prop) => !doNotForwardProps$v.includes(prop)
7864
7869
  }) `
@@ -7905,7 +7910,7 @@ const StyledPopper = styled$2(Popper, {
7905
7910
  const shadows = getShadows(props);
7906
7911
  const semanticColors = getSemanticColors(props);
7907
7912
  return `
7908
- background-color: ${semanticColors?.base?.surface};
7913
+ background-color: ${semanticColors?.base?.surfacePrimary};
7909
7914
  background-image: none;
7910
7915
  border: ${borders?.none};
7911
7916
  border-radius: ${corners?.l}px;
@@ -7928,7 +7933,7 @@ const StyledPaper$1 = styled$2(Paper, {
7928
7933
  border: none !important;
7929
7934
  outline: 1px solid ${addOpacityToHex(semanticColors?.base?.borderSecondary || "#000000", 15)};
7930
7935
  border-radius: ${corners?.l}px;
7931
- background-color: ${semanticColors?.base?.surface};
7936
+ background-color: ${semanticColors?.base?.surfacePrimary};
7932
7937
  background-image: none;
7933
7938
  margin: 0;
7934
7939
  padding: 0 0 ${spaces?.xs}px 0;
@@ -7967,9 +7972,15 @@ const StyledDropdownMenuHeader = styled$2("div") `
7967
7972
  const spaces = getSpaces(props);
7968
7973
  const semanticColors = getSemanticColors(props);
7969
7974
  return `
7975
+ & > div {
7976
+ display: flex;
7977
+ flex-direction: row;
7978
+ align-items: center;
7979
+ justify-content: space-between;
7980
+ }
7981
+
7970
7982
  display: flex;
7971
- align-items: center;
7972
- justify-content: space-between;
7983
+ flex-direction: column;
7973
7984
  padding: ${spaces?.xs}px ${spaces?.m}px ${search ? spaces?.xs : spaces?.s}px;
7974
7985
  ${search && `border-bottom: solid 1px ${semanticColors?.base?.divider};`}
7975
7986
  `;
@@ -7984,7 +7995,7 @@ const DEFAULT_POPPER_BASE_PROPS = {
7984
7995
  };
7985
7996
  const DropdownMenu = (props) => {
7986
7997
  const theme = useTheme$4();
7987
- const { anchorEl, id, InputBaseProps, open = false, PopperComponent = StyledPopper, PaperComponent = StyledPaper$1, PopperPlacement = "bottom-start", PopperBaseProps = {}, isSearchAutoFocus = true, search = false, title, headerComponentSlot, label = "Search", children, options, onClickAway = noop, ClickAwayListenerProps, width = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, onOpen, onClose, ...rest } = props;
7998
+ const { anchorEl, id, InputBaseProps, open = false, PopperComponent = StyledPopper, PaperComponent = StyledPaper$1, PopperPlacement = "bottom-start", PopperBaseProps = {}, isSearchAutoFocus = true, search = false, title, subTitle, headerComponentSlot, label = "Search", children, options, onClickAway = noop, ClickAwayListenerProps, width = MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, onOpen, onClose, ...rest } = props;
7988
7999
  const isMultiColumn = "options" in (options?.[0] || EMPTY_OBJECT);
7989
8000
  // (masoudmanson): The DropdownMenu's Popper component should have a minimum
7990
8001
  // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -8014,7 +8025,7 @@ const DropdownMenu = (props) => {
8014
8025
  ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
8015
8026
  // (masoudmanson): To override the width of the Popper,
8016
8027
  // the sx prop's value must be set after spreading the PopperBaseProps.
8017
- sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
8028
+ sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [jsxs("div", { children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] }), title && subTitle && (jsx(StyledHeaderSubTitle, { children: subTitle }))] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
8018
8029
  };
8019
8030
 
8020
8031
  const doNotForwardProps$u = [
@@ -8072,12 +8083,13 @@ const inputDropdownStyles = (props) => {
8072
8083
  }
8073
8084
 
8074
8085
  &:hover {
8075
- background-color: ${semanticColors?.base?.fillHover};
8076
- box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryHover};
8086
+ background-color: ${semanticColors?.base?.fillInteraction};
8087
+ box-shadow: inset 0 0 0 1px
8088
+ ${semanticColors?.base?.borderPrimaryInteraction};
8077
8089
  color: ${semanticColors?.base?.textPrimary};
8078
8090
 
8079
8091
  path {
8080
- fill: ${semanticColors?.base?.ornamentSecondaryHover};
8092
+ fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
8081
8093
  }
8082
8094
 
8083
8095
  .styled-label {
@@ -8091,7 +8103,7 @@ const inputDropdownStyles = (props) => {
8091
8103
  color: ${semanticColors?.base?.textPrimary};
8092
8104
 
8093
8105
  path {
8094
- fill: ${semanticColors?.base?.ornamentSecondaryPressed};
8106
+ fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
8095
8107
  }
8096
8108
  }
8097
8109
 
@@ -8143,12 +8155,12 @@ const minimal$1 = (props) => {
8143
8155
  }
8144
8156
 
8145
8157
  &:hover {
8146
- background-color: ${semanticColors?.base?.fillHover};
8158
+ background-color: ${semanticColors?.base?.fillInteraction};
8147
8159
  border: none;
8148
8160
  color: ${semanticColors?.base?.textPrimary};
8149
8161
 
8150
8162
  path {
8151
- fill: ${semanticColors?.base?.ornamentSecondaryHover};
8163
+ fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
8152
8164
  }
8153
8165
 
8154
8166
  .styled-label {
@@ -8157,7 +8169,7 @@ const minimal$1 = (props) => {
8157
8169
  }
8158
8170
 
8159
8171
  &:active {
8160
- background-color: ${semanticColors?.base?.fillHover};
8172
+ background-color: ${semanticColors?.base?.fillInteraction};
8161
8173
  border: none;
8162
8174
  }
8163
8175
  `;
@@ -8227,7 +8239,7 @@ const isOpen = (props) => {
8227
8239
  : ""}
8228
8240
 
8229
8241
  path {
8230
- fill: ${semanticColors?.base?.ornamentSecondaryPressed};
8242
+ fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
8231
8243
  }
8232
8244
 
8233
8245
  box-shadow: ${sdsStyle === "minimal"
@@ -8235,15 +8247,15 @@ const isOpen = (props) => {
8235
8247
  : `inset 0 0 0 1px ${semanticColors?.[inputColor]?.border}`};
8236
8248
 
8237
8249
  background-color: ${sdsStyle === "minimal"
8238
- ? semanticColors?.base?.fillOpen
8250
+ ? semanticColors?.base?.fillInteraction
8239
8251
  : "transparent"};
8240
8252
 
8241
8253
  &:hover {
8242
8254
  path {
8243
- fill: ${semanticColors?.base?.ornamentSecondaryHover};
8255
+ fill: ${semanticColors?.base?.ornamentSecondaryInteraction};
8244
8256
  }
8245
8257
 
8246
- border-color: ${semanticColors?.base?.borderPrimaryHover};
8258
+ border-color: ${semanticColors?.base?.borderPrimaryInteraction};
8247
8259
  }
8248
8260
  `;
8249
8261
  };
@@ -8253,11 +8265,13 @@ const applyIntentColor$1 = (props, intent) => {
8253
8265
  box-shadow: inset 0 0 0 1px ${semanticColors?.[intent]?.border};
8254
8266
 
8255
8267
  &:hover {
8256
- box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryHover};
8268
+ box-shadow: inset 0 0 0 1px
8269
+ ${semanticColors?.base?.borderPrimaryInteraction};
8257
8270
  }
8258
8271
 
8259
8272
  &:active {
8260
- box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryPressed};
8273
+ box-shadow: inset 0 0 0 1px
8274
+ ${semanticColors?.base?.borderPrimaryInteraction};
8261
8275
  }
8262
8276
  `;
8263
8277
  };
@@ -8821,7 +8835,6 @@ const tagSizeS = (props) => {
8821
8835
  const semanticColors = getSemanticColors(props);
8822
8836
  return css$1 `
8823
8837
  height: unset;
8824
- margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
8825
8838
 
8826
8839
  .MuiChip-label {
8827
8840
  ${fontBodyXxxs$1(props)}
@@ -8831,7 +8844,7 @@ const tagSizeS = (props) => {
8831
8844
  .MuiSvgIcon-root {
8832
8845
  height: ${iconSizes?.xs.height}px;
8833
8846
  width: ${iconSizes?.xs.width}px;
8834
- margin: 0 ${spaces?.xxs}px 0 -${spaces?.xxxs}px;
8847
+ margin: 0 ${spaces?.xxs}px 0 0;
8835
8848
  }
8836
8849
 
8837
8850
  .MuiChip-deleteIcon {
@@ -8849,7 +8862,6 @@ const tagSizeL = (props) => {
8849
8862
  const semanticColors = getSemanticColors(props);
8850
8863
  return css$1 `
8851
8864
  height: unset;
8852
- margin: 0 ${spaces?.xxs}px ${spaces?.xs}px 0;
8853
8865
 
8854
8866
  .MuiChip-label {
8855
8867
  ${fontBodyXs$2(props)}
@@ -8859,7 +8871,7 @@ const tagSizeL = (props) => {
8859
8871
  .MuiSvgIcon-root {
8860
8872
  height: ${iconSizes?.l.height}px;
8861
8873
  width: ${iconSizes?.l.width}px;
8862
- margin: 0 ${spaces?.xxs}px 0 -${spaces?.xxxs}px;
8874
+ margin: 0 ${spaces?.xxs}px 0 0px;
8863
8875
  }
8864
8876
 
8865
8877
  .MuiChip-deleteIcon {
@@ -8876,9 +8888,11 @@ const rounded = (props) => {
8876
8888
  const spaces = getSpaces(props);
8877
8889
  const { sdsSize = "s", icon } = props;
8878
8890
  const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
8891
+ const rightPadding = sdsSize === "l" && icon ? spaces?.s : spaces?.xs;
8879
8892
  return css$1 `
8880
8893
  border-radius: ${corners?.rounded}px;
8881
- padding: ${topBottomPadding}px ${spaces?.s}px;
8894
+ padding: ${topBottomPadding}px ${rightPadding}px ${topBottomPadding}px
8895
+ ${spaces?.xs}px;
8882
8896
 
8883
8897
  &:after {
8884
8898
  content: "";
@@ -8893,7 +8907,7 @@ const square = (props) => {
8893
8907
  const topBottomPadding = sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
8894
8908
  return css$1 `
8895
8909
  border-radius: ${corners?.m}px;
8896
- padding: ${topBottomPadding}px ${spaces?.s}px;
8910
+ padding: ${topBottomPadding}px ${spaces?.xs}px;
8897
8911
 
8898
8912
  &:after {
8899
8913
  content: "";
@@ -8921,54 +8935,51 @@ const secondary = (props) => {
8921
8935
  return createTypeCss(props, "secondary");
8922
8936
  };
8923
8937
  function generatePrimaryTagColors(intent, colors, semanticColors) {
8924
- if (intent || colors.length) {
8925
- intent = intent || "neutral";
8926
- return {
8927
- background: colors.length >= 2 ? colors[1] : semanticColors?.[intent].fillPrimary,
8928
- backgroundClicked: colors.length >= 2
8929
- ? darken$2(colors[1], 0.3)
8930
- : semanticColors?.[intent].fillPressed,
8931
- backgroundHover: colors.length >= 2
8932
- ? darken$2(colors[1], 0.15)
8933
- : semanticColors?.[intent].fillHover,
8934
- iconColor: colors.length > 2 ? colors[2] : semanticColors?.base?.ornamentOnFill,
8935
- label: colors.length ? colors[0] : semanticColors?.base?.textOnFill
8936
- };
8937
- }
8938
- else {
8939
- return {
8940
- background: semanticColors?.neutral.fillPrimary,
8941
- backgroundClicked: semanticColors?.neutral.fillPressed,
8942
- backgroundHover: semanticColors?.neutral.fillHover,
8943
- iconColor: semanticColors?.base?.ornamentOnFill,
8944
- label: semanticColors?.base?.textOnFill
8945
- };
8946
- }
8938
+ const effectiveIntent = intent || "neutral";
8939
+ const intentColors = semanticColors?.[effectiveIntent];
8940
+ const hasCustomColors = colors.length >= 2;
8941
+ return {
8942
+ background: hasCustomColors ? colors[1] : intentColors?.fillPrimary,
8943
+ backgroundClicked: hasCustomColors
8944
+ ? darken$2(colors[1], 0.3)
8945
+ : intentColors?.fillPressed,
8946
+ backgroundHover: hasCustomColors
8947
+ ? darken$2(colors[1], 0.15)
8948
+ : intentColors?.fillHover,
8949
+ iconColor: hasCustomColors
8950
+ ? colors[2]
8951
+ : semanticColors?.base?.ornamentOnFill,
8952
+ label: colors.length > 0 ? colors[0] : semanticColors?.base?.textOnFill,
8953
+ borderColor: alpha$1(semanticColors?.neutral.border || "#000", 0.6)
8954
+ };
8947
8955
  }
8948
- function generateSecondaryTagColors(intent, colors, semanticColors) {
8949
- if (intent || colors.length) {
8950
- intent = intent || "neutral";
8951
- return {
8952
- background: colors.length >= 2 ? colors[1] : semanticColors?.[intent].fillSecondary,
8953
- backgroundClicked: colors.length >= 2
8954
- ? darken$2(colors[1], 0.3)
8955
- : semanticColors?.[intent].fillPressed,
8956
- backgroundHover: colors.length >= 2
8957
- ? darken$2(colors[1], 0.15)
8958
- : semanticColors?.[intent].fillHover,
8959
- iconColor: colors.length > 2 ? colors[2] : semanticColors?.[intent].ornament,
8960
- label: colors.length ? colors[0] : semanticColors?.[intent].text
8961
- };
8962
- }
8963
- else {
8964
- return {
8965
- background: semanticColors?.neutral.fillSecondary,
8966
- backgroundClicked: semanticColors?.neutral.fillPressed,
8967
- backgroundHover: semanticColors?.neutral.fillHover,
8968
- iconColor: semanticColors?.neutral.ornament,
8969
- label: semanticColors?.neutral.fillPressed
8970
- };
8971
- }
8956
+ function getSecondaryBorderColor(effectiveIntent, theme, intentColors) {
8957
+ if (!theme || !theme.palette)
8958
+ return alpha$1(intentColors?.border || "#000", 0.6);
8959
+ if (effectiveIntent === "negative" && theme.palette.mode === "dark")
8960
+ return alpha$1(intentColors?.border || "#000", 0.65);
8961
+ if (effectiveIntent === "notice" && theme.palette.mode === "light")
8962
+ return alpha$1(intentColors?.border || "#000", 0.85);
8963
+ return alpha$1(intentColors?.border || "#000", 0.6);
8964
+ }
8965
+ function generateSecondaryTagColors(intent, colors, semanticColors, theme = defaultTheme$4) {
8966
+ const effectiveIntent = intent || "neutral";
8967
+ const intentColors = semanticColors?.[effectiveIntent];
8968
+ const hasCustomColors = colors.length >= 2;
8969
+ return {
8970
+ background: hasCustomColors ? colors[1] : intentColors?.fillSecondary,
8971
+ backgroundClicked: hasCustomColors
8972
+ ? darken$2(colors[1], 0.3)
8973
+ : intentColors?.fillPressed,
8974
+ backgroundHover: hasCustomColors
8975
+ ? darken$2(colors[1], 0.15)
8976
+ : intentColors?.fillHover,
8977
+ iconColor: hasCustomColors ? colors[2] : intentColors?.ornament,
8978
+ label: colors.length > 0 ? colors[0] : intentColors?.text,
8979
+ borderColor: hasCustomColors
8980
+ ? alpha$1(colors[1], 0.6)
8981
+ : getSecondaryBorderColor(effectiveIntent, theme, intentColors)
8982
+ };
8972
8983
  }
8973
8984
  function createTypeCss(props, type) {
8974
8985
  const semanticColors = getSemanticColors(props);
@@ -8976,12 +8987,16 @@ function createTypeCss(props, type) {
8976
8987
  const colors = Array.isArray(props.tagColor) ? [...props.tagColor] : [];
8977
8988
  const typeToColors = {
8978
8989
  primary: generatePrimaryTagColors(intent, colors, semanticColors),
8979
- secondary: generateSecondaryTagColors(intent, colors, semanticColors)
8990
+ secondary: generateSecondaryTagColors(intent, colors, semanticColors, props.theme)
8980
8991
  };
8981
8992
  const typeColors = typeToColors[type];
8982
8993
  return css$1 `
8983
8994
  ${focusVisibleA11yStyle(props)}
8984
8995
 
8996
+ ${type === "secondary" &&
8997
+ css$1 `
8998
+ box-shadow: inset 0 0 0 1px ${typeColors.borderColor};
8999
+ `}
8985
9000
  background-color: ${typeColors.background};
8986
9001
  position: relative;
8987
9002
 
@@ -8995,6 +9010,7 @@ function createTypeCss(props, type) {
8995
9010
 
8996
9011
  &:hover,
8997
9012
  &:active {
9013
+ box-shadow: none;
8998
9014
  .MuiChip-label {
8999
9015
  color: ${semanticColors?.base?.textPrimaryInverse};
9000
9016
  }
@@ -9340,30 +9356,38 @@ const doNotForwardProps$r = [
9340
9356
  "cardSdsType",
9341
9357
  "classes",
9342
9358
  ];
9343
- const StyledCard = styled$2(Card, {
9344
- shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
9345
- }) `
9346
- ${(props) => {
9347
- const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
9348
- const semanticColors = getSemanticColors(props);
9349
- const corners = getCorners(props);
9350
- const shadows = getShadows(props);
9351
- const flexDirection = sdsType === "wide" && visualElementType === "image"
9359
+ const getFlexDirection = (sdsType, visualElementType, imagePosition) => {
9360
+ return sdsType === "wide" && visualElementType === "image"
9352
9361
  ? imagePosition === "left"
9353
9362
  ? "row"
9354
9363
  : "row-reverse"
9355
9364
  : visualElementType === "icon"
9356
9365
  ? "row"
9357
9366
  : "column";
9358
- const showDecorativeBorder = visualElementType === "image"
9367
+ };
9368
+ const getShowDecorativeBorder = (visualElementType, boundingBox, decorativeBorder, imagePadding) => {
9369
+ return visualElementType === "image"
9359
9370
  ? boundingBox && decorativeBorder && imagePadding
9360
9371
  : boundingBox && decorativeBorder;
9372
+ };
9373
+ const StyledCard = styled$2(Card, {
9374
+ shouldForwardProp: (prop) => !doNotForwardProps$r.includes(prop)
9375
+ }) `
9376
+ ${(props) => {
9377
+ const { imagePosition = "left", sdsType = "wide", boundingBox = true, decorativeBorder = false, imagePadding = false, visualElementType, clickableCard = false, } = props;
9378
+ const semanticColors = getSemanticColors(props);
9379
+ const corners = getCorners(props);
9380
+ const shadows = getShadows(props);
9381
+ const spaces = getSpaces(props);
9382
+ const flexDirection = getFlexDirection(sdsType, visualElementType, imagePosition);
9383
+ const showDecorativeBorder = getShowDecorativeBorder(visualElementType, boundingBox, decorativeBorder, imagePadding);
9361
9384
  return css$1 `
9385
+ position: relative;
9362
9386
  display: flex;
9363
9387
  background-color: transparent;
9364
9388
  background-image: none;
9365
9389
  flex-direction: ${flexDirection};
9366
- overflow: auto;
9390
+ overflow: visible;
9367
9391
  box-shadow: none;
9368
9392
  border-radius: ${corners?.xl}px;
9369
9393
 
@@ -9382,16 +9406,47 @@ const StyledCard = styled$2(Card, {
9382
9406
  background-color: ${semanticColors?.base?.backgroundPrimary};
9383
9407
  `}
9384
9408
 
9409
+ ${showDecorativeBorder &&
9410
+ css$1 `
9411
+ &:before {
9412
+ content: "";
9413
+ position: absolute;
9414
+ background-color: ${semanticColors?.accent?.border};
9415
+
9416
+ ${sdsType === "wide" &&
9417
+ css$1 `
9418
+ top: -1px;
9419
+ bottom: -1px;
9420
+ left: -1px;
9421
+ width: ${spaces?.xs}px;
9422
+ border-top-left-radius: ${corners?.xl}px;
9423
+ border-bottom-left-radius: ${corners?.xl}px;
9424
+ `}
9425
+
9426
+ ${sdsType === "narrow" &&
9427
+ css$1 `
9428
+ height: ${spaces?.xs}px;
9429
+ top: -1px;
9430
+ left: -1px;
9431
+ right: -1px;
9432
+ border-top-left-radius: ${corners?.xl}px;
9433
+ border-top-right-radius: ${corners?.xl}px;
9434
+ `}
9435
+ }
9436
+ `}
9437
+
9385
9438
  ${sdsType === "wide" &&
9386
9439
  showDecorativeBorder &&
9387
9440
  css$1 `
9388
- border-left: 4px solid ${semanticColors?.accent?.border};
9441
+ border-top-left-radius: ${corners?.l}px;
9442
+ border-bottom-left-radius: ${corners?.l}px;
9389
9443
  `}
9390
9444
 
9391
9445
  ${sdsType === "narrow" &&
9392
9446
  showDecorativeBorder &&
9393
9447
  css$1 `
9394
- border-top: 4px solid ${semanticColors?.accent?.border};
9448
+ border-top-left-radius: ${corners?.l}px;
9449
+ border-top-right-radius: ${corners?.l}px;
9395
9450
  `}
9396
9451
  `;
9397
9452
  }}
@@ -9424,7 +9479,7 @@ const StyledCardActionArea = styled$2(Button, {
9424
9479
 
9425
9480
  &:hover,
9426
9481
  &:active {
9427
- background-color: ${semanticColors?.base?.surface};
9482
+ background-color: ${semanticColors?.base?.surfacePrimary};
9428
9483
  }
9429
9484
  `;
9430
9485
  }}
@@ -9664,9 +9719,13 @@ const StyledImageMediaWrapper = styled$3("div", {
9664
9719
  ${(props) => {
9665
9720
  const { imagePadding = false, boundingBox = true, sdsType = "wide", imagePosition = "left", } = props;
9666
9721
  const spaces = getSpaces(props);
9722
+ const corners = getCorners(props);
9667
9723
  return css$3 `
9668
9724
  display: flex;
9669
9725
  align-items: start;
9726
+ border-top-left-radius: calc(${corners?.xl}px - 1px);
9727
+ border-bottom-left-radius: calc(${corners?.xl}px - 1px);
9728
+ overflow: hidden;
9670
9729
 
9671
9730
  ${boundingBox
9672
9731
  ? imagePadding
@@ -9701,6 +9760,8 @@ const StyledImageMediaWrapper = styled$3("div", {
9701
9760
  `}
9702
9761
 
9703
9762
  justify-content: center;
9763
+ border-top-left-radius: calc(${corners?.xl}px - 1px);
9764
+ border-top-right-radius: calc(${corners?.xl}px - 1px);
9704
9765
  `}
9705
9766
  `;
9706
9767
  }}
@@ -9841,7 +9902,7 @@ const StyledPaper = styled$2(Paper, {
9841
9902
  const semanticColors = getSemanticColors(props);
9842
9903
  const isSmall = sdsSize === "xs" || sdsSize === "s";
9843
9904
  return `
9844
- background-color: ${semanticColors?.base?.surface};
9905
+ background-color: ${semanticColors?.base?.surfacePrimary};
9845
9906
  background-image: none;
9846
9907
  box-shadow: ${shadows?.l};
9847
9908
  max-height: calc(100vh - ${2 * (spaces?.xxxl || 40)}px);
@@ -10483,12 +10544,11 @@ const disabledStyles$1 = (props) => {
10483
10544
  const StyledFormControlLabel$1 = styled$2(FormControlLabel) `
10484
10545
  ${(props) => {
10485
10546
  const { disabled } = props;
10486
- const spaces = getSpaces(props);
10487
10547
  const semanticColors = getSemanticColors(props);
10488
10548
  const borders = getBorders(props);
10489
10549
  return `
10490
10550
  align-items: start;
10491
- margin-bottom: ${spaces?.l}px;
10551
+ margin-bottom: 0;
10492
10552
  margin-left: 0;
10493
10553
  margin-right: 0;
10494
10554
  width: fit-content;
@@ -10496,7 +10556,7 @@ const StyledFormControlLabel$1 = styled$2(FormControlLabel) `
10496
10556
  &:hover {
10497
10557
  ${StyledCheckboxDefaultIcon} {
10498
10558
  border: ${borders?.base?.hover};
10499
- background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
10559
+ background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
10500
10560
  }
10501
10561
 
10502
10562
  ${StyledCheckboxCheckedIcon} {
@@ -10670,19 +10730,18 @@ const disabledStyles = (props) => {
10670
10730
  const StyledFormControlLabel = styled$2(FormControlLabel) `
10671
10731
  ${(props) => {
10672
10732
  const { disabled } = props;
10673
- const spaces = getSpaces(props);
10674
10733
  const semanticColors = getSemanticColors(props);
10675
10734
  return `
10676
10735
  align-items: start;
10677
- margin-bottom: ${spaces?.l}px;
10736
+ margin-bottom: 0;
10678
10737
  margin-left: 0;
10679
10738
  margin-right: 0;
10680
10739
  width: fit-content;
10681
10740
 
10682
10741
  &:hover {
10683
10742
  ${StyledRadioDefaultIcon} {
10684
- border: 1px solid ${semanticColors?.base?.borderPrimaryHover};
10685
- background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
10743
+ border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
10744
+ background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
10686
10745
  }
10687
10746
 
10688
10747
  ${StyledRadioCheckedIcon} {
@@ -10692,7 +10751,7 @@ const StyledFormControlLabel = styled$2(FormControlLabel) `
10692
10751
 
10693
10752
  &:active {
10694
10753
  ${StyledRadioDefaultIcon} {
10695
- border: 1px solid ${semanticColors?.base?.borderPrimaryPressed};
10754
+ border: 1px solid ${semanticColors?.base?.borderPrimaryInteraction};
10696
10755
  }
10697
10756
 
10698
10757
  ${StyledRadioCheckedIcon} {
@@ -10986,12 +11045,12 @@ const textArea = (props) => {
10986
11045
  };
10987
11046
  const StyledLabel$2 = styled$2("label") `
10988
11047
  display: block;
10989
- ${fontBodyS$1}
11048
+ ${fontBodySemiboldXxxs}
10990
11049
 
10991
11050
  ${(props) => {
10992
11051
  const spaces = getSpaces(props);
10993
11052
  return `
10994
- margin-bottom: ${spaces?.xxs}px;
11053
+ margin-bottom: ${spaces?.s}px;
10995
11054
  `;
10996
11055
  }}
10997
11056
  `;
@@ -11007,8 +11066,6 @@ const StyledInputBase = styled$2(TextField, {
11007
11066
  const corners = getCorners(props);
11008
11067
  const semanticColors = getSemanticColors(props);
11009
11068
  return css$1 `
11010
- margin-bottom: ${spaces?.l}px;
11011
- margin-right: ${spaces?.m}px;
11012
11069
  display: block;
11013
11070
 
11014
11071
  .${outlinedInputClasses.root} {
@@ -11045,7 +11102,7 @@ const StyledInputBase = styled$2(TextField, {
11045
11102
  .${outlinedInputClasses.root}:hover
11046
11103
  .${outlinedInputClasses.notchedOutline} {
11047
11104
  border: ${borders?.base?.hover};
11048
- background-color: ${semanticColors?.base?.fillHover};
11105
+ background-color: ${semanticColors?.base?.fillInteraction};
11049
11106
  }
11050
11107
 
11051
11108
  .${outlinedInputClasses.root}.${outlinedInputClasses.focused}
@@ -11224,7 +11281,7 @@ const toggleOff = (props) => {
11224
11281
  }
11225
11282
 
11226
11283
  &:hover {
11227
- background-color: ${semanticColors?.base?.fillHover};
11284
+ background-color: ${semanticColors?.base?.fillInteraction};
11228
11285
  }
11229
11286
  }
11230
11287
 
@@ -11246,7 +11303,7 @@ const toggleOff = (props) => {
11246
11303
  outline: ${borders?.base?.hover};
11247
11304
 
11248
11305
  .${switchClasses.thumb} {
11249
- color: ${semanticColors?.base?.ornamentSecondaryHover};
11306
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
11250
11307
  }
11251
11308
  }`}
11252
11309
  `;
@@ -11278,6 +11335,123 @@ const InputToggle = (props) => {
11278
11335
  return (jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
11279
11336
  };
11280
11337
 
11338
+ const StyledIntentMessage = styled$2.div `
11339
+ display: flex;
11340
+ flex-direction: column;
11341
+ ${(props) => {
11342
+ const spaces = getSpaces(props);
11343
+ const semanticColors = getSemanticColors(props);
11344
+ const borderThickness = 2;
11345
+ const borderColor = props.borderIntent
11346
+ ? semanticColors?.[props.borderIntent]?.border
11347
+ : "transparent";
11348
+ return `
11349
+ gap: ${spaces?.s}px;
11350
+ position: relative;
11351
+
11352
+ &::before {
11353
+ content: "";
11354
+ position: absolute;
11355
+ left: -${(spaces?.xs || 0) + borderThickness}px;
11356
+ top: 0;
11357
+ bottom: 0;
11358
+ width: ${borderThickness}px;
11359
+ background-color: ${borderColor};
11360
+ display: ${props.hasBorder ? "block" : "none"};
11361
+ }
11362
+ `;
11363
+ }}
11364
+ `;
11365
+ const StyledMessageItem = styled$2.div `
11366
+ ${fontBodySemiboldXxxs}
11367
+ display: flex;
11368
+ align-items: start;
11369
+
11370
+ ${(props) => {
11371
+ const spaces = getSpaces(props);
11372
+ const semanticColors = getSemanticColors(props);
11373
+ const intentColors = semanticColors?.[props.intent];
11374
+ return `
11375
+ gap: ${spaces?.xs}px;
11376
+ color: ${intentColors?.text};
11377
+
11378
+ svg {
11379
+ margin-top: ${spaces?.xxxs}px;
11380
+ fill: ${intentColors?.ornament};
11381
+ path {
11382
+ fill: ${intentColors?.ornament};
11383
+ }
11384
+ }
11385
+ `;
11386
+ }}
11387
+ `;
11388
+
11389
+ const DEFAULT_INTENT_PRIORITY = {
11390
+ negative: 0,
11391
+ notice: 1,
11392
+ positive: 2
11393
+ };
11394
+ const IntentMessage = (props) => {
11395
+ const { messages = [], children, border = false, autoOrder = true, orderBy, ...rest } = props;
11396
+ // const priorities = React.useMemo(() => {
11397
+ // return orderBy
11398
+ // ? orderBy.reduce(
11399
+ // (acc, intent, index) => {
11400
+ // acc[intent] = index;
11401
+ // return acc;
11402
+ // },
11403
+ // {} as Record<IntentMessageIntent, number>
11404
+ // )
11405
+ // : DEFAULT_INTENT_PRIORITY;
11406
+ // }, [orderBy]);
11407
+ const priorities = orderBy
11408
+ ? Object.fromEntries(orderBy.map((value, index) => [value, index]))
11409
+ : DEFAULT_INTENT_PRIORITY;
11410
+ /**
11411
+ * Determines the left border color based on message intent priority.
11412
+ * When multiple IntentMessage items are rendered together, the border color
11413
+ * corresponds to the highest-priority intent present.
11414
+ */
11415
+ const borderColorIntent = React__default.useMemo(() => {
11416
+ if (!messages || messages.length === 0)
11417
+ return undefined;
11418
+ // Find the message with the highest priority (lowest number)
11419
+ const highestPriorityMessage = messages.reduce((prev, current) => {
11420
+ const priorityPrev = priorities[prev.intent] ?? 999;
11421
+ const priorityCurrent = priorities[current.intent] ?? 999;
11422
+ return priorityPrev <= priorityCurrent ? prev : current;
11423
+ });
11424
+ return highestPriorityMessage.intent;
11425
+ }, [messages, priorities]);
11426
+ const getIcon = (item) => {
11427
+ const { icon, intent } = item;
11428
+ if (icon) {
11429
+ if (typeof icon !== "string") {
11430
+ return icon;
11431
+ }
11432
+ return jsx(Icon, { sdsIcon: icon, sdsSize: "xs" });
11433
+ }
11434
+ switch (intent) {
11435
+ case "positive":
11436
+ return jsx(Icon, { sdsIcon: "CheckCircle", sdsSize: "xs" });
11437
+ case "negative":
11438
+ case "notice":
11439
+ default:
11440
+ return jsx(Icon, { sdsIcon: "ExclamationMarkCircle", sdsSize: "xs" });
11441
+ }
11442
+ };
11443
+ const sortedMessages = React__default.useMemo(() => {
11444
+ if (!autoOrder)
11445
+ return messages;
11446
+ return [...messages].sort((a, b) => {
11447
+ const priorityA = priorities[a.intent] ?? 999;
11448
+ const priorityB = priorities[b.intent] ?? 999;
11449
+ return priorityA - priorityB;
11450
+ });
11451
+ }, [messages, autoOrder, priorities]);
11452
+ return (jsxs(StyledIntentMessage, __assign({ borderIntent: borderColorIntent, hasBorder: border }, rest, { children: [children, sortedMessages.map((message, index) => (jsxs(StyledMessageItem, { intent: message.intent, children: [getIcon(message), jsx("span", { children: message.text })] }, index)))] })));
11453
+ };
11454
+
11281
11455
  const LegendContainer = styled$2("div") `
11282
11456
  display: flex;
11283
11457
  flex-wrap: wrap;
@@ -11719,7 +11893,7 @@ const StyledMenu = styled$2(Menu$1) `
11719
11893
  const corners = getCorners(props);
11720
11894
  const semanticColors = getSemanticColors(props);
11721
11895
  return `
11722
- background-color: ${semanticColors?.base?.surface};
11896
+ background-color: ${semanticColors?.base?.surfacePrimary};
11723
11897
  background-image: none;
11724
11898
  padding: ${spaces?.xs}px;
11725
11899
  border-radius: ${corners?.l}px;
@@ -18057,7 +18231,7 @@ const NarrowNavItemLinkStyles = (props) => {
18057
18231
  ? semanticColors?.base.textPrimaryOnDark
18058
18232
  : semanticColors?.base.textPrimary};
18059
18233
  background: ${props.hasInvertedStyle
18060
- ? semanticColors?.base.backgroundSecondaryOnDark
18234
+ ? semanticColors?.base.backgroundSecondaryDark
18061
18235
  : semanticColors?.base.backgroundSecondary};
18062
18236
  }
18063
18237
  `;
@@ -18083,11 +18257,11 @@ const StyledNavItemLink = styled$2(Link, {
18083
18257
 
18084
18258
  &:hover {
18085
18259
  color: ${props.hasInvertedStyle
18086
- ? semanticColors?.base.textPrimaryOnDark
18087
- : semanticColors?.base.textPrimary};
18260
+ ? semanticColors?.base?.textPrimaryOnDark
18261
+ : semanticColors?.base?.textPrimary};
18088
18262
  background-color: ${props.hasInvertedStyle
18089
- ? semanticColors?.base.fillHoverOnDark
18090
- : semanticColors?.base.fillHover};
18263
+ ? semanticColors?.base?.fillInteractionOnDark
18264
+ : semanticColors?.base?.fillInteraction};
18091
18265
  text-decoration: none;
18092
18266
  }
18093
18267
 
@@ -18641,7 +18815,7 @@ const StyledSearch = styled$2(InputSearch, {
18641
18815
  &:hover {
18642
18816
  fieldset {
18643
18817
  border-color: ${hasInvertedStyle
18644
- ? semanticColors?.base?.borderPrimaryHoverOnDark
18818
+ ? semanticColors?.base?.borderPrimaryInteractionOnDark
18645
18819
  : ""} !important;
18646
18820
  }
18647
18821
 
@@ -18659,7 +18833,7 @@ const StyledSearch = styled$2(InputSearch, {
18659
18833
  &.Mui-focused {
18660
18834
  fieldset {
18661
18835
  border-color: ${hasInvertedStyle
18662
- ? semanticColors?.base?.borderPrimaryPressedOnDark
18836
+ ? semanticColors?.base?.borderPrimaryInteractionOnDark
18663
18837
  : ""} !important;
18664
18838
  }
18665
18839
 
@@ -18854,8 +19028,8 @@ const StyledAccordion = styled$2(Accordion, {
18854
19028
  ? semanticColors?.base.ornamentSecondaryOnDark
18855
19029
  : semanticColors?.base.ornamentSecondary;
18856
19030
  const ChevronOpenColor = hasInvertedStyle
18857
- ? semanticColors?.base?.ornamentSecondaryPressedOnDark
18858
- : semanticColors?.base.ornamentSecondaryPressed;
19031
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
19032
+ : semanticColors?.base.ornamentSecondaryInteraction;
18859
19033
  return css$3 `
18860
19034
  & > .MuiButtonBase-root {
18861
19035
  padding: ${spaces?.s}px ${spaces?.l}px !important;
@@ -18920,16 +19094,16 @@ const StyledAccordion = styled$2(Accordion, {
18920
19094
  width: 100%;
18921
19095
  box-shadow: none;
18922
19096
  background: ${hasInvertedStyle
18923
- ? semanticColors?.base.fillHoverOnDark
18924
- : semanticColors?.base.fillHover};
19097
+ ? semanticColors?.base.fillInteractionOnDark
19098
+ : semanticColors?.base.fillInteraction};
18925
19099
  color: ${hasInvertedStyle
18926
19100
  ? semanticColors?.base.textPrimaryOnDark
18927
19101
  : semanticColors?.base.textPrimary};
18928
19102
 
18929
19103
  svg {
18930
19104
  color: ${hasInvertedStyle
18931
- ? semanticColors?.base?.ornamentSecondaryHoverOnDark
18932
- : semanticColors?.base.ornamentSecondaryHover} !important;
19105
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
19106
+ : semanticColors?.base.ornamentSecondaryInteraction} !important;
18933
19107
  }
18934
19108
  }
18935
19109
 
@@ -19132,8 +19306,8 @@ const StyledHoverDrawerItem = styled$2(Button, {
19132
19306
  box-shadow: none;
19133
19307
  cursor: pointer;
19134
19308
  background: ${hasInvertedStyle
19135
- ? semanticColors?.base.fillHoverOnDark
19136
- : semanticColors?.base.fillHover};
19309
+ ? semanticColors?.base.fillInteractionOnDark
19310
+ : semanticColors?.base.fillInteraction};
19137
19311
  svg {
19138
19312
  color: ${semanticColors?.accent?.ornament};
19139
19313
  }
@@ -19307,8 +19481,8 @@ const NarrowPrimaryNavItem = (props) => {
19307
19481
  const semanticColors = getSemanticColors(props);
19308
19482
  const corners = getCorners(props);
19309
19483
  const ChevronHoverColor = hasInvertedStyle
19310
- ? semanticColors?.base?.ornamentSecondaryHoverOnDark
19311
- : semanticColors?.base.ornamentSecondaryHover;
19484
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
19485
+ : semanticColors?.base.ornamentSecondaryInteraction;
19312
19486
  return css$1 `
19313
19487
  border-radius: ${corners?.l}px;
19314
19488
  justify-content: start;
@@ -19333,8 +19507,8 @@ const NarrowPrimaryNavItem = (props) => {
19333
19507
  `
19334
19508
  : css$1 `
19335
19509
  background: ${hasInvertedStyle
19336
- ? semanticColors?.base.fillHoverOnDark
19337
- : semanticColors?.base.fillHover};
19510
+ ? semanticColors?.base.fillInteractionOnDark
19511
+ : semanticColors?.base.fillInteraction};
19338
19512
  `}
19339
19513
  box-shadow: none;
19340
19514
 
@@ -19366,11 +19540,11 @@ styled$2(Button, {
19366
19540
  ? semanticColors?.base.ornamentSecondaryOnDark
19367
19541
  : semanticColors?.base.ornamentSecondary;
19368
19542
  const ChevronHoverColor = hasInvertedStyle
19369
- ? semanticColors?.base?.ornamentSecondaryHoverOnDark
19370
- : semanticColors?.base.ornamentSecondaryHover;
19543
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
19544
+ : semanticColors?.base.ornamentSecondaryInteraction;
19371
19545
  const ChevronOpenColor = hasInvertedStyle
19372
- ? semanticColors?.base.ornamentSecondaryPressedOnDark
19373
- : semanticColors?.base.ornamentSecondaryPressed;
19546
+ ? semanticColors?.base.ornamentSecondaryInteractionOnDark
19547
+ : semanticColors?.base.ornamentSecondaryInteraction;
19374
19548
  return css$1 `
19375
19549
  border: none;
19376
19550
  padding: ${spaces?.xxxs}px ${spaces?.m}px;
@@ -19387,8 +19561,8 @@ styled$2(Button, {
19387
19561
 
19388
19562
  &:hover {
19389
19563
  background: ${hasInvertedStyle
19390
- ? semanticColors?.base.fillHoverOnDark
19391
- : semanticColors?.base.fillHover} !important;
19564
+ ? semanticColors?.base.fillInteractionOnDark
19565
+ : semanticColors?.base.fillInteraction} !important;
19392
19566
  box-shadow: none;
19393
19567
 
19394
19568
  ${StyledLabel$1} {
@@ -19468,8 +19642,8 @@ const NarrowNavItemStyles = (props) => {
19468
19642
  const semanticColors = getSemanticColors(props);
19469
19643
  const corners = getCorners(props);
19470
19644
  const ChevronHoverColor = hasInvertedStyle
19471
- ? semanticColors?.base?.ornamentSecondaryHoverOnDark
19472
- : semanticColors?.base.ornamentSecondaryHover;
19645
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
19646
+ : semanticColors?.base?.ornamentSecondaryInteraction;
19473
19647
  return css$1 `
19474
19648
  ${active ? fontBodySemiboldL(props) : fontBodyMediumL(props)}
19475
19649
  border-radius: ${corners?.l}px;
@@ -19496,8 +19670,8 @@ const NarrowNavItemStyles = (props) => {
19496
19670
  `
19497
19671
  : css$1 `
19498
19672
  background: ${hasInvertedStyle
19499
- ? semanticColors?.base.fillHoverOnDark
19500
- : semanticColors?.base.fillHover};
19673
+ ? semanticColors?.base.fillInteractionOnDark
19674
+ : semanticColors?.base.fillInteraction};
19501
19675
  `}
19502
19676
  box-shadow: none;
19503
19677
 
@@ -19537,11 +19711,11 @@ const UnifiedNavItem = styled$2(Button, {
19537
19711
  ? semanticColors?.base.ornamentSecondaryOnDark
19538
19712
  : semanticColors?.base.ornamentSecondary;
19539
19713
  const ChevronHoverColor = hasInvertedStyle
19540
- ? semanticColors?.base?.ornamentSecondaryHoverOnDark
19541
- : semanticColors?.base.ornamentSecondaryHover;
19714
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
19715
+ : semanticColors?.base.ornamentSecondaryInteraction;
19542
19716
  const ChevronOpenColor = hasInvertedStyle
19543
- ? semanticColors?.base.ornamentSecondaryPressedOnDark
19544
- : semanticColors?.base.ornamentSecondaryPressed;
19717
+ ? semanticColors?.base.ornamentSecondaryInteractionOnDark
19718
+ : semanticColors?.base.ornamentSecondaryInteraction;
19545
19719
  return [
19546
19720
  navVariant === "secondary" &&
19547
19721
  (active ? fontBodySemiboldS(props) : fontBodyMediumS(props)),
@@ -19569,8 +19743,8 @@ const UnifiedNavItem = styled$2(Button, {
19569
19743
 
19570
19744
  &:hover {
19571
19745
  background: ${hasInvertedStyle
19572
- ? semanticColors?.base.fillHoverOnDark
19573
- : semanticColors?.base.fillHover} !important;
19746
+ ? semanticColors?.base.fillInteractionOnDark
19747
+ : semanticColors?.base.fillInteraction} !important;
19574
19748
  box-shadow: none;
19575
19749
 
19576
19750
  ${navVariant === "primary" && StyledLabel} {
@@ -19665,7 +19839,7 @@ const StyledSectionHeader = styled$2(ListSubheader, {
19665
19839
  ? semanticColors?.base.backgroundPrimaryDark
19666
19840
  : semanticColors?.base.backgroundPrimary;
19667
19841
  }
19668
- return semanticColors?.base?.surface;
19842
+ return semanticColors?.base?.surfacePrimary;
19669
19843
  }
19670
19844
  function getTextColor() {
19671
19845
  if (isNarrow) {
@@ -19726,7 +19900,7 @@ const StyledAccordionSection = styled$2("div", {
19726
19900
  border-radius: ${corners?.xl}px;
19727
19901
  padding: ${spaces?.l}px;
19728
19902
  background-color: ${hasInvertedStyle
19729
- ? semanticColors?.base?.backgroundSecondaryOnDark
19903
+ ? semanticColors?.base?.backgroundSecondaryDark
19730
19904
  : semanticColors?.base?.backgroundSecondary};
19731
19905
  `;
19732
19906
  }
@@ -20141,7 +20315,7 @@ function useNavigationState() {
20141
20315
  };
20142
20316
  }
20143
20317
 
20144
- function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
20318
+ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, items, onChange, value, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
20145
20319
  const theme = useTheme$4();
20146
20320
  const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
20147
20321
  const [clickedDrawerKey, setClickedDrawerKey] = useState(null);
@@ -20190,6 +20364,7 @@ function NavigationHeaderPrimaryNav({ menuProps, hasInvertedStyle, isNarrow, ite
20190
20364
  }
20191
20365
  };
20192
20366
  return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
20367
+ onDrawerStyleNavItemHover?.(item);
20193
20368
  if (clickedDrawerKey !== key) {
20194
20369
  onDrawerOpen(key);
20195
20370
  }
@@ -20361,8 +20536,8 @@ const NarrowStyledTextItem = (props) => {
20361
20536
  &:hover {
20362
20537
  box-shadow: none;
20363
20538
  background: ${hasInvertedStyle
20364
- ? semanticColors?.base.fillHoverOnDark
20365
- : semanticColors?.base.fillHover};
20539
+ ? semanticColors?.base.fillInteractionOnDark
20540
+ : semanticColors?.base.fillInteraction};
20366
20541
  }
20367
20542
  `;
20368
20543
  };
@@ -20394,11 +20569,11 @@ styled$2(Button, {
20394
20569
  ? semanticColors?.base.ornamentSecondaryOnDark
20395
20570
  : semanticColors?.base.ornamentSecondary;
20396
20571
  const ChevronHoverColor = hasInvertedStyle
20397
- ? semanticColors?.base?.ornamentSecondaryHoverOnDark
20398
- : semanticColors?.base.ornamentSecondaryHover;
20572
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
20573
+ : semanticColors?.base.ornamentSecondaryInteraction;
20399
20574
  const ChevronOpenColor = hasInvertedStyle
20400
- ? semanticColors?.base?.ornamentSecondaryPressedOnDark
20401
- : semanticColors?.base.ornamentSecondaryPressed;
20575
+ ? semanticColors?.base?.ornamentSecondaryInteractionOnDark
20576
+ : semanticColors?.base.ornamentSecondaryInteraction;
20402
20577
  return [
20403
20578
  open ? fontBodySemiboldS(props) : fontBodyMediumS(props),
20404
20579
  css$1 `
@@ -20419,8 +20594,8 @@ styled$2(Button, {
20419
20594
 
20420
20595
  &:hover {
20421
20596
  background: ${hasInvertedStyle
20422
- ? semanticColors?.base.fillHoverOnDark
20423
- : semanticColors?.base.fillHover};
20597
+ ? semanticColors?.base.fillInteractionOnDark
20598
+ : semanticColors?.base.fillInteraction};
20424
20599
  box-shadow: none;
20425
20600
 
20426
20601
  color: ${hasInvertedStyle
@@ -20441,7 +20616,7 @@ const StyledTag = styled$2(Tag) `
20441
20616
  margin: 0;
20442
20617
  `;
20443
20618
 
20444
- function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, }) {
20619
+ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNarrow, sdsStyle = "dropdown", expandedAccordion, setExpandedAccordion, accordionRefs, scrollToAccordion, onDrawerStateChange, topOffset = 0, onClose: onCloseProp, onDrawerStyleNavItemHover, }) {
20445
20620
  const theme = useTheme$4();
20446
20621
  const { anchorEl, activeDropdownKey, activeDrawerKey, contentKey, isContentFading, open, drawerOpen, buttonRef, menuWidth, setAnchorEl, setActiveDropdownKey, setActiveDrawerKey, setContentKey, onClose: handleClose, onDrawerClose, onDrawerOpen, cancelDrawerClose, } = useNavigationState();
20447
20622
  function onClose() {
@@ -20465,7 +20640,10 @@ function NavigationHeaderSecondaryNav({ menuProps, items, hasInvertedStyle, isNa
20465
20640
  const handleClick = (e) => {
20466
20641
  parentOnClick?.(e);
20467
20642
  };
20468
- return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => onDrawerOpen(key), onMouseLeave: onDrawerClose, children: jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
20643
+ return (jsx(StyledHoverDrawerContainer, { onMouseEnter: () => {
20644
+ onDrawerStyleNavItemHover?.(item);
20645
+ onDrawerOpen(key);
20646
+ }, onMouseLeave: onDrawerClose, children: jsxs(UnifiedNavItem, __assign({}, rest, { hasInvertedStyle: hasInvertedStyle, active: isDrawerOpen, isNarrow: isNarrow, sdsStyle: "minimal", innerSdsStyle: sdsStyle, navVariant: "secondary", onClick: handleClick, component: componentProp, href: defaultUrl, target: target, rel: rel, children: [jsx(StyledLabelTextWrapper$1, { active: isDrawerOpen, isNarrow: isNarrow, children: label }), jsx(StyledLabelTextWrapperShadow$1, { "aria-hidden": "true", isNarrow: isNarrow, children: label }), jsx(Icon, { sdsIcon: isDrawerOpen ? "ChevronUp" : "ChevronDown", sdsSize: "xs" })] })) }, key));
20469
20647
  };
20470
20648
  const renderDropdownItem = (item, key, label, parentOnClick, rest) => {
20471
20649
  const isDropdownOpen = open && activeDropdownKey === key;
@@ -20637,7 +20815,7 @@ const NavigationHeader = forwardRef((props, ref) => {
20637
20815
  const { activePrimaryNavKey: controlledActivePrimaryNavKey, buttons, sdsStyle = "dropdown", menuProps = {
20638
20816
  disableScrollLock: true,
20639
20817
  disablePortal: true
20640
- }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, ...rest } = props;
20818
+ }, backgroundAppearance = "matchBackground", logo, logoUrl, logoLinkComponent = "a", logoLinkProps, scrollElevation = true, primaryNavItems, primaryNavPosition = "left", searchProps, secondaryNavItems, setActivePrimaryNavKey: onActivePrimaryNavKeyChange, showSearch = true, tag, tagColor, title, drawerOpen: controlledDrawerOpen, setDrawerOpen: onDrawerOpenChange, isSticky = true, topComponentSlot, onDrawerStyleNavItemHover, ...rest } = props;
20641
20819
  const navRef = useRef(null);
20642
20820
  const topSlotRef = useRef(null);
20643
20821
  const [topOffset, setTopOffset] = useState(0);
@@ -20790,11 +20968,11 @@ const NavigationHeader = forwardRef((props, ref) => {
20790
20968
  };
20791
20969
  const renderPrimaryNav = () => {
20792
20970
  return (primaryNavItems &&
20793
- primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
20971
+ primaryNavItems.length > 0 && (jsx(NavigationHeaderPrimaryNav, { items: primaryNavItems, value: activePrimaryNavKey, onChange: setActivePrimaryNavKey, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handlePrimaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
20794
20972
  };
20795
20973
  const renderSecondaryNav = () => {
20796
20974
  return (secondaryNavItems &&
20797
- secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false) })));
20975
+ secondaryNavItems.length > 0 && (jsx(NavigationHeaderSecondaryNav, { items: secondaryNavItems, hasInvertedStyle: hasInvertedStyle, isNarrow: dimensions.isNarrow, menuProps: menuProps, sdsStyle: sdsStyle, expandedAccordion: expandedAccordion, setExpandedAccordion: setExpandedAccordion, accordionRefs: accordionRefs, scrollToAccordion: scrollToAccordion, onDrawerStateChange: handleSecondaryDrawerStateChange, topOffset: topOffset, onClose: () => setDrawerOpen(false), onDrawerStyleNavItemHover: onDrawerStyleNavItemHover })));
20798
20976
  };
20799
20977
  const renderButtonsNode = () => {
20800
20978
  if (!buttons || buttons.length === 0)
@@ -20969,7 +21147,7 @@ const StyledTabs$1 = styled$2(Tabs$1, {
20969
21147
  const StyledTab$1 = styled$2(Tab$1, {
20970
21148
  shouldForwardProp: (prop) => !doNotForwardProps$5.includes(prop)
20971
21149
  }) `
20972
- ${fontBodyXs$2}
21150
+ ${fontBodyMediumXs}
20973
21151
 
20974
21152
  ${(props) => {
20975
21153
  const spaces = getSpaces(props);
@@ -20996,20 +21174,20 @@ const StyledTab$1 = styled$2(Tab$1, {
20996
21174
  left: 0;
20997
21175
  width: ${spaces?.xxxs}px;
20998
21176
  height: 100%;
20999
- background-color: ${semanticColors?.base?.borderPrimaryHover};
21177
+ background-color: ${semanticColors?.base?.borderPrimaryInteraction};
21000
21178
  display: none;
21001
21179
  border-radius: ${spaces?.xxxs}px;
21002
21180
  }
21003
21181
  &:hover {
21004
21182
  color: ${semanticColors?.base?.textPrimary};
21005
- background-color: ${semanticColors?.base?.fillHover};
21183
+ background-color: ${semanticColors?.base?.fillInteraction};
21006
21184
  &:before {
21007
21185
  display: block;
21008
21186
  }
21009
21187
  }
21010
21188
  &.Mui-selected {
21011
21189
  color: ${semanticColors?.base?.textPrimary};
21012
- font-weight: 500;
21190
+ font-weight: 600;
21013
21191
  }
21014
21192
  &.MuiButtonBase-root {
21015
21193
  text-align: left;
@@ -21366,7 +21544,7 @@ const StyledPaginationButton = styled$2(Button) `
21366
21544
 
21367
21545
  &:hover {
21368
21546
  & .MuiSvgIcon-root {
21369
- color: ${semanticColors?.base?.ornamentSecondaryHover}
21547
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction}
21370
21548
  }
21371
21549
  }
21372
21550
  `;
@@ -21402,10 +21580,10 @@ const StyledPaginationChevronList = styled$2("li", {
21402
21580
  }
21403
21581
 
21404
21582
  &:hover {
21405
- background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover};
21583
+ background-color: ${disabled ? "transparent" : semanticColors?.base?.fillInteraction};
21406
21584
 
21407
21585
  & .MuiSvgIcon-root {
21408
- color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryHover}
21586
+ color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryInteraction}
21409
21587
  }
21410
21588
  }
21411
21589
 
@@ -21427,28 +21605,29 @@ const StyledPagination = styled$2("ul", {
21427
21605
  `;
21428
21606
  const selectedPageStyle = (props) => {
21429
21607
  const semanticColors = getSemanticColors(props);
21430
- return `
21431
- background-color: ${semanticColors?.base?.fillOpen};
21608
+ return css$1 `
21609
+ background-color: ${semanticColors?.base?.fillInteraction};
21432
21610
  color: ${semanticColors?.base?.textPrimary};
21433
- font-weight: 500;
21434
21611
  box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
21435
21612
 
21436
21613
  &:hover {
21437
21614
  box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderSecondary};
21438
21615
  }
21616
+
21617
+ ${fontTabularSemiboldS(props)}
21439
21618
  `;
21440
21619
  };
21441
21620
  const Page = styled$2("li", {
21442
21621
  shouldForwardProp: (prop) => !doNotForwardProps$3.includes(prop)
21443
21622
  }) `
21444
- ${fontTabularS}
21623
+ ${fontTabularMediumS}
21445
21624
 
21446
21625
  ${(props) => {
21447
21626
  const { selected, sdsStyle } = props;
21448
21627
  const spaces = getSpaces(props);
21449
21628
  const corners = getCorners(props);
21450
21629
  const semanticColors = getSemanticColors(props);
21451
- return `
21630
+ return css$1 `
21452
21631
  color: ${semanticColors?.base?.textSecondary};
21453
21632
  cursor: pointer;
21454
21633
  list-style: none;
@@ -21462,15 +21641,15 @@ const Page = styled$2("li", {
21462
21641
  border-radius: ${sdsStyle === "round" ? corners?.rounded : corners?.l}px;
21463
21642
  user-select: none;
21464
21643
  &:hover {
21465
- background-color: ${semanticColors?.base?.fillHover};
21644
+ background-color: ${semanticColors?.base?.fillInteraction};
21466
21645
  color: ${semanticColors?.base?.textPrimary};
21467
21646
  }
21468
21647
 
21469
- &:nth-last-of-type(-n+2) {
21648
+ &:nth-last-of-type(-n + 2) {
21470
21649
  margin-right: 0;
21471
21650
  }
21472
21651
 
21473
- ${selected && selectedPageStyle(props)};
21652
+ ${selected && selectedPageStyle(props)}
21474
21653
  ${focusVisibleA11yStyle(props)}
21475
21654
  `;
21476
21655
  }}
@@ -21793,7 +21972,7 @@ const StyledSegmentedControl = styled$2(ToggleButtonGroup, {
21793
21972
  padding: ${spaces?.xxxs}px;
21794
21973
 
21795
21974
  &:hover {
21796
- box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryHover};
21975
+ box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryInteraction};
21797
21976
  }
21798
21977
 
21799
21978
  .${toggleButtonClasses.root}.${toggleButtonClasses.disabled} {
@@ -21801,13 +21980,13 @@ const StyledSegmentedControl = styled$2(ToggleButtonGroup, {
21801
21980
  }
21802
21981
 
21803
21982
  .${toggleButtonClasses.root}.${toggleButtonClasses.selected} {
21804
- background-color: ${semanticColors?.base?.fillOpen};
21983
+ background-color: ${semanticColors?.base?.fillInteraction};
21805
21984
  color: ${semanticColors?.accent?.ornamentSelected};
21806
21985
  border-color: ${semanticColors?.base?.borderPrimary};
21807
21986
 
21808
21987
  &:hover {
21809
- background-color: ${semanticColors?.base?.fillHover};
21810
- color: ${semanticColors?.base?.ornamentSecondaryHover};
21988
+ background-color: ${semanticColors?.base?.fillInteraction};
21989
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
21811
21990
  }
21812
21991
  }
21813
21992
 
@@ -21823,8 +22002,8 @@ const StyledSegmentedControl = styled$2(ToggleButtonGroup, {
21823
22002
 
21824
22003
  &:hover {
21825
22004
  border-color: ${semanticColors?.base?.borderPrimary};
21826
- background-color: ${semanticColors?.base?.fillHover};
21827
- color: ${semanticColors?.base?.ornamentSecondaryHover};
22005
+ background-color: ${semanticColors?.base?.fillInteraction};
22006
+ color: ${semanticColors?.base?.ornamentSecondaryInteraction};
21828
22007
  }
21829
22008
  }
21830
22009
  `;
@@ -21907,6 +22086,7 @@ const disabledStyled = (props) => {
21907
22086
 
21908
22087
  & span, & div {
21909
22088
  color: ${semanticColors?.base?.textDisabled};
22089
+ background-color: transparent !important;
21910
22090
  }
21911
22091
 
21912
22092
  .cell-component {
@@ -21915,11 +22095,12 @@ const disabledStyled = (props) => {
21915
22095
  user-select: none;
21916
22096
  & div {
21917
22097
  color: ${semanticColors?.base?.textDisabled};
21918
- background-color: ${semanticColors?.base?.backgroundSecondary};
22098
+ background-color: transparent;
21919
22099
  }
21920
22100
 
21921
22101
  & .MuiChip-root {
21922
22102
  background-color: ${semanticColors?.base?.fillDisabled};
22103
+ box-shadow: inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled} !important;
21923
22104
 
21924
22105
  & span {
21925
22106
  color: ${semanticColors?.base?.textDisabled} !important;
@@ -21938,7 +22119,7 @@ const hoverStyled = (props) => {
21938
22119
  const semanticColors = getSemanticColors(props);
21939
22120
  return `
21940
22121
  &:hover {
21941
- background-color: ${semanticColors?.base?.fillHover};
22122
+ background-color: ${semanticColors?.base?.fillInteraction};
21942
22123
  }
21943
22124
  `;
21944
22125
  };
@@ -22039,8 +22220,8 @@ const StyledTab = styled$2(Tab$1, {
22039
22220
  color: ${semanticColors?.base?.textSecondary};
22040
22221
 
22041
22222
  &:hover {
22042
- box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryHover};
22043
- background-color: ${semanticColors?.base?.fillOpen};
22223
+ box-shadow: inset 0 -2px 0 0 ${semanticColors?.base?.borderPrimaryInteraction};
22224
+ background-color: ${semanticColors?.base?.fillInteraction};
22044
22225
  border-top-right-radius: ${corners?.l}px;
22045
22226
  border-top-left-radius: ${corners?.l}px;
22046
22227
 
@@ -22070,7 +22251,7 @@ const StyledTab = styled$2(Tab$1, {
22070
22251
  function tabFontMixin(props) {
22071
22252
  const { sdsSize } = props;
22072
22253
  const isLarge = sdsSize === "large";
22073
- return isLarge ? fontBodyS$1(props) : fontBodyXs$2(props);
22254
+ return isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props);
22074
22255
  }
22075
22256
  const StyledWrapper = styled$2("div") `
22076
22257
  ${(props) => {
@@ -22089,7 +22270,7 @@ const StyledCount = styled$2("span") `
22089
22270
  const { sdsSize } = props;
22090
22271
  const isLarge = sdsSize === "large";
22091
22272
  return css$1 `
22092
- ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
22273
+ ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
22093
22274
  `;
22094
22275
  }}
22095
22276
  `;
@@ -22098,9 +22279,9 @@ const StyledLabelTextWrapper = styled$2("span") `
22098
22279
  const { sdsSize, selected } = props;
22099
22280
  const isLarge = sdsSize === "large";
22100
22281
  return css$1 `
22101
- ${isLarge ? fontBodyS$1(props) : fontBodyXs$2(props)}
22282
+ ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
22102
22283
  ${selected &&
22103
- (isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props))}
22284
+ (isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props))}
22104
22285
  position: absolute;
22105
22286
  `;
22106
22287
  }}
@@ -22110,7 +22291,7 @@ const StyledLabelTextWrapperShadow = styled$2("span") `
22110
22291
  const { sdsSize } = props;
22111
22292
  const isLarge = sdsSize === "large";
22112
22293
  return css$1 `
22113
- ${isLarge ? fontBodyMediumS(props) : fontBodyMediumXs(props)}
22294
+ ${isLarge ? fontBodySemiboldS(props) : fontBodySemiboldXs(props)}
22114
22295
  visibility: hidden;
22115
22296
  opacity: 0;
22116
22297
  `;
@@ -25790,7 +25971,7 @@ Object.assign(chroma, {
25790
25971
  const generateDiscreteColors = (count, options = {}) => {
25791
25972
  if (count === 0)
25792
25973
  return [];
25793
- const { isDarkMode = false, start = 250, rotations = 0.85, gamma = 0.7, lightness = [0.4, 0.7], correctLightness = true, } = options;
25974
+ const { isDarkMode = false, start = 240, rotations = 0.85, gamma = 1, lightness = [0.4, 0.7], correctLightness = true, } = options;
25794
25975
  let scale = chroma
25795
25976
  .cubehelix()
25796
25977
  .start(start)
@@ -25806,4 +25987,4 @@ const generateDiscreteColors = (count, options = {}) => {
25806
25987
  return isDarkMode ? colors.reverse() : colors;
25807
25988
  };
25808
25989
 
25809
- export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
25990
+ export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index$1 as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, IntentMessage, Legend, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontBodyXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularMediumXxxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTabularXxxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, generateDiscreteColors, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };