@mui/material 5.10.6 → 5.10.8

package/locale/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = 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.arEG = exports.amET = void 0;
+exports.zhTW = exports.zhHK = exports.zhCN = exports.viVN = 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 = {
   components: {
     MuiBreadcrumbs: {
@@ -166,6 +166,87 @@ const arEG = {
   }
 };
 exports.arEG = arEG;
+const arSA = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'إظهار المسار'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال إلى الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        },
+        labelRowsPerPage: 'عدد الصفوف في الصفحة:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} ${value !== 1 ? 'نجوم' : 'نجمة'}`,
+        emptyLabelText: 'فارغ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'مسح',
+        closeText: 'إغلاق',
+        loadingText: 'جار التحميل...',
+        noOptionsText: 'لا توجد خيارات',
+        openText: 'فتح'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'إغلاق'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'التنقل عبر الصفحات',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'الانتقال إلى '} صفحة ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال الي الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        }
+      }
+    }
+  }
+};
+exports.arSA = arSA;
 const arSD = {
   components: {
     MuiBreadcrumbs: {
@@ -3805,7 +3886,7 @@ const zhTW = {
 
           return '上一頁';
         },
-        labelRowsPerPage: '每行行數:',
+        labelRowsPerPage: '每頁行數:',
         labelDisplayedRows: ({
           from,
           to,

package/modern/Button/Button.js

@@ -1,7 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"],
-      _excluded2 = ["root"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -255,11 +254,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     variant
   });
 
-  const _useUtilityClasses = useUtilityClasses(ownerState),
-        {
-    root: classesRoot
-  } = _useUtilityClasses,
-        classes = _objectWithoutPropertiesLoose(_useUtilityClasses, _excluded2);
+  const classes = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -275,7 +270,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
 
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
-    className: clsx(contextProps.className, classesRoot, className),
+    className: clsx(contextProps.className, classes.root, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,

package/modern/Checkbox/Checkbox.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
+const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -80,7 +81,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate = false,
     indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
     inputProps,
-    size = 'medium'
+    size = 'medium',
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -106,7 +108,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
       fontSize: indeterminateIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -135,6 +138,11 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/modern/Chip/chipClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getChipUtilityClass(slot) {
   return generateUtilityClass('MuiChip', slot);
 }
-const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 export default chipClasses;

package/modern/DialogContentText/DialogContentText.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children"];
+const _excluded = ["children", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -33,7 +34,10 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     name: 'MuiDialogContentText'
   });
 
-  const ownerState = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    className
+  } = props,
+        ownerState = _objectWithoutPropertiesLoose(props, _excluded);
 
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(DialogContentTextRoot, _extends({
@@ -41,7 +45,8 @@ const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentTe
     variant: "body1",
     color: "text.secondary",
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: clsx(classes.root, className)
   }, props, {
     classes: classes
   }));
@@ -64,6 +69,11 @@ process.env.NODE_ENV !== "production" ? DialogContentText.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Fab/Fab.js

@@ -9,7 +9,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -22,12 +22,14 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
-  return composeClasses(slots, getFabUtilityClass, classes);
+  const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
 };
 
 const FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
   slot: 'Root',
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   overridesResolver: (props, styles) => {
     const {
       ownerState
@@ -149,6 +151,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref
   }, other, {
+    classes: classes,
     children: children
   }));
 });

package/modern/InputLabel/InputLabel.js

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableAnimation", "margin", "shrink", "variant"];
+const _excluded = ["disableAnimation", "margin", "shrink", "variant", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
@@ -110,7 +111,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
 
   const {
     disableAnimation = false,
-    shrink: shrinkProp
+    shrink: shrinkProp,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -140,7 +142,8 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   return /*#__PURE__*/_jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -163,6 +166,11 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/modern/ListItemButton/ListItemButton.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"];
+const _excluded = ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -115,7 +115,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     disableGutters = false,
     divider = false,
     focusVisibleClassName,
-    selected = false
+    selected = false,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -153,7 +154,8 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       href: other.href || other.to,
       component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-      ownerState: ownerState
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes,
       children: children
@@ -192,6 +194,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/MenuItem/MenuItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex"];
+const _excluded = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -138,7 +138,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters = false,
     focusVisibleClassName,
     role = 'menuitem',
-    tabIndex: tabIndexProp
+    tabIndex: tabIndexProp,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -179,7 +180,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      className: clsx(classes.root, className)
     }, other, {
       ownerState: ownerState,
       classes: classes
@@ -211,6 +213,11 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/modern/Popover/Popover.js

@@ -321,6 +321,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       }, PaperProps, {
         ref: handlePaperRef,
         className: clsx(classes.paper, PaperProps.className),
+        ownerState: ownerState,
         children: children
       }))
     }))

package/modern/Radio/Radio.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size"];
+const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -87,7 +88,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     icon = defaultIcon,
     name: nameProp,
     onChange: onChangeProp,
-    size = 'medium'
+    size = 'medium',
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -125,7 +127,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: name,
     checked: checked,
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes
@@ -152,6 +155,11 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/modern/StepLabel/StepLabel.js

@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
     root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-    labelContainer: ['labelContainer']
+    labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel']
   };
   return composeClasses(slots, getStepLabelUtilityClass, classes);
 };
@@ -77,7 +77,6 @@ const StepLabelLabel = styled('span', {
     fontWeight: 500
   },
   [`&.${stepLabelClasses.alternativeLabel}`]: {
-    textAlign: 'center',
     marginTop: 16
   },
   [`&.${stepLabelClasses.error}`]: {
@@ -105,7 +104,10 @@ const StepLabelLabelContainer = styled('span', {
   theme
 }) => ({
   width: '100%',
-  color: (theme.vars || theme).palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary,
+  [`&.${stepLabelClasses.alternativeLabel}`]: {
+    textAlign: 'center'
+  }
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = useThemeProps({

package/modern/SvgIcon/SvgIcon.js

@@ -50,7 +50,7 @@ const SvgIconRoot = styled('svg', {
     inherit: 'inherit',
     small: theme.typography?.pxToRem?.(20) || '1.25rem',
     medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875'
+    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
   color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
@@ -97,13 +97,13 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
     focusable: "false",
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
   }, more, other, {
+    ownerState: ownerState,
     children: [children, titleAccess ? /*#__PURE__*/_jsx("title", {
       children: titleAccess
     }) : null]

package/modern/Tooltip/Tooltip.js

@@ -463,7 +463,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
   const handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
 
-  if (title === '') {
+  if (typeof title !== 'number' && !title) {
     open = false;
   }
 
@@ -799,11 +799,9 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
-   * Tooltip title. Zero-length titles string are never displayed.
+   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
-  title: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .node.isRequired,
+  title: PropTypes.node,
 
   /**
    * The component used for the transition.

package/modern/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/TrapFocus';
+export { default } from '@mui/base/FocusTrap';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.6
+/** @license MUI v5.10.8
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/locale/index.js

@@ -158,6 +158,86 @@ export const arEG = {
     }
   }
 };
+export const arSA = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'إظهار المسار'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال إلى الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        },
+        labelRowsPerPage: 'عدد الصفوف في الصفحة:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} من ${count !== -1 ? count : ` أكثر من${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} ${value !== 1 ? 'نجوم' : 'نجمة'}`,
+        emptyLabelText: 'فارغ'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'مسح',
+        closeText: 'إغلاق',
+        loadingText: 'جار التحميل...',
+        noOptionsText: 'لا توجد خيارات',
+        openText: 'فتح'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'إغلاق'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'التنقل عبر الصفحات',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'الانتقال إلى '} صفحة ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'الانتقال إلى الصفحة الأولى';
+          }
+
+          if (type === 'last') {
+            return 'الانتقال الي الصفحة الأخيرة';
+          }
+
+          if (type === 'next') {
+            return 'الانتقال إلى الصفحة التالية';
+          } // if (type === 'previous') {
+
+
+          return 'الانتقال إلى الصفحة السابقة';
+        }
+      }
+    }
+  }
+};
 export const arSD = {
   components: {
     MuiBreadcrumbs: {
@@ -3752,7 +3832,7 @@ export const zhTW = {
 
           return '上一頁';
         },
-        labelRowsPerPage: '每行行數:',
+        labelRowsPerPage: '每頁行數:',
         labelDisplayedRows: ({
           from,
           to,

package/modern/styles/CssVarsProvider.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 
 const shouldSkipGeneratingVar = keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 
@@ -26,6 +27,7 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar
+  shouldSkipGeneratingVar,
+  excludeVariablesFromRoot
 });
 export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };

package/modern/styles/excludeVariablesFromRoot.js

@@ -0,0 +1,6 @@
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+
+export default excludeVariablesFromRoot;