@mui/material 5.6.4 → 5.8.1

package/node/StepIcon/StepIcon.js

@@ -66,15 +66,15 @@ const StepIconRoot = (0, _styled.default)(_SvgIcon.default, {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest
   }),
-  color: theme.palette.text.disabled,
+  color: (theme.vars || theme).palette.text.disabled,
   [`&.${_stepIconClasses.default.completed}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${_stepIconClasses.default.active}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${_stepIconClasses.default.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const StepIconText = (0, _styled.default)('text', {
@@ -84,7 +84,7 @@ const StepIconText = (0, _styled.default)('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.primary.contrastText,
+  fill: (theme.vars || theme).palette.primary.contrastText,
   fontSize: theme.typography.caption.fontSize,
   fontFamily: theme.typography.fontFamily
 }));

package/node/StepLabel/StepLabel.js

@@ -94,11 +94,11 @@ const StepLabelLabel = (0, _styled.default)('span', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_stepLabelClasses.default.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
   [`&.${_stepLabelClasses.default.completed}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
@@ -106,7 +106,7 @@ const StepLabelLabel = (0, _styled.default)('span', {
     marginTop: 16
   },
   [`&.${_stepLabelClasses.default.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const StepLabelIconContainer = (0, _styled.default)('span', {
@@ -130,7 +130,7 @@ const StepLabelLabelContainer = (0, _styled.default)('span', {
   theme
 }) => ({
   width: '100%',
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/node/Stepper/StepperContext.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.useStepperContext = useStepperContext;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -12,13 +13,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
 const StepperContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepperContext.displayName = 'StepperContext';
 }
+/**
+ * Returns the current StepperContext or an empty object if no StepperContext
+ * has been defined in the component tree.
+ */
+
+
+function useStepperContext() {
+  return React.useContext(StepperContext);
+}
 
 var _default = StepperContext;
 exports.default = _default;

package/node/Stepper/index.js

@@ -6,8 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  stepperClasses: true
+  stepperClasses: true,
+  StepperContext: true
 };
+Object.defineProperty(exports, "StepperContext", {
+  enumerable: true,
+  get: function () {
+    return _StepperContext.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -37,6 +44,20 @@ Object.keys(_stepperClasses).forEach(function (key) {
   });
 });
 
+var _StepperContext = _interopRequireWildcard(require("./StepperContext"));
+
+Object.keys(_StepperContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _StepperContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StepperContext[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/node/SvgIcon/SvgIcon.js

@@ -60,7 +60,7 @@ const SvgIconRoot = (0, _styled.default)('svg', {
   theme,
   ownerState
 }) => {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
 
   return {
     userSelect: 'none',
@@ -79,9 +79,9 @@ const SvgIconRoot = (0, _styled.default)('svg', {
       large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-      action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
-      disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/node/Tab/Tab.js

@@ -104,23 +104,23 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
     opacity: 1
   },
   [`&.${_tabClasses.default.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.textColor === 'primary' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${_tabClasses.default.selected}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${_tabClasses.default.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }
 }, ownerState.textColor === 'secondary' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${_tabClasses.default.selected}`]: {
-    color: theme.palette.secondary.main
+    color: (theme.vars || theme).palette.secondary.main
   },
   [`&.${_tabClasses.default.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }
 }, ownerState.fullWidth && {
   flexShrink: 1,

package/node/Table/Table.js

@@ -65,7 +65,7 @@ const TableRoot = (0, _styled.default)('table', {
   borderSpacing: 0,
   '& caption': (0, _extends2.default)({}, theme.typography.body2, {
     padding: theme.spacing(2),
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
   })

package/node/TablePagination/TablePagination.js

@@ -59,7 +59,7 @@ const TablePaginationRoot = (0, _styled.default)(_TableCell.default, {
   theme
 }) => ({
   overflow: 'auto',
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   fontSize: theme.typography.pxToRem(14),
   // Increase the specificity to override TableCell.
   '&:last-child': {

package/node/TableRow/TableRow.js

@@ -69,12 +69,12 @@ const TableRowRoot = (0, _styled.default)('tr', {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0,
   [`&.${_tableRowClasses.default.hover}:hover`]: {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${_tableRowClasses.default.selected}`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
     }
   }
 }));

package/node/TableSortLabel/TableSortLabel.js

@@ -70,19 +70,19 @@ const TableSortLabelRoot = (0, _styled.default)(_ButtonBase.default, {
   flexDirection: 'inherit',
   alignItems: 'center',
   '&:focus': {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   },
   '&:hover': {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`& .${_tableSortLabelClasses.default.icon}`]: {
       opacity: 0.5
     }
   },
   [`&.${_tableSortLabelClasses.default.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     [`& .${_tableSortLabelClasses.default.icon}`]: {
       opacity: 1,
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     }
   }
 }));

package/node/Tabs/Tabs.js

@@ -180,7 +180,7 @@ const TabsScroller = (0, _styled.default)('div', {
   overflowX: 'hidden',
   width: '100%'
 }, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {
@@ -226,9 +226,9 @@ const TabsIndicator = (0, _styled.default)('span', {
   width: '100%',
   transition: theme.transitions.create()
 }, ownerState.indicatorColor === 'primary' && {
-  backgroundColor: theme.palette.primary.main
+  backgroundColor: (theme.vars || theme).palette.primary.main
 }, ownerState.indicatorColor === 'secondary' && {
-  backgroundColor: theme.palette.secondary.main
+  backgroundColor: (theme.vars || theme).palette.secondary.main
 }, ownerState.vertical && {
   height: '100%',
   width: 2,
@@ -240,7 +240,7 @@ const TabsScrollbarSize = (0, _styled.default)(_ScrollbarSize.default, {
 })({
   overflowX: 'auto',
   overflowY: 'hidden',
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {

package/node/ToggleButton/ToggleButton.js

@@ -67,35 +67,42 @@ const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   theme,
   ownerState
 }) => {
-  const selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  let selectedColorChannel;
+
+  if (theme.vars) {
+    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
+    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
+  }
+
   return (0, _extends2.default)({}, theme.typography.button, {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 11,
-    border: `1px solid ${theme.palette.divider}`,
-    color: theme.palette.action.active
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.fullWidth && {
     width: '100%'
   }, {
     [`&.${_toggleButtonClasses.default.disabled}`]: {
-      color: theme.palette.action.disabled,
-      border: `1px solid ${theme.palette.action.disabledBackground}`
+      color: (theme.vars || theme).palette.action.disabled,
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
     },
     '&:hover': {
       textDecoration: 'none',
       // Reset on mouse devices
-      backgroundColor: (0, _styles.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${_toggleButtonClasses.default.selected}`]: {
       color: selectedColor,
-      backgroundColor: (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity),
       '&:hover': {
-        backgroundColor: (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity)
+          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity)
         }
       }
     }

package/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -71,7 +71,7 @@ const ToggleButtonGroupRoot = (0, _styled.default)('div', {
   theme
 }) => (0, _extends2.default)({
   display: 'inline-flex',
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.orientation === 'vertical' && {
   flexDirection: 'column'
 }, ownerState.fullWidth && {

package/node/Tooltip/Tooltip.js

@@ -90,7 +90,7 @@ const TooltipPopper = (0, _styled.default)(_Popper.default, {
   ownerState,
   open
 }) => (0, _extends2.default)({
-  zIndex: theme.zIndex.tooltip,
+  zIndex: (theme.vars || theme).zIndex.tooltip,
   pointerEvents: 'none'
 }, !ownerState.disableInteractive && {
   pointerEvents: 'auto'
@@ -151,9 +151,9 @@ const TooltipTooltip = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  backgroundColor: (0, _system.alpha)(theme.palette.grey[700], 0.92),
-  borderRadius: theme.shape.borderRadius,
-  color: theme.palette.common.white,
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : (0, _system.alpha)(theme.palette.grey[700], 0.92),
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,
   padding: '4px 8px',
   fontSize: theme.typography.pxToRem(11),
@@ -219,7 +219,7 @@ const TooltipArrow = (0, _styled.default)('span', {
   /* = width / sqrt(2) = (length of the hypotenuse) */
   ,
   boxSizing: 'border-box',
-  color: (0, _system.alpha)(theme.palette.grey[700], 0.9),
+  color: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` : (0, _system.alpha)(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

package/node/className/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "unstable_ClassNameGenerator", {
   enumerable: true,
   get: function () {
-    return _className.unstable_ClassNameGenerator;
+    return _utils.unstable_ClassNameGenerator;
   }
 });
 
-var _className = require("@mui/base/className");
+var _utils = require("@mui/utils");

package/node/index.js

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

package/node/locale/index.js

@@ -89,26 +89,26 @@ const arEG = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
-        expandText: 'ظهر العنوان'
+        expandText: 'إظهار المسار'
       }
     },
     MuiTablePagination: {
       defaultProps: {
         getItemAriaLabel: type => {
           if (type === 'first') {
-            return 'امش للصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'امش للصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'امش للصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'امش للصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({
@@ -128,7 +128,7 @@ const arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'يتم التحميل…',
+        loadingText: 'جار التحميل...',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }
@@ -143,23 +143,23 @@ const arEG = {
         'aria-label': 'التنقل عبر الصفحات',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'امش إلى '} صفحة ${page}`;
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
           }
 
           if (type === 'first') {
-            return 'امش للصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'امش للصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'امش للصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'امش  للصفحة السابقة';
+          return 'انتقل  إلى الصفحة السابقة';
         }
       }
     }
@@ -170,26 +170,26 @@ const arSD = {
   components: {
     MuiBreadcrumbs: {
       defaultProps: {
-        expandText: 'إظهر العنوان'
+        expandText: 'إظهار المسار'
       }
     },
     MuiTablePagination: {
       defaultProps: {
         getItemAriaLabel: type => {
           if (type === 'first') {
-            return 'إذهب الى الصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'إذهب الي الصفحة الأخيرة';
+            return 'انتقل إلى الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'إذهب الى الصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'إذهب الى الصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         },
         labelRowsPerPage: 'عدد الصفوف في الصفحة:',
         labelDisplayedRows: ({
@@ -209,7 +209,7 @@ const arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'يتم التحميل…',
+        loadingText: 'جار التحميل...',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }
@@ -224,23 +224,23 @@ const arSD = {
         'aria-label': 'التنقل عبر الصفحات',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'إذهب إلى '} صفحة ${page}`;
+            return `${selected ? '' : 'انتقل إلى '} صفحة ${page}`;
           }
 
           if (type === 'first') {
-            return 'إذهب الى الصفحة الأولى';
+            return 'انتقل إلى الصفحة الأولى';
           }
 
           if (type === 'last') {
-            return 'إذهب الي الصفحة الأخيرة';
+            return 'انتقل الي الصفحة الأخيرة';
           }
 
           if (type === 'next') {
-            return 'إذهب الى الصفحة التالية';
+            return 'انتقل إلى الصفحة التالية';
           } // if (type === 'previous') {
 
 
-          return 'إذهب الى الصفحة السابقة';
+          return 'انتقل إلى الصفحة السابقة';
         }
       }
     }

package/node/styles/createMixins.js

@@ -9,12 +9,14 @@ exports.default = createMixins;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-function createMixins(breakpoints, spacing, mixins) {
+function createMixins(breakpoints, mixins) {
   return (0, _extends2.default)({
     toolbar: {
       minHeight: 56,
-      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-        minHeight: 48
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
       },
       [breakpoints.up('sm')]: {
         minHeight: 64

package/node/styles/createPalette.js

@@ -301,7 +301,8 @@ const theme2 = createTheme({ palette: {
 
   const paletteOutput = (0, _utils.deepmerge)((0, _extends2.default)({
     // A collection of common colors.
-    common: _common.default,
+    common: (0, _extends2.default)({}, _common.default),
+    // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
     // The colors used to represent primary interface elements for a user.

package/node/styles/createTheme.js

@@ -43,7 +43,7 @@ function createTheme(options = {}, ...args) {
   const palette = (0, _createPalette.default)(paletteInput);
   const systemTheme = (0, _system.createTheme)(options);
   let muiTheme = (0, _utils.deepmerge)(systemTheme, {
-    mixins: (0, _createMixins.default)(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
+    mixins: (0, _createMixins.default)(systemTheme.breakpoints, mixinsInput),
     palette,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
     shadows: _shadows.default.slice(),