@opengeoweb/form-fields 6.0.0 → 6.0.2

package/{index.js → index.esm.js}

@@ -1,5 +1,5 @@
-import * as React$5 from 'react';
-import React__default, { Children, isValidElement, cloneElement, createContext, useContext, createElement, Fragment, forwardRef } from 'react';
+import * as React from 'react';
+import React__default, { Children, isValidElement, cloneElement, forwardRef, useContext } from 'react';
 import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
 import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
 import moment$1 from 'moment-timezone';
@@ -54,7 +54,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -23202,7 +23207,7 @@ var ReactHookFormFormControl = function ReactHookFormFormControl(_a) {
     _a$className = _a.className,
     className = _a$className === void 0 ? '' : _a$className,
     props = __rest(_a, ["children", "errors", "isReadOnly", "sx", "className"]);
-  return /*#__PURE__*/React$5.createElement(FormControl, Object.assign({
+  return /*#__PURE__*/React.createElement(FormControl, Object.assign({
     fullWidth: true,
     error: !!errors,
     className: "".concat(isReadOnly ? 'is-read-only' : '', " ").concat(className),
@@ -23226,7 +23231,7 @@ var ReactHookFormFormControl = function ReactHookFormFormControl(_a) {
         border: 'transparent'
       }
     }), sx)
-  }, props), children, errors && /*#__PURE__*/React$5.createElement(FormHelperText, {
+  }, props), children, errors && /*#__PURE__*/React.createElement(FormHelperText, {
     variant: "filled"
   }, getErrorMessage(errors)));
 };
@@ -23270,16 +23275,16 @@ var ReactHookFormSelect = function ReactHookFormSelect(_a) {
     ref = _useController$field.ref,
     formErrors = _useController.formState.errors;
   var errors = getErrors(name, formErrors);
-  return /*#__PURE__*/React$5.createElement(ReactHookFormFormControl, {
+  return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     className: className,
     sx: sx,
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React$5.createElement(InputLabel, {
+  }, /*#__PURE__*/React.createElement(InputLabel, {
     variant: "filled",
     id: labelId
-  }, label), /*#__PURE__*/React$5.createElement(Select, Object.assign({
+  }, label), /*#__PURE__*/React.createElement(Select, Object.assign({
     labelId: labelId,
     label: label,
     inputRef: ref,
@@ -23322,7 +23327,7 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
     ref = _useController$field.ref,
     formErrors = _useController.formState.errors;
   var errors = getErrors(name, formErrors);
-  React$5.useEffect(function () {
+  React.useEffect(function () {
     if (errors) {
       var firstError = Object.keys(formErrors)[0];
       if (firstError === name) {
@@ -23334,13 +23339,13 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
       }
     }
   }, [errors, formErrors, name]);
-  return /*#__PURE__*/React$5.createElement(ReactHookFormFormControl, {
+  return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React$5.createElement(InputLabel, {
+  }, /*#__PURE__*/React.createElement(InputLabel, {
     id: labelId
-  }, label), /*#__PURE__*/React$5.createElement(RadioGroup, Object.assign({
+  }, label), /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
     value: value,
     onChange: function onChange(changeEvent) {
       onChangeField(changeEvent.target.value);
@@ -23387,13 +23392,13 @@ var ReactHookFormTextField = function ReactHookFormTextField(_a) {
     ref = _useController$field.ref,
     formErrors = _useController.formState.errors;
   var errors = getErrors(name, formErrors);
-  return /*#__PURE__*/React$5.createElement(ReactHookFormFormControl, {
+  return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     className: className,
     sx: sx,
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React$5.createElement(TextField, Object.assign({
+  }, /*#__PURE__*/React.createElement(TextField, Object.assign({
     label: label,
     error: !!errors,
     helperText: helperText,
@@ -23530,17 +23535,17 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_a) {
       event.preventDefault();
     }
   };
-  var _React$useState = React$5.useState(value === null || isNaN(value) ? '' : value),
+  var _React$useState = React.useState(value === null || isNaN(value) ? '' : value),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     displayValue = _React$useState2[0],
     setDisplayValue = _React$useState2[1];
-  return /*#__PURE__*/React$5.createElement(ReactHookFormFormControl, {
+  return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     className: className,
     sx: sx,
     disabled: disabled,
     errors: errors,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React$5.createElement(TextField, Object.assign({
+  }, /*#__PURE__*/React.createElement(TextField, Object.assign({
     label: label,
     error: !!errors,
     helperText: helperText,
@@ -24787,7 +24792,7 @@ function ownerDocument(node) {
  * while still using it inside the component.
  * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
  */
-function setRef$2(ref, value) {
+function setRef(ref, value) {
   if (typeof ref === 'function') {
     ref(value);
   } else if (ref) {
@@ -24795,45 +24800,44 @@ function setRef$2(ref, value) {
   }
 }
 
-const useEnhancedEffect$2 = typeof window !== 'undefined' ? React$5.useLayoutEffect : React$5.useEffect;
-var useEnhancedEffect$3 = useEnhancedEffect$2;
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect$1 = useEnhancedEffect;
 
-let globalId$1 = 0;
-function useGlobalId$1(idOverride) {
-  const [defaultId, setDefaultId] = React$5.useState(idOverride);
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
   const id = idOverride || defaultId;
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (defaultId == null) {
       // Fallback to this default id when possible.
       // Use the incrementing value for client-side rendering only.
       // We can't use it server-side.
       // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
-      globalId$1 += 1;
-      setDefaultId(`mui-${globalId$1}`);
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
     }
   }, [defaultId]);
   return id;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId$1 = React$5['useId' + ''];
+// downstream bundlers may remove unnecessary concatenation, but won't remove toString call -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId = React['useId'.toString()];
 /**
  *
  * @example <div id={useId()} />
  * @param idOverride
  * @returns {string}
  */
-function useId$2(idOverride) {
-  if (maybeReactUseId$1 !== undefined) {
-    const reactId = maybeReactUseId$1();
+function useId(idOverride) {
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
     return idOverride != null ? idOverride : reactId;
   }
   // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-  return useGlobalId$1(idOverride);
+  return useGlobalId(idOverride);
 }
 
-/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-function useControlled$2({
+function useControlled({
   controlled,
   default: defaultProp,
   name,
@@ -24842,25 +24846,25 @@ function useControlled$2({
   // isControlled is ignored in the hook dependency lists as it should never change.
   const {
     current: isControlled
-  } = React$5.useRef(controlled !== undefined);
-  const [valueState, setValue] = React$5.useState(defaultProp);
+  } = React.useRef(controlled !== undefined);
+  const [valueState, setValue] = React.useState(defaultProp);
   const value = isControlled ? controlled : valueState;
   if (process.env.NODE_ENV !== 'production') {
-    React$5.useEffect(() => {
+    React.useEffect(() => {
       if (isControlled !== (controlled !== undefined)) {
         console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
     }, [state, name, controlled]);
     const {
       current: defaultValue
-    } = React$5.useRef(defaultProp);
-    React$5.useEffect(() => {
+    } = React.useRef(defaultProp);
+    React.useEffect(() => {
       if (!isControlled && defaultValue !== defaultProp) {
         console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
       }
     }, [JSON.stringify(defaultProp)]);
   }
-  const setValueIfUncontrolled = React$5.useCallback(newValue => {
+  const setValueIfUncontrolled = React.useCallback(newValue => {
     if (!isControlled) {
       setValue(newValue);
     }
@@ -24871,30 +24875,31 @@ function useControlled$2({
 /**
  * https://github.com/facebook/react/issues/14099#issuecomment-440013892
  */
-function useEventCallback$2(fn) {
-  const ref = React$5.useRef(fn);
-  useEnhancedEffect$3(() => {
+
+function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect$1(() => {
     ref.current = fn;
   });
-  return React$5.useCallback((...args) =>
+  return React.useCallback((...args) =>
   // @ts-expect-error hide `this`
   // tslint:disable-next-line:ban-comma-operator
   (0, ref.current)(...args), []);
 }
 
-function useForkRef$2(...refs) {
+function useForkRef(...refs) {
   /**
    * This will create a new function if the refs passed to this hook change and are all defined.
    * This means react will call the old forkRef with `null` and the new forkRef
    * with the ref. Cleanup naturally emerges from this behavior.
    */
-  return React$5.useMemo(() => {
+  return React.useMemo(() => {
     if (refs.every(ref => ref == null)) {
       return null;
     }
     return instance => {
       refs.forEach(ref => {
-        setRef$2(ref, instance);
+        setRef(ref, instance);
       });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -24904,7 +24909,7 @@ function useForkRef$2(...refs) {
 function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
   Object.keys(slots).forEach(
-  // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
   // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
   slot => {
     output[slot] = slots[slot].reduce((acc, key) => {
@@ -24941,6 +24946,8 @@ const createClassNameGenerator = () => {
 const ClassNameGenerator = createClassNameGenerator();
 var ClassNameGenerator$1 = ClassNameGenerator;
 
+// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
+// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
 const globalStateClassesMapping = {
   active: 'active',
   checked: 'checked',
@@ -24967,57 +24974,8 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
   return result;
 }
 
-var useEventCallback$1 = {};
-
-var interopRequireDefault = {exports: {}};
-
-(function (module) {
-function _interopRequireDefault(obj) {
-  return obj && obj.__esModule ? obj : {
-    "default": obj
-  };
-}
-module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
-}(interopRequireDefault));
-
-var useEnhancedEffect$1 = {};
-
-Object.defineProperty(useEnhancedEffect$1, "__esModule", {
-  value: true
-});
-var default_1 = useEnhancedEffect$1.default = void 0;
-var React$4 = _interopRequireWildcard$4(React__default);
-function _getRequireWildcardCache$4(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$4 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$4(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$4(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 useEnhancedEffect = typeof window !== 'undefined' ? React$4.useLayoutEffect : React$4.useEffect;
-var _default$4 = useEnhancedEffect;
-default_1 = useEnhancedEffect$1.default = _default$4;
-
-var _interopRequireDefault$1 = interopRequireDefault.exports;
-Object.defineProperty(useEventCallback$1, "__esModule", {
-  value: true
-});
-var _default$3 = useEventCallback$1.default = useEventCallback;
-var React$3 = _interopRequireWildcard$3(React__default);
-var _useEnhancedEffect = _interopRequireDefault$1(useEnhancedEffect$1);
-function _getRequireWildcardCache$3(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$3 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$3(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$3(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; }
-/**
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
- */
-function useEventCallback(fn) {
-  const ref = React$3.useRef(fn);
-  (0, _useEnhancedEffect.default)(() => {
-    ref.current = fn;
-  });
-  return React$3.useCallback((...args) =>
-  // @ts-expect-error hide `this`
-  // tslint:disable-next-line:ban-comma-operator
-  (0, ref.current)(...args), []);
-}
-
 const _excluded$s = ["localeText"];
-const MuiPickersAdapterContext = /*#__PURE__*/React$5.createContext(null);
+const MuiPickersAdapterContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   MuiPickersAdapterContext.displayName = 'MuiPickersAdapterContext';
 }
@@ -25033,7 +24991,7 @@ function LocalizationProvider(inProps) {
   const {
     utils: parentUtils,
     localeText: parentLocaleText
-  } = (_React$useContext = React$5.useContext(MuiPickersAdapterContext)) != null ? _React$useContext : {
+  } = (_React$useContext = React.useContext(MuiPickersAdapterContext)) != null ? _React$useContext : {
     utils: undefined,
     localeText: undefined
   };
@@ -25051,8 +25009,8 @@ function LocalizationProvider(inProps) {
     adapterLocale,
     localeText: themeLocaleText
   } = props;
-  const localeText = React$5.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
-  const utils = React$5.useMemo(() => {
+  const localeText = React.useMemo(() => _extends({}, themeLocaleText, parentLocaleText, inLocaleText), [themeLocaleText, parentLocaleText, inLocaleText]);
+  const utils = React.useMemo(() => {
     if (!DateAdapter) {
       if (parentUtils) {
         return parentUtils;
@@ -25069,7 +25027,7 @@ function LocalizationProvider(inProps) {
     }
     return adapter;
   }, [DateAdapter, adapterLocale, dateFormats, dateLibInstance, parentUtils]);
-  const defaultDates = React$5.useMemo(() => {
+  const defaultDates = React.useMemo(() => {
     if (!utils) {
       return null;
     }
@@ -25078,7 +25036,7 @@ function LocalizationProvider(inProps) {
       maxDate: utils.date('2099-12-31T00:00:00.000')
     };
   }, [utils]);
-  const contextValue = React$5.useMemo(() => {
+  const contextValue = React.useMemo(() => {
     return {
       utils,
       defaultDates,
@@ -25215,15 +25173,15 @@ const DEFAULT_LOCALE = enUSPickers;
 getPickersLocalization(enUSPickers);
 
 const useLocalizationContext = () => {
-  const localization = React$5.useContext(MuiPickersAdapterContext);
+  const localization = React.useContext(MuiPickersAdapterContext);
   if (localization === null) {
     throw new Error(['MUI: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
   }
   if (localization.utils === null) {
     throw new Error(['MUI: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
   }
-  const localeText = React$5.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
-  return React$5.useMemo(() => _extends({}, localization, {
+  const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return React.useMemo(() => _extends({}, localization, {
     localeText
   }), [localization, localeText]);
 };
@@ -25232,7 +25190,7 @@ const useDefaultDates = () => useLocalizationContext().defaultDates;
 const useLocaleText = () => useLocalizationContext().localeText;
 const useNow = () => {
   const utils = useUtils();
-  const now = React$5.useRef(utils.date());
+  const now = React.useRef(utils.date());
   return now.current;
 };
 
@@ -25402,7 +25360,7 @@ function useSlotProps(parameters) {
   } = mergeSlotProps(_extends({}, rest, {
     externalSlotProps: resolvedComponentsProps
   }));
-  const ref = useForkRef$2(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
+  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
   const props = appendOwnerState(elementType, _extends({}, mergedProps, {
     ref
   }), ownerState);
@@ -25437,7 +25395,7 @@ const Calendar = createSvgIcon( /*#__PURE__*/jsx("path", {
 /**
  * @ignore - internal component.
  */
-createSvgIcon( /*#__PURE__*/jsxs(React$5.Fragment, {
+createSvgIcon( /*#__PURE__*/jsxs(React.Fragment, {
   children: [/*#__PURE__*/jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/jsx("path", {
@@ -25455,7 +25413,7 @@ const DateRange = createSvgIcon( /*#__PURE__*/jsx("path", {
 /**
  * @ignore - internal component.
  */
-const Time = createSvgIcon( /*#__PURE__*/jsxs(React$5.Fragment, {
+const Time = createSvgIcon( /*#__PURE__*/jsxs(React.Fragment, {
   children: [/*#__PURE__*/jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/jsx("path", {
@@ -25507,7 +25465,7 @@ const useUtilityClasses$m = ownerState => {
   };
   return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
 };
-const PickersArrowSwitcher = /*#__PURE__*/React$5.forwardRef(function PickersArrowSwitcher(inProps, ref) {
+const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
   var _slots$previousIconBu, _slots$nextIconButton, _slots$leftArrowIcon, _slots$rightArrowIcon;
   const theme = useTheme$2();
   const isRTL = theme.direction === 'rtl';
@@ -25675,23 +25633,23 @@ function useViews({
       }
     }
   }
-  const previousOpenTo = React$5.useRef(openTo);
-  const previousViews = React$5.useRef(views);
-  const defaultView = React$5.useRef(views.includes(openTo) ? openTo : views[0]);
-  const [view, setView] = useControlled$2({
+  const previousOpenTo = React.useRef(openTo);
+  const previousViews = React.useRef(views);
+  const defaultView = React.useRef(views.includes(openTo) ? openTo : views[0]);
+  const [view, setView] = useControlled({
     name: 'useViews',
     state: 'view',
     controlled: inView,
     default: defaultView.current
   });
-  const defaultFocusedView = React$5.useRef(autoFocus ? view : null);
-  const [focusedView, setFocusedView] = useControlled$2({
+  const defaultFocusedView = React.useRef(autoFocus ? view : null);
+  const [focusedView, setFocusedView] = useControlled({
     name: 'useViews',
     state: 'focusedView',
     controlled: inFocusedView,
     default: defaultFocusedView.current
   });
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     // Update the current view when `openTo` or `views` props change
     if (previousOpenTo.current && previousOpenTo.current !== openTo || previousViews.current && previousViews.current.some(previousView => !views.includes(previousView))) {
       setView(views.includes(openTo) ? openTo : views[0]);
@@ -25700,18 +25658,18 @@ function useViews({
   const viewIndex = views.indexOf(view);
   const previousView = (_views = views[viewIndex - 1]) != null ? _views : null;
   const nextView = (_views2 = views[viewIndex + 1]) != null ? _views2 : null;
-  const handleChangeView = _default$3(newView => {
+  const handleChangeView = useEventCallback(newView => {
     setView(newView);
     if (onViewChange) {
       onViewChange(newView);
     }
   });
-  const goToNextView = _default$3(() => {
+  const goToNextView = useEventCallback(() => {
     if (nextView) {
       handleChangeView(nextView);
     }
   });
-  const setValueAndGoToNextView = _default$3((value, currentViewSelectionState) => {
+  const setValueAndGoToNextView = useEventCallback((value, currentViewSelectionState) => {
     const isSelectionFinishedOnCurrentView = currentViewSelectionState === 'finish';
     const globalSelectionState = isSelectionFinishedOnCurrentView && Boolean(nextView) ? 'partial' : currentViewSelectionState;
     onChange(value, globalSelectionState);
@@ -25719,7 +25677,7 @@ function useViews({
       goToNextView();
     }
   });
-  const handleFocusedViewChange = _default$3((viewToFocus, hasFocus) => {
+  const handleFocusedViewChange = useEventCallback((viewToFocus, hasFocus) => {
     if (hasFocus) {
       // Focus event
       setFocusedView(viewToFocus);
@@ -25749,7 +25707,7 @@ function useNextMonthDisabled(month, {
   maxDate
 }) {
   const utils = useUtils();
-  return React$5.useMemo(() => {
+  return React.useMemo(() => {
     const now = utils.date();
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     return !utils.isAfter(lastEnabledMonth, month);
@@ -25760,7 +25718,7 @@ function usePreviousMonthDisabled(month, {
   minDate
 }) {
   const utils = useUtils();
-  return React$5.useMemo(() => {
+  return React.useMemo(() => {
     const now = utils.date();
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     return !utils.isBefore(firstEnabledMonth, month);
@@ -25769,7 +25727,7 @@ function usePreviousMonthDisabled(month, {
 function useMeridiemMode(date, ampm, onChange) {
   const utils = useUtils();
   const meridiemMode = getMeridiem(date, utils);
-  const handleMeridiemChange = React$5.useCallback(mode => {
+  const handleMeridiemChange = React.useCallback(mode => {
     const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
     onChange(timeWithMeridiem, 'partial');
   }, [ampm, date, onChange, utils]);
@@ -25920,8 +25878,8 @@ function ClockPointer(inProps) {
       viewValue
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded$p);
-  const previousType = React$5.useRef(type);
-  React$5.useEffect(() => {
+  const previousType = React.useRef(type);
+  React.useEffect(() => {
     previousType.current = type;
   }, [type]);
   const ownerState = _extends({}, props, {
@@ -26114,7 +26072,7 @@ function Clock(inProps) {
   const ownerState = props;
   const utils = useUtils();
   const localeText = useLocaleText();
-  const isMoving = React$5.useRef(false);
+  const isMoving = React.useRef(false);
   const classes = useUtilityClasses$k(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
   const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
@@ -26162,17 +26120,17 @@ function Clock(inProps) {
     }
     setTime(event.nativeEvent, 'finish');
   };
-  const hasSelected = React$5.useMemo(() => {
+  const hasSelected = React.useMemo(() => {
     if (type === 'hours') {
       return true;
     }
     return viewValue % 5 === 0;
   }, [type, viewValue]);
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
-  const listboxRef = React$5.useRef(null);
+  const listboxRef = React.useRef(null);
   // Since this is rendered when a Popper is opened we can't use passive effects.
   // Focusing in passive effects in Popper causes scroll jump.
-  useEnhancedEffect$3(() => {
+  useEnhancedEffect$1(() => {
     if (autoFocus) {
       // The ref not being resolved would be a bug in MUI.
       listboxRef.current.focus();
@@ -26218,7 +26176,7 @@ function Clock(inProps) {
           disabled
         },
         className: classes.squareMask
-      }), !isSelectedTimeDisabled && /*#__PURE__*/jsxs(React$5.Fragment, {
+      }), !isSelectedTimeDisabled && /*#__PURE__*/jsxs(React.Fragment, {
         children: [/*#__PURE__*/jsx(ClockPin, {
           className: classes.pin
         }), value != null && /*#__PURE__*/jsx(ClockPointer, {
@@ -26237,7 +26195,7 @@ function Clock(inProps) {
         className: classes.wrapper,
         children: children
       })]
-    }), ampm && ampmInClock && /*#__PURE__*/jsxs(React$5.Fragment, {
+    }), ampm && ampmInClock && /*#__PURE__*/jsxs(React.Fragment, {
       children: [/*#__PURE__*/jsx(ClockAmButton, {
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled || meridiemMode === null,
@@ -26468,7 +26426,7 @@ const TimeClockArrowSwitcher = styled(PickersArrowSwitcher, {
  *
  * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
  */
-const TimeClock = /*#__PURE__*/React$5.forwardRef(function TimeClock(inProps, ref) {
+const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProps, ref) {
   const localeText = useLocaleText();
   const now = useNow();
   const utils = useUtils();
@@ -26507,13 +26465,13 @@ const TimeClock = /*#__PURE__*/React$5.forwardRef(function TimeClock(inProps, re
     other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
-  const [value, setValue] = useControlled$2({
+  const [value, setValue] = useControlled({
     name: 'DateCalendar',
     state: 'value',
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
-  const handleValueChange = _default$3((newValue, selectionState) => {
+  const handleValueChange = useEventCallback((newValue, selectionState) => {
     setValue(newValue);
     onChange == null ? void 0 : onChange(newValue, selectionState);
   });
@@ -26530,12 +26488,12 @@ const TimeClock = /*#__PURE__*/React$5.forwardRef(function TimeClock(inProps, re
     onViewChange,
     onChange: handleValueChange
   });
-  const selectedTimeOrMidnight = React$5.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
+  const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const {
     meridiemMode,
     handleMeridiemChange
   } = useMeridiemMode(selectedTimeOrMidnight, ampm, setValueAndGoToNextView);
-  const isTimeDisabled = React$5.useCallback((rawValue, viewType) => {
+  const isTimeDisabled = React.useCallback((rawValue, viewType) => {
     const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
     const shouldCheckPastEnd = viewType === 'hours' || viewType === 'minutes' && views.includes('seconds');
     const containsValidTime = ({
@@ -26613,8 +26571,8 @@ const TimeClock = /*#__PURE__*/React$5.forwardRef(function TimeClock(inProps, re
         throw new Error('not supported');
     }
   }, [ampm, selectedTimeOrMidnight, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableClock, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const selectedId = useId$2();
-  const viewProps = React$5.useMemo(() => {
+  const selectedId = useId();
+  const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
         {
@@ -26953,7 +26911,7 @@ const PickersDayFiller = styled('div', {
   pointerEvents: 'none'
 }));
 const noop$1 = () => {};
-const PickersDayRaw = /*#__PURE__*/React$5.forwardRef(function PickersDay(inProps, forwardedRef) {
+const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersDay'
@@ -26991,12 +26949,12 @@ const PickersDayRaw = /*#__PURE__*/React$5.forwardRef(function PickersDay(inProp
   });
   const classes = useUtilityClasses$h(ownerState);
   const utils = useUtils();
-  const ref = React$5.useRef(null);
-  const handleRef = useForkRef$2(ref, forwardedRef);
+  const ref = React.useRef(null);
+  const handleRef = useForkRef(ref, forwardedRef);
 
   // Since this is rendered when a Popper is opened we can't use passive effects.
   // Focusing in passive effects in Popper causes scroll jump.
-  useEnhancedEffect$3(() => {
+  useEnhancedEffect$1(() => {
     if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) {
       // ref.current being null would be a bug in MUI
       ref.current.focus();
@@ -27198,7 +27156,7 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
  *
  * - [PickersDay API](https://mui.com/x/api/date-pickers/pickers-day/)
  */
-const PickersDay = /*#__PURE__*/React$5.memo(PickersDayRaw);
+const PickersDay = /*#__PURE__*/React.memo(PickersDayRaw);
 
 const findClosestEnabledDate = ({
   date,
@@ -28015,76 +27973,19 @@ const singleItemFieldValueManager = {
   parseValueStr: (valueStr, referenceValue, parseDate) => parseDate(valueStr.trim(), referenceValue)
 };
 
-var useForkRef$1 = {};
-
-var setRef$1 = {};
-
-Object.defineProperty(setRef$1, "__esModule", {
-  value: true
-});
-setRef$1.default = setRef;
-/**
- * TODO v5: consider making it private
- *
- * passes {value} to {ref}
- *
- * WARNING: Be sure to only call this inside a callback that is passed as a ref.
- * Otherwise, make sure to cleanup the previous {ref} if it changes. See
- * https://github.com/mui/material-ui/issues/13539
- *
- * Useful if you want to expose the ref of an inner component to the public API
- * while still using it inside the component.
- * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
- */
-function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
-
-var _interopRequireDefault = interopRequireDefault.exports;
-Object.defineProperty(useForkRef$1, "__esModule", {
-  value: true
-});
-var _default$2 = useForkRef$1.default = useForkRef;
-var React$2 = _interopRequireWildcard$2(React__default);
-var _setRef = _interopRequireDefault(setRef$1);
-function _getRequireWildcardCache$2(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$2 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$2(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$2(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; }
-function useForkRef(...refs) {
-  /**
-   * This will create a new function if the refs passed to this hook change and are all defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
-  return React$2.useMemo(() => {
-    if (refs.every(ref => ref == null)) {
-      return null;
-    }
-    return instance => {
-      refs.forEach(ref => {
-        (0, _setRef.default)(ref, instance);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
-}
-
 function useValidation(props, validate, isSameError, defaultErrorState) {
   const {
     value,
     onError
   } = props;
   const adapter = useLocalizationContext();
-  const previousValidationErrorRef = React$5.useRef(defaultErrorState);
+  const previousValidationErrorRef = React.useRef(defaultErrorState);
   const validationError = validate({
     adapter,
     value,
     props
   });
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (onError && !isSameError(validationError, previousValidationErrorRef.current)) {
       onError(validationError, value);
     }
@@ -28093,52 +27994,6 @@ function useValidation(props, validate, isSameError, defaultErrorState) {
   return validationError;
 }
 
-var useControlled$1 = {};
-
-Object.defineProperty(useControlled$1, "__esModule", {
-  value: true
-});
-var _default$1 = useControlled$1.default = useControlled;
-var React$1 = _interopRequireWildcard$1(React__default);
-function _getRequireWildcardCache$1(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache$1 = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard$1(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache$1(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; }
-/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-
-function useControlled({
-  controlled,
-  default: defaultProp,
-  name,
-  state = 'value'
-}) {
-  // isControlled is ignored in the hook dependency lists as it should never change.
-  const {
-    current: isControlled
-  } = React$1.useRef(controlled !== undefined);
-  const [valueState, setValue] = React$1.useState(defaultProp);
-  const value = isControlled ? controlled : valueState;
-  if (process.env.NODE_ENV !== 'production') {
-    React$1.useEffect(() => {
-      if (isControlled !== (controlled !== undefined)) {
-        console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled ${state} state of ${name} to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${name} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
-      }
-    }, [state, name, controlled]);
-    const {
-      current: defaultValue
-    } = React$1.useRef(defaultProp);
-    React$1.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
-        console.error([`MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + `To suppress this warning opt to use a controlled ${name}.`].join('\n'));
-      }
-    }, [JSON.stringify(defaultProp)]);
-  }
-  const setValueIfUncontrolled = React$1.useCallback(newValue => {
-    if (!isControlled) {
-      setValue(newValue);
-    }
-  }, []);
-  return [value, setValueIfUncontrolled];
-}
-
 const useFieldState = params => {
   var _ref;
   const utils = useUtils();
@@ -28162,12 +28017,12 @@ const useFieldState = params => {
       onSelectedSectionsChange
     }
   } = params;
-  const firstDefaultValue = React$5.useRef(defaultValue);
+  const firstDefaultValue = React.useRef(defaultValue);
   const valueFromTheOutside = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : valueManager.emptyValue;
-  const sectionsValueBoundaries = React$5.useMemo(() => getSectionsBoundaries(utils), [utils]);
-  const getSectionsFromValue = React$5.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity)), [fieldValueManager, format, localeText, isRTL, utils, formatDensity]);
-  const placeholder = React$5.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
-  const [state, setState] = React$5.useState(() => {
+  const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils), [utils]);
+  const getSectionsFromValue = React.useCallback((value, fallbackSections = null) => fieldValueManager.getSectionsFromValue(utils, value, fallbackSections, isRTL, date => splitFormatIntoSections(utils, localeText, format, date, formatDensity)), [fieldValueManager, format, localeText, isRTL, utils, formatDensity]);
+  const placeholder = React.useMemo(() => fieldValueManager.getValueStrFromSections(getSectionsFromValue(valueManager.emptyValue), isRTL), [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, isRTL]);
+  const [state, setState] = React.useState(() => {
     const sections = getSectionsFromValue(valueFromTheOutside);
     validateSections(sections, valueType);
     return {
@@ -28177,7 +28032,7 @@ const useFieldState = params => {
       tempValueStrAndroid: null
     };
   });
-  const [selectedSections, innerSetSelectedSections] = _default$1({
+  const [selectedSections, innerSetSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
     default: null,
     name: 'useField',
@@ -28190,7 +28045,7 @@ const useFieldState = params => {
       selectedSectionQuery: null
     }));
   };
-  const selectedSectionIndexes = React$5.useMemo(() => {
+  const selectedSectionIndexes = React.useMemo(() => {
     if (selectedSections == null) {
       return null;
     }
@@ -28374,7 +28229,7 @@ const useFieldState = params => {
   const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, prev, {
     tempValueStrAndroid
   }));
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (!valueManager.areValuesEqual(utils, state.value, valueFromTheOutside)) {
       setState(prevState => _extends({}, prevState, {
         value: valueFromTheOutside,
@@ -28384,7 +28239,7 @@ const useFieldState = params => {
     }
   }, [valueFromTheOutside]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     const sections = getSectionsFromValue(state.value);
     validateSections(sections, valueType);
     setState(prevState => _extends({}, prevState, {
@@ -28445,15 +28300,15 @@ const useFieldCharacterEditing = ({
   setTempAndroidValueStr
 }) => {
   const utils = useUtils();
-  const [query, setQuery] = React$5.useState(null);
-  const resetQuery = _default$3(() => setQuery(null));
-  React$5.useEffect(() => {
+  const [query, setQuery] = React.useState(null);
+  const resetQuery = useEventCallback(() => setQuery(null));
+  React.useEffect(() => {
     var _sections$query$secti;
     if (query != null && ((_sections$query$secti = sections[query.sectionIndex]) == null ? void 0 : _sections$query$secti.type) !== query.sectionType) {
       resetQuery();
     }
   }, [sections, query, resetQuery]);
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (query != null) {
       const timeout = setTimeout(() => resetQuery(), QUERY_LIFE_DURATION_MS);
       return () => {
@@ -28627,7 +28482,7 @@ const useFieldCharacterEditing = ({
     };
     return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => !Number.isNaN(Number(queryValue)));
   };
-  const applyCharacterEditing = _default$3(params => {
+  const applyCharacterEditing = useEventCallback(params => {
     const activeSection = sections[params.sectionIndex];
     const isNumericEditing = !Number.isNaN(Number(params.keyPressed));
     const response = isNumericEditing ? applyNumericEditing(params) : applyLetterEditing(params);
@@ -28725,12 +28580,12 @@ const useField = params => {
       validator
     } = params,
     otherForwardedProps = _objectWithoutPropertiesLoose(params.forwardedProps, _excluded$l);
-  const inputRef = React$5.useRef(null);
-  const handleRef = _default$2(inputRefProp, inputRef);
-  const focusTimeoutRef = React$5.useRef(undefined);
+  const inputRef = React.useRef(null);
+  const handleRef = useForkRef(inputRefProp, inputRef);
+  const focusTimeoutRef = React.useRef(undefined);
   const theme = useTheme$2();
   const isRTL = theme.direction === 'rtl';
-  const sectionOrder = React$5.useMemo(() => getSectionOrder(state.sections, isRTL), [state.sections, isRTL]);
+  const sectionOrder = React.useMemo(() => getSectionOrder(state.sections, isRTL), [state.sections, isRTL]);
   const syncSelectionFromDOM = () => {
     var _selectionStart;
     if (readOnly) {
@@ -28743,17 +28598,17 @@ const useField = params => {
     const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
   };
-  const handleInputClick = _default$3((...args) => {
+  const handleInputClick = useEventCallback((...args) => {
     onClick == null ? void 0 : onClick(...args);
     syncSelectionFromDOM();
   });
-  const handleInputMouseUp = _default$3(event => {
+  const handleInputMouseUp = useEventCallback(event => {
     onMouseUp == null ? void 0 : onMouseUp(event);
 
     // Without this, the browser will remove the selected when clicking inside an already-selected section.
     event.preventDefault();
   });
-  const handleInputFocus = _default$3((...args) => {
+  const handleInputFocus = useEventCallback((...args) => {
     onFocus == null ? void 0 : onFocus(...args);
     // The ref is guaranteed to be resolved at this point.
     const input = inputRef.current;
@@ -28775,11 +28630,11 @@ const useField = params => {
       }
     });
   });
-  const handleInputBlur = _default$3((...args) => {
+  const handleInputBlur = useEventCallback((...args) => {
     onBlur == null ? void 0 : onBlur(...args);
     setSelectedSections(null);
   });
-  const handleInputPaste = _default$3(event => {
+  const handleInputPaste = useEventCallback(event => {
     onPaste == null ? void 0 : onPaste(event);
     if (readOnly) {
       event.preventDefault();
@@ -28805,7 +28660,7 @@ const useField = params => {
     event.preventDefault();
     updateValueFromValueStr(pastedValue);
   });
-  const handleInputChange = _default$3(event => {
+  const handleInputChange = useEventCallback(event => {
     if (readOnly) {
       return;
     }
@@ -28853,7 +28708,7 @@ const useField = params => {
       sectionIndex: selectedSectionIndexes.startIndex
     });
   });
-  const handleInputKeyDown = _default$3(event => {
+  const handleInputKeyDown = useEventCallback(event => {
     onKeyDown == null ? void 0 : onKeyDown(event);
 
     // eslint-disable-next-line default-case
@@ -28937,7 +28792,7 @@ const useField = params => {
         }
     }
   });
-  default_1(() => {
+  useEnhancedEffect$1(() => {
     if (selectedSectionIndexes == null) {
       if (inputRef.current.scrollLeft) {
         // Ensure that input content is not marked as selected.
@@ -28966,7 +28821,7 @@ const useField = params => {
   const validationError = useValidation(_extends({}, internalProps, {
     value: state.value
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
-  const inputError = React$5.useMemo(() => {
+  const inputError = React.useMemo(() => {
     // only override when `error` is undefined.
     // in case of multi input fields, the `error` value is provided externally and will always be defined.
     if (error !== undefined) {
@@ -28974,7 +28829,7 @@ const useField = params => {
     }
     return valueManager.hasError(validationError);
   }, [valueManager, validationError, error]);
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     // Select the right section when focused on mount (`autoFocus = true` on the input)
     if (inputRef.current && inputRef.current === document.activeElement) {
       setSelectedSections('all');
@@ -28986,18 +28841,18 @@ const useField = params => {
   // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
   // This causes a small flickering on Android,
   // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (state.tempValueStrAndroid != null && selectedSectionIndexes != null) {
       resetCharacterQuery();
       clearActiveSection();
     }
   }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const valueStr = React$5.useMemo(() => {
+  const valueStr = React.useMemo(() => {
     var _state$tempValueStrAn;
     return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections, isRTL);
   }, [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
-  const inputMode = React$5.useMemo(() => {
+  const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';
     }
@@ -29008,7 +28863,7 @@ const useField = params => {
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
   const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
-  React$5.useImperativeHandle(unstableFieldRef, () => ({
+  React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => {
       var _selectionStart2, _selectionEnd;
@@ -29084,7 +28939,7 @@ const useIsDateDisabled = ({
   disablePast
 }) => {
   const adapter = useLocalizationContext();
-  return React$5.useCallback(day => validateDate({
+  return React.useCallback(day => validateDate({
     adapter,
     value: day,
     props: {
@@ -29259,7 +29114,7 @@ const useDateTimeField = ({
 const _excluded$j = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2$2 = ["inputRef"],
   _excluded3$1 = ["ref", "onPaste", "inputMode", "readOnly"];
-const DateTimeField = /*#__PURE__*/React$5.forwardRef(function DateTimeField(inProps, ref) {
+const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
   const themeProps = useThemeProps({
     props: inProps,
@@ -29638,14 +29493,14 @@ const useCalendarState = ({
   var _ref;
   const now = useNow();
   const utils = useUtils();
-  const reducerFn = React$5.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
-  const [calendarState, dispatch] = React$5.useReducer(reducerFn, {
+  const reducerFn = React.useRef(createCalendarStateReducer(Boolean(reduceAnimations), disableSwitchToMonthOnDayFocus, utils)).current;
+  const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: value || now,
     currentMonth: utils.startOfMonth((_ref = value != null ? value : defaultCalendarMonth) != null ? _ref : clamp(utils, now, minDate, maxDate)),
     slideDirection: 'left'
   });
-  const handleChangeMonth = React$5.useCallback(payload => {
+  const handleChangeMonth = React.useCallback(payload => {
     dispatch(_extends({
       type: 'changeMonth'
     }, payload));
@@ -29653,7 +29508,7 @@ const useCalendarState = ({
       onMonthChange(payload.newMonth);
     }
   }, [onMonthChange]);
-  const changeMonth = React$5.useCallback(newDate => {
+  const changeMonth = React.useCallback(newDate => {
     const newDateRequested = newDate;
     if (utils.isSameMonth(newDateRequested, calendarState.currentMonth)) {
       return;
@@ -29670,12 +29525,12 @@ const useCalendarState = ({
     disableFuture,
     disablePast
   });
-  const onMonthSwitchingAnimationEnd = React$5.useCallback(() => {
+  const onMonthSwitchingAnimationEnd = React.useCallback(() => {
     dispatch({
       type: 'finishMonthSwitchingAnimation'
     });
   }, []);
-  const changeFocusedDay = _default$3((newFocusedDate, withoutMonthSwitchingAnimation) => {
+  const changeFocusedDay = useEventCallback((newFocusedDate, withoutMonthSwitchingAnimation) => {
     if (!isDateDisabled(newFocusedDate)) {
       dispatch({
         type: 'changeFocusedDay',
@@ -31277,7 +31132,7 @@ function PickersSlideTransition(inProps) {
   };
   return /*#__PURE__*/jsx(PickersSlideTransitionRoot, {
     className: clsx(classes.root, className),
-    childFactory: element => /*#__PURE__*/React$5.cloneElement(element, {
+    childFactory: element => /*#__PURE__*/React.cloneElement(element, {
       classNames: transitionClasses
     }),
     role: "presentation",
@@ -31452,16 +31307,16 @@ function WrappedDay(_ref) {
       })
     }),
     dayProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2$1);
-  const isDisabled = React$5.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
-  const outsideCurrentMonth = React$5.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
-  const isFirstVisibleCell = React$5.useMemo(() => {
+  const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
+  const outsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
+  const isFirstVisibleCell = React.useMemo(() => {
     const startOfMonth = utils.startOfMonth(utils.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
       return utils.isSameDay(day, startOfMonth);
     }
     return utils.isSameDay(day, utils.startOfWeek(startOfMonth));
   }, [currentMonthNumber, day, showDaysOutsideCurrentMonth, utils]);
-  const isLastVisibleCell = React$5.useMemo(() => {
+  const isLastVisibleCell = React.useMemo(() => {
     const endOfMonth = utils.endOfMonth(utils.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
       return utils.isSameDay(day, endOfMonth);
@@ -31536,14 +31391,14 @@ function DayCalendar(inProps) {
     disableFuture
   });
   const localeText = useLocaleText();
-  const [internalHasFocus, setInternalHasFocus] = useControlled$2({
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'DayCalendar',
     state: 'hasFocus',
     controlled: hasFocus,
     default: autoFocus != null ? autoFocus : false
   });
-  const [internalFocusedDay, setInternalFocusedDay] = React$5.useState(() => focusedDay || now);
-  const handleDaySelect = _default$3(day => {
+  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
+  const handleDaySelect = useEventCallback(day => {
     if (readOnly) {
       return;
     }
@@ -31557,7 +31412,7 @@ function DayCalendar(inProps) {
       setInternalHasFocus(true);
     }
   };
-  const handleKeyDown = _default$3((event, day) => {
+  const handleKeyDown = useEventCallback((event, day) => {
     switch (event.key) {
       case 'ArrowUp':
         focusDay(utils.addDays(day, -7));
@@ -31615,21 +31470,21 @@ function DayCalendar(inProps) {
         break;
     }
   });
-  const handleFocus = _default$3((event, day) => focusDay(day));
-  const handleBlur = _default$3((event, day) => {
+  const handleFocus = useEventCallback((event, day) => focusDay(day));
+  const handleBlur = useEventCallback((event, day) => {
     if (internalHasFocus && utils.isSameDay(internalFocusedDay, day)) {
       onFocusedViewChange == null ? void 0 : onFocusedViewChange(false);
     }
   });
   const currentMonthNumber = utils.getMonth(currentMonth);
-  const validSelectedDays = React$5.useMemo(() => selectedDays.filter(day => !!day).map(day => utils.startOfDay(day)), [utils, selectedDays]);
+  const validSelectedDays = React.useMemo(() => selectedDays.filter(day => !!day).map(day => utils.startOfDay(day)), [utils, selectedDays]);
 
   // need a new ref whenever the `key` of the transition changes: http://reactcommunity.org/react-transition-group/transition/#Transition-prop-nodeRef.
   const transitionKey = currentMonthNumber;
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const slideNodeRef = React$5.useMemo(() => /*#__PURE__*/React$5.createRef(), [transitionKey]);
+  const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
   const startOfCurrentWeek = utils.startOfWeek(now);
-  const focusableDay = React$5.useMemo(() => {
+  const focusableDay = React.useMemo(() => {
     const startOfMonth = utils.startOfMonth(currentMonth);
     const endOfMonth = utils.endOfMonth(currentMonth);
     if (isDateDisabled(internalFocusedDay) || utils.isAfterDay(internalFocusedDay, endOfMonth) || utils.isBeforeDay(internalFocusedDay, startOfMonth)) {
@@ -31645,7 +31500,7 @@ function DayCalendar(inProps) {
     }
     return internalFocusedDay;
   }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils]);
-  const weeksToDisplay = React$5.useMemo(() => {
+  const weeksToDisplay = React.useMemo(() => {
     const toDisplay = utils.getWeekArray(currentMonth);
     let nextMonth = utils.addMonths(currentMonth, 1);
     while (fixedWeekNumber && toDisplay.length < fixedWeekNumber) {
@@ -31901,6 +31756,7 @@ var RULESET = 'rule';
 var DECLARATION = 'decl';
 var IMPORT = '@import';
 var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
 
 /**
  * @param {number}
@@ -32315,7 +32171,7 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 					// \0 }
 					case 0: case 125: scanning = 0;
 					// ;
-					case 59 + offset:
+					case 59 + offset: if (ampersand == -1) characters = replace(characters, /\f/g, '');
 						if (property > 0 && (strlen(characters) - length))
 							append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations);
 						break
@@ -32330,8 +32186,8 @@ function parse (value, root, parent, rule, rules, rulesets, pseudo, points, decl
 								parse(characters, root, reference, reference, props, rulesets, length, points, children);
 							else
 								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-									// d m s
-									case 100: case 109: case 115:
+									// d l m s
+									case 100: case 108: case 109: case 115:
 										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
 										break
 									default:
@@ -32450,6 +32306,7 @@ function serialize (children, callback) {
  */
 function stringify (element, index, children, callback) {
 	switch (element.type) {
+		case LAYER: if (element.children.length) break
 		case IMPORT: case DECLARATION: return element.return = element.return || element.value
 		case COMMENT: return ''
 		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
@@ -33253,6 +33110,7 @@ function murmur2(str) {
 
 var unitlessKeys = {
   animationIterationCount: 1,
+  aspectRatio: 1,
   borderImageOutset: 1,
   borderImageSlice: 1,
   borderImageWidth: 1,
@@ -33617,13 +33475,13 @@ var syncFallback = function syncFallback(create) {
   return create();
 };
 
-var useInsertionEffect = React$5['useInsertion' + 'Effect'] ? React$5['useInsertion' + 'Effect'] : false;
+var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$1 ? syncFallback : useInsertionEffect || syncFallback;
 
 var isBrowser = typeof document !== 'undefined';
 var hasOwnProperty = {}.hasOwnProperty;
 
-var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
 // and we could have a special build just for that
@@ -33662,7 +33520,7 @@ if (!isBrowser) {
         cache = createCache({
           key: 'css'
         });
-        return /*#__PURE__*/createElement(EmotionCacheContext.Provider, {
+        return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {
           value: cache
         }, func(props, cache));
       } else {
@@ -33672,7 +33530,7 @@ if (!isBrowser) {
   };
 }
 
-var ThemeContext = /* #__PURE__ */createContext({});
+var ThemeContext = /* #__PURE__ */React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'EmotionThemeContext';
@@ -33701,7 +33559,7 @@ var Insertion = function Insertion(_ref) {
       next = next.next;
     }
 
-    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+    return /*#__PURE__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref2.nonce = cache.sheet.nonce, _ref2));
   }
@@ -33728,7 +33586,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
+  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -33749,11 +33607,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
     cache: cache,
     serialized: serialized,
     isStringTag: typeof WrappedComponent === 'string'
-  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
+  }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -34141,6 +33999,9 @@ process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
   return obj;
 }, {}) : {};
 
+// The different signatures imply different meaning for their arguments that can't be expressed structurally.
+// We express the difference with variable names.
+/* tslint:disable:unified-signatures */
 /* tslint:enable:unified-signatures */
 
 function createSpacing(spacingInput = 8) {
@@ -34377,8 +34238,8 @@ const width = style$1({
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
-      const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values[propValue];
+      var _props$theme;
+      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
       return {
         maxWidth: breakpoint || sizingTransform(propValue)
       };
@@ -34730,6 +34591,8 @@ function unstable_createStyleFunctionSx() {
     if (val == null) {
       return null;
     }
+
+    // TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
     if (themeKey === 'typography' && val === 'inherit') {
       return {
         [prop]: val
@@ -34858,7 +34721,7 @@ function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 function useTheme$1(defaultTheme = null) {
-  const contextTheme = React$5.useContext(ThemeContext);
+  const contextTheme = React.useContext(ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 
@@ -34943,7 +34806,7 @@ const PickersMonthButton = styled('button', {
 /**
  * @ignore - do not document.
  */
-const PickersMonth = /*#__PURE__*/React$5.memo(function PickersMonth(inProps) {
+const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersMonth'
@@ -34962,9 +34825,9 @@ const PickersMonth = /*#__PURE__*/React$5.memo(function PickersMonth(inProps) {
       // We don't want to forward this prop to the root element
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded$e);
-  const ref = React$5.useRef(null);
+  const ref = React.useRef(null);
   const classes = useUtilityClasses$d(props);
-  useEnhancedEffect$3(() => {
+  useEnhancedEffect$1(() => {
     if (autoFocus) {
       var _ref$current;
       (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
@@ -35032,7 +34895,7 @@ const MonthCalendarRoot = styled('div', {
   padding: '0 4px',
   width: 320
 });
-const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inProps, ref) {
+const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const now = useNow();
   const theme = useTheme();
   const utils = useUtils();
@@ -35059,15 +34922,15 @@ const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inP
     other = _objectWithoutPropertiesLoose(props, _excluded$d);
   const ownerState = props;
   const classes = useUtilityClasses$c(ownerState);
-  const [value, setValue] = useControlled$2({
+  const [value, setValue] = useControlled({
     name: 'MonthCalendar',
     state: 'value',
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
-  const todayMonth = React$5.useMemo(() => utils.getMonth(now), [utils, now]);
-  const selectedDateOrStartOfMonth = React$5.useMemo(() => value != null ? value : utils.startOfMonth(now), [now, utils, value]);
-  const selectedMonth = React$5.useMemo(() => {
+  const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
+  const selectedDateOrStartOfMonth = React.useMemo(() => value != null ? value : utils.startOfMonth(now), [now, utils, value]);
+  const selectedMonth = React.useMemo(() => {
     if (value != null) {
       return utils.getMonth(value);
     }
@@ -35076,20 +34939,20 @@ const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inP
     }
     return utils.getMonth(now);
   }, [now, value, utils, disableHighlightToday]);
-  const [focusedMonth, setFocusedMonth] = React$5.useState(() => selectedMonth || todayMonth);
-  const [internalHasFocus, setInternalHasFocus] = useControlled$2({
+  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || todayMonth);
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'MonthCalendar',
     state: 'hasFocus',
     controlled: hasFocus,
     default: autoFocus != null ? autoFocus : false
   });
-  const changeHasFocus = useEventCallback$2(newHasFocus => {
+  const changeHasFocus = useEventCallback(newHasFocus => {
     setInternalHasFocus(newHasFocus);
     if (onFocusedViewChange) {
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isMonthDisabled = useEventCallback$2(month => {
+  const isMonthDisabled = useEventCallback(month => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     if (utils.isBefore(month, firstEnabledMonth)) {
@@ -35103,7 +34966,7 @@ const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inP
     }
     return shouldDisableMonth(month);
   });
-  const handleMonthSelection = useEventCallback$2((event, month) => {
+  const handleMonthSelection = useEventCallback((event, month) => {
     if (readOnly) {
       return;
     }
@@ -35111,7 +34974,7 @@ const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inP
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
-  const focusMonth = useEventCallback$2(month => {
+  const focusMonth = useEventCallback(month => {
     if (!isMonthDisabled(utils.setMonth(selectedDateOrStartOfMonth, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
@@ -35120,10 +34983,10 @@ const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inP
       }
     }
   });
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     setFocusedMonth(prevFocusedMonth => selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth);
   }, [selectedMonth]);
-  const handleKeyDown = useEventCallback$2((event, month) => {
+  const handleKeyDown = useEventCallback((event, month) => {
     const monthsInYear = 12;
     const monthsInRow = 3;
     switch (event.key) {
@@ -35145,10 +35008,10 @@ const MonthCalendar = /*#__PURE__*/React$5.forwardRef(function MonthCalendar(inP
         break;
     }
   });
-  const handleMonthFocus = useEventCallback$2((event, month) => {
+  const handleMonthFocus = useEventCallback((event, month) => {
     focusMonth(month);
   });
-  const handleMonthBlur = useEventCallback$2((event, month) => {
+  const handleMonthBlur = useEventCallback((event, month) => {
     if (focusedMonth === month) {
       changeHasFocus(false);
     }
@@ -35338,7 +35201,7 @@ const PickersYearButton = styled('button', {
 /**
  * @ignore - internal component.
  */
-const PickersYear = /*#__PURE__*/React$5.memo(function PickersYear(inProps) {
+const PickersYear = /*#__PURE__*/React.memo(function PickersYear(inProps) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersYear'
@@ -35358,11 +35221,11 @@ const PickersYear = /*#__PURE__*/React$5.memo(function PickersYear(inProps) {
       // We don't want to forward this prop to the root element
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded$c);
-  const ref = React$5.useRef(null);
+  const ref = React.useRef(null);
   const classes = useUtilityClasses$b(props);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (autoFocus) {
       // `ref.current` being `null` would be a bug in MUI.
       ref.current.focus();
@@ -35433,7 +35296,7 @@ const YearCalendarRoot = styled('div', {
   width: 320,
   maxHeight: 304
 });
-const YearCalendar = /*#__PURE__*/React$5.forwardRef(function YearCalendar(inProps, ref) {
+const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
   const now = useNow();
   const theme = useTheme();
   const utils = useUtils();
@@ -35460,15 +35323,15 @@ const YearCalendar = /*#__PURE__*/React$5.forwardRef(function YearCalendar(inPro
     other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const ownerState = props;
   const classes = useUtilityClasses$a(ownerState);
-  const [value, setValue] = useControlled$2({
+  const [value, setValue] = useControlled({
     name: 'YearCalendar',
     state: 'value',
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
-  const selectedDateOrStartOfYear = React$5.useMemo(() => value != null ? value : utils.startOfYear(now), [now, utils, value]);
-  const todayYear = React$5.useMemo(() => utils.getYear(now), [utils, now]);
-  const selectedYear = React$5.useMemo(() => {
+  const selectedDateOrStartOfYear = React.useMemo(() => value != null ? value : utils.startOfYear(now), [now, utils, value]);
+  const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
+  const selectedYear = React.useMemo(() => {
     if (value != null) {
       return utils.getYear(value);
     }
@@ -35477,20 +35340,20 @@ const YearCalendar = /*#__PURE__*/React$5.forwardRef(function YearCalendar(inPro
     }
     return utils.getYear(now);
   }, [now, value, utils, disableHighlightToday]);
-  const [focusedYear, setFocusedYear] = React$5.useState(() => selectedYear || todayYear);
-  const [internalHasFocus, setInternalHasFocus] = useControlled$2({
+  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || todayYear);
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'YearCalendar',
     state: 'hasFocus',
     controlled: hasFocus,
     default: autoFocus != null ? autoFocus : false
   });
-  const changeHasFocus = useEventCallback$2(newHasFocus => {
+  const changeHasFocus = useEventCallback(newHasFocus => {
     setInternalHasFocus(newHasFocus);
     if (onFocusedViewChange) {
       onFocusedViewChange(newHasFocus);
     }
   });
-  const isYearDisabled = useEventCallback$2(dateToValidate => {
+  const isYearDisabled = useEventCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
     }
@@ -35508,7 +35371,7 @@ const YearCalendar = /*#__PURE__*/React$5.forwardRef(function YearCalendar(inPro
     }
     return false;
   });
-  const handleYearSelection = useEventCallback$2((event, year) => {
+  const handleYearSelection = useEventCallback((event, year) => {
     if (readOnly) {
       return;
     }
@@ -35516,17 +35379,17 @@ const YearCalendar = /*#__PURE__*/React$5.forwardRef(function YearCalendar(inPro
     setValue(newDate);
     onChange == null ? void 0 : onChange(newDate);
   });
-  const focusYear = useEventCallback$2(year => {
+  const focusYear = useEventCallback(year => {
     if (!isYearDisabled(utils.setYear(selectedDateOrStartOfYear, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus == null ? void 0 : onYearFocus(year);
     }
   });
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
   }, [selectedYear]);
-  const handleKeyDown = useEventCallback$2((event, year) => {
+  const handleKeyDown = useEventCallback((event, year) => {
     switch (event.key) {
       case 'ArrowUp':
         focusYear(year - yearsPerRow);
@@ -35546,17 +35409,17 @@ const YearCalendar = /*#__PURE__*/React$5.forwardRef(function YearCalendar(inPro
         break;
     }
   });
-  const handleYearFocus = useEventCallback$2((event, year) => {
+  const handleYearFocus = useEventCallback((event, year) => {
     focusYear(year);
   });
-  const handleYearBlur = useEventCallback$2((event, year) => {
+  const handleYearBlur = useEventCallback((event, year) => {
     if (focusedYear === year) {
       changeHasFocus(false);
     }
   });
-  const scrollerRef = React$5.useRef(null);
-  const handleRef = useForkRef$2(ref, scrollerRef);
-  React$5.useEffect(() => {
+  const scrollerRef = React.useRef(null);
+  const handleRef = useForkRef(ref, scrollerRef);
+  React.useEffect(() => {
     if (autoFocus || scrollerRef.current === null) {
       return;
     }
@@ -35940,9 +35803,9 @@ const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
  *
  * - [DateCalendar API](https://mui.com/x/api/date-pickers/date-calendar/)
  */
-const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inProps, ref) {
+const DateCalendar = /*#__PURE__*/React.forwardRef(function DateCalendar(inProps, ref) {
   const utils = useUtils();
-  const id = useId$2();
+  const id = useId();
   const props = useDateCalendarDefaultizedProps(inProps, 'MuiDateCalendar');
   const {
       autoFocus,
@@ -35984,13 +35847,13 @@ const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inPro
       monthsPerRow
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded$9);
-  const [value, setValue] = useControlled$2({
+  const [value, setValue] = useControlled({
     name: 'DateCalendar',
     state: 'value',
     controlled: valueProp,
     default: defaultValue != null ? defaultValue : null
   });
-  const handleValueChange = useEventCallback$2((newValue, selectionState) => {
+  const handleValueChange = useEventCallback((newValue, selectionState) => {
     setValue(newValue);
     onChange == null ? void 0 : onChange(newValue, selectionState);
   });
@@ -36029,7 +35892,7 @@ const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inPro
     disablePast,
     disableFuture
   });
-  const handleDateMonthChange = useEventCallback$2(newDate => {
+  const handleDateMonthChange = useEventCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
     const endOfMonth = utils.endOfMonth(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -36050,7 +35913,7 @@ const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inPro
     }
     changeFocusedDay(closestEnabledDate, true);
   });
-  const handleDateYearChange = useEventCallback$2(newDate => {
+  const handleDateYearChange = useEventCallback(newDate => {
     const startOfYear = utils.startOfYear(newDate);
     const endOfYear = utils.endOfYear(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -36071,14 +35934,14 @@ const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inPro
     }
     changeFocusedDay(closestEnabledDate, true);
   });
-  const handleSelectedDayChange = useEventCallback$2(day => {
+  const handleSelectedDayChange = useEventCallback(day => {
     if (value && day) {
       // If there is a date already selected, then we want to keep its time
       return setValueAndGoToNextView(utils.mergeDateAndTime(day, value), 'finish');
     }
     return setValueAndGoToNextView(day, 'finish');
   });
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (value != null && utils.isValid(value)) {
       changeMonth(value);
     }
@@ -36103,8 +35966,8 @@ const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inPro
   };
   const gridLabelId = `${id}-grid-label`;
   const hasFocus = focusedView !== null;
-  const prevOpenViewRef = React$5.useRef(view);
-  React$5.useEffect(() => {
+  const prevOpenViewRef = React.useRef(view);
+  React.useEffect(() => {
     // If the view change and the focus was on the previous view
     // Then we update the focus.
     if (prevOpenViewRef.current === view) {
@@ -36115,7 +35978,7 @@ const DateCalendar = /*#__PURE__*/React$5.forwardRef(function DateCalendar(inPro
     }
     prevOpenViewRef.current = view;
   }, [focusedView, setFocusedView, view]);
-  const selectedDays = React$5.useMemo(() => [value], [value]);
+  const selectedDays = React.useMemo(() => [value], [value]);
   return /*#__PURE__*/jsxs(DateCalendarRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
@@ -36475,7 +36338,7 @@ const PickersToolbarContent = styled(Grid, {
 }, !ownerState.isLandscape && {
   alignItems: 'center'
 }));
-const PickersToolbar = /*#__PURE__*/React$5.forwardRef(function PickersToolbar(inProps, ref) {
+const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersToolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersToolbar'
@@ -36601,11 +36464,11 @@ function clickedRootScrollbar(event, doc) {
  * @returns {Array} The ref and event handler to listen to the outside clicks.
  */
 function useClickAwayListener(active, onClickAway) {
-  const movedRef = React$5.useRef(false);
-  const syntheticEventRef = React$5.useRef(false);
-  const nodeRef = React$5.useRef(null);
-  const activatedRef = React$5.useRef(false);
-  React$5.useEffect(() => {
+  const movedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  React.useEffect(() => {
     if (!active) {
       return undefined;
     }
@@ -36630,7 +36493,7 @@ function useClickAwayListener(active, onClickAway) {
   // clicking a checkbox to check it, hitting a button to submit a form,
   // and hitting left arrow to move the cursor in a text input etc.
   // Only special HTML elements have these default behaviors.
-  const handleClickAway = useEventCallback$2(event => {
+  const handleClickAway = useEventCallback(event => {
     if (!activatedRef.current) {
       return;
     }
@@ -36672,7 +36535,7 @@ function useClickAwayListener(active, onClickAway) {
   const handleSynthetic = () => {
     syntheticEventRef.current = true;
   };
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (active) {
       const doc = ownerDocument(nodeRef.current);
       const handleTouchMove = () => {
@@ -36687,7 +36550,7 @@ function useClickAwayListener(active, onClickAway) {
     }
     return undefined;
   }, [active, handleClickAway]);
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     // TODO This behavior is not tested automatically
     // It's unclear whether this is due to different update semantics in test (batched in act() vs discrete on click).
     // Or if this is a timing related issues due to different Transition components
@@ -36724,7 +36587,7 @@ function PickersPopper(inProps) {
     slots,
     slotProps
   } = props;
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
       // IE11, Edge (prior to using Blink?) use 'Esc'
       if (open && (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc')) {
@@ -36736,8 +36599,8 @@ function PickersPopper(inProps) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [onDismiss, open]);
-  const lastFocusedElementRef = React$5.useRef(null);
-  React$5.useEffect(() => {
+  const lastFocusedElementRef = React.useRef(null);
+  React.useEffect(() => {
     if (role === 'tooltip' || shouldRestoreFocus && !shouldRestoreFocus()) {
       return;
     }
@@ -36754,9 +36617,9 @@ function PickersPopper(inProps) {
     }
   }, [open, role, shouldRestoreFocus]);
   const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur != null ? onBlur : onDismiss);
-  const paperRef = React$5.useRef(null);
-  const handleRef = useForkRef$2(paperRef, containerRef);
-  const handlePaperRef = useForkRef$2(handleRef, clickAwayRef);
+  const paperRef = React.useRef(null);
+  const handleRef = useForkRef(paperRef, containerRef);
+  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
   const ownerState = props;
   const classes = useUtilityClasses$6(ownerState);
   const handleKeyDown = event => {
@@ -36864,7 +36727,7 @@ const PickersToolbarTextRoot = styled(Typography, {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
-const PickersToolbarText = /*#__PURE__*/React$5.forwardRef(function PickersToolbarText(inProps, ref) {
+const PickersToolbarText = /*#__PURE__*/React.forwardRef(function PickersToolbarText(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersToolbarText'
@@ -36903,7 +36766,7 @@ const PickersToolbarButtonRoot = styled(Button, {
   minWidth: 16,
   textTransform: 'none'
 });
-const PickersToolbarButton = /*#__PURE__*/React$5.forwardRef(function PickersToolbarButton(inProps, ref) {
+const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function PickersToolbarButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersToolbarButton'
@@ -36938,12 +36801,12 @@ const useOpenState = ({
   onOpen,
   onClose
 }) => {
-  const isControllingOpenProp = React$5.useRef(typeof open === 'boolean').current;
-  const [openState, setIsOpenState] = React$5.useState(false);
+  const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
+  const [openState, setIsOpenState] = React.useState(false);
 
   // It is required to update inner state in useEffect in order to avoid situation when
   // Our component is not mounted yet, but `open` state is set to `true` (e.g. initially opened)
-  React$5.useEffect(() => {
+  React.useEffect(() => {
     if (isControllingOpenProp) {
       if (typeof open !== 'boolean') {
         throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
@@ -36951,7 +36814,7 @@ const useOpenState = ({
       setIsOpenState(open);
     }
   }, [isControllingOpenProp, open]);
-  const setIsOpen = React$5.useCallback(newIsOpen => {
+  const setIsOpen = React.useCallback(newIsOpen => {
     if (!isControllingOpenProp) {
       setIsOpenState(newIsOpen);
     }
@@ -37075,19 +36938,19 @@ const usePickerValue = ({
   } = props;
   const {
     current: defaultValue
-  } = React$5.useRef(inDefaultValue);
+  } = React.useRef(inDefaultValue);
   const {
     current: isControlled
-  } = React$5.useRef(inValue !== undefined);
+  } = React.useRef(inValue !== undefined);
 
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
-    React$5.useEffect(() => {
+    React.useEffect(() => {
       if (isControlled !== (inValue !== undefined)) {
         console.error([`MUI: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
     }, [inValue]);
-    React$5.useEffect(() => {
+    React.useEffect(() => {
       if (!isControlled && defaultValue !== inDefaultValue) {
         console.error([`MUI: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
       }
@@ -37097,7 +36960,7 @@ const usePickerValue = ({
 
   const utils = useUtils();
   const adapter = useLocalizationContext();
-  const [selectedSections, setSelectedSections] = useControlled$2({
+  const [selectedSections, setSelectedSections] = useControlled({
     controlled: selectedSectionsProp,
     default: null,
     name: 'usePickerValue',
@@ -37107,7 +36970,7 @@ const usePickerValue = ({
     isOpen,
     setIsOpen
   } = useOpenState(props);
-  const [dateState, setDateState] = React$5.useState(() => {
+  const [dateState, setDateState] = React.useState(() => {
     let initialValue;
     if (inValue !== undefined) {
       initialValue = inValue;
@@ -37127,7 +36990,7 @@ const usePickerValue = ({
   useValidation(_extends({}, props, {
     value: dateState.draft
   }), validator, valueManager.isSameError, valueManager.defaultErrorState);
-  const updateDate = _default$3(action => {
+  const updateDate = useEventCallback(action => {
     const updaterParams = {
       action,
       dateState,
@@ -37175,54 +37038,54 @@ const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  const handleClear = _default$3(() => {
+  const handleClear = useEventCallback(() => {
     updateDate({
       value: valueManager.emptyValue,
       name: 'setValueFromAction',
       pickerAction: 'clear'
     });
   });
-  const handleAccept = _default$3(() => {
+  const handleAccept = useEventCallback(() => {
     updateDate({
       value: dateState.lastPublishedValue,
       name: 'setValueFromAction',
       pickerAction: 'accept'
     });
   });
-  const handleDismiss = _default$3(() => {
+  const handleDismiss = useEventCallback(() => {
     updateDate({
       value: dateState.lastPublishedValue,
       name: 'setValueFromAction',
       pickerAction: 'dismiss'
     });
   });
-  const handleCancel = _default$3(() => {
+  const handleCancel = useEventCallback(() => {
     updateDate({
       value: dateState.lastCommittedValue,
       name: 'setValueFromAction',
       pickerAction: 'cancel'
     });
   });
-  const handleSetToday = _default$3(() => {
+  const handleSetToday = useEventCallback(() => {
     updateDate({
       value: valueManager.getTodayValue(utils, valueType),
       name: 'setValueFromAction',
       pickerAction: 'today'
     });
   });
-  const handleOpen = _default$3(() => setIsOpen(true));
-  const handleClose = _default$3(() => setIsOpen(false));
-  const handleChange = _default$3((newValue, selectionState = 'partial') => updateDate({
+  const handleOpen = useEventCallback(() => setIsOpen(true));
+  const handleClose = useEventCallback(() => setIsOpen(false));
+  const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
     value: newValue,
     selectionState
   }));
-  const handleChangeField = _default$3((newValue, context) => updateDate({
+  const handleChangeField = useEventCallback((newValue, context) => updateDate({
     name: 'setValueFromField',
     value: newValue,
     context
   }));
-  const handleFieldSelectedSectionsChange = _default$3(newSelectedSections => {
+  const handleFieldSelectedSectionsChange = useEventCallback(newSelectedSections => {
     setSelectedSections(newSelectedSections);
     onSelectedSectionsChange == null ? void 0 : onSelectedSectionsChange(newSelectedSections);
   });
@@ -37241,7 +37104,7 @@ const usePickerValue = ({
     selectedSections,
     onSelectedSectionsChange: handleFieldSelectedSectionsChange
   };
-  const viewValue = React$5.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
+  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
   const viewResponse = {
     value: viewValue,
     onChange: handleChange,
@@ -37332,7 +37195,7 @@ const usePickerViews = ({
   const {
     hasUIView,
     viewModeLookup
-  } = React$5.useMemo(() => views.reduce((acc, viewForReduce) => {
+  } = React.useMemo(() => views.reduce((acc, viewForReduce) => {
     let viewMode;
     if (disableOpenPicker) {
       viewMode = 'field';
@@ -37350,7 +37213,7 @@ const usePickerViews = ({
     hasUIView: false,
     viewModeLookup: {}
   }), [disableOpenPicker, viewRenderers, views]);
-  const hasMultipleUITimeView = React$5.useMemo(() => {
+  const hasMultipleUITimeView = React.useMemo(() => {
     const numberUITimeViews = views.reduce((acc, viewForReduce) => {
       if (viewRenderers[viewForReduce] != null && isTimeView(viewForReduce)) {
         return acc + 1;
@@ -37360,12 +37223,12 @@ const usePickerViews = ({
     return numberUITimeViews > 1;
   }, [viewRenderers, views]);
   const currentViewMode = viewModeLookup[view];
-  const shouldRestoreFocus = _default$3(() => currentViewMode === 'UI');
-  const [popperView, setPopperView] = React$5.useState(currentViewMode === 'UI' ? view : null);
+  const shouldRestoreFocus = useEventCallback(() => currentViewMode === 'UI');
+  const [popperView, setPopperView] = React.useState(currentViewMode === 'UI' ? view : null);
   if (popperView !== view && viewModeLookup[view] === 'UI') {
     setPopperView(view);
   }
-  default_1(() => {
+  useEnhancedEffect$1(() => {
     if (currentViewMode === 'field' && open) {
       onClose();
       onSelectedSectionsChange('hours');
@@ -37375,7 +37238,7 @@ const usePickerViews = ({
     }
   }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  default_1(() => {
+  useEnhancedEffect$1(() => {
     if (!open) {
       return;
     }
@@ -37441,8 +37304,8 @@ function getOrientation() {
   return 'portrait';
 }
 const useIsLandscape = (views, customOrientation) => {
-  const [orientation, setOrientation] = React$5.useState(getOrientation);
-  useEnhancedEffect$3(() => {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect$1(() => {
     const eventHandler = () => {
       setOrientation(getOrientation());
     };
@@ -37933,9 +37796,9 @@ const PickersLayout = function PickersLayout(inProps) {
     ownerState: ownerState,
     children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/jsx(PickersLayoutContentWrapper, {
       className: classes.contentWrapper,
-      children: wrapperVariant === 'desktop' ? /*#__PURE__*/jsxs(React$5.Fragment, {
+      children: wrapperVariant === 'desktop' ? /*#__PURE__*/jsxs(React.Fragment, {
         children: [content, tabs]
-      }) : /*#__PURE__*/jsxs(React$5.Fragment, {
+      }) : /*#__PURE__*/jsxs(React.Fragment, {
         children: [tabs, content]
       })
     }), actionBar]
@@ -38007,49 +37870,6 @@ const extractValidationProps = props => VALIDATION_PROP_NAMES.reduce((extractedP
   return extractedProps;
 }, {});
 
-var useId$1 = {};
-
-Object.defineProperty(useId$1, "__esModule", {
-  value: true
-});
-var _default = useId$1.default = useId;
-var React = _interopRequireWildcard(React__default);
-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; }
-let globalId = 0;
-function useGlobalId(idOverride) {
-  const [defaultId, setDefaultId] = React.useState(idOverride);
-  const id = idOverride || defaultId;
-  React.useEffect(() => {
-    if (defaultId == null) {
-      // Fallback to this default id when possible.
-      // Use the incrementing value for client-side rendering only.
-      // We can't use it server-side.
-      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
-      globalId += 1;
-      setDefaultId(`mui-${globalId}`);
-    }
-  }, [defaultId]);
-  return id;
-}
-
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseId = React['useId' + ''];
-/**
- *
- * @example <div id={useId()} />
- * @param idOverride
- * @returns {string}
- */
-function useId(idOverride) {
-  if (maybeReactUseId !== undefined) {
-    const reactId = maybeReactUseId();
-    return idOverride != null ? idOverride : reactId;
-  }
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-  return useGlobalId(idOverride);
-}
-
 const _excluded$3 = ["props", "getOpenDialogAriaText"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
@@ -38081,9 +37901,9 @@ const useDesktopPicker = _ref => {
     localeText
   } = props;
   const utils = useUtils();
-  const internalInputRef = React$5.useRef(null);
-  const containerRef = React$5.useRef(null);
-  const labelId = _default();
+  const internalInputRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const labelId = useId();
   const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const {
     open,
@@ -38158,7 +37978,7 @@ const useDesktopPicker = _ref => {
     textField: slots.textField
   }, fieldProps.slots);
   const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
-  const handleInputRef = _default$2(internalInputRef, fieldProps.inputRef, inputRef);
+  const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -38311,8 +38131,8 @@ const useMobilePicker = _ref => {
     localeText
   } = props;
   const utils = useUtils();
-  const internalInputRef = React$5.useRef(null);
-  const labelId = _default();
+  const internalInputRef = React.useRef(null);
+  const labelId = useId();
   const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const {
     open,
@@ -38356,7 +38176,7 @@ const useMobilePicker = _ref => {
     textField: slots.textField
   }, fieldProps.slots);
   const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
-  const handleInputRef = _default$2(internalInputRef, fieldProps.inputRef, inputRef);
+  const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
   if (isToolbarHidden) {
     if (label) {
@@ -38525,13 +38345,13 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
     children: [/*#__PURE__*/jsx(Tab, {
       value: "date",
       "aria-label": localeText.dateTableLabel,
-      icon: /*#__PURE__*/jsx(React$5.Fragment, {
+      icon: /*#__PURE__*/jsx(React.Fragment, {
         children: dateIcon
       })
     }), /*#__PURE__*/jsx(Tab, {
       value: "time",
       "aria-label": localeText.timeTableLabel,
-      icon: /*#__PURE__*/jsx(React$5.Fragment, {
+      icon: /*#__PURE__*/jsx(React.Fragment, {
         children: timeIcon
       })
     })]
@@ -38746,7 +38566,7 @@ function DateTimePickerToolbar(inProps) {
     theme
   }));
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  const dateText = React$5.useMemo(() => {
+  const dateText = React.useMemo(() => {
     if (!value) {
       return toolbarPlaceholder;
     }
@@ -38787,7 +38607,7 @@ function DateTimePickerToolbar(inProps) {
           onClick: () => onViewChange('hours'),
           selected: view === 'hours',
           value: value ? formatHours(value) : '--'
-        }), views.includes('minutes') && /*#__PURE__*/jsxs(React$5.Fragment, {
+        }), views.includes('minutes') && /*#__PURE__*/jsxs(React.Fragment, {
           children: [/*#__PURE__*/jsx(DateTimePickerToolbarSeparator, {
             variant: "h3",
             value: ":",
@@ -38799,7 +38619,7 @@ function DateTimePickerToolbar(inProps) {
             selected: view === 'minutes',
             value: value ? utils.format(value, 'minutes') : '--'
           })]
-        }), views.includes('seconds') && /*#__PURE__*/jsxs(React$5.Fragment, {
+        }), views.includes('seconds') && /*#__PURE__*/jsxs(React.Fragment, {
           children: [/*#__PURE__*/jsx(DateTimePickerToolbarSeparator, {
             variant: "h3",
             value: ":",
@@ -38893,7 +38713,7 @@ function useDateTimePickerDefaultizedProps(props, name) {
     name
   });
   const ampm = (_themeProps$ampm = themeProps.ampm) != null ? _themeProps$ampm : utils.is12HourCycleInCurrentLocale();
-  const localeText = React$5.useMemo(() => {
+  const localeText = React.useMemo(() => {
     var _themeProps$localeTex;
     if (((_themeProps$localeTex = themeProps.localeText) == null ? void 0 : _themeProps$localeTex.toolbarTitle) == null) {
       return themeProps.localeText;
@@ -38935,7 +38755,7 @@ function useDateTimePickerDefaultizedProps(props, name) {
   });
 }
 
-const DesktopDateTimePicker = /*#__PURE__*/React$5.forwardRef(function DesktopDateTimePicker(inProps, ref) {
+const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
 
@@ -39348,7 +39168,7 @@ DesktopDateTimePicker.propTypes = {
   yearsPerRow: PropTypes.oneOf([3, 4])
 };
 
-const MobileDateTimePicker = /*#__PURE__*/React$5.forwardRef(function MobileDateTimePicker(inProps, ref) {
+const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
 
@@ -39760,7 +39580,7 @@ MobileDateTimePicker.propTypes = {
 };
 
 const _excluded = ["desktopModeMediaQuery"];
-const DateTimePicker = /*#__PURE__*/React$5.forwardRef(function DateTimePicker(inProps, ref) {
+const DateTimePicker = /*#__PURE__*/React.forwardRef(function DateTimePicker(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDateTimePicker'
@@ -40196,13 +40016,13 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
   var errors = getErrors(name, formErrors);
   // Ensure value is a Moment object
   var dateValue = value ? moment$1(value) : null;
-  return /*#__PURE__*/React$5.createElement(ReactHookFormFormControl, {
+  return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     disabled: disabled,
     errors: errors,
     className: className,
     sx: sx,
     isReadOnly: isReadOnly
-  }, /*#__PURE__*/React$5.createElement(DateTimePicker, Object.assign({
+  }, /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({
     desktopModeMediaQuery: "@media (min-width: 720px)",
     ampm: false,
     format: format,
@@ -40223,7 +40043,7 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
         name: name,
         placeholder: disabled ? '' : format.toLowerCase(),
         InputProps: Object.assign({
-          endAdornment: /*#__PURE__*/React$5.createElement(InputAdornment, {
+          endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
             style: {
               paddingTop: '16px'
             },
@@ -40720,7 +40540,7 @@ var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_ref) {
       defaultValue: defaultValue
     }, defaultProps$1)),
     field = _useController.field;
-  return field.value !== null ? /*#__PURE__*/React$5.createElement("input", Object.assign({}, field, {
+  return field.value !== null ? /*#__PURE__*/React.createElement("input", Object.assign({}, field, {
     type: "hidden"
   })) : null;
 };
@@ -40749,7 +40569,7 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
     getValues = _useFormContext.getValues,
     setValue = _useFormContext.setValue,
     register = _useFormContext.register;
-  React$5.useEffect(function () {
+  React.useEffect(function () {
     setValue(HIDDEN_INPUT_HELPER_IS_DRAFT, isDefaultDraft, {
       shouldDirty: false
     });
@@ -40770,7 +40590,7 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
     });
   };
   var DraftFieldHelper = function DraftFieldHelper() {
-    return /*#__PURE__*/React$5.createElement("input", Object.assign({}, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
+    return /*#__PURE__*/React.createElement("input", Object.assign({}, register(HIDDEN_INPUT_HELPER_IS_DRAFT), {
       type: "hidden"
     }));
   };