@mui/lab 5.0.0-alpha.53 → 5.0.0-alpha.57

package/modern/Masonry/Masonry.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["children", "className", "component", "columns", "spacing", "defaultColumns", "defaultHeight", "defaultSpacing"];
-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';
@@ -11,6 +11,9 @@ import * as React from 'react';
 import { getMasonryUtilityClass } from './masonryClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const parseToNumber = val => {
+  return Number(val.replace('px', ''));
+};
 
 const useUtilityClasses = ownerState => {
   const {
@@ -20,44 +23,6 @@ const useUtilityClasses = ownerState => {
     root: ['root']
   };
   return composeClasses(slots, getMasonryUtilityClass, classes);
-}; // compute base for responsive values; e.g.,
-// [1,2,3] => {xs: true, sm: true, md: true}
-// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
-
-
-const computeBreakpointsBase = (breakpoints, prop) => {
-  const base = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(breakpoints.values).forEach((breakpoint, i, arr) => {
-      if (i < arr.length) {
-        base[breakpoint] = true;
-      }
-    });
-  } else {
-    Object.keys(breakpoints.values).forEach(breakpoint => {
-      if (prop[breakpoint] != null) {
-        base[breakpoint] = true;
-      }
-    });
-  }
-
-  return base;
-}; // if prop is an array, convert to object; e.g.,
-// (base: {xs: true, sm: true, md: true}, prop: [1,2,3]) => {xs: 1, sm: 2, md: 3}
-
-
-const validatePropValues = (base, prop) => {
-  const values = {};
-
-  if (Array.isArray(prop)) {
-    Object.keys(base).forEach((breakpoint, i) => {
-      values[breakpoint] = prop[i];
-    });
-    return values;
-  }
-
-  return prop;
 };
 
 export const getStyle = ({
@@ -95,10 +60,9 @@ export const getStyle = ({
     return _extends({}, styles, stylesSSR);
   }
 
-  const spacingBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.spacing);
   const spacingValues = resolveBreakpointValues({
-    values: validatePropValues(spacingBreakpointsBase, ownerState.spacing),
-    base: spacingBreakpointsBase
+    values: ownerState.spacing,
+    breakpoints: theme.breakpoints.values
   });
   const transformer = createUnarySpacing(theme);
 
@@ -118,10 +82,9 @@ export const getStyle = ({
   styles = deepmerge(styles, handleBreakpoints({
     theme
   }, spacingValues, spacingStyleFromPropValue));
-  const columnBreakpointsBase = computeBreakpointsBase(theme.breakpoints, ownerState.columns);
   const columnValues = resolveBreakpointValues({
-    values: validatePropValues(columnBreakpointsBase, ownerState.columns),
-    base: columnBreakpointsBase
+    values: ownerState.columns,
+    breakpoints: theme.breakpoints.values
   });
 
   const columnStyleFromPropValue = propValue => {
@@ -203,72 +166,92 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
-  React.useEffect(() => {
-    const handleResize = () => {
-      const parentWidth = masonryRef.current.clientWidth;
-      const childWidth = masonryRef.current.firstChild.clientWidth;
-      const firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);
-      const firstChildMarginLeft = Number(firstChildComputedStyle.marginLeft.replace('px', ''));
-      const firstChildMarginRight = Number(firstChildComputedStyle.marginRight.replace('px', ''));
-
-      if (parentWidth === 0 || childWidth === 0) {
-        return;
-      }
 
-      const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
-      const columnHeights = new Array(currentNumberOfColumns).fill(0);
-      let skip = false;
-      masonryRef.current.childNodes.forEach(child => {
-        if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
-          return;
-        }
+  const handleResize = elements => {
+    if (!elements) {
+      return;
+    }
 
-        const childComputedStyle = window.getComputedStyle(child);
-        const childMarginTop = Number(childComputedStyle.marginTop.replace('px', ''));
-        const childMarginBottom = Number(childComputedStyle.marginBottom.replace('px', '')); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
+    let masonry;
+    let masonryFirstChild;
+    let parentWidth;
+    let childWidth;
+
+    if (elements[0].target.className.includes(classes.root)) {
+      masonry = elements[0].target;
+      parentWidth = elements[0].contentRect.width;
+      masonryFirstChild = elements[1]?.target || masonry.firstChild;
+      childWidth = masonryFirstChild?.contentRect?.width || masonryFirstChild?.clientWidth || 0;
+    } else {
+      masonryFirstChild = elements[0].target;
+      childWidth = elements[0].contentRect.width;
+      masonry = elements[1]?.target || masonryFirstChild.parentElement;
+      parentWidth = masonry.contentRect?.width || masonry.clientWidth;
+    }
 
-        const childHeight = child.clientHeight ? Math.ceil(child.clientHeight) + 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
+    const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
+    const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
+    const currentNumberOfColumns = Math.round(parentWidth / (childWidth + firstChildMarginLeft + firstChildMarginRight));
+    const columnHeights = new Array(currentNumberOfColumns).fill(0);
+    let skip = false;
+    masonry.childNodes.forEach(child => {
+      if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
+        return;
+      }
 
+      const childComputedStyle = window.getComputedStyle(child);
+      const childMarginTop = parseToNumber(childComputedStyle.marginTop);
+      const childMarginBottom = parseToNumber(childComputedStyle.marginBottom); // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
 
-        for (let i = 0; i < child.childNodes.length; i += 1) {
-          const nestedChild = child.childNodes[i];
+      const 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)
-          const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
-          columnHeights[currentMinColumnIndex] += childHeight;
-          const order = currentMinColumnIndex + 1;
-          child.style.order = order;
+      for (let i = 0; i < child.childNodes.length; i += 1) {
+        const nestedChild = child.childNodes[i];
+
+        if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
+          skip = true;
+          break;
         }
-      });
+      }
 
       if (!skip) {
-        setMaxColumnHeight(Math.max(...columnHeights));
-        const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
-        setNumberOfLineBreaks(numOfLineBreaks);
+        // find the current shortest column (where the current item will be placed)
+        const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
+        columnHeights[currentMinColumnIndex] += childHeight;
+        const order = currentMinColumnIndex + 1;
+        child.style.order = order;
       }
-    }; // IE and old browsers are not supported
+    });
+
+    if (!skip) {
+      setMaxColumnHeight(Math.max(...columnHeights));
+      const numOfLineBreaks = currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0;
+      setNumberOfLineBreaks(numOfLineBreaks);
+    }
+  };
 
+  const observer = React.useRef(typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize));
+  React.useEffect(() => {
+    const resizeObserver = observer.current; // IE and old browsers are not supported
 
-    if (typeof ResizeObserver === 'undefined') {
-      return null;
+    if (resizeObserver === undefined) {
+      return undefined;
     }
 
-    const resizeObserver = new ResizeObserver(handleResize);
     const 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);
@@ -278,10 +261,8 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       }
     }
 
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [columns, spacing]);
+    return () => resizeObserver ? resizeObserver.disconnect() : {};
+  }, [columns, spacing, children]);
   const handleRef = useForkRef(ref, masonryRef);
   const lineBreakStyle = {
     flexBasis: '100%',
@@ -367,6 +348,6 @@ process.env.NODE_ENV !== "production" ? Masonry.propTypes
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Masonry;

package/modern/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/modern/MobileDatePicker/MobileDatePicker.js

@@ -152,6 +152,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -333,6 +334,7 @@ process.env.NODE_ENV !== "production" ? MobileDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -200,6 +200,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -380,6 +381,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -169,6 +169,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -402,6 +403,7 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/modern/MonthPicker/MonthPicker.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "date", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange"];
+const _excluded = ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "onMonthChange", "readOnly"];
 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";
@@ -32,7 +32,8 @@ const MonthPickerRoot = styled('div', {
   width: 310,
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch'
+  alignContent: 'stretch',
+  margin: '0 4px'
 });
 const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps, ref) {
   const props = useThemeProps({
@@ -43,12 +44,14 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
   const {
     className,
     date,
+    disabled,
     disableFuture,
     disablePast,
     maxDate,
     minDate,
     onChange,
-    onMonthChange
+    onMonthChange,
+    readOnly
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -67,6 +70,10 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
   };
 
   const onMonthSelect = month => {
+    if (readOnly) {
+      return;
+    }
+
     const newDate = utils.setMonth(date || now, month);
     onChange(newDate, 'finish');
 
@@ -87,7 +94,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
         value: monthNumber,
         selected: monthNumber === currentMonth,
         onSelect: onMonthSelect,
-        disabled: shouldDisableMonth(month),
+        disabled: disabled || shouldDisableMonth(month),
         children: monthText
       }, monthText);
     })
@@ -116,6 +123,11 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes
    */
   date: PropTypes.any,
 
+  /**
+   * If `true` picker is disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * If `true` future days are disabled.
    */
@@ -146,10 +158,15 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes
    */
   onMonthChange: PropTypes.func,
 
+  /**
+   * If `true` picker is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 /**
  *

package/modern/MonthPicker/PickersMonth.js

@@ -1,11 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["disabled", "onSelect", "selected", "value"];
 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";
 const classes = generateUtilityClasses('PrivatePickersMonth', ['root', 'selected']);
@@ -13,28 +13,33 @@ const PickersMonthRoot = styled(Typography, {
   skipSx: true
 })(({
   theme
-}) => ({
+}) => _extends({
   flex: '1 0 33.33%',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
+  color: 'unset',
+  backgroundColor: 'transparent',
+  border: 0,
+  outline: 0
+}, theme.typography.subtitle1, {
+  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
   },
   [`&.${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
+    }
   }
 }));
 /**

package/modern/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';
@@ -374,7 +374,7 @@ process.env.NODE_ENV !== "production" ? PickersDay.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * If `true`, renders as today date.

package/modern/StaticDatePicker/StaticDatePicker.js

@@ -121,6 +121,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -302,6 +303,7 @@ process.env.NODE_ENV !== "production" ? StaticDatePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -170,6 +170,7 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -348,6 +349,7 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -138,6 +138,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
 
   /**
    * If `true`, the picker and text field are disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
 
@@ -371,6 +372,7 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes
 
   /**
    * Make picker read only.
+   * @default false
    */
   readOnly: PropTypes.bool,
 

package/modern/TabPanel/TabPanel.js

@@ -5,7 +5,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";
@@ -91,7 +91,7 @@ process.env.NODE_ENV !== "production" ? TabPanel.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when

package/modern/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/modern/TimePicker/TimePickerToolbar.js

@@ -4,7 +4,7 @@ const _excluded = ["ampm", "ampmInClock", "date", "isLandscape", "isMobileKeyboa
 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/modern/Timeline/Timeline.js

@@ -5,7 +5,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';
@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? Timeline.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 /**
  *

package/modern/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/modern/TimelineConnector/TimelineConnector.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 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";
@@ -77,6 +77,6 @@ process.env.NODE_ENV !== "production" ? TimelineConnector.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default TimelineConnector;

package/modern/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/modern/TimelineContent/TimelineContent.js

@@ -6,7 +6,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';
@@ -94,6 +94,6 @@ process.env.NODE_ENV !== "production" ? TimelineContent.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default TimelineContent;

package/modern/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);
 }

package/modern/TimelineDot/TimelineDot.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { capitalize } from '@mui/material/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/core';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { getTimelineDotUtilityClass } from './timelineDotClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -116,7 +116,7 @@ process.env.NODE_ENV !== "production" ? TimelineDot.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
 
   /**
    * The dot can appear filled or outlined.