@mui/material 5.12.0 → 5.12.2

package/modern/FormControlLabel/FormControlLabel.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -20,11 +20,13 @@ const useUtilityClasses = ownerState => {
     classes,
     disabled,
     labelPlacement,
-    error
+    error,
+    required
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
-    label: ['label', disabled && 'disabled']
+    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],
+    label: ['label', disabled && 'disabled'],
+    asterisk: ['asterisk', error && 'error']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
 };
@@ -73,6 +75,17 @@ export const FormControlLabelRoot = styled('label', {
     }
   }
 }));
+const AsteriskComponent = styled('span', {
+  name: 'MuiFormControlLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${formControlLabelClasses.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
 
 /**
  * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
@@ -91,19 +104,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       disableTypography,
       label: labelProp,
       labelPlacement = 'end',
+      required: requiredProp,
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
-  let disabled = disabledProp;
-  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-    disabled = control.props.disabled;
-  }
-  if (typeof disabled === 'undefined' && muiFormControl) {
-    disabled = muiFormControl.disabled;
-  }
+  const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
+  const required = requiredProp ?? control.props.required;
   const controlProps = {
-    disabled
+    disabled,
+    required
   };
   ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
     if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -118,6 +128,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   const ownerState = _extends({}, props, {
     disabled,
     labelPlacement,
+    required,
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
@@ -136,7 +147,12 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label, required && /*#__PURE__*/_jsxs(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -199,6 +215,10 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
   /**
    * The props used for each slot inside.
    * @default {}

package/modern/FormControlLabel/formControlLabelClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 export default formControlLabelClasses;

package/modern/Modal/Modal.js

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import ModalUnstyled, { modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
@@ -69,6 +69,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       className,
       closeAfterTransition = false,
       children,
+      container,
       component,
       components = {},
       componentsProps = {},
@@ -80,6 +81,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       disableScrollLock = false,
       hideBackdrop = false,
       keepMounted = false,
+      onBackdropClick,
+      onClose,
+      open,
       slotProps,
       slots,
       // eslint-disable-next-line react/prop-types
@@ -88,6 +92,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
+    container,
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -96,7 +101,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
-    keepMounted
+    keepMounted,
+    onBackdropClick,
+    onClose,
+    open
   };
   const ownerState = _extends({}, props, commonProps, {
     exited

package/modern/Modal/index.js

@@ -1,3 +1,3 @@
-export * from '@mui/base/ModalUnstyled';
+export { ModalManager } from '@mui/base/Modal';
 export { default } from './Modal';
 export * from './Modal';

package/modern/Popper/Popper.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps", "slots", "slotProps"];
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+import BasePopper from '@mui/base/Popper';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PopperRoot = styled(PopperUnstyled, {
+const PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -33,20 +33,44 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     name: 'MuiPopper'
   });
   const {
+      anchorEl,
+      component,
       components,
       componentsProps,
+      container,
+      disablePortal,
+      keepMounted,
+      modifiers,
+      open,
+      placement,
+      popperOptions,
+      popperRef,
+      transition,
       slots,
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const RootComponent = slots?.root ?? components?.Root;
+  const otherProps = _extends({
+    anchorEl,
+    component,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition
+  }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme?.direction,
     slots: {
       root: RootComponent
     },
     slotProps: slotProps ?? componentsProps
-  }, other, {
+  }, otherProps, {
     ref: ref
   }));
 });

package/modern/Stack/Stack.js

@@ -49,7 +49,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/modern/Tabs/ScrollbarSize.js

@@ -4,7 +4,7 @@ const _excluded = ["onChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '../utils/debounce';
-import { ownerWindow } from '../utils';
+import { ownerWindow, unstable_useEnhancedEffect as useEnhancedEffect } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   width: 99,
@@ -29,7 +29,7 @@ export default function ScrollbarSize(props) {
   const setMeasurements = () => {
     scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
   };
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     const handleResize = debounce(() => {
       const prevHeight = scrollbarHeight.current;
       setMeasurements();

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.12.0
+ * @mui/material v5.12.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/ThemeProvider.js

@@ -18,5 +18,12 @@ export default function ThemeProvider(_ref) {
   }));
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
-  theme: PropTypes.object
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
 } : void 0;

package/modern/styles/experimental_extendTheme.js

@@ -109,7 +109,7 @@ export default function extendTheme(options = {}, ...args) {
     }
 
     // assign component variables
-    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
     if (key === 'light') {
       setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
@@ -133,6 +133,8 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'warningIconColor', setCssVarColor('palette-warning-main'));
       setColor(palette.AppBar, 'defaultBg', setCssVarColor('palette-grey-100'));
       setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-400'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-300'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-A100'));
       setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-400'));
       setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-700'));
@@ -193,6 +195,8 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.AppBar, 'darkBg', setCssVarColor('palette-background-paper')); // specific for dark mode
       setColor(palette.AppBar, 'darkColor', setCssVarColor('palette-text-primary')); // specific for dark mode
       setColor(palette.Avatar, 'defaultBg', setCssVarColor('palette-grey-600'));
+      setColor(palette.Button, 'inheritContainedBg', setCssVarColor('palette-grey-800'));
+      setColor(palette.Button, 'inheritContainedHoverBg', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultBorder', setCssVarColor('palette-grey-700'));
       setColor(palette.Chip, 'defaultAvatarColor', setCssVarColor('palette-grey-300'));
       setColor(palette.Chip, 'defaultIconColor', setCssVarColor('palette-grey-300'));

package/node/Autocomplete/Autocomplete.js

@@ -152,7 +152,7 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       paddingRight: 52 + 4 + 9
     },
     [`& .${_autocompleteClasses.default.input}`]: {
-      padding: '7.5px 4px 7.5px 6px'
+      padding: '7.5px 4px 7.5px 5px'
     },
     [`& .${_autocompleteClasses.default.endAdornment}`]: {
       right: 9
@@ -165,7 +165,7 @@ const AutocompleteRoot = (0, _styled.default)('div', {
     paddingBottom: 6,
     paddingLeft: 6,
     [`& .${_autocompleteClasses.default.input}`]: {
-      padding: '2.5px 4px 2.5px 6px'
+      padding: '2.5px 4px 2.5px 8px'
     }
   },
   [`& .${_filledInputClasses.default.root}`]: {

package/node/Button/Button.js

@@ -69,6 +69,8 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   ownerState
 }) => {
   var _theme$palette$getCon, _theme$palette;
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return (0, _extends2.default)({}, theme.typography.button, {
     minWidth: 64,
     padding: '6px 16px',
@@ -97,7 +99,7 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'contained' && {
-      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
       boxShadow: (theme.vars || theme).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
@@ -140,7 +142,7 @@ const ButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     color: theme.vars ?
     // this is safe because grey does not change between default light/dark mode
     theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-    backgroundColor: (theme.vars || theme).palette.grey[300],
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
     boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
     color: (theme.vars || theme).palette[ownerState.color].contrastText,

package/node/FormControl/FormControl.js

@@ -147,7 +147,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
         if (!(0, _isMuiElement.default)(child, ['Input', 'Select'])) {
           return;
         }
-        if ((0, _utils.isFilled)(child.props, true)) {
+        if ((0, _utils.isFilled)(child.props, true) || (0, _utils.isFilled)(child.props.inputProps, true)) {
           initialFilled = true;
         }
       });

package/node/FormControlLabel/FormControlLabel.js

@@ -20,7 +20,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 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; }
 const useUtilityClasses = ownerState => {
@@ -28,11 +28,13 @@ const useUtilityClasses = ownerState => {
     classes,
     disabled,
     labelPlacement,
-    error
+    error,
+    required
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`, error && 'error'],
-    label: ['label', disabled && 'disabled']
+    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`, error && 'error', required && 'required'],
+    label: ['label', disabled && 'disabled'],
+    asterisk: ['asterisk', error && 'error']
   };
   return (0, _base.unstable_composeClasses)(slots, _formControlLabelClasses.getFormControlLabelUtilityClasses, classes);
 };
@@ -81,14 +83,25 @@ const FormControlLabelRoot = (0, _styled.default)('label', {
     }
   }
 }));
+exports.FormControlLabelRoot = FormControlLabelRoot;
+const AsteriskComponent = (0, _styled.default)('span', {
+  name: 'MuiFormControlLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${_formControlLabelClasses.default.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
 
 /**
  * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
  * Use this component if you want to display an extra label.
  */
-exports.FormControlLabelRoot = FormControlLabelRoot;
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _slotProps$typography;
+  var _ref, _slotProps$typography;
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -101,19 +114,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       disableTypography,
       label: labelProp,
       labelPlacement = 'end',
+      required: requiredProp,
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const muiFormControl = (0, _FormControl.useFormControl)();
-  let disabled = disabledProp;
-  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-    disabled = control.props.disabled;
-  }
-  if (typeof disabled === 'undefined' && muiFormControl) {
-    disabled = muiFormControl.disabled;
-  }
+  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
+  const required = requiredProp != null ? requiredProp : control.props.required;
   const controlProps = {
-    disabled
+    disabled,
+    required
   };
   ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
     if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -128,6 +138,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
     labelPlacement,
+    required,
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
@@ -146,7 +157,12 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label, required && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -209,6 +225,10 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: _propTypes.default.func,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: _propTypes.default.bool,
   /**
    * The props used for each slot inside.
    * @default {}

package/node/FormControlLabel/formControlLabelClasses.js

@@ -11,6 +11,6 @@ var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityCl
 function getFormControlLabelUtilityClasses(slot) {
   return (0, _generateUtilityClass.default)('MuiFormControlLabel', slot);
 }
-const formControlLabelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+const formControlLabelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 var _default = formControlLabelClasses;
 exports.default = _default;

package/node/Modal/Modal.js

@@ -10,17 +10,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
+var _Modal = _interopRequireWildcard(require("@mui/base/Modal"));
 var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 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; }
-const modalClasses = _ModalUnstyled.modalUnstyledClasses;
+const modalClasses = _Modal.modalClasses;
 exports.modalClasses = modalClasses;
 const ModalRoot = (0, _styled.default)('div', {
   name: 'MuiModal',
@@ -80,6 +80,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       className,
       closeAfterTransition = false,
       children,
+      container,
       component,
       components = {},
       componentsProps = {},
@@ -91,6 +92,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       disableScrollLock = false,
       hideBackdrop = false,
       keepMounted = false,
+      onBackdropClick,
+      onClose,
+      open,
       slotProps,
       slots,
       // eslint-disable-next-line react/prop-types
@@ -99,6 +103,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
+    container,
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -107,7 +112,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
-    keepMounted
+    keepMounted,
+    onBackdropClick,
+    onClose,
+    open
   };
   const ownerState = (0, _extends2.default)({}, props, commonProps, {
     exited
@@ -116,7 +124,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalUnstyled.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, (0, _extends2.default)({
     slots: {
       root: RootSlot,
       backdrop: BackdropSlot

package/node/Modal/index.js

@@ -3,34 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
+var _exportNames = {
+  ModalManager: true
+};
+Object.defineProperty(exports, "ModalManager", {
   enumerable: true,
   get: function () {
-    return _Modal.default;
+    return _Modal.ModalManager;
   }
 });
-var _ModalUnstyled = require("@mui/base/ModalUnstyled");
-Object.keys(_ModalUnstyled).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ModalUnstyled[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ModalUnstyled[key];
-    }
-  });
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Modal2.default;
+  }
 });
-var _Modal = _interopRequireWildcard(require("./Modal"));
-Object.keys(_Modal).forEach(function (key) {
+var _Modal = require("@mui/base/Modal");
+var _Modal2 = _interopRequireWildcard(require("./Modal"));
+Object.keys(_Modal2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Modal[key]) return;
+  if (key in exports && exports[key] === _Modal2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Modal[key];
+      return _Modal2[key];
     }
   });
 });