@mui/material 5.3.1 → 5.4.0

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.d.ts

@@ -74,8 +74,6 @@ export * from './styles';
 
 export * from './utils';
 
-export * from '@mui/base';
-
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 
@@ -476,3 +474,10 @@ export * from './GlobalStyles';
  * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
  */
 export { StyledEngineProvider } from './styles';
+
+export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+
+export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
+export * from '@mui/base/generateUtilityClass';
+
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.3.1
+/** @license MUI v5.4.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,7 +8,6 @@ import * as colors from './colors';
 export { colors };
 export * from './styles';
 export * from './utils';
-export * from '@mui/base';
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 export { default as AccordionActions } from './AccordionActions';
@@ -273,4 +272,8 @@ export * from './Zoom'; // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
-export { StyledEngineProvider } from './styles';
+export { StyledEngineProvider } from './styles';
+export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
+export * from '@mui/base/generateUtilityClass';
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';

package/internal/SwitchBase.js

@@ -29,9 +29,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
 
-const SwitchBaseRoot = styled(ButtonBase, {
-  skipSx: true
-})(({
+const SwitchBaseRoot = styled(ButtonBase)(({
   ownerState
 }) => _extends({
   padding: 9,
@@ -41,9 +39,7 @@ const SwitchBaseRoot = styled(ButtonBase, {
 }, ownerState.edge === 'end' && {
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
-const SwitchBaseInput = styled('input', {
-  skipSx: true
-})({
+const SwitchBaseInput = styled('input')({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Autocomplete/Autocomplete.js

@@ -420,6 +420,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
       _props$popupIcon = props.popupIcon,
       popupIcon = _props$popupIcon === void 0 ? _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})) : _props$popupIcon,
+      _props$readOnly = props.readOnly,
+      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
       renderGroupProp = props.renderGroup,
       renderInput = props.renderInput,
       renderOptionProp = props.renderOption,
@@ -429,7 +431,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
       valueProp = props.value,
-      other = _objectWithoutProperties(props, ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"]);
+      other = _objectWithoutProperties(props, ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"]);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
 
@@ -455,7 +457,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       inputValue = _useAutocomplete.inputValue,
       groupedOptions = _useAutocomplete.groupedOptions;
 
-  var hasClearIcon = !disableClearable && !disabled && dirty;
+  var hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
   var ownerState = _extends({}, props, {
@@ -582,7 +584,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
         },
         inputProps: _extends({
           className: clsx(classes.input),
-          disabled: disabled
+          disabled: disabled,
+          readOnly: readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
@@ -1025,6 +1028,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   popupIcon: PropTypes.node,
 
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Render the group.
    *

package/legacy/Breadcrumbs/BreadcrumbCollapsed.js

@@ -6,9 +6,7 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-var BreadcrumbCollapsedButton = styled(ButtonBase, {
-  skipSx: true
-})(function (_ref) {
+var BreadcrumbCollapsedButton = styled(ButtonBase)(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     display: 'flex',

package/legacy/ButtonBase/TouchRipple.js

@@ -22,8 +22,7 @@ var exitKeyframe = keyframes(_templateObject2 || (_templateObject2 = _taggedTemp
 var pulsateKeyframe = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.92);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n"])));
 export var TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
-  slot: 'Root',
-  skipSx: true
+  slot: 'Root'
 })({
   overflow: 'hidden',
   pointerEvents: 'none',

package/legacy/FormControlLabel/FormControlLabel.js

@@ -12,15 +12,17 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
       disabled = ownerState.disabled,
-      labelPlacement = ownerState.labelPlacement;
+      labelPlacement = ownerState.labelPlacement,
+      error = ownerState.error;
   var slots = {
-    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement))],
+    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement)), error && 'error'],
     label: ['label', disabled && 'disabled']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
@@ -108,11 +110,17 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       controlProps[key] = props[key];
     }
   });
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['error']
+  });
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
     label: label,
-    labelPlacement: labelPlacement
+    labelPlacement: labelPlacement,
+    error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/FormControlLabel/formControlLabelClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 export default formControlLabelClasses;

package/legacy/FormGroup/FormGroup.js

@@ -7,13 +7,16 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getFormGroupUtilityClass } from './formGroupClasses';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      row = ownerState.row;
+      row = ownerState.row,
+      error = ownerState.error;
   var slots = {
-    root: ['root', row && 'row']
+    root: ['root', row && 'row', error && 'error']
   };
   return composeClasses(slots, getFormGroupUtilityClass, classes);
 };
@@ -52,8 +55,16 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref) {
       row = _props$row === void 0 ? false : _props$row,
       other = _objectWithoutProperties(props, ["className", "row"]);
 
+  var muiFormControl = useFormControl();
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['error']
+  });
+
   var ownerState = _extends({}, props, {
-    row: row
+    row: row,
+    error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/FormGroup/formGroupClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getFormGroupUtilityClass(slot) {
   return generateUtilityClass('MuiFormGroup', slot);
 }
-var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row']);
+var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
 export default formGroupClasses;

package/legacy/FormHelperText/FormHelperText.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -104,16 +107,11 @@ var FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inPro
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: children === ' ' ?
-    /*#__PURE__*/
-    // notranslate needed while Google Translate will not fix zero-width space issue
-    // eslint-disable-next-line react/no-danger
-    _jsx("span", {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
-      dangerouslySetInnerHTML: {
-        __html: '​'
-      }
-    }) : children
+      children: "\u200B"
+    })) : children
   }));
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes

package/legacy/Grid/Grid.js

@@ -251,10 +251,8 @@ var GridRoot = styled('div', {
 
   }, ownerState.zeroMinWidth && {
     minWidth: 0
-  }, ownerState.wrap === 'nowrap' && {
-    flexWrap: 'nowrap'
-  }, ownerState.wrap === 'reverse' && {
-    flexWrap: 'wrap-reverse'
+  }, ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
   });
 }, generateDirection, generateRowGap, generateColumnGap, generateGrid);
 

package/legacy/InputAdornment/InputAdornment.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -116,17 +119,11 @@ var InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inPro
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [position === 'start' ?
-        /*#__PURE__*/
-
         /* notranslate needed while Google Translate will not fix zero-width space issue */
-
-        /* eslint-disable-next-line react/no-danger */
-        _jsx("span", {
+        _span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
-          dangerouslySetInnerHTML: {
-            __html: '​'
-          }
-        }) : null, children]
+          children: "\u200B"
+        })) : null, children]
       })
     }))
   });

package/legacy/OutlinedInput/NotchedOutline.js

@@ -1,5 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '../styles/styled';
@@ -20,14 +23,12 @@ var NotchedOutlineRoot = styled('fieldset')({
   overflow: 'hidden',
   minWidth: '0%'
 });
-var NotchedOutlineLegend = styled('legend', {
-  skipSx: true
-})(function (_ref) {
+var NotchedOutlineLegend = styled('legend')(function (_ref) {
   var ownerState = _ref.ownerState,
       theme = _ref.theme;
   return _extends({
     float: 'unset'
-  }, ownerState.label === undefined && {
+  }, !ownerState.withLabel && {
     padding: 0,
     lineHeight: '11px',
     // sync with `height` in `legend` styles
@@ -35,7 +36,7 @@ var NotchedOutlineLegend = styled('legend', {
       duration: 150,
       easing: theme.transitions.easing.easeOut
     })
-  }, ownerState.label !== undefined && _extends({
+  }, ownerState.withLabel && _extends({
     display: 'block',
     // Fix conflict with normalize.css and sanitize.css
     width: 'auto',
@@ -77,9 +78,11 @@ export default function NotchedOutline(props) {
       notched = props.notched,
       other = _objectWithoutProperties(props, ["children", "classes", "className", "label", "notched"]);
 
+  var withLabel = label != null && label !== '';
+
   var ownerState = _extends({}, props, {
     notched: notched,
-    label: label
+    withLabel: withLabel
   });
 
   return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
@@ -89,18 +92,13 @@ export default function NotchedOutline(props) {
   }, other, {
     children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
       ownerState: ownerState,
-      children: label ? /*#__PURE__*/_jsx("span", {
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
         children: label
-      }) :
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      }) : // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      })
+        children: "\u200B"
+      }))
     })
   }));
 }

package/legacy/OutlinedInput/OutlinedInput.js

@@ -137,7 +137,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         className: classes.notchedOutline,
-        label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+        label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
           children: [label, "\xA0", '*']
         })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)

package/legacy/Radio/RadioButtonIcon.js

@@ -10,15 +10,11 @@ var RadioButtonIconRoot = styled('span')({
   position: 'relative',
   display: 'flex'
 });
-var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
-  skipSx: true
-})({
+var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-var RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
-  skipSx: true
-})(function (_ref) {
+var RadioButtonIconDot = styled(RadioButtonCheckedIcon)(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({

package/legacy/Select/SelectInput.js

@@ -4,6 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+
+var _span;
+
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -504,16 +507,11 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       className: clsx(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
       ,
       id: buttonId,
-      children: isEmpty(display) ?
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      }) : display
+        children: "\u200B"
+      })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,

package/legacy/SwipeableDrawer/SwipeArea.js

@@ -8,9 +8,7 @@ import styled from '../styles/styled';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
-var SwipeAreaRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var SwipeAreaRoot = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({