sevago-library 1.4.0 → 1.4.2

package/dist/index.esm.js

@@ -5,8 +5,8 @@ import { createTheme as createTheme$2, Stack, TableCell, tableCellClasses, Linea
 import dayjs from "dayjs";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, useId as useId$1, useEffect, Fragment as Fragment$1, useRef, isValidElement, cloneElement, Children, createElement, useMemo, forwardRef, useCallback } from "react";
-import { unstable_createGetCssVar, createSpacing as createSpacing$1, useTheme as useTheme$3, GlobalStyles as GlobalStyles$1, unstable_memoTheme, keyframes, css, shouldForwardProp as shouldForwardProp$1, alpha as alpha$1, Stack as Stack$1, Box as Box$1 } from "@mui/system";
+import React__default, { useState, useId as useId$1, Fragment as Fragment$1, useEffect, useRef, isValidElement, cloneElement, Children, createElement, useMemo, forwardRef, useCallback } from "react";
+import { createSpacing as createSpacing$1, unstable_createGetCssVar, useTheme as useTheme$3, GlobalStyles as GlobalStyles$1, unstable_memoTheme, keyframes, css, shouldForwardProp as shouldForwardProp$1, alpha as alpha$1, Stack as Stack$1, Box as Box$1 } from "@mui/system";
 import styled$2 from "@emotion/styled";
 import { ThemeContext } from "@emotion/react";
 import { LayoutGroup, motion, AnimatePresence, MotionConfig } from "framer-motion";
@@ -28292,8 +28292,11 @@ function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (process.env.NODE_ENV !== "production") {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage(18, `(${shorthand})`));
+      throw (
+        /* minify-error */
+        new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.`)
+      );
     }
     return null;
   }
@@ -28865,7 +28868,7 @@ function serializeStyles(args, registered, mergedProps) {
   };
 }
 /**
- * @mui/styled-engine v7.3.3
+ * @mui/styled-engine v7.3.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -30417,7 +30420,7 @@ function createThemeNoVars(options = {}, ...args) {
   if (options.vars && // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
   // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
   options.generateThemeVars === void 0) {
-    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature." : formatMuiErrorMessage(20));
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name or follow the [docs](https://v7.mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature." : formatMuiErrorMessage(20));
   }
   const palette = createPalette({
     ...paletteInput,
@@ -30765,10 +30768,10 @@ function createThemeWithVars(options = {}, ...args) {
     }
     assignNode(palette, ["Alert", "AppBar", "Avatar", "Button", "Chip", "FilledInput", "LinearProgress", "Skeleton", "Slider", "SnackbarContent", "SpeedDialAction", "StepConnector", "StepContent", "Switch", "TableCell", "Tooltip"]);
     if (palette.mode === "light") {
-      setColor(palette.Alert, "errorColor", colorMix(private_safeDarken, palette.error.light, 0.6));
-      setColor(palette.Alert, "infoColor", colorMix(private_safeDarken, palette.info.light, 0.6));
-      setColor(palette.Alert, "successColor", colorMix(private_safeDarken, palette.success.light, 0.6));
-      setColor(palette.Alert, "warningColor", colorMix(private_safeDarken, palette.warning.light, 0.6));
+      setColor(palette.Alert, "errorColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.6));
+      setColor(palette.Alert, "infoColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.6));
+      setColor(palette.Alert, "successColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.6));
+      setColor(palette.Alert, "warningColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.6));
       setColor(palette.Alert, "errorFilledBg", setCssVarColor("palette-error-main"));
       setColor(palette.Alert, "infoFilledBg", setCssVarColor("palette-info-main"));
       setColor(palette.Alert, "successFilledBg", setCssVarColor("palette-success-main"));
@@ -30777,10 +30780,10 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, "infoFilledColor", silent(() => palette.getContrastText(palette.info.main)));
       setColor(palette.Alert, "successFilledColor", silent(() => palette.getContrastText(palette.success.main)));
       setColor(palette.Alert, "warningFilledColor", silent(() => palette.getContrastText(palette.warning.main)));
-      setColor(palette.Alert, "errorStandardBg", colorMix(private_safeLighten, palette.error.light, 0.9));
-      setColor(palette.Alert, "infoStandardBg", colorMix(private_safeLighten, palette.info.light, 0.9));
-      setColor(palette.Alert, "successStandardBg", colorMix(private_safeLighten, palette.success.light, 0.9));
-      setColor(palette.Alert, "warningStandardBg", colorMix(private_safeLighten, palette.warning.light, 0.9));
+      setColor(palette.Alert, "errorStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.9));
+      setColor(palette.Alert, "infoStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.9));
+      setColor(palette.Alert, "successStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.9));
+      setColor(palette.Alert, "warningStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.9));
       setColor(palette.Alert, "errorIconColor", setCssVarColor("palette-error-main"));
       setColor(palette.Alert, "infoIconColor", setCssVarColor("palette-info-main"));
       setColor(palette.Alert, "successIconColor", setCssVarColor("palette-success-main"));
@@ -30795,20 +30798,20 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, "bg", "rgba(0, 0, 0, 0.06)");
       setColor(palette.FilledInput, "hoverBg", "rgba(0, 0, 0, 0.09)");
       setColor(palette.FilledInput, "disabledBg", "rgba(0, 0, 0, 0.12)");
-      setColor(palette.LinearProgress, "primaryBg", colorMix(private_safeLighten, palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, "secondaryBg", colorMix(private_safeLighten, palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, "errorBg", colorMix(private_safeLighten, palette.error.main, 0.62));
-      setColor(palette.LinearProgress, "infoBg", colorMix(private_safeLighten, palette.info.main, 0.62));
-      setColor(palette.LinearProgress, "successBg", colorMix(private_safeLighten, palette.success.main, 0.62));
-      setColor(palette.LinearProgress, "warningBg", colorMix(private_safeLighten, palette.warning.main, 0.62));
-      setColor(palette.Skeleton, "bg", colorSpace ? colorMix(private_safeAlpha, palette.text.primary, 0.11) : `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.11)`);
-      setColor(palette.Slider, "primaryTrack", colorMix(private_safeLighten, palette.primary.main, 0.62));
-      setColor(palette.Slider, "secondaryTrack", colorMix(private_safeLighten, palette.secondary.main, 0.62));
-      setColor(palette.Slider, "errorTrack", colorMix(private_safeLighten, palette.error.main, 0.62));
-      setColor(palette.Slider, "infoTrack", colorMix(private_safeLighten, palette.info.main, 0.62));
-      setColor(palette.Slider, "successTrack", colorMix(private_safeLighten, palette.success.main, 0.62));
-      setColor(palette.Slider, "warningTrack", colorMix(private_safeLighten, palette.warning.main, 0.62));
-      const snackbarContentBackground = colorSpace ? colorMix(private_safeDarken, palette.background.default, 0.6825) : private_safeEmphasize(palette.background.default, 0.8);
+      setColor(palette.LinearProgress, "primaryBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, "secondaryBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, "errorBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.62));
+      setColor(palette.LinearProgress, "infoBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.62));
+      setColor(palette.LinearProgress, "successBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.62));
+      setColor(palette.LinearProgress, "warningBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-light") : palette.warning.main, 0.62));
+      setColor(palette.Skeleton, "bg", colorSpace ? colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-text-primary") : palette.text.primary, 0.11) : `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.11)`);
+      setColor(palette.Slider, "primaryTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.62));
+      setColor(palette.Slider, "secondaryTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.62));
+      setColor(palette.Slider, "errorTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.62));
+      setColor(palette.Slider, "infoTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.62));
+      setColor(palette.Slider, "successTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.62));
+      setColor(palette.Slider, "warningTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-main") : palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(private_safeDarken, nativeColor ? getCssVar("palette-background-default") : palette.background.default, 0.6825) : private_safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, "bg", snackbarContentBackground);
       setColor(palette.SnackbarContent, "color", silent(() => colorSpace ? dark.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, "fabHoverBg", private_safeEmphasize(palette.background.paper, 0.15));
@@ -30816,20 +30819,20 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.StepContent, "border", setCssVarColor("palette-grey-400"));
       setColor(palette.Switch, "defaultColor", setCssVarColor("palette-common-white"));
       setColor(palette.Switch, "defaultDisabledColor", setCssVarColor("palette-grey-100"));
-      setColor(palette.Switch, "primaryDisabledColor", colorMix(private_safeLighten, palette.primary.main, 0.62));
-      setColor(palette.Switch, "secondaryDisabledColor", colorMix(private_safeLighten, palette.secondary.main, 0.62));
-      setColor(palette.Switch, "errorDisabledColor", colorMix(private_safeLighten, palette.error.main, 0.62));
-      setColor(palette.Switch, "infoDisabledColor", colorMix(private_safeLighten, palette.info.main, 0.62));
-      setColor(palette.Switch, "successDisabledColor", colorMix(private_safeLighten, palette.success.main, 0.62));
-      setColor(palette.Switch, "warningDisabledColor", colorMix(private_safeLighten, palette.warning.main, 0.62));
-      setColor(palette.TableCell, "border", colorMix(private_safeLighten, colorMix(private_safeAlpha, palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, "bg", colorMix(private_safeAlpha, palette.grey[700], 0.92));
+      setColor(palette.Switch, "primaryDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.62));
+      setColor(palette.Switch, "secondaryDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.62));
+      setColor(palette.Switch, "errorDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.62));
+      setColor(palette.Switch, "infoDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.62));
+      setColor(palette.Switch, "successDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.62));
+      setColor(palette.Switch, "warningDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-main") : palette.warning.main, 0.62));
+      setColor(palette.TableCell, "border", colorMix(private_safeLighten, private_safeAlpha(nativeColor ? getCssVar("palette-divider") : palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, "bg", colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-grey-700") : palette.grey[700], 0.92));
     }
     if (palette.mode === "dark") {
-      setColor(palette.Alert, "errorColor", colorMix(private_safeLighten, palette.error.light, 0.6));
-      setColor(palette.Alert, "infoColor", colorMix(private_safeLighten, palette.info.light, 0.6));
-      setColor(palette.Alert, "successColor", colorMix(private_safeLighten, palette.success.light, 0.6));
-      setColor(palette.Alert, "warningColor", colorMix(private_safeLighten, palette.warning.light, 0.6));
+      setColor(palette.Alert, "errorColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.6));
+      setColor(palette.Alert, "infoColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.6));
+      setColor(palette.Alert, "successColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.6));
+      setColor(palette.Alert, "warningColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.6));
       setColor(palette.Alert, "errorFilledBg", setCssVarColor("palette-error-dark"));
       setColor(palette.Alert, "infoFilledBg", setCssVarColor("palette-info-dark"));
       setColor(palette.Alert, "successFilledBg", setCssVarColor("palette-success-dark"));
@@ -30838,10 +30841,10 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, "infoFilledColor", silent(() => palette.getContrastText(palette.info.dark)));
       setColor(palette.Alert, "successFilledColor", silent(() => palette.getContrastText(palette.success.dark)));
       setColor(palette.Alert, "warningFilledColor", silent(() => palette.getContrastText(palette.warning.dark)));
-      setColor(palette.Alert, "errorStandardBg", colorMix(private_safeDarken, palette.error.light, 0.9));
-      setColor(palette.Alert, "infoStandardBg", colorMix(private_safeDarken, palette.info.light, 0.9));
-      setColor(palette.Alert, "successStandardBg", colorMix(private_safeDarken, palette.success.light, 0.9));
-      setColor(palette.Alert, "warningStandardBg", colorMix(private_safeDarken, palette.warning.light, 0.9));
+      setColor(palette.Alert, "errorStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.9));
+      setColor(palette.Alert, "infoStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.9));
+      setColor(palette.Alert, "successStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.9));
+      setColor(palette.Alert, "warningStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.9));
       setColor(palette.Alert, "errorIconColor", setCssVarColor("palette-error-main"));
       setColor(palette.Alert, "infoIconColor", setCssVarColor("palette-info-main"));
       setColor(palette.Alert, "successIconColor", setCssVarColor("palette-success-main"));
@@ -30858,20 +30861,20 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, "bg", "rgba(255, 255, 255, 0.09)");
       setColor(palette.FilledInput, "hoverBg", "rgba(255, 255, 255, 0.13)");
       setColor(palette.FilledInput, "disabledBg", "rgba(255, 255, 255, 0.12)");
-      setColor(palette.LinearProgress, "primaryBg", colorMix(private_safeDarken, palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, "secondaryBg", colorMix(private_safeDarken, palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, "errorBg", colorMix(private_safeDarken, palette.error.main, 0.5));
-      setColor(palette.LinearProgress, "infoBg", colorMix(private_safeDarken, palette.info.main, 0.5));
-      setColor(palette.LinearProgress, "successBg", colorMix(private_safeDarken, palette.success.main, 0.5));
-      setColor(palette.LinearProgress, "warningBg", colorMix(private_safeDarken, palette.warning.main, 0.5));
-      setColor(palette.Skeleton, "bg", colorSpace ? colorMix(private_safeAlpha, palette.text.primary, 0.13) : `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.13)`);
-      setColor(palette.Slider, "primaryTrack", colorMix(private_safeDarken, palette.primary.main, 0.5));
-      setColor(palette.Slider, "secondaryTrack", colorMix(private_safeDarken, palette.secondary.main, 0.5));
-      setColor(palette.Slider, "errorTrack", colorMix(private_safeDarken, palette.error.main, 0.5));
-      setColor(palette.Slider, "infoTrack", colorMix(private_safeDarken, palette.info.main, 0.5));
-      setColor(palette.Slider, "successTrack", colorMix(private_safeDarken, palette.success.main, 0.5));
-      setColor(palette.Slider, "warningTrack", colorMix(private_safeDarken, palette.warning.main, 0.5));
-      const snackbarContentBackground = colorSpace ? colorMix(private_safeLighten, palette.background.default, 0.985) : private_safeEmphasize(palette.background.default, 0.98);
+      setColor(palette.LinearProgress, "primaryBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, "secondaryBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, "errorBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.5));
+      setColor(palette.LinearProgress, "infoBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.5));
+      setColor(palette.LinearProgress, "successBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.5));
+      setColor(palette.LinearProgress, "warningBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-main") : palette.warning.main, 0.5));
+      setColor(palette.Skeleton, "bg", colorSpace ? colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-text-primary") : palette.text.primary, 0.13) : `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.13)`);
+      setColor(palette.Slider, "primaryTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.5));
+      setColor(palette.Slider, "secondaryTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.5));
+      setColor(palette.Slider, "errorTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.5));
+      setColor(palette.Slider, "infoTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.5));
+      setColor(palette.Slider, "successTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.5));
+      setColor(palette.Slider, "warningTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(private_safeLighten, nativeColor ? getCssVar("palette-background-default") : palette.background.default, 0.985) : private_safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, "bg", snackbarContentBackground);
       setColor(palette.SnackbarContent, "color", silent(() => colorSpace ? light.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, "fabHoverBg", private_safeEmphasize(palette.background.paper, 0.15));
@@ -30879,23 +30882,25 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.StepContent, "border", setCssVarColor("palette-grey-600"));
       setColor(palette.Switch, "defaultColor", setCssVarColor("palette-grey-300"));
       setColor(palette.Switch, "defaultDisabledColor", setCssVarColor("palette-grey-600"));
-      setColor(palette.Switch, "primaryDisabledColor", colorMix(private_safeDarken, palette.primary.main, 0.55));
-      setColor(palette.Switch, "secondaryDisabledColor", colorMix(private_safeDarken, palette.secondary.main, 0.55));
-      setColor(palette.Switch, "errorDisabledColor", colorMix(private_safeDarken, palette.error.main, 0.55));
-      setColor(palette.Switch, "infoDisabledColor", colorMix(private_safeDarken, palette.info.main, 0.55));
-      setColor(palette.Switch, "successDisabledColor", colorMix(private_safeDarken, palette.success.main, 0.55));
-      setColor(palette.Switch, "warningDisabledColor", colorMix(private_safeDarken, palette.warning.main, 0.55));
-      setColor(palette.TableCell, "border", colorMix(private_safeDarken, colorMix(private_safeAlpha, palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, "bg", colorMix(private_safeAlpha, palette.grey[700], 0.92));
-    }
-    setColorChannel(palette.background, "default");
-    setColorChannel(palette.background, "paper");
-    setColorChannel(palette.common, "background");
-    setColorChannel(palette.common, "onBackground");
-    setColorChannel(palette, "divider");
+      setColor(palette.Switch, "primaryDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.55));
+      setColor(palette.Switch, "secondaryDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.55));
+      setColor(palette.Switch, "errorDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.55));
+      setColor(palette.Switch, "infoDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.55));
+      setColor(palette.Switch, "successDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.55));
+      setColor(palette.Switch, "warningDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.main, 0.55));
+      setColor(palette.TableCell, "border", colorMix(private_safeDarken, private_safeAlpha(nativeColor ? getCssVar("palette-divider") : palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, "bg", colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-grey-700") : palette.grey[700], 0.92));
+    }
+    if (!nativeColor) {
+      setColorChannel(palette.background, "default");
+      setColorChannel(palette.background, "paper");
+      setColorChannel(palette.common, "background");
+      setColorChannel(palette.common, "onBackground");
+      setColorChannel(palette, "divider");
+    }
     Object.keys(palette).forEach((color2) => {
       const colors = palette[color2];
-      if (color2 !== "tonalOffset" && colors && typeof colors === "object") {
+      if (color2 !== "tonalOffset" && !nativeColor && colors && typeof colors === "object") {
         if (colors.main) {
           setColor(palette[color2], "mainChannel", private_safeColorChannel(toRgb(colors.main)));
         }
@@ -34157,15 +34162,8 @@ const transferDateSectionValue = (adapter, section, dateToTransferFrom, dateToTr
       return adapter.setDate(dateToTransferTo, adapter.getDate(dateToTransferFrom));
     }
     case "meridiem": {
-      const isAM = adapter.getHours(dateToTransferFrom) < 12;
-      const mergedDateHours = adapter.getHours(dateToTransferTo);
-      if (isAM && mergedDateHours >= 12) {
-        return adapter.addHours(dateToTransferTo, -12);
-      }
-      if (!isAM && mergedDateHours < 12) {
-        return adapter.addHours(dateToTransferTo, 12);
-      }
-      return dateToTransferTo;
+      const meridiem = adapter.getHours(dateToTransferFrom) < 12 ? "am" : "pm";
+      return convertToMeridiem(dateToTransferTo, meridiem, true, adapter);
     }
     case "hours": {
       return adapter.setHours(dateToTransferTo, adapter.getHours(dateToTransferFrom));
@@ -36896,6 +36894,26 @@ TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 TransitionGroup.defaultProps = defaultProps;
 const reflow = (node) => node.scrollTop;
+function normalizedTransitionCallback(nodeRef, callback) {
+  return (maybeIsAppearing) => {
+    if (callback) {
+      const node = nodeRef.current;
+      if (maybeIsAppearing === void 0) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+}
+function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles2, styleProp, childStyle) {
+  const base = state === "exited" && !inProp ? hiddenStyles2 : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 function getTransitionProps(props, options) {
   const {
     timeout: timeout2,
@@ -36919,9 +36937,21 @@ const styles$3 = {
   entered: {
     opacity: 1,
     transform: "none"
+  },
+  exiting: {
+    opacity: 0,
+    transform: getScale(0.75)
+  },
+  exited: {
+    opacity: 0,
+    transform: getScale(0.75)
   }
 };
-const isWebKit154 = typeof navigator !== "undefined" && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
+const hiddenStyles$1 = {
+  opacity: 0,
+  transform: getScale(0.75),
+  visibility: "hidden"
+};
 const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
   const {
     addEndListener,
@@ -36937,8 +36967,6 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
     onExiting,
     style: style2,
     timeout: timeout2 = "auto",
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const timer = useTimeout();
@@ -36946,18 +36974,8 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
   const theme = useTheme();
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
-    if (callback) {
-      const node = nodeRef.current;
-      if (maybeIsAppearing === void 0) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node);
     const {
       duration: transitionDuration,
@@ -36981,7 +36999,7 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
       duration: duration2,
       delay
     }), theme.transitions.create("transform", {
-      duration: isWebKit154 ? duration2 : duration2 * 0.666,
+      duration: duration2 * 0.666,
       delay,
       easing: transitionTimingFunction
     })].join(",");
@@ -36989,9 +37007,9 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback((node) => {
+  const handleEntered = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, (node) => {
     const {
       duration: transitionDuration,
       delay,
@@ -37014,8 +37032,8 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
       duration: duration2,
       delay
     }), theme.transitions.create("transform", {
-      duration: isWebKit154 ? duration2 : duration2 * 0.666,
-      delay: isWebKit154 ? delay : delay || duration2 * 0.333,
+      duration: duration2 * 0.666,
+      delay: delay || duration2 * 0.333,
       easing: transitionTimingFunction
     })].join(",");
     node.style.opacity = 0;
@@ -37024,7 +37042,12 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = normalizedTransitionCallback(nodeRef, (node) => {
+    node.style.transition = "";
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = (next) => {
     if (timeout2 === "auto") {
       timer.start(autoTimeout.current || 0, next);
@@ -37033,7 +37056,7 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /* @__PURE__ */ jsx(TransitionComponent, {
+  return /* @__PURE__ */ jsx(Transition, {
     appear,
     in: inProp,
     nodeRef,
@@ -37050,15 +37073,9 @@ const Grow = /* @__PURE__ */ React.forwardRef(function Grow2(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = getTransitionChildStyle(state, inProp, styles$3, hiddenStyles$1, style2, children.props.style);
       return /* @__PURE__ */ React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          transform: getScale(0.75),
-          visibility: state === "exited" && !inProp ? "hidden" : void 0,
-          ...styles$3[state],
-          ...style2,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });
@@ -37148,8 +37165,18 @@ const styles$2 = {
   },
   entered: {
     opacity: 1
+  },
+  exiting: {
+    opacity: 0
+  },
+  exited: {
+    opacity: 0
   }
 };
+const hiddenStyles = {
+  opacity: 0,
+  visibility: "hidden"
+};
 const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
   const theme = useTheme();
   const defaultTimeout = {
@@ -37170,24 +37197,12 @@ const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
     onExiting,
     style: style2,
     timeout: timeout2 = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
-    if (callback) {
-      const node = nodeRef.current;
-      if (maybeIsAppearing === void 0) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node);
     const transitionProps = getTransitionProps({
       style: style2,
@@ -37196,15 +37211,14 @@ const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
     }, {
       mode: "enter"
     });
-    node.style.webkitTransition = theme.transitions.create("opacity", transitionProps);
     node.style.transition = theme.transitions.create("opacity", transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback((node) => {
+  const handleEntered = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, (node) => {
     const transitionProps = getTransitionProps({
       style: style2,
       timeout: timeout2,
@@ -37212,19 +37226,23 @@ const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
     }, {
       mode: "exit"
     });
-    node.style.webkitTransition = theme.transitions.create("opacity", transitionProps);
     node.style.transition = theme.transitions.create("opacity", transitionProps);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = normalizedTransitionCallback(nodeRef, (node) => {
+    node.style.transition = "";
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = (next) => {
     if (addEndListener) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /* @__PURE__ */ jsx(TransitionComponent, {
+  return /* @__PURE__ */ jsx(Transition, {
     appear,
     in: inProp,
     nodeRef,
@@ -37241,14 +37259,9 @@ const Fade = /* @__PURE__ */ React.forwardRef(function Fade2(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = getTransitionChildStyle(state, inProp, styles$2, hiddenStyles, style2, children.props.style);
       return /* @__PURE__ */ React.cloneElement(children, {
-        style: {
-          opacity: 0,
-          visibility: state === "exited" && !inProp ? "hidden" : void 0,
-          ...styles$2[state],
-          ...style2,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });
@@ -37738,7 +37751,7 @@ function getLayoutRect(element) {
     height: height2
   };
 }
-function contains(parent, child) {
+function contains$1(parent, child) {
   var rootNode = child.getRootNode && child.getRootNode();
   if (parent.contains(child)) {
     return true;
@@ -37894,7 +37907,7 @@ function effect$1(_ref2) {
       return;
     }
   }
-  if (!contains(state.elements.popper, arrowElement)) {
+  if (!contains$1(state.elements.popper, arrowElement)) {
     return;
   }
   state.elements.arrow = arrowElement;
@@ -38200,7 +38213,7 @@ function getClippingParents(element) {
     return [];
   }
   return clippingParents2.filter(function(clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
+    return isElement(clippingParent) && contains$1(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
   });
 }
 function getClippingRect(element, boundary, rootBoundary, strategy) {
@@ -38896,6 +38909,11 @@ var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyS
 var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
+function isLayoutSupported() {
+  return !(/jsdom|HappyDOM/.test(window.navigator.userAgent) || // TODO(v9): Remove the test environment check
+  // eslint-disable-next-line mui/consistent-production-guard
+  process.env.NODE_ENV === "test");
+}
 function setRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -39059,7 +39077,7 @@ const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(p
     if (process.env.NODE_ENV !== "production") {
       if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
         const box = resolvedAnchorElement.getBoundingClientRect();
-        if (process.env.NODE_ENV !== "test" && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (isLayoutSupported() && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           console.warn(["MUI: The `anchorEl` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
         }
       }
@@ -39096,8 +39114,24 @@ const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(p
       modifiers: popperModifiers
     });
     handlePopperRefRef.current(popper2);
+    const popperElement = tooltipRef.current;
     return () => {
-      popper2.destroy();
+      if (popperElement) {
+        const {
+          style: style2
+        } = popperElement;
+        const position = style2.position;
+        const top2 = style2.top;
+        const left2 = style2.left;
+        const transform = style2.transform;
+        popper2.destroy();
+        style2.position = position;
+        style2.top = top2;
+        style2.left = left2;
+        style2.transform = transform;
+      } else {
+        popper2.destroy();
+      }
       handlePopperRefRef.current(null);
     };
   }, [resolvedAnchorElement, disablePortal, modifiers, open2, popperOptions, rtlPlacement]);
@@ -39213,8 +39247,10 @@ process.env.NODE_ENV !== "production" ? Popper$1.propTypes = {
       const resolvedAnchorEl = resolveAnchorEl$1(props.anchorEl);
       if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== "test" && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(["MUI: The `anchorEl` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
+        if (process.env.NODE_ENV !== "production") {
+          if (isLayoutSupported() && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+            return new Error(["MUI: The `anchorEl` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
+          }
         }
       } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== "function" || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
         return new Error(["MUI: The `anchorEl` prop provided to the component is invalid.", "It should be an HTML element instance or a virtualElement ", "(https://popper.js.org/docs/v2/virtual-elements/)."].join("\n"));
@@ -39502,6 +39538,41 @@ process.env.NODE_ENV !== "production" ? Popper2.propTypes = {
    */
   transition: PropTypes.bool
 } : void 0;
+function contains(parent, child) {
+  var _a;
+  if (!parent || !child) {
+    return false;
+  }
+  if (parent.contains(child)) {
+    return true;
+  }
+  const rootNode = (_a = child.getRootNode) == null ? void 0 : _a.call(child);
+  if (rootNode && rootNode instanceof ShadowRoot) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      next = next.parentNode ?? next.host ?? null;
+    }
+  }
+  return false;
+}
+function activeElement(doc) {
+  var _a;
+  let element = doc.activeElement;
+  while (((_a = element == null ? void 0 : element.shadowRoot) == null ? void 0 : _a.activeElement) != null) {
+    element = element.shadowRoot.activeElement;
+  }
+  return element;
+}
+const FOCUSABLE_ATTRIBUTE = "data-mui-focusable";
+function getFocusTarget(rootElement) {
+  if (!rootElement) {
+    return null;
+  }
+  return rootElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? rootElement : rootElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`);
+}
 const candidatesSelector = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'].join(",");
 function getTabIndex(node) {
   const tabindexAttr = parseInt(node.getAttribute("tabindex") || "", 10);
@@ -39582,19 +39653,22 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open2]);
   React.useEffect(() => {
+    ignoreNextEnforceFocus.current = false;
     if (!open2 || !rootRef.current) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
-    if (!rootRef.current.contains(doc.activeElement)) {
-      if (!rootRef.current.hasAttribute("tabIndex")) {
+    const activeElement$1 = activeElement(doc);
+    const focusTarget = getFocusTarget(rootRef.current) ?? rootRef.current;
+    if (!contains(rootRef.current, activeElement$1)) {
+      if (!focusTarget.hasAttribute("tabIndex")) {
         if (process.env.NODE_ENV !== "production") {
           console.error(["MUI: The modal content node does not accept focus.", 'For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".'].join("\n"));
         }
-        rootRef.current.setAttribute("tabIndex", "-1");
+        focusTarget.setAttribute("tabIndex", "-1");
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
@@ -39617,7 +39691,8 @@ function FocusTrap(props) {
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== "Tab") {
         return;
       }
-      if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
+      const activeElement$1 = activeElement(doc);
+      if (activeElement$1 === rootRef.current && nativeEvent.shiftKey) {
         ignoreNextEnforceFocus.current = true;
         if (sentinelEnd.current) {
           sentinelEnd.current.focus();
@@ -39630,17 +39705,18 @@ function FocusTrap(props) {
       if (rootElement === null) {
         return;
       }
+      const activeEl = activeElement(doc);
       if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
         ignoreNextEnforceFocus.current = false;
         return;
       }
-      if (rootElement.contains(doc.activeElement)) {
+      if (contains(rootElement, activeEl)) {
         return;
       }
-      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+      if (disableEnforceFocus && activeEl !== sentinelStart.current && activeEl !== sentinelEnd.current) {
         return;
       }
-      if (doc.activeElement !== reactFocusEventTarget.current) {
+      if (activeEl !== reactFocusEventTarget.current) {
         reactFocusEventTarget.current = null;
       } else if (reactFocusEventTarget.current !== null) {
         return;
@@ -39649,7 +39725,7 @@ function FocusTrap(props) {
         return;
       }
       let tabbable = [];
-      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+      if (activeEl === sentinelStart.current || activeEl === sentinelEnd.current) {
         tabbable = getTabbable(rootRef.current);
       }
       if (tabbable.length > 0) {
@@ -39670,7 +39746,8 @@ function FocusTrap(props) {
     doc.addEventListener("focusin", contain);
     doc.addEventListener("keydown", loopFocus, true);
     const interval = setInterval(() => {
-      if (doc.activeElement && doc.activeElement.tagName === "BODY") {
+      const activeEl = activeElement(doc);
+      if (activeEl && activeEl.tagName === "BODY") {
         contain();
       }
     }, 50);
@@ -41260,8 +41337,11 @@ function elementTypeAcceptingRef(props, propName, componentName, location2, prop
   if (typeof propValue === "function" && !isClassComponent(propValue)) {
     warningHint = "Did you accidentally provide a plain function component instead?";
   }
+  if (propValue === React.Fragment) {
+    warningHint = "Did you accidentally provide a React.Fragment instead?";
+  }
   if (warningHint !== void 0) {
-    return new Error(`Invalid ${location2} \`${safePropName}\` supplied to \`${componentName}\`. Expected an element type that can hold a ref. ${warningHint} For more information see https://mui.com/r/caveat-with-refs-guide`);
+    return new Error(`Invalid ${location2} \`${safePropName}\` supplied to \`${componentName}\`. Expected an element type that can hold a ref. ${warningHint} For more information see https://v7.mui.com/r/caveat-with-refs-guide`);
   }
   return null;
 }
@@ -41870,7 +41950,13 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
   });
   const isNonNativeButton = () => {
     const button = buttonRef.current;
-    return component && component !== "button" && !(button.tagName === "A" && button.href);
+    if (!button) {
+      return component && component !== "button";
+    }
+    if (button.tagName === "BUTTON") {
+      return false;
+    }
+    return !(button.tagName === "A" && button.href);
   };
   const handleKeyDown = useEventCallback((event) => {
     if (focusRipple && !event.repeat && focusVisible && event.key === " ") {
@@ -41900,7 +41986,7 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
     if (onKeyUp) {
       onKeyUp(event);
     }
-    if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === " " && !event.defaultPrevented) {
+    if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === " " && !event.defaultPrevented && !disabled) {
       onClick(event);
     }
   });
@@ -41910,7 +41996,8 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
   }
   const buttonProps = {};
   if (ComponentProp === "button") {
-    buttonProps.type = type === void 0 ? "button" : type;
+    const hasFormAttributes = !!other.formAction;
+    buttonProps.type = type === void 0 && !hasFormAttributes ? "button" : type;
     buttonProps.disabled = disabled;
   } else {
     if (!other.href && !other.to) {
@@ -42038,6 +42125,10 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes = {
    * if needed.
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * @ignore
+   */
+  formAction: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * @ignore
    */
@@ -42517,6 +42608,17 @@ const ButtonRoot = styled(ButtonBase, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === "start",
+      style: {
+        "&::before": {
+          content: '"\\200b"',
+          width: 0,
+          overflow: "hidden"
+        }
+      }
+    }, {
       props: {
         variant: "contained"
       },
@@ -42965,6 +43067,10 @@ const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref) {
       })
     })
   ) : null;
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /* @__PURE__ */ jsxs(ButtonRoot, {
     ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
@@ -42976,7 +43082,7 @@ const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref) {
     type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== "end" && loader, children, loadingPosition === "end" && loader, endIcon]
   });
 });
@@ -43407,6 +43513,56 @@ process.env.NODE_ENV !== "production" ? List$1.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
+function useSlot(name, parameters) {
+  const {
+    className,
+    elementType: initialElementType,
+    ownerState,
+    externalForwardedProps,
+    internalForwardedProps,
+    shouldForwardComponentProp = false,
+    ...useSlotPropsParams
+  } = parameters;
+  const {
+    component: rootComponent,
+    slots = {
+      [name]: void 0
+    },
+    slotProps = {
+      [name]: void 0
+    },
+    ...other
+  } = externalForwardedProps;
+  const elementType = slots[name] || initialElementType;
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  const {
+    props: {
+      component: slotComponent,
+      ...mergedProps
+    },
+    internalRef
+  } = mergeSlotProps$2({
+    className,
+    ...useSlotPropsParams,
+    externalForwardedProps: name === "root" ? other : void 0,
+    externalSlotProps: resolvedComponentsProps
+  });
+  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  const LeafComponent = name === "root" ? slotComponent || rootComponent : slotComponent;
+  const props = appendOwnerState(elementType, {
+    ...name === "root" && !rootComponent && !slots[name] && internalForwardedProps,
+    ...name !== "root" && !slots[name] && internalForwardedProps,
+    ...mergedProps,
+    ...LeafComponent && !shouldForwardComponentProp && {
+      as: LeafComponent
+    },
+    ...LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    },
+    ref
+  }, ownerState);
+  return [elementType, props];
+}
 function getListItemUtilityClass(slot) {
   return generateUtilityClass("MuiListItem", slot);
 }
@@ -43512,7 +43668,8 @@ const useUtilityClasses$X = (ownerState) => {
   } = ownerState;
   const slots = {
     root: ["root", dense && "dense", !disableGutters && "gutters", !disablePadding && "padding", divider && "divider", alignItems === "flex-start" && "alignItemsFlexStart", hasSecondaryAction && "secondaryAction"],
-    container: ["container"]
+    container: ["container"],
+    secondaryAction: ["secondaryAction"]
   };
   return composeClasses(slots, getListItemUtilityClass, classes);
 };
@@ -43668,6 +43825,16 @@ const ListItem = /* @__PURE__ */ React.forwardRef(function ListItem2(inProps, re
   };
   const classes = useUtilityClasses$X(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [SecondaryActionSlot, secondaryActionSlotProps] = useSlot("secondaryAction", {
+    elementType: ListItemSecondaryAction,
+    externalForwardedProps,
+    ownerState,
+    className: classes.secondaryAction
+  });
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const componentProps = {
@@ -43720,7 +43887,8 @@ const ListItem = /* @__PURE__ */ React.forwardRef(function ListItem2(inProps, re
         }
       },
       ...componentProps,
-      children: [children, secondaryAction && /* @__PURE__ */ jsx(ListItemSecondaryAction, {
+      children: [children, secondaryAction && /* @__PURE__ */ jsx(SecondaryActionSlot, {
+        ...secondaryActionSlotProps,
         children: secondaryAction
       })]
     })
@@ -43831,7 +43999,8 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes = {
    * @default {}
    */
   slotProps: PropTypes.shape({
-    root: PropTypes.object
+    root: PropTypes.object,
+    secondaryAction: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
@@ -43839,7 +44008,8 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes = {
    * @default {}
    */
   slots: PropTypes.shape({
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    secondaryAction: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -43853,56 +44023,6 @@ function getChipUtilityClass(slot) {
   return generateUtilityClass("MuiChip", slot);
 }
 const chipClasses = generateUtilityClasses("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]);
-function useSlot(name, parameters) {
-  const {
-    className,
-    elementType: initialElementType,
-    ownerState,
-    externalForwardedProps,
-    internalForwardedProps,
-    shouldForwardComponentProp = false,
-    ...useSlotPropsParams
-  } = parameters;
-  const {
-    component: rootComponent,
-    slots = {
-      [name]: void 0
-    },
-    slotProps = {
-      [name]: void 0
-    },
-    ...other
-  } = externalForwardedProps;
-  const elementType = slots[name] || initialElementType;
-  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
-  const {
-    props: {
-      component: slotComponent,
-      ...mergedProps
-    },
-    internalRef
-  } = mergeSlotProps$2({
-    className,
-    ...useSlotPropsParams,
-    externalForwardedProps: name === "root" ? other : void 0,
-    externalSlotProps: resolvedComponentsProps
-  });
-  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
-  const LeafComponent = name === "root" ? slotComponent || rootComponent : slotComponent;
-  const props = appendOwnerState(elementType, {
-    ...name === "root" && !rootComponent && !slots[name] && internalForwardedProps,
-    ...name !== "root" && !slots[name] && internalForwardedProps,
-    ...mergedProps,
-    ...LeafComponent && !shouldForwardComponentProp && {
-      as: LeafComponent
-    },
-    ...LeafComponent && shouldForwardComponentProp && {
-      component: LeafComponent
-    },
-    ref
-  }, ownerState);
-  return [elementType, props];
-}
 const useUtilityClasses$W = (ownerState) => {
   const {
     classes,
@@ -43958,7 +44078,7 @@ const ChipRoot = styled("div", {
       [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIconColor${capitalize(color2)}`]
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles2[`deleteIcon${capitalize(variant)}Color${capitalize(color2)}`]
-    }, styles2.root, styles2[`size${capitalize(size)}`], styles2[`color${capitalize(color2)}`], clickable && styles2.clickable, clickable && color2 !== "default" && styles2[`clickableColor${capitalize(color2)})`], onDelete && styles2.deletable, onDelete && color2 !== "default" && styles2[`deletableColor${capitalize(color2)}`], styles2[variant], styles2[`${variant}${capitalize(color2)}`]];
+    }, styles2.root, styles2[`size${capitalize(size)}`], styles2[`color${capitalize(color2)}`], clickable && styles2.clickable, clickable && color2 !== "default" && styles2[`clickableColor${capitalize(color2)}`], onDelete && styles2.deletable, onDelete && color2 !== "default" && styles2[`deletableColor${capitalize(color2)}`], styles2[variant], styles2[`${variant}${capitalize(color2)}`]];
   }
 })(memoTheme(({
   theme
@@ -44262,9 +44382,7 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
   const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = (event) => {
     event.stopPropagation();
-    if (onDelete) {
-      onDelete(event);
-    }
+    onDelete(event);
   };
   const handleKeyDown = (event) => {
     if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
@@ -44922,8 +45040,8 @@ const useDesktopPicker = (_ref) => {
   });
   const renderPicker = () => /* @__PURE__ */ jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/* @__PURE__ */ jsx(Field, _extends({}, fieldProps, {
-      slots,
-      slotProps,
+      slots: _extends({}, slots, fieldProps.slots),
+      slotProps: _extends({}, slotProps, fieldProps.slotProps),
       inputRef
     })), /* @__PURE__ */ jsx(PickerPopper, {
       slots,
@@ -45862,9 +45980,9 @@ function useFieldRootProps(parameters) {
     if (focused || disabled || !domGetters.isReady()) {
       return;
     }
-    const activeElement = getActiveElement(domGetters.getRoot());
+    const activeElement2 = getActiveElement(domGetters.getRoot());
     setFocused(true);
-    const isFocusInsideASection = domGetters.getSectionIndexFromDOMElement(activeElement) != null;
+    const isFocusInsideASection = domGetters.getSectionIndexFromDOMElement(activeElement2) != null;
     if (!isFocusInsideASection) {
       setSelectedSections(sectionOrder.startIndex);
     }
@@ -45874,8 +45992,8 @@ function useFieldRootProps(parameters) {
       if (!domGetters.isReady()) {
         return;
       }
-      const activeElement = getActiveElement(domGetters.getRoot());
-      const shouldBlur = !domGetters.getRoot().contains(activeElement);
+      const activeElement2 = getActiveElement(domGetters.getRoot());
+      const shouldBlur = !domGetters.getRoot().contains(activeElement2);
       if (shouldBlur) {
         setFocused(false);
         setSelectedSections(null);
@@ -45956,6 +46074,7 @@ function useFieldSectionContentProps(parameters) {
       sectionsValueBoundaries,
       state,
       value,
+      localizedDigits,
       // Methods to update the states
       clearActiveSection,
       setCharacterQuery,
@@ -46065,10 +46184,10 @@ function useFieldSectionContentProps(parameters) {
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
       "aria-readonly": readOnly,
-      "aria-valuenow": getSectionValueNow(section, adapter),
+      "aria-valuenow": getSectionValueNow(section, adapter, localizedDigits),
       "aria-valuemin": sectionBoundaries.minimum,
       "aria-valuemax": sectionBoundaries.maximum,
-      "aria-valuetext": section.value ? getSectionValueText(section, adapter) : translations.empty,
+      "aria-valuetext": section.value ? getSectionValueText(section, adapter, localizedDigits) : translations.empty,
       "aria-label": translations[section.type],
       "aria-disabled": disabled,
       // Other
@@ -46084,16 +46203,16 @@ function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === "letter" ? "text" : "numeric"
     };
-  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, localizedDigits, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
-function getSectionValueText(section, adapter) {
+function getSectionValueText(section, adapter, localizedDigits) {
   if (!section.value) {
     return void 0;
   }
   switch (section.type) {
     case "month": {
       if (section.contentType === "digit") {
-        const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+        const dateWithMonth = adapter.setMonth(adapter.date(), Number(removeLocalizedDigits(section.value, localizedDigits)) - 1);
         return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, "month") : "";
       }
       const parsedDate = adapter.parse(section.value, section.format);
@@ -46101,7 +46220,7 @@ function getSectionValueText(section, adapter) {
     }
     case "day":
       if (section.contentType === "digit") {
-        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(removeLocalizedDigits(section.value, localizedDigits)));
         return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, "dayOfMonthFull") : "";
       }
       return section.value;
@@ -46111,16 +46230,17 @@ function getSectionValueText(section, adapter) {
       return void 0;
   }
 }
-function getSectionValueNow(section, adapter) {
+function getSectionValueNow(section, adapter, localizedDigits) {
   if (!section.value) {
     return void 0;
   }
+  const nonLocalizedValue = removeLocalizedDigits(section.value, localizedDigits);
   switch (section.type) {
     case "weekDay": {
       if (section.contentType === "letter") {
         return void 0;
       }
-      return Number(section.value);
+      return Number(nonLocalizedValue);
     }
     case "meridiem": {
       const parsedDate = adapter.parse(`01:00 ${section.value}`, `${adapter.formats.hours12h}:${adapter.formats.minutes} ${section.format}`);
@@ -46130,16 +46250,16 @@ function getSectionValueNow(section, adapter) {
       return void 0;
     }
     case "day":
-      return section.contentType === "digit-with-letter" ? parseInt(section.value, 10) : Number(section.value);
+      return section.contentType === "digit-with-letter" ? parseInt(nonLocalizedValue, 10) : Number(nonLocalizedValue);
     case "month": {
       if (section.contentType === "digit") {
-        return Number(section.value);
+        return Number(nonLocalizedValue);
       }
       const parsedDate = adapter.parse(section.value, section.format);
       return parsedDate ? adapter.getMonth(parsedDate) + 1 : void 0;
     }
     default:
-      return section.contentType !== "letter" ? Number(section.value) : void 0;
+      return section.contentType !== "letter" ? Number(nonLocalizedValue) : void 0;
   }
 }
 const useFieldV7TextField = (parameters) => {
@@ -46365,16 +46485,16 @@ const useFieldV7TextField = (parameters) => {
 };
 function getActiveSectionIndex(sectionListRef) {
   var _a;
-  const activeElement = getActiveElement((_a = sectionListRef.current) == null ? void 0 : _a.getRoot());
-  if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+  const activeElement2 = getActiveElement((_a = sectionListRef.current) == null ? void 0 : _a.getRoot());
+  if (!activeElement2 || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement2)) {
     return null;
   }
-  return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+  return sectionListRef.current.getSectionIndexFromDOMElement(activeElement2);
 }
 function isFieldFocused$1(sectionListRef) {
   var _a;
-  const activeElement = getActiveElement((_a = sectionListRef.current) == null ? void 0 : _a.getRoot());
-  return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+  const activeElement2 = getActiveElement((_a = sectionListRef.current) == null ? void 0 : _a.getRoot());
+  return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement2);
 }
 const cleanString = (dirtyString) => dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, "");
 const addPositionPropertiesToSections = (sections, localizedDigits, isRtl) => {
@@ -47081,6 +47201,8 @@ function getInputBaseUtilityClass(slot) {
 }
 const inputBaseClasses = generateUtilityClasses("MuiInputBase", ["root", "formControl", "focused", "disabled", "adornedStart", "adornedEnd", "error", "sizeSmall", "multiline", "colorSecondary", "fullWidth", "hiddenLabel", "readOnly", "input", "inputSizeSmall", "inputMultiline", "inputTypeSearch", "inputAdornedStart", "inputAdornedEnd", "inputHiddenLabel"]);
 var _InputGlobalStyles;
+const MUI_AUTO_FILL = "mui-auto-fill";
+const MUI_AUTO_FILL_CANCEL = "mui-auto-fill-cancel";
 const rootOverridesResolver = (props, styles2) => {
   const {
     ownerState
@@ -47245,11 +47367,11 @@ const InputBaseInput = styled("input", {
         ownerState
       }) => !ownerState.disableInjectingGlobalStyles,
       style: {
-        animationName: "mui-auto-fill-cancel",
+        animationName: MUI_AUTO_FILL_CANCEL,
         animationDuration: "10ms",
         "&:-webkit-autofill": {
           animationDuration: "5000s",
-          animationName: "mui-auto-fill"
+          animationName: MUI_AUTO_FILL
         }
       }
     }, {
@@ -47281,14 +47403,16 @@ const InputBaseInput = styled("input", {
   };
 }));
 const InputGlobalStyles = globalCss({
-  "@keyframes mui-auto-fill": {
+  // Keep keyframes non-empty for Emotion production builds. Animation properties are ignored
+  // inside keyframes, avoiding the visible display animation triggered by Chrome 117+.
+  [`@keyframes ${MUI_AUTO_FILL}`]: {
     from: {
-      display: "block"
+      animationName: MUI_AUTO_FILL
     }
   },
-  "@keyframes mui-auto-fill-cancel": {
+  [`@keyframes ${MUI_AUTO_FILL_CANCEL}`]: {
     from: {
-      display: "block"
+      animationName: MUI_AUTO_FILL_CANCEL
     }
   }
 });
@@ -47393,6 +47517,27 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase2(inProps,
       });
     }
   }, [value, checkDirty, isControlled]);
+  useEnhancedEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const doc = ownerDocument(input);
+    const activeElement$1 = activeElement(doc);
+    const noElementFocused = activeElement$1 == null || activeElement$1 === doc.body || activeElement$1 === doc.documentElement;
+    if (input === activeElement$1) {
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus();
+      } else {
+        setFocused(true);
+      }
+    } else if (noElementFocused) {
+      input.focus();
+    }
+  }, [autoFocus]);
   const handleFocus = (event) => {
     if (onFocus) {
       onFocus(event);
@@ -47473,7 +47618,7 @@ const InputBase = /* @__PURE__ */ React.forwardRef(function InputBase2(inProps,
     InputComponent = TextareaAutosize;
   }
   const handleAutoFill = (event) => {
-    checkDirty(event.animationName === "mui-auto-fill-cancel" ? inputRef.current : {
+    checkDirty(event.animationName === MUI_AUTO_FILL_CANCEL ? inputRef.current : {
       value: "x"
     });
   };
@@ -47874,7 +48019,7 @@ const InputRoot = styled(InputBaseRoot, {
           borderBottom: `1px solid ${bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: "absolute",
           right: 0,
           transition: theme.transitions.create("border-bottom-color", {
@@ -48243,7 +48388,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
-          content: '"\\00a0"',
+          content: '""',
           position: "absolute",
           right: 0,
           transition: theme.transitions.create("border-bottom-color", {
@@ -50202,7 +50347,7 @@ const MenuList = /* @__PURE__ */ React.forwardRef(function MenuList2(props, ref)
       }
       return;
     }
-    const currentFocus = ownerDocument(list).activeElement;
+    const currentFocus = activeElement(ownerDocument(list));
     if (key === "ArrowDown") {
       event.preventDefault();
       moveFocus$1(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem$1);
@@ -50355,7 +50500,7 @@ function ariaHidden(element, hide2) {
   }
 }
 function getPaddingRight(element) {
-  return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
+  return parseFloat(ownerWindow(element).getComputedStyle(element).paddingRight) || 0;
 }
 function isAriaHiddenForbiddenOnElement(element) {
   const forbiddenTagNames = ["TEMPLATE", "SCRIPT", "STYLE", "LINK", "MAP", "META", "NOSCRIPT", "PICTURE", "COL", "COLGROUP", "PARAM", "SLOT", "SOURCE", "TRACK"];
@@ -50621,7 +50766,6 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(function Backdrop2(inProps, re
     children: /* @__PURE__ */ jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
-      classes,
       ref,
       children
     })
@@ -51367,7 +51511,7 @@ const Popover = /* @__PURE__ */ React.forwardRef(function Popover2(inProps, ref)
     const anchorRect = anchorElement.getBoundingClientRect();
     if (process.env.NODE_ENV !== "production") {
       const box = anchorElement.getBoundingClientRect();
-      if (process.env.NODE_ENV !== "test" && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+      if (isLayoutSupported() && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
         console.warn(["MUI: The `anchorEl` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
       }
     }
@@ -51600,8 +51744,10 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes = {
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== "test" && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(["MUI: The `anchorEl` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
+        if (process.env.NODE_ENV !== "production") {
+          if (isLayoutSupported() && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+            return new Error(["MUI: The `anchorEl` prop provided to the component is invalid.", "The anchor element should be part of the document layout.", "Make sure the element is present in the document or that it's not display none."].join("\n"));
+          }
         }
       } else {
         return new Error(["MUI: The `anchorEl` prop provided to the component is invalid.", `It should be an Element or PopoverVirtualElement instance but it's \`${resolvedAnchorEl}\` instead.`].join("\n"));
@@ -52332,6 +52478,36 @@ function getSelectUtilityClasses(slot) {
   return generateUtilityClass("MuiSelect", slot);
 }
 const selectClasses = generateUtilityClasses("MuiSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "focused", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
+function getOpenInteractionType(event) {
+  if (!event) {
+    return null;
+  }
+  if (event.type === "mousedown" || event.type === "pointerdown" || event.type === "touchstart") {
+    return "pointer";
+  }
+  if (event.type === "keydown" || event.type === "click" && event.detail === 0) {
+    return "keyboard";
+  }
+  return null;
+}
+function isEmpty(display) {
+  return display == null || typeof display === "string" && !display.trim();
+}
+function areEqualValues(a, b) {
+  if (typeof b === "object" && b !== null) {
+    return a === b;
+  }
+  return String(a) === String(b);
+}
+const SelectFocusSourceContext = /* @__PURE__ */ React.createContext(null);
+if (process.env.NODE_ENV !== "production") {
+  SelectFocusSourceContext.displayName = "SelectFocusSourceContext";
+}
+function useSelectFocusSource() {
+  const context = React.useContext(SelectFocusSourceContext);
+  return context;
+}
+const SelectFocusSourceProvider = SelectFocusSourceContext.Provider;
 var _span$1;
 const SelectSelect = styled(StyledSelectSelect, {
   name: "MuiSelect",
@@ -52391,15 +52567,6 @@ const SelectNativeInput = styled("input", {
   width: "100%",
   boxSizing: "border-box"
 });
-function areEqualValues(a, b) {
-  if (typeof b === "object" && b !== null) {
-    return a === b;
-  }
-  return String(a) === String(b);
-}
-function isEmpty(display) {
-  return display == null || typeof display === "string" && !display.trim();
-}
 const useUtilityClasses$G = (ownerState) => {
   const {
     classes,
@@ -52440,6 +52607,10 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
     onChange,
     onClose,
     onFocus,
+    // eslint-disable-next-line react/prop-types
+    onKeyDown,
+    // eslint-disable-next-line react/prop-types
+    onMouseDown,
     onOpen,
     open: openProp,
     readOnly,
@@ -52470,6 +52641,7 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
+  const [openInteractionType, setOpenInteractionType] = React.useState(null);
   const handleRef = useForkRef(ref, inputRefProp);
   const handleDisplayRef = React.useCallback((node) => {
     displayRef.current = node;
@@ -52485,6 +52657,22 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
     node: inputRef.current,
     value
   }), [value]);
+  const open2 = displayNode !== null && openState;
+  React.useEffect(() => {
+    if (!open2 || !anchorElement || autoWidth) {
+      return void 0;
+    }
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const observer = new ResizeObserver(() => {
+      setMenuMinWidthState(anchorElement.clientWidth);
+    });
+    observer.observe(anchorElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [open2, anchorElement, autoWidth]);
   React.useEffect(() => {
     if (defaultOpen && openState && displayNode && !isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
@@ -52514,20 +52702,25 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
     }
     return void 0;
   }, [labelId]);
-  const update = (open3, event) => {
-    if (open3) {
+  const update = (openParam, event) => {
+    if (openParam) {
+      setOpenInteractionType(getOpenInteractionType(event));
       if (onOpen) {
         onOpen(event);
       }
-    } else if (onClose) {
-      onClose(event);
+    } else {
+      setOpenInteractionType(null);
+      if (onClose) {
+        onClose(event);
+      }
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(open3);
+      setOpenState(openParam);
     }
   };
   const handleMouseDown = (event) => {
+    onMouseDown == null ? void 0 : onMouseDown(event);
     if (event.button !== 0) {
       return;
     }
@@ -52601,9 +52794,9 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
         event.preventDefault();
         update(true, event);
       }
+      onKeyDown == null ? void 0 : onKeyDown(event);
     }
   };
-  const open2 = displayNode !== null && openState;
   const handleBlur = (event) => {
     if (!open2 && onBlur) {
       Object.defineProperty(event, "target", {
@@ -52779,39 +52972,42 @@ const SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props
       as: IconComponent,
       className: classes.icon,
       ownerState
-    }), /* @__PURE__ */ jsx(Menu, {
-      id: `menu-${name || ""}`,
-      anchorEl: anchorElement,
-      open: open2,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      ...MenuProps,
-      slotProps: {
-        ...MenuProps.slotProps,
-        list: {
-          "aria-labelledby": labelId,
-          role: "listbox",
-          "aria-multiselectable": multiple ? "true" : void 0,
-          disableListWrap: true,
-          id: listboxId,
-          ...listProps
+    }), /* @__PURE__ */ jsx(SelectFocusSourceProvider, {
+      value: openInteractionType,
+      children: /* @__PURE__ */ jsx(Menu, {
+        id: `menu-${name || ""}`,
+        anchorEl: anchorElement,
+        open: open2,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
         },
-        paper: {
-          ...paperProps,
-          style: {
-            minWidth: menuMinWidth,
-            ...paperProps != null ? paperProps.style : null
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        ...MenuProps,
+        slotProps: {
+          ...MenuProps.slotProps,
+          list: {
+            "aria-labelledby": labelId,
+            role: "listbox",
+            "aria-multiselectable": multiple ? "true" : void 0,
+            disableListWrap: true,
+            id: listboxId,
+            ...listProps
+          },
+          paper: {
+            ...paperProps,
+            style: {
+              minWidth: menuMinWidth,
+              ...paperProps != null ? paperProps.style : null
+            }
           }
-        }
-      },
-      children: items
+        },
+        children: items
+      })
     })]
   });
 });
@@ -54454,6 +54650,10 @@ const PickersInputBaseRoot = styled("div", {
   boxSizing: "border-box",
   // Prevent padding issue with fullWidth.
   letterSpacing: `${round(0.15 / 16)}em`,
+  [`&.${pickersInputBaseClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+    cursor: "default"
+  },
   variants: [{
     props: {
       isInputInFullWidth: true
@@ -54927,13 +55127,17 @@ const OutlineRoot = styled("fieldset", {
     borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor2
   };
 });
-const OutlineLabel = styled("span")(({
+const OutlineLabel = styled("span", {
+  slot: "internal",
+  shouldForwardProp: void 0
+})(({
   theme
 }) => ({
   fontFamily: theme.typography.fontFamily,
   fontSize: "inherit"
 }));
 const OutlineLegend = styled("legend", {
+  slot: "internal",
   shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== "notched"
 })(({
   theme
@@ -55049,17 +55253,14 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
       borderStyle: "solid",
       borderWidth: 2
     },
+    [`&.${pickersOutlinedInputClasses.error} .${pickersOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    },
     [`&.${pickersOutlinedInputClasses.disabled}`]: {
       [`& .${pickersOutlinedInputClasses.notchedOutline}`]: {
         borderColor: (theme.vars || theme).palette.action.disabled
-      },
-      "*": {
-        color: (theme.vars || theme).palette.action.disabled
       }
     },
-    [`&.${pickersOutlinedInputClasses.error} .${pickersOutlinedInputClasses.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
     variants: Object.keys((theme.vars ?? theme).palette).filter((key) => {
       var _a;
       return ((_a = (theme.vars ?? theme).palette[key]) == null ? void 0 : _a.main) ?? false;
@@ -55116,14 +55317,17 @@ const PickersOutlinedInput = /* @__PURE__ */ React.forwardRef(function PickersOu
       root: PickersOutlinedInputRoot,
       input: PickersOutlinedInputSectionsContainer
     },
-    renderSuffix: (state) => /* @__PURE__ */ jsx(Outline, {
-      shrink: Boolean(notched || state.adornedStart || state.focused || state.filled),
-      notched: Boolean(notched || state.adornedStart || state.focused || state.filled),
-      className: classes.notchedOutline,
-      label: label != null && label !== "" && (muiFormControl == null ? void 0 : muiFormControl.required) ? /* @__PURE__ */ jsxs(React.Fragment, {
-        children: [label, " ", "*"]
-      }) : label
-    })
+    renderSuffix: (state) => {
+      const isNotched = typeof notched !== "undefined" ? notched : Boolean(state.adornedStart || state.focused || state.filled);
+      return /* @__PURE__ */ jsx(Outline, {
+        shrink: isNotched,
+        notched: isNotched,
+        className: classes.notchedOutline,
+        label: label != null && label !== "" && (muiFormControl == null ? void 0 : muiFormControl.required) ? /* @__PURE__ */ jsxs(React.Fragment, {
+          children: [label, " ", "*"]
+        }) : label
+      });
+    }
   }, other, {
     label,
     classes,
@@ -56689,7 +56893,11 @@ const useCalendarState = (params) => {
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
     focusedDay: referenceDate,
-    currentMonth: adapter.startOfMonth(referenceDate),
+    // Keep the time from the reference date when computing the current month anchor.
+    // Using startOfMonth would reset the time to 00:00 which breaks expectations
+    // that month selections preserve the referenceDate time when no value is provided.
+    // See tests: "should use `referenceDate` when no value defined".
+    currentMonth: adapter.setDate(referenceDate, 1),
     slideDirection: "left"
   });
   const isDateDisabled = useIsDateDisabled({
@@ -56870,6 +57078,8 @@ const useUtilityClasses$u = (classes, ownerState) => {
 const styleArg = ({
   theme
 }) => _extends({}, theme.typography.caption, {
+  display: "flex",
+  lineHeight: 1,
   width: DAY_SIZE,
   height: DAY_SIZE,
   borderRadius: "50%",
@@ -56938,7 +57148,7 @@ const overridesResolver$1 = (props, styles2) => {
   const {
     ownerState
   } = props;
-  return [styles2.root, !ownerState.disableMargin && styles2.dayWithMargin, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles2.today, !ownerState.isDayOutsideMonth && ownerState.showDaysOutsideCurrentMonth && styles2.dayOutsideMonth, ownerState.isDayOutsideMonth && !ownerState.showDaysOutsideCurrentMonth && styles2.hiddenDaySpacingFiller];
+  return [styles2.root, !ownerState.disableMargin && styles2.dayWithMargin, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles2.today, ownerState.isDayOutsideMonth && ownerState.showDaysOutsideCurrentMonth && styles2.dayOutsideMonth, ownerState.isDayOutsideMonth && !ownerState.showDaysOutsideCurrentMonth && styles2.hiddenDaySpacingFiller];
 };
 const PickersDayRoot = styled(ButtonBase, {
   name: "MuiPickersDay",
@@ -57632,6 +57842,11 @@ function DayCalendar(inProps) {
         focusDay(adapter.addMonths(day, -1));
         event.preventDefault();
         break;
+      case "Enter":
+      case " ":
+        handleDaySelect(day);
+        event.preventDefault();
+        break;
     }
   });
   const handleFocus = useEventCallback((event, day) => focusDay(day));
@@ -57967,12 +58182,13 @@ const MonthCalendar = /* @__PURE__ */ React.forwardRef(function MonthCalendar2(i
     }
     return shouldDisableMonth(monthToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, adapter]);
-  const handleMonthSelection = useEventCallback((event, month) => {
+  const handleMonthSelection = useEventCallback((_event, month) => {
     if (readOnly) {
       return;
     }
     const currentValue = value && currentMonth && !adapter.isSameYear(value, currentMonth) ? adapter.setYear(value, adapter.getYear(currentMonth)) : value;
-    const newDate = adapter.setMonth(currentValue ?? referenceDate, month);
+    const baseDateForMonth = currentValue ?? currentMonth ?? referenceDate;
+    const newDate = adapter.setMonth(baseDateForMonth, month);
     handleValueChange(newDate);
   });
   const focusMonth = useEventCallback((month) => {
@@ -58007,6 +58223,11 @@ const MonthCalendar = /* @__PURE__ */ React.forwardRef(function MonthCalendar2(i
         focusMonth((monthsInYear + month + (isRtl ? -1 : 1)) % monthsInYear);
         event.preventDefault();
         break;
+      case "Enter":
+      case " ":
+        handleMonthSelection(event, month);
+        event.preventDefault();
+        break;
     }
   });
   const handleMonthFocus = useEventCallback((event, month) => {
@@ -58419,7 +58640,7 @@ const YearCalendar = /* @__PURE__ */ React.forwardRef(function YearCalendar2(inP
     const yearToValidate = adapter.startOfYear(dateToValidate);
     return shouldDisableYear(yearToValidate);
   }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, adapter]);
-  const handleYearSelection = useEventCallback((event, year) => {
+  const handleYearSelection = useEventCallback((_event, year) => {
     if (readOnly) {
       return;
     }
@@ -58456,6 +58677,11 @@ const YearCalendar = /* @__PURE__ */ React.forwardRef(function YearCalendar2(inP
         focusYear(year + horizontalDirection);
         event.preventDefault();
         break;
+      case "Enter":
+      case " ":
+        handleYearSelection(event, year);
+        event.preventDefault();
+        break;
     }
   });
   const handleYearFocus = useEventCallback((event, year) => {
@@ -59072,7 +59298,10 @@ process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
   view: PropTypes.oneOf(["day", "month", "year"]).isRequired,
   views: PropTypes.arrayOf(PropTypes.oneOf(["day", "month", "year"]).isRequired).isRequired
 } : void 0;
-const PickerViewRoot = styled("div")({
+const PickerViewRoot = styled("div", {
+  slot: "internal",
+  shouldForwardProp: void 0
+})({
   overflow: "hidden",
   width: DIALOG_WIDTH,
   maxHeight: VIEW_HEIGHT,
@@ -59872,7 +60101,7 @@ DesktopDatePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -60170,15 +60399,14 @@ process.env.NODE_ENV !== "production" ? DialogContent.propTypes = {
 function getDialogUtilityClass(slot) {
   return generateUtilityClass("MuiDialog", slot);
 }
-const dialogClasses = generateUtilityClasses("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]);
+const dialogClasses = generateUtilityClasses("MuiDialog", ["root", "backdrop", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]);
 const DialogContext = /* @__PURE__ */ React.createContext({});
 if (process.env.NODE_ENV !== "production") {
   DialogContext.displayName = "DialogContext";
 }
 const DialogBackdrop = styled(Backdrop, {
   name: "MuiDialog",
-  slot: "Backdrop",
-  overrides: (props, styles2) => styles2.backdrop
+  slot: "Backdrop"
 })({
   // Improve scrollable dialog support.
   zIndex: -1
@@ -60193,6 +60421,7 @@ const useUtilityClasses$j = (ownerState) => {
   } = ownerState;
   const slots = {
     root: ["root"],
+    backdrop: ["backdrop"],
     container: ["container", `scroll${capitalize(scroll)}`],
     paper: ["paper", `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth2))}`, fullWidth && "paperFullWidth", fullScreen && "paperFullScreen"]
   };
@@ -60370,6 +60599,7 @@ const Dialog = /* @__PURE__ */ React.forwardRef(function Dialog2(inProps, ref) {
     open: open2,
     PaperComponent = Paper,
     PaperProps = {},
+    role = "dialog",
     scroll = "paper",
     slots = {},
     slotProps = {},
@@ -60435,14 +60665,24 @@ const Dialog = /* @__PURE__ */ React.forwardRef(function Dialog2(inProps, ref) {
     elementType: DialogBackdrop,
     shouldForwardComponentProp: true,
     externalForwardedProps,
-    ownerState
+    ownerState,
+    className: classes.backdrop
   });
   const [PaperSlot, paperSlotProps] = useSlot("paper", {
     elementType: DialogPaper,
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: clsx(classes.paper, PaperProps.className)
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      "aria-describedby": ariaDescribedby,
+      "aria-labelledby": ariaLabelledby,
+      "aria-modal": ariaModal,
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ""
+    }
   });
   const [ContainerSlot, containerSlotProps] = useSlot("container", {
     elementType: DialogContainer,
@@ -60486,11 +60726,6 @@ const Dialog = /* @__PURE__ */ React.forwardRef(function Dialog2(inProps, ref) {
         ...containerSlotProps,
         children: /* @__PURE__ */ jsx(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: "dialog",
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /* @__PURE__ */ jsx(DialogContext.Provider, {
             value: dialogContextValue,
@@ -60598,6 +60833,13 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes = {
    * @deprecated Use `slotProps.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperProps: PropTypes.object,
+  /**
+   * The ARIA role for the dialog element.
+   * The main dialog role is `dialog`, but `alertdialog` can be used if the content of the dialog requires immediate attention.
+   * See https://www.w3.org/TR/wai-aria-1.2/#dialog and https://www.w3.org/TR/wai-aria-1.2/#alertdialog for more details.
+   * @default 'dialog'
+   */
+  role: PropTypes.oneOf(["alertdialog", "dialog"]),
   /**
    * Determine the container for scrolling the dialog.
    * @default 'paper'
@@ -60656,7 +60898,9 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes = {
    */
   TransitionProps: PropTypes.object
 } : void 0;
-const PickersModalDialogRoot = styled(Dialog)({
+const PickersModalDialogRoot = styled(Dialog, {
+  slot: "internal"
+})({
   [`& .${dialogClasses.container}`]: {
     outline: 0
   },
@@ -60665,7 +60909,9 @@ const PickersModalDialogRoot = styled(Dialog)({
     minWidth: DIALOG_WIDTH
   }
 });
-const PickersModalDialogContent = styled(DialogContent)({
+const PickersModalDialogContent = styled(DialogContent, {
+  slot: "internal"
+})({
   "&:first-of-type": {
     padding: 0
   }
@@ -60760,8 +61006,8 @@ const useMobilePicker = (_ref) => {
   });
   const renderPicker = () => /* @__PURE__ */ jsxs(PickerProvider, _extends({}, providerProps, {
     children: [/* @__PURE__ */ jsx(Field, _extends({}, fieldProps, {
-      slots,
-      slotProps,
+      slots: _extends({}, slots, fieldProps.slots),
+      slotProps: _extends({}, slotProps, fieldProps.slotProps),
       inputRef
     })), /* @__PURE__ */ jsx(PickersModalDialog, {
       slots,
@@ -60942,7 +61188,7 @@ MobileDatePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -61290,7 +61536,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -63281,7 +63527,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
     slots,
     slotProps: {
       indicator: TabIndicatorProps,
-      scrollButton: TabScrollButtonProps,
+      scrollButtons: TabScrollButtonProps,
       ...slotProps
     }
   };
@@ -63313,7 +63559,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== "production") {
-          if (process.env.NODE_ENV !== "test" && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 && // if the whole Tabs component is hidden, don't warn
+          if (isLayoutSupported() && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 && // if the whole Tabs component is hidden, don't warn
           tabsMeta.clientWidth !== 0) {
             tabsMeta = null;
             console.error(["MUI: The `value` provided to the Tabs component is invalid.", `The Tab with this \`value\` ("${value}") is not part of the document layout.`, "Make sure the tab item is present in the document or that it's not `display: none`."].join("\n"));
@@ -63608,8 +63854,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
       return;
     }
     const list = tabListRef.current;
-    const currentFocus = ownerDocument(list).activeElement;
-    const role = currentFocus.getAttribute("role");
+    const currentFocus = activeElement(ownerDocument(list));
+    const role = currentFocus == null ? void 0 : currentFocus.getAttribute("role");
     if (role !== "tab") {
       return;
     }
@@ -65681,6 +65927,19 @@ function getMenuItemUtilityClass(slot) {
   return generateUtilityClass("MuiMenuItem", slot);
 }
 const menuItemClasses = generateUtilityClasses("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]);
+function focusWithVisible(element, focusSource) {
+  if (focusSource == null) {
+    element.focus();
+    return;
+  }
+  try {
+    element.focus({
+      focusVisible: focusSource === "keyboard"
+    });
+  } catch (error) {
+    element.focus();
+  }
+}
 const overridesResolver = (props, styles2) => {
   const {
     ownerState
@@ -65826,6 +66085,7 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
     className,
     ...other
   } = props;
+  const focusSource = useSelectFocusSource();
   const context = React.useContext(ListContext);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -65835,7 +66095,7 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
   useEnhancedEffect(() => {
     if (autoFocus) {
       if (menuItemRef.current) {
-        menuItemRef.current.focus();
+        focusWithVisible(menuItemRef.current, focusSource);
       } else if (process.env.NODE_ENV !== "production") {
         console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered.");
       }
@@ -65849,6 +66109,10 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
   };
   const classes = useUtilityClasses$6(props);
   const handleRef = useForkRef(menuItemRef, ref);
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   let tabIndex;
   if (!props.disabled) {
     tabIndex = tabIndexProp !== void 0 ? tabIndexProp : -1;
@@ -65864,7 +66128,7 @@ const MenuItem = /* @__PURE__ */ React.forwardRef(function MenuItem2(inProps, re
       className: clsx(classes.root, className),
       ...other,
       ownerState,
-      classes
+      classes: forwardedClasses
     })
   });
 });
@@ -66600,9 +66864,10 @@ const getHourSectionOptions = ({
   const isFocused = (hour) => {
     return isSelected(hour, adapter.getHours(valueOrReferenceDate));
   };
+  const labelReferenceDate = adapter.setDate(adapter.setMonth(adapter.startOfDay(now), 0), 15);
   const endHour = ampm ? 11 : 23;
   for (let hour = 0; hour <= endHour; hour += timeStep) {
-    let label = adapter.format(adapter.setHours(now, hour), ampm ? "hours12h" : "hours24h");
+    let label = adapter.format(adapter.setHours(labelReferenceDate, hour), ampm ? "hours12h" : "hours24h");
     const ariaLabel = resolveAriaLabel(parseInt(label, 10).toString());
     label = adapter.formatNumber(label);
     result.push({
@@ -67648,7 +67913,7 @@ DesktopDateTimePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -68120,7 +68385,7 @@ MobileDateTimePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -68538,7 +68803,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -68880,6 +69145,12 @@ const TextFieldDateElement = ({
     )
   ] });
 };
+function useForcedRerendering() {
+  const [, setState] = React.useState({});
+  return React.useCallback(() => {
+    setState({});
+  }, []);
+}
 function usePreviousProps(value) {
   const ref = React.useRef({});
   React.useEffect(() => {
@@ -68932,10 +69203,8 @@ function createFilterOptions(config2 = {}) {
 }
 const defaultFilterOptions = createFilterOptions();
 const pageSize = 5;
-const defaultIsActiveElementInListbox = (listboxRef) => {
-  var _a;
-  return listboxRef.current !== null && ((_a = listboxRef.current.parentElement) == null ? void 0 : _a.contains(document.activeElement));
-};
+const defaultIsActiveElementInListbox = (listboxRef) => listboxRef.current !== null && contains(listboxRef.current.parentElement, document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -68974,7 +69243,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value2) => option === value2,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -69006,10 +69275,14 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
   const highlightedIndexRef = React.useRef(defaultHighlighted);
+  const highlightReasonRef = React.useRef(null);
+  const touchScrolledRef = React.useRef(false);
+  const isTouchRef = React.useRef(false);
   const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
@@ -69024,8 +69297,8 @@ function useAutocomplete(props) {
   });
   const [focused, setFocused] = React.useState(false);
   const resetInputValue = React.useCallback((event, newValue, reason) => {
-    const isOptionSelected = multiple ? value.length < newValue.length : newValue !== null;
-    if (!isOptionSelected && !clearOnBlur) {
+    const isOptionSelected2 = multiple ? value.length < newValue.length : newValue !== null;
+    if (!isOptionSelected2 && !clearOnBlur) {
       return;
     }
     const newInputValue = getInputValue(newValue, multiple, getOptionLabel, renderValue);
@@ -69046,9 +69319,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open2 && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback((option) => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some((value2) => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(
     options.filter((option) => {
-      if (filterSelectedOptions && (multiple ? value : [value]).some((value2) => value2 !== null && isOptionEqualToValue(option, value2))) {
+      if (filterSelectedOptions && isOptionSelected(option)) {
         return false;
       }
       return true;
@@ -69111,20 +69405,16 @@ function useAutocomplete(props) {
       }
     }
   }
-  const setHighlightedIndex = useEventCallback(({
-    event,
+  const syncHighlightedIndexToDOM = useEventCallback(({
     index,
-    reason
+    reason,
+    preserveScroll = false
   }) => {
-    highlightedIndexRef.current = index;
     if (index === -1) {
       inputRef.current.removeAttribute("aria-activedescendant");
     } else {
       inputRef.current.setAttribute("aria-activedescendant", `${id}-option-${index}`);
     }
-    if (onHighlightChange && ["mouse", "keyboard", "touch"].includes(reason)) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
     if (!listboxRef.current) {
       return;
     }
@@ -69141,7 +69431,9 @@ function useAutocomplete(props) {
       return;
     }
     if (index === -1) {
-      listboxNode.scrollTop = 0;
+      if (!preserveScroll) {
+        listboxNode.scrollTop = 0;
+      }
       return;
     }
     const option = listboxRef.current.querySelector(`[data-option-index="${index}"]`);
@@ -69163,15 +69455,46 @@ function useAutocomplete(props) {
       }
     }
   });
+  const setHighlightedIndex = useEventCallback(({
+    event,
+    index,
+    reason,
+    preserveScroll = false
+  }) => {
+    highlightedIndexRef.current = index;
+    highlightReasonRef.current = reason ?? null;
+    if (onHighlightChange && ["mouse", "keyboard", "touch"].includes(reason)) {
+      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
+    }
+    syncHighlightedIndexToDOM({
+      index,
+      reason,
+      preserveScroll
+    });
+  });
+  const setHighlightedIndexFromSync = useEventCallback(({
+    index
+  }) => {
+    highlightedIndexRef.current = index;
+    syncHighlightedIndexToDOM({
+      index,
+      reason: highlightReasonRef.current
+    });
+  });
   const changeHighlightedIndex = useEventCallback(({
     event,
     diff,
     direction = "next",
-    reason
+    reason,
+    preserveScroll
   }) => {
     if (!popupOpen) {
       return;
     }
+    if (reason === "keyboard") {
+      touchScrolledRef.current = false;
+      isTouchRef.current = false;
+    }
     const getNextIndex = () => {
       const maxIndex = filteredOptions.length - 1;
       if (diff === "reset") {
@@ -69208,7 +69531,8 @@ function useAutocomplete(props) {
     setHighlightedIndex({
       index: nextIndex,
       reason,
-      event
+      event,
+      preserveScroll
     });
     if (autoComplete && diff !== "reset") {
       if (nextIndex === -1) {
@@ -69249,18 +69573,23 @@ function useAutocomplete(props) {
     return -1;
   };
   const syncHighlightedIndex = React.useCallback(() => {
+    var _a, _b;
     if (!popupOpen) {
       return;
     }
     const previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex();
     if (previousHighlightedOptionIndex !== -1) {
-      highlightedIndexRef.current = previousHighlightedOptionIndex;
+      setHighlightedIndexFromSync({
+        index: previousHighlightedOptionIndex
+      });
       return;
     }
     const valueItem = multiple ? value[0] : value;
     if (filteredOptions.length === 0 || valueItem == null) {
+      const isAppendOnly = filteredOptionsChanged && previousProps.inputValue === inputValue && ((_a = previousProps.filteredOptions) == null ? void 0 : _a.length) > 0 && filteredOptions.length > previousProps.filteredOptions.length && previousProps.filteredOptions.every((option, index) => getOptionLabel(option) === getOptionLabel(filteredOptions[index]));
       changeHighlightedIndex({
-        diff: "reset"
+        diff: "reset",
+        preserveScroll: isAppendOnly
       });
       return;
     }
@@ -69269,7 +69598,10 @@ function useAutocomplete(props) {
     }
     if (valueItem != null) {
       const currentOption = filteredOptions[highlightedIndexRef.current];
-      if (multiple && currentOption && value.findIndex((val) => isOptionEqualToValue(currentOption, val)) !== -1) {
+      if (multiple && currentOption && value.findIndex((val) => isOptionEqualToValue(currentOption, val)) !== -1 && ((_b = previousProps.filteredOptions) == null ? void 0 : _b.length) > 0) {
+        setHighlightedIndexFromSync({
+          index: highlightedIndexRef.current
+        });
         return;
       }
       const itemIndex = filteredOptions.findIndex((optionItem) => isOptionEqualToValue(optionItem, valueItem));
@@ -69299,9 +69631,9 @@ function useAutocomplete(props) {
     // Don't sync the highlighted index with the value when multiple
     // eslint-disable-next-line react-hooks/exhaustive-deps
     multiple ? false : value,
-    filterSelectedOptions,
     changeHighlightedIndex,
     setHighlightedIndex,
+    setHighlightedIndexFromSync,
     popupOpen,
     inputValue,
     multiple
@@ -69325,16 +69657,29 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    const handleWindowBlur = () => {
+      windowLostFocus.current = true;
+    };
+    window.addEventListener("blur", handleWindowBlur);
+    return () => {
+      window.removeEventListener("blur", handleWindowBlur);
+    };
+  }, []);
   const handleOpen = (event) => {
     if (open2) {
       return;
     }
     setOpenState(true);
     setInputPristine(true);
+    isTouchRef.current = false;
     if (onOpen) {
       onOpen(event);
     }
@@ -69344,6 +69689,8 @@ function useAutocomplete(props) {
       return;
     }
     setOpenState(false);
+    touchScrolledRef.current = false;
+    highlightReasonRef.current = null;
     if (onClose) {
       onClose(event, reason);
     }
@@ -69361,7 +69708,6 @@ function useAutocomplete(props) {
     }
     setValueState(newValue);
   };
-  const isTouch = React.useRef(false);
   const selectNewValue = (event, option, reasonProp = "selectOption", origin = "options") => {
     let reason = reasonProp;
     let newValue = option;
@@ -69388,7 +69734,7 @@ function useAutocomplete(props) {
     if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {
       handleClose(event, reason);
     }
-    if (blurOnSelect === true || blurOnSelect === "touch" && isTouch.current || blurOnSelect === "mouse" && !isTouch.current) {
+    if (blurOnSelect === true || blurOnSelect === "touch" && isTouchRef.current || blurOnSelect === "mouse" && !isTouchRef.current) {
       inputRef.current.blur();
     }
   };
@@ -69418,9 +69764,13 @@ function useAutocomplete(props) {
       handleClose(event, "toggleInput");
     }
     let nextItem2 = focusedItem;
-    if (focusedItem === -1) {
-      if (inputValue === "" && direction === "previous") {
-        nextItem2 = value.length - 1;
+    if (focusedItem === -1 && direction === "previous") {
+      nextItem2 = value.length - 1;
+      if (freeSolo && inputValue !== "") {
+        setInputValueState("");
+        if (onInputChange) {
+          onInputChange(event, "", "reset");
+        }
       }
     } else {
       nextItem2 += direction === "next" ? 1 : -1;
@@ -69518,22 +69868,39 @@ function useAutocomplete(props) {
           });
           handleOpen(event);
           break;
-        case "ArrowLeft":
-          if (!multiple && renderValue) {
+        case "ArrowLeft": {
+          const input = inputRef.current;
+          const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
+          if (!caretAtStart) {
+            return;
+          }
+          if (!multiple && renderValue && value != null) {
+            if (freeSolo && inputValue !== "") {
+              setInputValueState("");
+              if (onInputChange) {
+                onInputChange(event, "", "reset");
+              }
+            }
+            setFocusedItem(0);
             focusItem(0);
           } else {
             handleFocusItem(event, "previous");
           }
           break;
+        }
         case "ArrowRight":
           if (!multiple && renderValue) {
+            setFocusedItem(-1);
             focusItem(-1);
           } else {
             handleFocusItem(event, "next");
           }
           break;
-        case "Enter":
-          if (highlightedIndexRef.current !== -1 && popupOpen) {
+        case "Enter": {
+          const shouldSelectHighlighted = !freeSolo || inputPristine || highlightReasonRef.current !== null;
+          if (highlightedIndexRef.current !== -1 && popupOpen && shouldSelectHighlighted && // After a touch-scroll the highlight is stale (the user scrolled
+          // past it), so skip selection until the next deliberate interaction.
+          !touchScrolledRef.current) {
             const option = filteredOptions[highlightedIndexRef.current];
             const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
             event.preventDefault();
@@ -69549,8 +69916,12 @@ function useAutocomplete(props) {
               event.preventDefault();
             }
             selectNewValue(event, inputValue, "createOption", "freeSolo");
+          } else if (popupOpen && touchScrolledRef.current) {
+            event.preventDefault();
+            handleClose(event, "escape");
           }
           break;
+        }
         case "Escape":
           if (popupOpen) {
             event.preventDefault();
@@ -69571,9 +69942,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === "") {
+            handleValue(event, null, "removeOption", {
+              option: value
+            });
           }
           break;
         case "Delete":
@@ -69585,9 +69957,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === "") {
+            handleValue(event, null, "removeOption", {
+              option: value
+            });
           }
           break;
       }
@@ -69595,6 +69968,14 @@ function useAutocomplete(props) {
   };
   const handleFocus = (event) => {
     setFocused(true);
+    if (focusedItem !== -1) {
+      setFocusedItem(-1);
+      focusItem(-1);
+    }
+    if (windowLostFocus.current) {
+      windowLostFocus.current = false;
+      return;
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
@@ -69607,7 +69988,7 @@ function useAutocomplete(props) {
     setFocused(false);
     firstFocus.current = true;
     ignoreFocus.current = false;
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
+    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen && highlightReasonRef.current !== "mouse" && highlightReasonRef.current !== "touch") {
       selectNewValue(event, filteredOptions[highlightedIndexRef.current], "blur");
     } else if (autoSelect && freeSolo && inputValue !== "") {
       selectNewValue(event, inputValue, "blur", "freeSolo");
@@ -69618,20 +69999,24 @@ function useAutocomplete(props) {
   };
   const handleInputChange = (event) => {
     const newValue = event.target.value;
-    if (inputValue !== newValue) {
+    const valueChanged = inputValue !== newValue;
+    if (valueChanged) {
       setInputValueState(newValue);
-      setInputPristine(false);
+      touchScrolledRef.current = false;
       if (onInputChange) {
         onInputChange(event, newValue, "input");
       }
     }
     if (newValue === "") {
-      if (!disableClearable && !multiple) {
+      if (!disableClearable && !multiple && !renderValue) {
         handleValue(event, null, "clear");
       }
     } else {
       handleOpen(event);
     }
+    if (valueChanged) {
+      setInputPristine(false);
+    }
   };
   const handleOptionMouseMove = (event) => {
     const index = Number(event.currentTarget.getAttribute("data-option-index"));
@@ -69641,20 +70026,26 @@ function useAutocomplete(props) {
         index,
         reason: "mouse"
       });
+    } else {
+      highlightReasonRef.current = "mouse";
+    }
+    if (!isTouchRef.current) {
+      touchScrolledRef.current = false;
     }
   };
   const handleOptionTouchStart = (event) => {
+    touchScrolledRef.current = false;
     setHighlightedIndex({
       event,
       index: Number(event.currentTarget.getAttribute("data-option-index")),
       reason: "touch"
     });
-    isTouch.current = true;
+    isTouchRef.current = true;
   };
   const handleOptionClick = (event) => {
     const index = Number(event.currentTarget.getAttribute("data-option-index"));
     selectNewValue(event, filteredOptions[index], "selectOption");
-    isTouch.current = false;
+    isTouchRef.current = false;
   };
   const handleItemDelete = (index) => (event) => {
     const newValue = value.slice();
@@ -69676,7 +70067,10 @@ function useAutocomplete(props) {
     }
   };
   const handleMouseDown = (event) => {
-    if (!event.currentTarget.contains(event.target)) {
+    if (!contains(event.currentTarget, event.target)) {
+      return;
+    }
+    if (anchorEl && !contains(anchorEl, event.target)) {
       return;
     }
     if (event.target.getAttribute("id") !== id) {
@@ -69684,7 +70078,10 @@ function useAutocomplete(props) {
     }
   };
   const handleClick = (event) => {
-    if (!event.currentTarget.contains(event.target)) {
+    if (!contains(event.currentTarget, event.target)) {
+      return;
+    }
+    if (anchorEl && !contains(anchorEl, event.target)) {
       return;
     }
     inputRef.current.focus();
@@ -69803,16 +70200,22 @@ function useAutocomplete(props) {
       role: "listbox",
       id: `${id}-listbox`,
       "aria-labelledby": `${id}-label`,
+      "aria-multiselectable": multiple || void 0,
       ref: handleListboxRef,
       onMouseDown: (event) => {
         event.preventDefault();
+      },
+      onScroll: () => {
+        if (isTouchRef.current) {
+          touchScrolledRef.current = true;
+        }
       }
     }),
     getOptionProps: ({
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some((value2) => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: (getOptionKey == null ? void 0 : getOptionKey(option)) ?? getOptionLabel(option),
@@ -70473,6 +70876,36 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
     ...props,
     componentName: "Autocomplete"
   });
+  const forceRenderOnResize = useForcedRerendering();
+  React.useEffect(() => {
+    if (!popupOpen || !anchorEl || typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    let lastWidth = anchorEl.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const newWidth = anchorEl.clientWidth;
+      if (lastWidth !== newWidth) {
+        lastWidth = newWidth;
+        forceRenderOnResize();
+      }
+    });
+    observer.observe(anchorEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [popupOpen, anchorEl, forceRenderOnResize]);
+  const previousGroupedOptionsRef = React.useRef([]);
+  const prevPopupOpenRef = React.useRef(false);
+  const renderedOptions = popupOpen ? groupedOptions : previousGroupedOptionsRef.current;
+  useEnhancedEffect(() => {
+    if (popupOpen && !prevPopupOpenRef.current) {
+      previousGroupedOptionsRef.current = [];
+    }
+    prevPopupOpenRef.current = popupOpen;
+    if (popupOpen && groupedOptions.length > 0) {
+      previousGroupedOptionsRef.current = groupedOptions;
+    }
+  }, [popupOpen, groupedOptions]);
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
@@ -70511,6 +70944,17 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
       ...slotProps
     }
   };
+  const [RootSlot, rootProps] = useSlot("root", {
+    ref,
+    className: [classes.root, className],
+    elementType: AutocompleteRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    getSlotProps: getRootProps,
+    ownerState
+  });
   const [ListboxSlot, listboxProps] = useSlot("listbox", {
     elementType: AutocompleteListbox,
     externalForwardedProps,
@@ -70533,13 +70977,43 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
     additionalProps: {
       disablePortal,
       style: {
-        width: anchorEl ? anchorEl.clientWidth : null
+        width: anchorEl ? anchorEl.clientWidth : null,
+        // Prevent interaction with stale cached options during exit transitions.
+        // The hook's filteredOptions is [] when popupOpen=false, so clicks on stale
+        // rendered options would pass undefined to selectNewValue.
+        pointerEvents: popupOpen ? void 0 : "none"
       },
       role: "presentation",
       anchorEl,
       open: popupOpen
     }
   });
+  const hasPopupContent = renderedOptions.length > 0 || loading || !freeSolo || popperProps.keepMounted === true;
+  const [ClearIndicatorSlot, clearIndicatorProps] = useSlot("clearIndicator", {
+    elementType: AutocompleteClearIndicator,
+    externalForwardedProps,
+    ownerState,
+    className: classes.clearIndicator,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      ...getClearProps(),
+      "aria-label": clearText,
+      title: clearText
+    }
+  });
+  const [PopupIndicatorSlot, popupIndicatorProps] = useSlot("popupIndicator", {
+    elementType: AutocompletePopupIndicator,
+    externalForwardedProps,
+    ownerState,
+    className: classes.popupIndicator,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      ...getPopupIndicatorProps(),
+      disabled,
+      "aria-label": popupOpen ? closeText : openText,
+      title: popupOpen ? closeText : openText
+    }
+  });
   let startAdornment;
   const getCustomizedItemProps = (params) => ({
     className: classes.tag,
@@ -70620,18 +71094,13 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
-  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
   return /* @__PURE__ */ jsxs(React.Fragment, {
-    children: [/* @__PURE__ */ jsx(AutocompleteRoot, {
-      ref,
-      className: clsx(classes.root, className),
-      ownerState,
-      ...getRootProps(other),
+    children: [/* @__PURE__ */ jsx(RootSlot, {
+      ...rootProps,
       children: renderInput({
         id,
         disabled,
-        fullWidth: true,
+        fullWidth: props.fullWidth ?? true,
         size: size === "small" ? "small" : void 0,
         InputLabelProps: getInputLabelProps(),
         InputProps: {
@@ -70647,22 +71116,11 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
             endAdornment: /* @__PURE__ */ jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,
               ownerState,
-              children: [hasClearIcon ? /* @__PURE__ */ jsx(AutocompleteClearIndicator, {
-                ...getClearProps(),
-                "aria-label": clearText,
-                title: clearText,
-                ownerState,
-                ...clearIndicatorSlotProps,
-                className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
+              children: [hasClearIcon ? /* @__PURE__ */ jsx(ClearIndicatorSlot, {
+                ...clearIndicatorProps,
                 children: clearIcon
-              }) : null, hasPopupIcon ? /* @__PURE__ */ jsx(AutocompletePopupIndicator, {
-                ...getPopupIndicatorProps(),
-                disabled,
-                "aria-label": popupOpen ? closeText : openText,
-                title: popupOpen ? closeText : openText,
-                ownerState,
-                ...popupIndicatorSlotProps,
-                className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
+              }) : null, hasPopupIcon ? /* @__PURE__ */ jsx(PopupIndicatorSlot, {
+                ...popupIndicatorProps,
                 children: popupIcon
               }) : null]
             })
@@ -70675,17 +71133,17 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
           ...getInputProps()
         }
       })
-    }), anchorEl ? /* @__PURE__ */ jsx(AutocompletePopper, {
+    }), anchorEl && hasPopupContent ? /* @__PURE__ */ jsx(AutocompletePopper, {
       as: PopperSlot,
       ...popperProps,
       children: /* @__PURE__ */ jsxs(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && groupedOptions.length === 0 ? /* @__PURE__ */ jsx(AutocompleteLoading, {
+        children: [loading && renderedOptions.length === 0 ? /* @__PURE__ */ jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState,
           children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /* @__PURE__ */ jsx(AutocompleteNoOptions, {
+        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /* @__PURE__ */ jsx(AutocompleteNoOptions, {
           className: classes.noOptions,
           ownerState,
           role: "presentation",
@@ -70693,10 +71151,9 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /* @__PURE__ */ jsx(ListboxSlot, {
-          as: ListboxComponentProp,
+        }) : null, renderedOptions.length > 0 ? /* @__PURE__ */ jsx(ListboxSlot, {
           ...listboxProps,
-          children: groupedOptions.map((option, index) => {
+          children: renderedOptions.map((option, index) => {
             if (groupBy2) {
               return renderGroup({
                 key: option.key,
@@ -70729,12 +71186,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = {
    */
   autoHighlight: PropTypes.bool,
   /**
-   * If `true`, the selected option becomes the value of the input
-   * when the Autocomplete loses focus unless the user chooses
-   * a different option or changes the character string in the input.
+   * If `true`, the value is updated when the input loses focus under one of these conditions:
    *
-   * When using the `freeSolo` mode, the typed value will be the input value
-   * if the Autocomplete loses focus without highlighting an option.
+   * - An option highlighted via keyboard navigation or `autoHighlight` is selected.
+   *   Hover and touch highlights are ignored.
+   * - Otherwise, in `freeSolo` mode, the typed text becomes the value.
    * @default false
    */
   autoSelect: PropTypes.bool,
@@ -71145,16 +71601,20 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = {
     listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
+    clearIndicator: PropTypes.elementType,
     listbox: PropTypes.elementType,
     paper: PropTypes.elementType,
-    popper: PropTypes.elementType
+    popper: PropTypes.elementType,
+    popupIndicator: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -72928,7 +73388,7 @@ DesktopTimePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -73247,7 +73707,7 @@ MobileTimePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -73531,7 +73991,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * @param {TValue} value The value that was just accepted.
    * @param {FieldChangeHandlerContext<TError>} context Context about this acceptance:
    * - `validationError`: validation result of the current value
-   * - `source`: source of the acceptance. One of 'field' | 'picker' | 'unknown'
+   * - `source`: source of the acceptance. One of 'field' | 'view' | 'unknown'
    * - `shortcut` (optional): the shortcut metadata if the value was accepted via a shortcut selection
    */
   onAccept: PropTypes.func,
@@ -78008,18 +78468,7 @@ class AdapterDayjs {
       }
     });
     __publicField(this, "createSystemDate", (value) => {
-      let date;
-      if (this.hasUTCPlugin() && this.hasTimezonePlugin()) {
-        const timezone2 = dayjs.tz.guess();
-        if (timezone2 === "UTC") {
-          date = dayjs(value);
-        } else {
-          date = dayjs.tz(value, timezone2);
-        }
-      } else {
-        date = dayjs(value);
-      }
-      return this.setLocaleToValue(date);
+      return this.setLocaleToValue(dayjs(value));
     });
     __publicField(this, "createUTCDate", (value) => {
       if (!this.hasUTCPlugin()) {