@mui/material 5.4.2 → 5.5.0

package/modern/Slide/Slide.js

@@ -8,7 +8,6 @@ import { elementAcceptingRef, HTMLElementType, chainPropTypes } from '@mui/utils
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import useTheme from '../styles/useTheme';
-import { duration, easing } from '../styles/createTransitions';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils'; // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -82,20 +81,22 @@ export function setTranslateValue(direction, node, containerProp) {
     node.style.transform = transform;
   }
 }
-const defaultEasing = {
-  enter: easing.easeOut,
-  exit: easing.sharp
-};
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Slide transition is used by the [Drawer](/components/drawers/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
+  const theme = useTheme();
+  const defaultEasing = {
+    enter: theme.transitions.easing.easeOut,
+    exit: theme.transitions.easing.sharp
+  };
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -117,7 +118,6 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const childrenRef = React.useRef(null);
   const handleRefIntermediary = useForkRef(children.ref, childrenRef);
   const handleRef = useForkRef(handleRefIntermediary, ref);
@@ -305,8 +305,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    * @default {
-   *   enter: easing.easeOut,
-   *   exit: easing.sharp,
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
    * }
    */
   easing: PropTypes.oneOfType([PropTypes.shape({
@@ -358,8 +358,8 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/Snackbar/Snackbar.js

@@ -10,7 +10,6 @@ import ClickAwayListener from '@mui/base/ClickAwayListener';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
 import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
@@ -93,6 +92,11 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     props: inProps,
     name: 'MuiSnackbar'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     action,
@@ -118,10 +122,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     open,
     resumeHideDuration,
     TransitionComponent = Grow,
-    transitionDuration = {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen
-    },
+    transitionDuration = defaultTransitionDuration,
     TransitionProps: {
       onEnter,
       onExited
@@ -130,7 +131,6 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
         TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
         other = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
 
   const ownerState = _extends({}, props, {
@@ -449,8 +449,8 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/SpeedDial/SpeedDial.js

@@ -10,7 +10,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import { duration } from '../styles/createTransitions';
+import useTheme from '../styles/useTheme';
 import Zoom from '../Zoom';
 import Fab from '../Fab';
 import capitalize from '../utils/capitalize';
@@ -137,6 +137,11 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     props: inProps,
     name: 'MuiSpeedDial'
   });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     ariaLabel,
@@ -157,10 +162,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     onOpen,
     open: openProp,
     TransitionComponent = Zoom,
-    transitionDuration = {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen
-    },
+    transitionDuration = defaultTransitionDuration,
     TransitionProps
   } = props,
         FabProps = _objectWithoutPropertiesLoose(props.FabProps, _excluded),
@@ -542,8 +544,8 @@ process.env.NODE_ENV !== "production" ? SpeedDial.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/Step/StepContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 const StepContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepContext.displayName = 'StepContext';
 }
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+
 
+export function useStepContext() {
+  return React.useContext(StepContext);
+}
 export default StepContext;

package/modern/Step/index.js

@@ -1,3 +1,5 @@
 export { default } from './Step';
 export { default as stepClasses } from './stepClasses';
-export * from './stepClasses';
+export * from './stepClasses';
+export { default as StepContext } from './StepContext';
+export * from './StepContext';

package/modern/SvgIcon/SvgIcon.js

@@ -82,6 +82,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     color,
     component,
     fontSize,
+    instanceFontSize: inProps.fontSize,
     inheritViewBox,
     viewBox
   });

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -12,7 +12,6 @@ import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import useEventCallback from '../utils/useEventCallback';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps } from '../transitions/utils';
 import SwipeArea from './SwipeArea'; // This value is closed to what browsers are using internally to
@@ -125,16 +124,16 @@ function computeHasNativeHandler({
 }
 
 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
-const transitionDurationDefault = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiSwipeableDrawer',
     props: inProps
   });
   const theme = useTheme();
+  const transitionDurationDefault = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   const {
     anchor = 'left',
@@ -612,7 +611,10 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/modern/Zoom/Zoom.js

@@ -5,7 +5,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -18,10 +17,6 @@ const styles = {
     transform: 'none'
   }
 };
-const defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](/components/buttons/#floating-action-buttons) component.
@@ -29,6 +24,12 @@ const defaultTimeout = {
  */
 
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
+  const theme = useTheme();
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   const {
     addEndListener,
     appear = true,
@@ -48,7 +49,6 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const theme = useTheme();
   const nodeRef = React.useRef(null);
   const foreignRef = useForkRef(children.ref, ref);
   const handleRef = useForkRef(nodeRef, foreignRef);
@@ -213,8 +213,8 @@ process.env.NODE_ENV !== "production" ? Zoom.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/modern/className/index.js

@@ -0,0 +1,9 @@
+/**
+ * Caution! this module must not include unstyled components import from `@mui/base`, otherwise, it will break the ClassNameGenerator.
+ * ❌ import { ... } from '@mui/base';
+ * ✅ import { ... } from '@mui/base/utils'; // must be specific base module
+ *
+ * Issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401
+ */
+// eslint-disable-next-line import/prefer-default-export
+export { unstable_ClassNameGenerator } from '@mui/base/className';

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.2
+/** @license MUI v5.5.0
  *
  * 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

@@ -1500,6 +1500,96 @@ export const hiIN = {
       }
     }
   }
+}; // Croatian - Hrvatski
+
+export const hrHR = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Pokaži putanju'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na posljednju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sljedeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        },
+        labelRowsPerPage: 'Redova po stranici:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          const lastDigit = value % 10;
+          const lastTwoDigits = value % 100;
+
+          if ([2, 3, 4].includes(lastDigit) && ![12, 13, 14].includes(lastTwoDigits)) {
+            return 'Zvijezde';
+          }
+
+          return 'Zvijezda';
+        },
+        emptyLabelText: 'Prazno'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Briši',
+        closeText: 'Zatvori',
+        loadingText: 'Učitavanje…',
+        noOptionsText: 'Nema opcija',
+        openText: 'Otvori'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Zatvori'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Navigacija po stranicama',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Idi na '}stranicu ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na zadnju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sljedeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        }
+      }
+    }
+  }
 };
 export const huHU = {
   components: {
@@ -1813,9 +1903,12 @@ export const itIT = {
 
           return 'Vai alla pagina precedente';
         },
-        labelRowsPerPage: 'Righe per pagina:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} di ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Righe per pagina:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} di ${count !== -1 ? count : `più di ${to}`}`
       }
     },
     MuiRating: {
@@ -2374,9 +2467,12 @@ export const plPL = {
 
           return 'Przejdź do poprzedniej strony';
         },
-        labelRowsPerPage: 'Wierszy na stronę:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} z ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Wierszy na stronę:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} z ${count !== -1 ? count : `ponad ${to}`}`
       }
     },
     MuiRating: {
@@ -2673,6 +2769,96 @@ export const roRO = {
       }
     }
   }
+}; // Serbian - Srpski
+
+export const srRS = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Pokaži putanju'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na poslednju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sledeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        },
+        labelRowsPerPage: 'Redova po stranici:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          const lastDigit = value % 10;
+          const lastTwoDigits = value % 100;
+
+          if ([2, 3, 4].includes(lastDigit) && ![12, 13, 14].includes(lastTwoDigits)) {
+            return 'Zvezde';
+          }
+
+          return 'Zvezda';
+        },
+        emptyLabelText: 'Prazno'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Briši',
+        closeText: 'Zatvori',
+        loadingText: 'Učitavanje…',
+        noOptionsText: 'Nema opcija',
+        openText: 'Otvori'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Zatvori'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Navigacija po stranicama',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'Idi na '}stranicu ${page}`;
+          }
+
+          if (type === 'first') {
+            return 'Idi na prvu stranicu';
+          }
+
+          if (type === 'last') {
+            return 'Idi na zadnju stranicu';
+          }
+
+          if (type === 'next') {
+            return 'Idi na sledeću stranicu';
+          } // if (type === 'previous') {
+
+
+          return 'Idi na prethodnu stranicu';
+        }
+      }
+    }
+  }
 };
 export const ruRU = {
   components: {

package/modern/styles/makeStyles.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function makeStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(14));
 }

package/modern/styles/withStyles.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withStyles() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(15));
 }

package/modern/styles/withTheme.js

@@ -1,6 +1,6 @@
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withTheme() {
-  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is not longer exported from @mui/material/styles.
+  throw new Error(process.env.NODE_ENV !== "production" ? `MUI: withTheme is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(16));
 }

package/modern/utils/index.js

@@ -1,3 +1,4 @@
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/base/className';
 export { default as capitalize } from './capitalize';
 export { default as createChainedFunction } from './createChainedFunction';
 export { default as createSvgIcon } from './createSvgIcon';
@@ -14,5 +15,12 @@ export { default as unsupportedProp } from './unsupportedProp';
 export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
-export { default as useIsFocusVisible } from './useIsFocusVisible';
-export { unstable_ClassNameGenerator } from '@mui/base';
+export { default as useIsFocusVisible } from './useIsFocusVisible'; // TODO: remove this export once ClassNameGenerator is stable
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const unstable_ClassNameGenerator = {
+  configure: generator => {
+    console.warn(['MUI: `ClassNameGenerator` import from `@mui/material/utils` is outdated and might cause unexpected issues.', '', "You should use `import { unstable_ClassNameGenerator } from '@mui/material/className'` instead", '', 'The detail of the issue: https://github.com/mui/material-ui/issues/30011#issuecomment-1024993401', '', 'The updated documentation: https://mui.com/guides/classname-generator/'].join('\n'));
+    ClassNameGenerator.configure(generator);
+  }
+};

package/node/AvatarGroup/AvatarGroup.js

@@ -146,11 +146,13 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
         marginLeft
       }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
       children: ["+", extraAvatars]
-    })) : null, children.slice(0, maxAvatars).reverse().map(child => {
+    })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: (0, _clsx.default)(child.props.className, classes.avatar),
         style: (0, _extends2.default)({
-          marginLeft
+          // Consistent with "&:last-child" styling for the default spacing,
+          // we do not apply custom marginLeft spacing on the last child
+          marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
         }, child.props.style),
         variant: child.props.variant || variant
       });

package/node/Box/Box.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _system = require("@mui/system");
 
-var _utils = require("../utils");
+var _className = require("../className");
 
 var _styles = require("../styles");
 
@@ -19,7 +19,7 @@ const defaultTheme = (0, _styles.createTheme)();
 const Box = (0, _system.createBox)({
   defaultTheme,
   defaultClassName: 'MuiBox-root',
-  generateClassName: _utils.unstable_ClassNameGenerator.generate
+  generateClassName: _className.unstable_ClassNameGenerator.generate
 });
 var _default = Box;
 exports.default = _default;

package/node/ButtonBase/ButtonBase.js

@@ -554,7 +554,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   TouchRippleProps: _propTypes.default.object,
 
   /**
-   * A ref that points to the `TouchRippple` element.
+   * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.shape({

package/node/Chip/Chip.js

@@ -107,6 +107,7 @@ const ChipRoot = (0, _styled.default)('div', {
 }) => {
   const deleteIconColor = (0, _system.alpha)(theme.palette.text.primary, 0.26);
   return (0, _extends2.default)({
+    maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
     display: 'inline-flex',