@mui/material 5.15.12 → 5.15.13

package/Alert/Alert.d.ts

@@ -33,7 +33,7 @@ export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
   }
 >;
 
-export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
+export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertSlotsAndSlotProps {
   /**
    * The action to display. It renders after the message, at the end of the alert.
    */
@@ -133,4 +133,4 @@ export interface AlertOwnerState extends AlertProps {}
  * - [Alert API](https://mui.com/material-ui/api/alert/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function Alert(props: AlertProps & AlertSlotsAndSlotProps): JSX.Element;
+export default function Alert(props: AlertProps): JSX.Element;

package/Autocomplete/Autocomplete.js

@@ -554,6 +554,63 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
   const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
   const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
+  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+    as: PopperComponent,
+    disablePortal: disablePortal,
+    style: {
+      width: anchorEl ? anchorEl.clientWidth : null
+    },
+    ownerState: ownerState,
+    role: "presentation",
+    anchorEl: anchorEl,
+    open: popupOpen
+  }, popperSlotProps, {
+    className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+    children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
+      ownerState: ownerState,
+      as: PaperComponent
+    }, paperSlotProps, {
+      className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+      children: children
+    }))
+  }));
+  let autocompletePopper = null;
+  if (!loading && groupedOptions.length > 0) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+      as: ListboxComponent,
+      className: classes.listbox,
+      ownerState: ownerState
+    }, otherListboxProps, ListboxProps, {
+      ref: combinedListboxRef,
+      children: groupedOptions.map((option, index) => {
+        if (groupBy) {
+          return renderGroup({
+            key: option.key,
+            group: option.group,
+            children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+          });
+        }
+        return renderListOption(option, index);
+      })
+    })));
+  } else if (loading && groupedOptions.length === 0) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
+      className: classes.loading,
+      ownerState: ownerState,
+      children: loadingText
+    }));
+  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+      className: classes.noOptions,
+      ownerState: ownerState,
+      role: "presentation",
+      onMouseDown: event => {
+        // Prevent input blur when interacting with the "no options" content
+        event.preventDefault();
+      },
+      children: noOptionsText
+    }));
+  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -603,55 +660,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-      as: PopperComponent,
-      disablePortal: disablePortal,
-      style: {
-        width: anchorEl ? anchorEl.clientWidth : null
-      },
-      ownerState: ownerState,
-      role: "presentation",
-      anchorEl: anchorEl,
-      open: popupOpen
-    }, popperSlotProps, {
-      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
-        ownerState: ownerState,
-        as: PaperComponent
-      }, paperSlotProps, {
-        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
-          className: classes.loading,
-          ownerState: ownerState,
-          children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
-          className: classes.noOptions,
-          ownerState: ownerState,
-          role: "presentation",
-          onMouseDown: event => {
-            // Prevent input blur when interacting with the "no options" content
-            event.preventDefault();
-          },
-          children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-          as: ListboxComponent,
-          className: classes.listbox,
-          ownerState: ownerState
-        }, otherListboxProps, ListboxProps, {
-          ref: combinedListboxRef,
-          children: groupedOptions.map((option, index) => {
-            if (groupBy) {
-              return renderGroup({
-                key: option.key,
-                group: option.group,
-                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
-              });
-            }
-            return renderListOption(option, index);
-          })
-        })) : null]
-      }))
-    })) : null]
+    })), anchorEl ? autocompletePopper : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.13
+
+<!-- generated comparing v5.15.12..master -->
+
+_Mar 12, 2024_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highights ✨
+
+- The Material UI free Checkout template got a design uplift (#41447) @zanivan
+
+### `@mui/material@5.15.13`
+
+- [Alert] Add `slots` and `slotProps` type to theme (#41324) @sai6855
+- [Autocomplete] Fix the options list being added to the DOM in `freeSolo` mode even when there are no options, causing style problems (#41300) @rakeshmusturi
+- Add `paperChannel` token (#41447) @siriwatknp
+- [Switch] Convert to support CSS extraction (#41367) @alexfauquette
+- [Tooltip] Support event handlers with extra parameters (#41320) @LukasTy
+
+### `@mui/system@5.15.13`
+
+- [RtlProvider] Add component & hook (#41241) @mnajdova
+
+### `@mui/utils@5.15.13`
+
+- [utils] Fix visually hidden styles' margin unit (#41477) @michaldudak
+
+### `@mui/codemod@5.15.13`
+
+- Fix merging of slotProps and componentProps (#41323) @sai6855
+
+### `@mui/base@5.0.0-beta.39`
+
+- [material-ui][joy-ui][Autocomplete] Keep in sync highlighted index when the option still exists (#41306) @CGNonofr
+- [FormControl] Export `FormControlOwnerState` type from index (#41287) @michaeldfoley
+- [material-ui][TextareaAutosize] Fix inline style not getting applied (#41369) @ZeeshanTamboli
+
+### `@pigment-css/react@0.0.2`
+
+- Handle more scenarios while transforming sx prop (#41372) @brijeshb42
+- Improve testing of fixtures (#41389) @brijeshb42
+- Fix `keyframes` serialize styles error (#41395) @siriwatknp
+- Use class selector instead of class value (#41442) @brijeshb42
+- [next] Warn about unsupported turbo mode in Next.js (#41445) @brijeshb42
+
+### Docs
+
+- [material-ui] Refine checkout template (#40967) @zanivan
+- [material-ui] Add docs for complementary List components (#41329) @anle9650
+- [material-ui] Add docs for complementary Dialog components (#41313) @jwithington
+- [material-ui] Fix Templates live preview link (#41467) @danilo-leal
+- [material-ui] Polish out the templates page (#41468) @zanivan
+- [material-ui] Adjust the Templates card design (#41450) @danilo-leal
+- [joy-ui] Remove unnecessary styles in color inversion footer demo (#41419) @cipherlogs
+- [joy-ui] Update case studies chip background color (#41413) @cipherlogs
+- [joy-ui] Remove wrong CSS prop from the Sign-in-side template (#41383) @cipherlogs
+- [joy-ui] Fix broken link on the Color Inversion page (#41407) @cipherlogs
+- [pigment] Add example and guide section (#41249) @siriwatknp
+- [pigment-css] Brand name nonbreaking space (#41438) @oliviertassinari
+- [pigment-css] Fix import on the README (#41411) @danilo-leal
+- [pigment-css] Edit starter template links on README (#41409) @danilo-leal
+- [pigment-css] Tweak the examples and edit READMEs (#41408) @danilo-leal
+- [pigment-css] Adjust the bit about CSS vars on the README (#41463) @danilo-leal
+- Finish brand name fixes #41438 @oliviertassinari
+- Remove noreferrer @oliviertassinari
+- Fix v4 docs <b> appearing in notifications (#41390) @peterwangsc
+- Update GitHub project links (#41370) @danilo-leal
+
+### Core
+
+- [pigment] Make all Pigment CSS packages public (#41404) @brijeshb42
+- [pigment] Rename directories to match package names (#41453) @brijeshb42
+- [pigment-css] Example fix leading spaces (#41439) @oliviertassinari
+- [code-infra] Add short note about e2e-website workflow schedule (#41355) @Janpot
+- [code-infra] Add alias for icon types (#41248) @Janpot
+- [code-infra] Reduce concurrency of typescript:ci further (#41392) @Janpot
+- [code-infra] Reduce concurrency for test_types ci job (#41385) @Janpot
+- [code-infra] Adapt API code generator to Base UI repo needs (#41475) @michaldudak
+- [docs-infra] Don't generate preview files for the templates (#41379) @mnajdova
+- [docs-infra] Fix pigment css apps path in the render mui demos script (#41476) @mnajdova
+- [docs-infra] move feedback to ESM (#41381) @alexfauquette
+- [docs-infra] Improve color contrast throughout (#41387) @danilo-leal
+- [docs-infra] Simplify Algolia crawler config (#41312) @oliviertassinari
+- [docs-infra] Adjust the tabs and layout selection design (#41084) @danilo-leal
+- [blog] Update the Base UI post with links to dedicated repo (#41358) @danilo-leal
+- [website] Update the Careers page role (#41384) @danilo-leal
+- [website] Compress about images @oliviertassinari
+- [website] Improve color contrast on the homepage (#41465) @danilo-leal
+- [examples] Add pigment-css-vite-ts starter example (#41196) @siriwatknp
+- [examples] Add pigment-css-nextjs-ts starter project (#41105) @siriwatknp
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @CGNonofr, @cipherlogs, @danilo-leal, @Janpot, @michaeldfoley, @mnajdova, @oliviertassinari, @peterwangsc, @rakeshmusturi, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli
+
 ## v5.15.12
 
 <!-- generated comparing v5.15.11..master -->
@@ -9,6 +101,10 @@ _Mar 5, 2024_
 A big thanks to the 21 contributors who made this release possible.
 This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
 
+### `@pigment-css/react@0.0.1`, `@pigment-css/nextjs-plugin@0.0.1`, `@pigment-css/vite-plugin@0.0.1`, & `@pigment-css/unplugin@0.0.1`
+
+- This is the first public release of our new zero-runtime CSS-in-JS library, Pigment CSS.
+
 ### `@mui/material@5.15.12`
 
 - &#8203;<!-- 52 -->Support props callback type in theme variants (#40946) @ZeeshanTamboli

package/Drawer/Drawer.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
@@ -119,8 +120,10 @@ const oppositeDirection = {
 export function isHorizontal(anchor) {
   return ['left', 'right'].indexOf(anchor) !== -1;
 }
-export function getAnchor(theme, anchor) {
-  return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
+export function getAnchor({
+  direction
+}, anchor) {
+  return direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
 
 /**
@@ -133,6 +136,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     name: 'MuiDrawer'
   });
   const theme = useTheme();
+  const isRtl = useRtl();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
@@ -166,7 +170,9 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   React.useEffect(() => {
     mounted.current = true;
   }, []);
-  const anchorInvariant = getAnchor(theme, anchorProp);
+  const anchorInvariant = getAnchor({
+    direction: isRtl ? 'rtl' : 'ltr'
+  }, anchorProp);
   const anchor = anchorProp;
   const ownerState = _extends({}, props, {
     anchor,

package/LinearProgress/LinearProgress.js

@@ -16,8 +16,8 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { keyframes, css } from '@mui/system';
 import { darken, lighten } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import capitalize from '../utils/capitalize';
-import useTheme from '../styles/useTheme';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
@@ -255,7 +255,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const rootProps = {};
   const inlineStyles = {
     bar1: {},
@@ -267,7 +267,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       rootProps['aria-valuemin'] = 0;
       rootProps['aria-valuemax'] = 100;
       let transform = value - 100;
-      if (theme.direction === 'rtl') {
+      if (isRtl) {
         transform = -transform;
       }
       inlineStyles.bar1.transform = `translateX(${transform}%)`;
@@ -278,7 +278,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
       let transform = (valueBuffer || 0) - 100;
-      if (theme.direction === 'rtl') {
+      if (isRtl) {
         transform = -transform;
       }
       inlineStyles.bar2.transform = `translateX(${transform}%)`;

package/Menu/Menu.js

@@ -11,10 +11,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import HTMLElementType from '@mui/utils/HTMLElementType';
+import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -89,8 +89,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const ownerState = _extends({}, props, {
     autoFocus,
     disableAutoFocusItem,
@@ -106,7 +105,9 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
   const menuListActionsRef = React.useRef(null);
   const handleEntering = (element, isAppearing) => {
     if (menuListActionsRef.current) {
-      menuListActionsRef.current.adjustStyleForScrollbar(element, theme);
+      menuListActionsRef.current.adjustStyleForScrollbar(element, {
+        direction: isRtl ? 'rtl' : 'ltr'
+      });
     }
     if (onEntering) {
       onEntering(element, isAppearing);

package/MenuList/MenuList.js

@@ -107,13 +107,15 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
     }
   }, [autoFocus]);
   React.useImperativeHandle(actions, () => ({
-    adjustStyleForScrollbar: (containerElement, theme) => {
+    adjustStyleForScrollbar: (containerElement, {
+      direction
+    }) => {
       // Let's ignore that piece of logic if users are already overriding the width
       // of the menu.
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
         const scrollbarSize = `${getScrollbarSize(ownerDocument(containerElement))}px`;
-        listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
+        listRef.current.style[direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }
       return listRef.current;

package/PaginationItem/PaginationItem.js

@@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
-import useTheme from '../styles/useTheme';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
@@ -234,9 +234,9 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     type,
     variant
   });
-  const theme = useTheme();
+  const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = theme.direction === 'rtl' ? {
+  const normalizedIcons = isRtl ? {
     previous: slots.next || components.next || NavigateNextIcon,
     next: slots.previous || components.previous || NavigateBeforeIcon,
     last: slots.first || components.first || FirstPageIcon,

package/Rating/Rating.js

@@ -11,7 +11,7 @@ import clamp from '@mui/utils/clamp';
 import visuallyHidden from '@mui/utils/visuallyHidden';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useTheme from '../styles/useTheme';
+import { useRtl } from '@mui/system/RtlProvider';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
 import Star from '../internal/svg-icons/Star';
 import StarBorder from '../internal/svg-icons/StarBorder';
@@ -300,7 +300,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     name: 'Rating'
   });
   const valueRounded = roundValueToPrecision(valueDerived, precision);
-  const theme = useTheme();
+  const isRtl = useRtl();
   const [{
     hover,
     focus
@@ -335,7 +335,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
       width: containerWidth
     } = rootNode.getBoundingClientRect();
     let percent;
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       percent = (right - event.clientX) / containerWidth;
     } else {
       percent = (event.clientX - left) / containerWidth;

package/Slider/Slider.js

@@ -11,9 +11,9 @@ import { isHostComponent, useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
+import { useRtl } from '@mui/system/RtlProvider';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import BaseSliderValueLabel from './SliderValueLabel';
@@ -371,8 +371,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     props: inputProps,
     name: 'MuiSlider'
   });
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const {
       'aria-label': ariaLabel,
       'aria-valuetext': ariaValuetext,

package/Switch/Switch.js

@@ -12,11 +12,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha, darken, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSwitch');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,9 +45,7 @@ const SwitchRoot = styled('span', {
     } = props;
     return [styles.root, ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'inline-flex',
   width: 34 + 12 * 2,
   height: 14 + 12 * 2,
@@ -62,26 +60,42 @@ const SwitchRoot = styled('span', {
   // For correct alignment with the text.
   '@media print': {
     colorAdjust: 'exact'
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: -8
-}, ownerState.edge === 'end' && {
-  marginRight: -8
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 24,
-  padding: 7,
-  [`& .${switchClasses.thumb}`]: {
-    width: 16,
-    height: 16
   },
-  [`& .${switchClasses.switchBase}`]: {
-    padding: 4,
-    [`&.${switchClasses.checked}`]: {
-      transform: 'translateX(16px)'
+  variants: [{
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -8
     }
-  }
-}));
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -8
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      width: 40,
+      height: 24,
+      padding: 7,
+      [`& .${switchClasses.thumb}`]: {
+        width: 16,
+        height: 16
+      },
+      [`& .${switchClasses.switchBase}`]: {
+        padding: 4,
+        [`&.${switchClasses.checked}`]: {
+          transform: 'translateX(16px)'
+        }
+      }
+    }
+  }]
+});
 const SwitchSwitchBase = styled(SwitchBase, {
   name: 'MuiSwitch',
   slot: 'SwitchBase',
@@ -122,32 +136,38 @@ const SwitchSwitchBase = styled(SwitchBase, {
     width: '300%'
   }
 }), ({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   '&:hover': {
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${switchClasses.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  },
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
     },
-    [`&.${switchClasses.disabled}`]: {
-      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
+    style: {
+      [`&.${switchClasses.checked}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${switchClasses.disabled}`]: {
+          color: theme.vars ? theme.vars.palette.Switch[`${color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.55)}`
+        }
+      },
+      [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
+        backgroundColor: (theme.vars || theme).palette[color].main
+      }
     }
-  },
-  [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }
+  }))]
 }));
 const SwitchTrack = styled('span', {
   name: 'MuiSwitch',

package/TabScrollButton/TabScrollButton.js

@@ -9,10 +9,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
@@ -66,8 +66,7 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       direction
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const ownerState = _extends({
     isRtl
   }, props);