@mui/lab 5.0.0-alpha.54 → 5.0.0-alpha.58

package/internal/svg-icons/ArrowRight.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Calendar.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Clock.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/DateRange.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Pen.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/internal/svg-icons/Time.d.ts

@@ -1,7 +1,7 @@
-declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-    muiName: string;
-};
-/**
- * @ignore - internal component.
- */
-export default _default;
+declare const _default: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+/**
+ * @ignore - internal component.
+ */
+export default _default;

package/legacy/CalendarPicker/CalendarPicker.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import MonthPicker from '../MonthPicker/MonthPicker';
 import { useCalendarState } from './useCalendarState';
 import { useDefaultDates, useUtils } from '../internal/pickers/hooks/useUtils';

package/legacy/CalendarPicker/PickersFadeTransitionGroup.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import Fade from '@mui/material/Fade';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersFadeTransitionGroup', ['root']);

package/legacy/CalendarPicker/PickersSlideTransition.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);

package/legacy/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Skeleton from '@mui/material/Skeleton';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCalendarPickerSkeletonUtilityClass(slot) {

package/legacy/ClockPicker/ClockNumber.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);

package/legacy/ClockPicker/ClockPicker.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import Clock from './Clock';
 import { pipe } from '../internal/pickers/utils';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';

package/legacy/DatePicker/DatePickerToolbar.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -6,7 +6,7 @@ var _Typography;
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';

package/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { alpha, styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import { DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { useUtils } from '../internal/pickers/hooks/useUtils';
 import PickersDay, { areDayPropsEqual } from '../PickersDay/PickersDay';

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -6,7 +6,7 @@ var _DateTimePickerToolba, _DateTimePickerToolba2;
 
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { generateUtilityClasses } from '@mui/base';
 import PickersToolbarText from '../internal/pickers/PickersToolbarText';
 import PickersToolbar from '../internal/pickers/PickersToolbar';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';

package/legacy/LoadingButton/LoadingButton.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -83,14 +83,18 @@ var LoadingButtonLoadingIndicator = styled('div', {
     position: 'absolute',
     visibility: 'visible',
     display: 'flex'
-  }, ownerState.loadingPosition === 'start' && {
+  }, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
     left: 14
+  }, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
+    left: 6
   }, ownerState.loadingPosition === 'center' && {
     left: '50%',
     transform: 'translate(-50%)',
     color: theme.palette.action.disabled
-  }, ownerState.loadingPosition === 'end' && {
+  }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
     right: 14
+  }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
+    right: 6
   }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
     position: 'relative',
     left: -10
@@ -120,13 +124,16 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps
       loadingIndicator = _props$loadingIndicat === void 0 ? LoadingIndicator : _props$loadingIndicat,
       _props$loadingPositio = props.loadingPosition,
       loadingPosition = _props$loadingPositio === void 0 ? 'center' : _props$loadingPositio,
-      other = _objectWithoutProperties(props, ["children", "disabled", "loading", "loadingIndicator", "loadingPosition"]);
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'text' : _props$variant,
+      other = _objectWithoutProperties(props, ["children", "disabled", "loading", "loadingIndicator", "loadingPosition", "variant"]);
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
     loading: loading,
     loadingIndicator: loadingIndicator,
-    loadingPosition: loadingPosition
+    loadingPosition: loadingPosition,
+    variant: variant
   });
 
   var classes = useUtilityClasses(ownerState);
@@ -134,6 +141,7 @@ var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps
     disabled: disabled || loading,
     ref: ref
   }, other, {
+    variant: variant,
     classes: classes,
     ownerState: ownerState,
     children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/_jsxs(React.Fragment, {
@@ -206,6 +214,12 @@ process.env.NODE_ENV !== "production" ? LoadingButton.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
 } : void 0;
 export default LoadingButton;

package/legacy/LoadingButton/loadingButtonClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getLoadingButtonUtilityClass(slot) {
   return generateUtilityClass('MuiLoadingButton', slot);
 }

package/legacy/Masonry/Masonry.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
 import { deepmerge, unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -172,72 +172,96 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
   });
 
   var classes = useUtilityClasses(ownerState);
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      var parentWidth = masonryRef.current.clientWidth;
-      var childWidth = masonryRef.current.firstChild.clientWidth;
-      var firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      var firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
-      var firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
-
-      if (parentWidth === 0 || childWidth === 0) {
-        return;
-      }
 
-      var currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
-      var columnHeights = new Array(currentNumberOfColumns).fill(0);
-      var skip = false;
-      masonryRef.current.childNodes.forEach(function (child) {
-        if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
-          return;
-        }
+  var handleResize = function handleResize(elements) {
+    if (!elements) {
+      return;
+    }
 
-        var childComputedStyle = window.getComputedStyle(child);
-        var childMarginTop = parseToNumber(childComputedStyle.marginTop);
-        var childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+    var masonry;
+    var masonryFirstChild;
+    var parentWidth;
+    var childWidth;
+
+    if (elements[0].target.className.includes(classes.root)) {
+      var _elements$, _masonryFirstChild, _masonryFirstChild$co, _masonryFirstChild2;
+
+      masonry = elements[0].target;
+      parentWidth = elements[0].contentRect.width;
+      masonryFirstChild = ((_elements$ = elements[1]) == null ? void 0 : _elements$.target) || masonry.firstChild;
+      childWidth = ((_masonryFirstChild = masonryFirstChild) == null ? void 0 : (_masonryFirstChild$co = _masonryFirstChild.contentRect) == null ? void 0 : _masonryFirstChild$co.width) || ((_masonryFirstChild2 = masonryFirstChild) == null ? void 0 : _masonryFirstChild2.clientWidth) || 0;
+    } else {
+      var _elements$2, _masonry$contentRect;
+
+      masonryFirstChild = elements[0].target;
+      childWidth = elements[0].contentRect.width;
+      masonry = ((_elements$2 = elements[1]) == null ? void 0 : _elements$2.target) || masonryFirstChild.parentElement;
+      parentWidth = ((_masonry$contentRect = masonry.contentRect) == null ? void 0 : _masonry$contentRect.width) || masonry.clientWidth;
+    }
 
-        var childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
+    if (parentWidth === 0 || childWidth === 0 || !masonry || !masonryFirstChild) {
+      return;
+    }
 
-        if (childHeight === 0) {
-          skip = true;
-          return;
-        } // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
+    var firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    var firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+    var firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
+    var currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    var columnHeights = new Array(currentNumberOfColumns).fill(0);
+    var skip = false;
+    masonry.childNodes.forEach(function (child) {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+        return;
+      }
 
+      var childComputedStyle = window.getComputedStyle(child);
+      var childMarginTop = parseToNumber(childComputedStyle.marginTop);
+      var childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
 
-        for (var i = 0; i < child.childNodes.length; i += 1) {
-          var nestedChild = child.childNodes[i];
+      var childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
+
+      if (childHeight === 0) {
+        skip = true;
+        return;
+      } // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
 
-          if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
-            skip = true;
-            break;
-          }
-        }
 
-        if (!skip) {
-          // find the current shortest column (where the current item will be placed)
-          var currentMinColumnIndex = columnHeights.indexOf(Math.min.apply(Math, _toConsumableArray(columnHeights)));
-          columnHeights[currentMinColumnIndex] += childHeight;
-          var order = currentMinColumnIndex + 1;
-          child.style.order = order;
+      for (var i = 0; i < child.childNodes.length; i += 1) {
+        var nestedChild = child.childNodes[i];
+
+        if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+          skip = true;
+          break;
         }
-      });
+      }
 
       if (!skip) {
-        setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
-        var numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-        setNumberOfLineBreaks(numOfLineBreaks);
+        // find the current shortest column (where the current item will be placed)
+        var currentMinColumnIndex = columnHeights.indexOf(Math.min.apply(Math, _toConsumableArray(columnHeights)));
+        columnHeights[currentMinColumnIndex] += childHeight;
+        var order = currentMinColumnIndex + 1;
+        child.style.order = order;
       }
-    }; // IE and old browsers are not supported
+    });
 
+    if (!skip) {
+      setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
+      var numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
+      setNumberOfLineBreaks(numOfLineBreaks);
+    }
+  };
+
+  var observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
+  React.useEffect(function () {
+    var resizeObserver = observer.current; // IE and old browsers are not supported
 
-    if (typeof ResizeObserver === 'undefined') {
+    if (resizeObserver === undefined) {
       return undefined;
     }
 
-    var resizeObserver = new ResizeObserver(handleResize);
     var container = masonryRef.current;
 
-    if (container) {
+    if (container && resizeObserver) {
       // only the masonry container and its first child are observed for resizing;
       // this might cause unforeseen problems in some use cases;
       resizeObserver.observe(container);
@@ -248,7 +272,7 @@ var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     }
 
     return function () {
-      resizeObserver.disconnect();
+      return resizeObserver ? resizeObserver.disconnect() : {};
     };
   }, [columns, spacing, children]);
   var handleRef = useForkRef(ref, masonryRef);

package/legacy/Masonry/masonryClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getMasonryUtilityClass(slot) {
   return generateUtilityClass('MuiMasonry', slot);
 }

package/legacy/MonthPicker/MonthPicker.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import PickersMonth from './PickersMonth';
 import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +31,8 @@ var MonthPickerRoot = styled('div', {
   width: 310,
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch'
+  alignContent: 'stretch',
+  margin: '0 4px'
 });
 var MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, ref) {
   var props = useThemeProps({

package/legacy/MonthPicker/PickersMonth.js

@@ -1,11 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/core';
+import { styled, alpha } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/base';
 import { onSpaceOrEnter } from '../internal/pickers/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 var classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
@@ -13,29 +13,34 @@ var PickersMonthRoot = styled(Typography, {
   skipSx: true
 })(function (_ref) {
   var theme = _ref.theme;
-  return _defineProperty({
+  return _extends({
     flex: '1 0 33.33%',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    color: 'unset',
+    backgroundColor: 'transparent',
+    border: 0,
+    outline: 0
+  }, theme.typography.subtitle1, _defineProperty({
+    margin: '8px 0',
+    height: 36,
+    borderRadius: 18,
     cursor: 'pointer',
-    height: 64,
-    outline: 0,
-    transition: theme.transitions.create('font-size', {
-      duration: '100ms'
-    }),
-    '&:focus': {
-      color: theme.palette.primary.main,
-      fontWeight: theme.typography.fontWeightMedium
+    '&:focus, &:hover': {
+      backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
     },
     '&:disabled': {
       pointerEvents: 'none',
       color: theme.palette.text.secondary
     }
   }, "&.".concat(classes.selected), {
-    color: theme.palette.primary.main,
-    fontWeight: theme.typography.fontWeightMedium
-  });
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.main,
+    '&:focus, &:hover': {
+      backgroundColor: theme.palette.primary.dark
+    }
+  }));
 });
 /**
  * @ignore - do not document.

package/legacy/PickersDay/PickersDay.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ButtonBase from '@mui/material/ButtonBase';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import { useTheme, alpha, styled, useThemeProps } from '@mui/material/styles';
 import { useForkRef } from '@mui/material/utils';
 import { useUtils } from '../internal/pickers/hooks/useUtils';

package/legacy/TabPanel/TabPanel.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { getTabPanelUtilityClass } from './tabPanelClasses';
 import { getPanelId, getTabId, useTabContext } from '../TabContext';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/TabPanel/tabPanelClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getTabPanelUtilityClass(slot) {
   return generateUtilityClass('MuiTabPanel', slot);
 }

package/legacy/TimePicker/TimePickerToolbar.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import clsx from 'clsx';
 import { useTheme, styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
 import PickersToolbarText from '../internal/pickers/PickersToolbarText';
 import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
 import PickersToolbar from '../internal/pickers/PickersToolbar';

package/legacy/Timeline/Timeline.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { capitalize } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import TimelineContext from './TimelineContext';
 import { getTimelineUtilityClass } from './timelineClasses';

package/legacy/Timeline/timelineClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getTimelineUtilityClass(slot) {
   return generateUtilityClass('MuiTimeline', slot);
 }

package/legacy/TimelineConnector/TimelineConnector.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getTimelineConnectorUtilityClass } from './timelineConnectorClasses';
 import { jsx as _jsx } from "react/jsx-runtime";

package/legacy/TimelineConnector/timelineConnectorClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getTimelineConnectorUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineConnector', slot);
 }

package/legacy/TimelineContent/TimelineContent.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { capitalize } from '@mui/material/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import Typography from '@mui/material/Typography';
 import TimelineContext from '../Timeline/TimelineContext';
 import { getTimelineContentUtilityClass } from './timelineContentClasses';

package/legacy/TimelineContent/timelineContentClasses.js

@@ -1,4 +1,4 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/core';
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getTimelineContentUtilityClass(slot) {
   return generateUtilityClass('MuiTimelineContent', slot);
 }