@mui/material 5.10.17 → 5.11.1

package/legacy/styles/experimental_extendTheme.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { deepmerge } from '@mui/utils';
-import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
+import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
@@ -122,10 +122,10 @@ export default function extendTheme() {
       setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
       setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
-      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
-      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
-      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
-      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
       setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
       setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
       setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
@@ -283,5 +283,12 @@ export default function extendTheme() {
   theme = args.reduce(function (acc, argument) {
     return deepmerge(acc, argument);
   }, theme);
+  theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return theme;
 }

package/legacy/styles/index.js

@@ -1,5 +1,11 @@
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export { default as adaptV4Theme } from './adaptV4Theme';
-export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes, experimental_sx } from '@mui/system';
+export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';
+// TODO: Remove this function in v6.
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function experimental_sx() {
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150." : _formatMuiErrorMessage(20));
+}
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';

package/locale/index.d.ts

@@ -50,7 +50,7 @@ export declare const itIT: Localization;
 export declare const jaJP: Localization;
 export declare const khKH: Localization;
 export declare const koKR: Localization;
-export declare const kzKZ: Localization;
+export declare const kkKZ: Localization;
 export declare const mkMK: Localization;
 export declare const nbNO: Localization;
 export declare const nlNL: Localization;

package/locale/index.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = exports.urPK = exports.ukUA = exports.trTR = exports.thTH = exports.svSE = exports.srRS = exports.skSK = exports.siLK = exports.ruRU = exports.roRO = exports.ptPT = exports.ptBR = exports.plPL = exports.nlNL = exports.nbNO = exports.mkMK = exports.kzKZ = exports.koKR = exports.khKH = exports.jaJP = exports.itIT = exports.isIS = exports.idID = exports.hyAM = exports.huHU = exports.hrHR = exports.hiIN = exports.heIL = exports.frFR = exports.fiFI = exports.faIR = exports.etEE = exports.esES = exports.enUS = exports.elGR = exports.deDE = exports.daDK = exports.csCZ = exports.caES = exports.bnBD = exports.bgBG = exports.azAZ = exports.arSD = exports.arSA = exports.arEG = exports.amET = void 0;
-const amET = {
+export const amET = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -77,8 +71,7 @@ const amET = {
     }
   }
 };
-exports.amET = amET;
-const arEG = {
+export const arEG = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -151,8 +144,7 @@ const arEG = {
     }
   }
 };
-exports.arEG = arEG;
-const arSA = {
+export const arSA = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -225,8 +217,7 @@ const arSA = {
     }
   }
 };
-exports.arSA = arSA;
-const arSD = {
+export const arSD = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -299,8 +290,7 @@ const arSD = {
     }
   }
 };
-exports.arSD = arSD;
-const azAZ = {
+export const azAZ = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -378,8 +368,7 @@ const azAZ = {
     }
   }
 };
-exports.azAZ = azAZ;
-const bnBD = {
+export const bnBD = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -452,8 +441,7 @@ const bnBD = {
     }
   }
 };
-exports.bnBD = bnBD;
-const bgBG = {
+export const bgBG = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -524,8 +512,7 @@ const bgBG = {
     }
   }
 };
-exports.bgBG = bgBG;
-const caES = {
+export const caES = {
   components: {
     // MuiBreadcrumbs: {
     //   defaultProps: {
@@ -596,8 +583,8 @@ const caES = {
     // },
   }
 };
-exports.caES = caES;
-const csCZ = {
+
+export const csCZ = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -678,8 +665,7 @@ const csCZ = {
     }
   }
 };
-exports.csCZ = csCZ;
-const daDK = {
+export const daDK = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -752,8 +738,7 @@ const daDK = {
     }
   }
 };
-exports.daDK = daDK;
-const deDE = {
+export const deDE = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -826,8 +811,7 @@ const deDE = {
     }
   }
 };
-exports.deDE = deDE;
-const elGR = {
+export const elGR = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -904,8 +888,7 @@ const elGR = {
 };
 
 // default
-exports.elGR = elGR;
-const enUS = {
+export const enUS = {
   /*
   components: {
     MuiBreadcrumbs: { defaultProps: {
@@ -965,8 +948,7 @@ const enUS = {
   },
   */
 };
-exports.enUS = enUS;
-const esES = {
+export const esES = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1039,8 +1021,7 @@ const esES = {
     }
   }
 };
-exports.esES = esES;
-const etEE = {
+export const etEE = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1113,8 +1094,7 @@ const etEE = {
     }
   }
 };
-exports.etEE = etEE;
-const faIR = {
+export const faIR = {
   components: {
     // MuiBreadcrumbs: {
     //   defaultProps: {
@@ -1190,8 +1170,7 @@ const faIR = {
     }
   }
 };
-exports.faIR = faIR;
-const fiFI = {
+export const fiFI = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1264,8 +1243,7 @@ const fiFI = {
     }
   }
 };
-exports.fiFI = fiFI;
-const frFR = {
+export const frFR = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1338,8 +1316,7 @@ const frFR = {
     }
   }
 };
-exports.frFR = frFR;
-const heIL = {
+export const heIL = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1412,8 +1389,7 @@ const heIL = {
     }
   }
 };
-exports.heIL = heIL;
-const hiIN = {
+export const hiIN = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1488,8 +1464,7 @@ const hiIN = {
 };
 
 // Croatian - Hrvatski
-exports.hiIN = hiIN;
-const hrHR = {
+export const hrHR = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1569,8 +1544,7 @@ const hrHR = {
     }
   }
 };
-exports.hrHR = hrHR;
-const huHU = {
+export const huHU = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1641,8 +1615,7 @@ const huHU = {
     }
   }
 };
-exports.huHU = huHU;
-const hyAM = {
+export const hyAM = {
   components: {
     // MuiBreadcrumbs: {
     //   defaultProps: {
@@ -1713,8 +1686,8 @@ const hyAM = {
     // },
   }
 };
-exports.hyAM = hyAM;
-const idID = {
+
+export const idID = {
   components: {
     // MuiBreadcrumbs: {
     //   defaultProps: {
@@ -1786,8 +1759,8 @@ const idID = {
     // },
   }
 };
-exports.idID = idID;
-const isIS = {
+
+export const isIS = {
   components: {
     // MuiBreadcrumbs: {
     //   defaultProps: {
@@ -1858,8 +1831,8 @@ const isIS = {
     // },
   }
 };
-exports.isIS = isIS;
-const itIT = {
+
+export const itIT = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -1932,8 +1905,7 @@ const itIT = {
     }
   }
 };
-exports.itIT = itIT;
-const jaJP = {
+export const jaJP = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2006,8 +1978,7 @@ const jaJP = {
     }
   }
 };
-exports.jaJP = jaJP;
-const khKH = {
+export const khKH = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2080,8 +2051,7 @@ const khKH = {
     }
   }
 };
-exports.khKH = khKH;
-const koKR = {
+export const koKR = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2154,8 +2124,7 @@ const koKR = {
     }
   }
 };
-exports.koKR = koKR;
-const kzKZ = {
+export const kkKZ = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2233,8 +2202,7 @@ const kzKZ = {
 };
 
 // Macedonian - Македонски
-exports.kzKZ = kzKZ;
-const mkMK = {
+export const mkMK = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2310,8 +2278,7 @@ const mkMK = {
     }
   }
 };
-exports.mkMK = mkMK;
-const nbNO = {
+export const nbNO = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2384,8 +2351,7 @@ const nbNO = {
     }
   }
 };
-exports.nbNO = nbNO;
-const nlNL = {
+export const nlNL = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2458,8 +2424,7 @@ const nlNL = {
     }
   }
 };
-exports.nlNL = nlNL;
-const plPL = {
+export const plPL = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2541,8 +2506,7 @@ const plPL = {
     }
   }
 };
-exports.plPL = plPL;
-const ptBR = {
+export const ptBR = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2615,8 +2579,7 @@ const ptBR = {
     }
   }
 };
-exports.ptBR = ptBR;
-const ptPT = {
+export const ptPT = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2689,8 +2652,7 @@ const ptPT = {
     }
   }
 };
-exports.ptPT = ptPT;
-const roRO = {
+export const roRO = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2763,8 +2725,7 @@ const roRO = {
 };
 
 // Serbian - Srpski
-exports.roRO = roRO;
-const srRS = {
+export const srRS = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2844,8 +2805,7 @@ const srRS = {
     }
   }
 };
-exports.srRS = srRS;
-const ruRU = {
+export const ruRU = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -2930,8 +2890,7 @@ const ruRU = {
     }
   }
 };
-exports.ruRU = ruRU;
-const siLK = {
+export const siLK = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3004,8 +2963,7 @@ const siLK = {
     }
   }
 };
-exports.siLK = siLK;
-const skSK = {
+export const skSK = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3086,8 +3044,7 @@ const skSK = {
     }
   }
 };
-exports.skSK = skSK;
-const svSE = {
+export const svSE = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3160,8 +3117,7 @@ const svSE = {
     }
   }
 };
-exports.svSE = svSE;
-const thTH = {
+export const thTH = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3234,8 +3190,7 @@ const thTH = {
     }
   }
 };
-exports.thTH = thTH;
-const trTR = {
+export const trTR = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3306,8 +3261,7 @@ const trTR = {
     }
   }
 };
-exports.trTR = trTR;
-const ukUA = {
+export const ukUA = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3389,8 +3343,7 @@ const ukUA = {
     }
   }
 };
-exports.ukUA = ukUA;
-const urPK = {
+export const urPK = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3463,8 +3416,7 @@ const urPK = {
     }
   }
 };
-exports.urPK = urPK;
-const viVN = {
+export const viVN = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3537,8 +3489,7 @@ const viVN = {
     }
   }
 };
-exports.viVN = viVN;
-const zhCN = {
+export const zhCN = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3589,8 +3540,7 @@ const zhCN = {
     }
   }
 };
-exports.zhCN = zhCN;
-const zhHK = {
+export const zhHK = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3641,8 +3591,7 @@ const zhHK = {
     }
   }
 };
-exports.zhHK = zhHK;
-const zhTW = {
+export const zhTW = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
@@ -3692,5 +3641,4 @@ const zhTW = {
       }
     }
   }
-};
-exports.zhTW = zhTW;
+};

package/locale/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/locale/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/locale/index.js",
   "types": "./index.d.ts"
 }

package/modern/Alert/Alert.js

@@ -60,7 +60,7 @@ const AlertRoot = styled(Paper, {
     [`& .${alertClasses.icon}`]: theme.vars ? {
       color: theme.vars.palette.Alert[`${color}IconColor`]
     } : {
-      color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
+      color: theme.palette[color].main
     }
   }, color && ownerState.variant === 'outlined' && {
     color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
@@ -68,7 +68,7 @@ const AlertRoot = styled(Paper, {
     [`& .${alertClasses.icon}`]: theme.vars ? {
       color: theme.vars.palette.Alert[`${color}IconColor`]
     } : {
-      color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
+      color: theme.palette[color].main
     }
   }, color && ownerState.variant === 'filled' && _extends({
     fontWeight: theme.typography.fontWeightMedium
@@ -77,7 +77,7 @@ const AlertRoot = styled(Paper, {
     backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
   } : {
     backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+    color: theme.palette.getContrastText(theme.palette[color].main)
   }));
 });
 const AlertIcon = styled('div', {

package/modern/Chip/Chip.js

@@ -168,7 +168,7 @@ const ChipRoot = styled('div', {
     color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
     [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   }, ownerState.onDelete && ownerState.color !== 'default' && {
     [`&.${chipClasses.focusVisible}`]: {
@@ -183,10 +183,10 @@ const ChipRoot = styled('div', {
   WebkitTapHighlightColor: 'transparent',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   },
   '&:active': {
     boxShadow: (theme.vars || theme).shadows[1]

package/modern/FilledInput/FilledInput.js

@@ -86,9 +86,13 @@ const FilledInputRoot = styled(InputBaseRoot, {
       // See https://github.com/mui/material-ui/issues/31766
       transform: 'scaleX(1) translateX(0)'
     },
-    [`&.${filledInputClasses.error}:after`]: {
-      borderBottomColor: (theme.vars || theme).palette.error.main,
-      transform: 'scaleX(1)' // error is always underlined in red
+    [`&.${filledInputClasses.error}`]: {
+      '&:before, &:after': {
+        borderBottomColor: (theme.vars || theme).palette.error.main
+      },
+      '&:focus-within:after': {
+        transform: 'scaleX(1)' // error is always underlined in red
+      }
     },
 
     '&:before': {
@@ -105,7 +109,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
       pointerEvents: 'none' // Transparent to the hover style.
     },
 
-    [`&:hover:not(.${filledInputClasses.disabled}):before`]: {
+    [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
     },
     [`&.${filledInputClasses.disabled}:before`]: {

package/modern/FormControl/FormControl.js

@@ -75,7 +75,7 @@ const FormControlRoot = styled('div', {
  * </FormControl>
  * ```
  *
- * ⚠️ Only one `InputBase` can be used within a FormControl because it create visual inconsistencies.
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
  * For instance, only one input can be focused at the same time, the state shouldn't be shared.
  */
 const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {

package/modern/Input/Input.js

@@ -70,9 +70,13 @@ const InputRoot = styled(InputBaseRoot, {
       // See https://github.com/mui/material-ui/issues/31766
       transform: 'scaleX(1) translateX(0)'
     },
-    [`&.${inputClasses.error}:after`]: {
-      borderBottomColor: (theme.vars || theme).palette.error.main,
-      transform: 'scaleX(1)' // error is always underlined in red
+    [`&.${inputClasses.error}`]: {
+      '&:before, &:after': {
+        borderBottomColor: (theme.vars || theme).palette.error.main
+      },
+      '&:focus-within:after': {
+        transform: 'scaleX(1)' // error is always underlined in red
+      }
     },
 
     '&:before': {
@@ -89,8 +93,8 @@ const InputRoot = styled(InputBaseRoot, {
       pointerEvents: 'none' // Transparent to the hover style.
     },
 
-    [`&:hover:not(.${inputClasses.disabled}):before`]: {
-      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
+    [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`