@sinco/react 1.2.5-rc.6 → 1.2.5-rc.7

package/index.esm.js

@@ -2310,7 +2310,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$2.propTypes = {
 } : void 0;
 
 /**
- * @mui/styled-engine v6.3.1
+ * @mui/styled-engine v6.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2350,6 +2350,295 @@ function internal_serializeStyles(styles) {
   return serializeStyles(wrapper);
 }
 
+var reactIs = {exports: {}};
+
+var reactIs_production = {};
+
+/**
+ * @license React
+ * react-is.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production;
+
+function requireReactIs_production () {
+	if (hasRequiredReactIs_production) return reactIs_production;
+	hasRequiredReactIs_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+	var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	  REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	  REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	  REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	  REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
+	  REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+	function typeOf(object) {
+	  if ("object" === typeof object && null !== object) {
+	    var $$typeof = object.$$typeof;
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        switch (((object = object.type), object)) {
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	          case REACT_SUSPENSE_LIST_TYPE:
+	            return object;
+	          default:
+	            switch (((object = object && object.$$typeof), object)) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	                return object;
+	              case REACT_CONSUMER_TYPE:
+	                return object;
+	              default:
+	                return $$typeof;
+	            }
+	        }
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+	}
+	reactIs_production.ContextConsumer = REACT_CONSUMER_TYPE;
+	reactIs_production.ContextProvider = REACT_CONTEXT_TYPE;
+	reactIs_production.Element = REACT_ELEMENT_TYPE;
+	reactIs_production.ForwardRef = REACT_FORWARD_REF_TYPE;
+	reactIs_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactIs_production.Lazy = REACT_LAZY_TYPE;
+	reactIs_production.Memo = REACT_MEMO_TYPE;
+	reactIs_production.Portal = REACT_PORTAL_TYPE;
+	reactIs_production.Profiler = REACT_PROFILER_TYPE;
+	reactIs_production.StrictMode = REACT_STRICT_MODE_TYPE;
+	reactIs_production.Suspense = REACT_SUSPENSE_TYPE;
+	reactIs_production.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	reactIs_production.isContextConsumer = function (object) {
+	  return typeOf(object) === REACT_CONSUMER_TYPE;
+	};
+	reactIs_production.isContextProvider = function (object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	};
+	reactIs_production.isElement = function (object) {
+	  return (
+	    "object" === typeof object &&
+	    null !== object &&
+	    object.$$typeof === REACT_ELEMENT_TYPE
+	  );
+	};
+	reactIs_production.isForwardRef = function (object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	};
+	reactIs_production.isFragment = function (object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	};
+	reactIs_production.isLazy = function (object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	};
+	reactIs_production.isMemo = function (object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	};
+	reactIs_production.isPortal = function (object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	};
+	reactIs_production.isProfiler = function (object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	};
+	reactIs_production.isStrictMode = function (object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	};
+	reactIs_production.isSuspense = function (object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	};
+	reactIs_production.isSuspenseList = function (object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	};
+	reactIs_production.isValidElementType = function (type) {
+	  return "string" === typeof type ||
+	    "function" === typeof type ||
+	    type === REACT_FRAGMENT_TYPE ||
+	    type === REACT_PROFILER_TYPE ||
+	    type === REACT_STRICT_MODE_TYPE ||
+	    type === REACT_SUSPENSE_TYPE ||
+	    type === REACT_SUSPENSE_LIST_TYPE ||
+	    type === REACT_OFFSCREEN_TYPE ||
+	    ("object" === typeof type &&
+	      null !== type &&
+	      (type.$$typeof === REACT_LAZY_TYPE ||
+	        type.$$typeof === REACT_MEMO_TYPE ||
+	        type.$$typeof === REACT_CONTEXT_TYPE ||
+	        type.$$typeof === REACT_CONSUMER_TYPE ||
+	        type.$$typeof === REACT_FORWARD_REF_TYPE ||
+	        type.$$typeof === REACT_CLIENT_REFERENCE ||
+	        void 0 !== type.getModuleId))
+	    ? !0
+	    : !1;
+	};
+	reactIs_production.typeOf = typeOf;
+	return reactIs_production;
+}
+
+var reactIs_development = {};
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function typeOf(object) {
+	      if ("object" === typeof object && null !== object) {
+	        var $$typeof = object.$$typeof;
+	        switch ($$typeof) {
+	          case REACT_ELEMENT_TYPE:
+	            switch (((object = object.type), object)) {
+	              case REACT_FRAGMENT_TYPE:
+	              case REACT_PROFILER_TYPE:
+	              case REACT_STRICT_MODE_TYPE:
+	              case REACT_SUSPENSE_TYPE:
+	              case REACT_SUSPENSE_LIST_TYPE:
+	                return object;
+	              default:
+	                switch (((object = object && object.$$typeof), object)) {
+	                  case REACT_CONTEXT_TYPE:
+	                  case REACT_FORWARD_REF_TYPE:
+	                  case REACT_LAZY_TYPE:
+	                  case REACT_MEMO_TYPE:
+	                    return object;
+	                  case REACT_CONSUMER_TYPE:
+	                    return object;
+	                  default:
+	                    return $$typeof;
+	                }
+	            }
+	          case REACT_PORTAL_TYPE:
+	            return $$typeof;
+	        }
+	      }
+	    }
+	    var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+	    reactIs_development.ContextConsumer = REACT_CONSUMER_TYPE;
+	    reactIs_development.ContextProvider = REACT_CONTEXT_TYPE;
+	    reactIs_development.Element = REACT_ELEMENT_TYPE;
+	    reactIs_development.ForwardRef = REACT_FORWARD_REF_TYPE;
+	    reactIs_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactIs_development.Lazy = REACT_LAZY_TYPE;
+	    reactIs_development.Memo = REACT_MEMO_TYPE;
+	    reactIs_development.Portal = REACT_PORTAL_TYPE;
+	    reactIs_development.Profiler = REACT_PROFILER_TYPE;
+	    reactIs_development.StrictMode = REACT_STRICT_MODE_TYPE;
+	    reactIs_development.Suspense = REACT_SUSPENSE_TYPE;
+	    reactIs_development.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	    reactIs_development.isContextConsumer = function (object) {
+	      return typeOf(object) === REACT_CONSUMER_TYPE;
+	    };
+	    reactIs_development.isContextProvider = function (object) {
+	      return typeOf(object) === REACT_CONTEXT_TYPE;
+	    };
+	    reactIs_development.isElement = function (object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    };
+	    reactIs_development.isForwardRef = function (object) {
+	      return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	    };
+	    reactIs_development.isFragment = function (object) {
+	      return typeOf(object) === REACT_FRAGMENT_TYPE;
+	    };
+	    reactIs_development.isLazy = function (object) {
+	      return typeOf(object) === REACT_LAZY_TYPE;
+	    };
+	    reactIs_development.isMemo = function (object) {
+	      return typeOf(object) === REACT_MEMO_TYPE;
+	    };
+	    reactIs_development.isPortal = function (object) {
+	      return typeOf(object) === REACT_PORTAL_TYPE;
+	    };
+	    reactIs_development.isProfiler = function (object) {
+	      return typeOf(object) === REACT_PROFILER_TYPE;
+	    };
+	    reactIs_development.isStrictMode = function (object) {
+	      return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	    };
+	    reactIs_development.isSuspense = function (object) {
+	      return typeOf(object) === REACT_SUSPENSE_TYPE;
+	    };
+	    reactIs_development.isSuspenseList = function (object) {
+	      return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	    };
+	    reactIs_development.isValidElementType = function (type) {
+	      return "string" === typeof type ||
+	        "function" === typeof type ||
+	        type === REACT_FRAGMENT_TYPE ||
+	        type === REACT_PROFILER_TYPE ||
+	        type === REACT_STRICT_MODE_TYPE ||
+	        type === REACT_SUSPENSE_TYPE ||
+	        type === REACT_SUSPENSE_LIST_TYPE ||
+	        type === REACT_OFFSCREEN_TYPE ||
+	        ("object" === typeof type &&
+	          null !== type &&
+	          (type.$$typeof === REACT_LAZY_TYPE ||
+	            type.$$typeof === REACT_MEMO_TYPE ||
+	            type.$$typeof === REACT_CONTEXT_TYPE ||
+	            type.$$typeof === REACT_CONSUMER_TYPE ||
+	            type.$$typeof === REACT_FORWARD_REF_TYPE ||
+	            type.$$typeof === REACT_CLIENT_REFERENCE ||
+	            void 0 !== type.getModuleId))
+	        ? !0
+	        : !1;
+	    };
+	    reactIs_development.typeOf = typeOf;
+	  })();
+	return reactIs_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs.exports = requireReactIs_production();
+} else {
+  reactIs.exports = requireReactIs_development();
+}
+
+var reactIsExports = reactIs.exports;
+
 // https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
 function isPlainObject(item) {
   if (typeof item !== 'object' || item === null) {
@@ -2359,7 +2648,7 @@ function isPlainObject(item) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone(source) {
-  if (/*#__PURE__*/React.isValidElement(source) || !isPlainObject(source)) {
+  if (/*#__PURE__*/React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
@@ -2395,7 +2684,7 @@ function deepmerge(target, source, options = {
   } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
-      if (/*#__PURE__*/React.isValidElement(source[key])) {
+      if (/*#__PURE__*/React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
         output[key] = source[key];
       } else if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
@@ -3823,383 +4112,94 @@ function extendSxProp$1(props) {
       }
       return {
         ...systemProps,
-        ...result
-      };
-    };
-  } else {
-    finalSx = {
-      ...systemProps,
-      ...inSx
-    };
-  }
-  return {
-    ...otherProps,
-    sx: finalSx
-  };
-}
-
-const defaultGenerator = componentName => componentName;
-const createClassNameGenerator = () => {
-  let generate = defaultGenerator;
-  return {
-    configure(generator) {
-      generate = generator;
-    },
-    generate(componentName) {
-      return generate(componentName);
-    },
-    reset() {
-      generate = defaultGenerator;
-    }
-  };
-};
-const ClassNameGenerator = createClassNameGenerator();
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-function createBox(options = {}) {
-  const {
-    themeId,
-    defaultTheme,
-    defaultClassName = 'MuiBox-root',
-    generateClassName
-  } = options;
-  const BoxRoot = styled$2('div', {
-    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
-  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
-    const theme = useTheme$1(defaultTheme);
-    const {
-      className,
-      component = 'div',
-      ...other
-    } = extendSxProp$1(inProps);
-    return /*#__PURE__*/jsx(BoxRoot, {
-      as: component,
-      ref: ref,
-      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme,
-      ...other
-    });
-  });
-  return Box;
-}
-
-const globalStateClasses = {
-  active: 'active',
-  checked: 'checked',
-  completed: 'completed',
-  disabled: 'disabled',
-  error: 'error',
-  expanded: 'expanded',
-  focused: 'focused',
-  focusVisible: 'focusVisible',
-  open: 'open',
-  readOnly: 'readOnly',
-  required: 'required',
-  selected: 'selected'
-};
-function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
-  const globalStateClass = globalStateClasses[slot];
-  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
-}
-
-function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
-  const result = {};
-  slots.forEach(slot => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
-}
-
-var reactIs = {exports: {}};
-
-var reactIs_production = {};
-
-/**
- * @license React
- * react-is.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production;
-
-function requireReactIs_production () {
-	if (hasRequiredReactIs_production) return reactIs_production;
-	hasRequiredReactIs_production = 1;
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	  REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	  REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	  REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	  REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
-	  REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
-	function typeOf(object) {
-	  if ("object" === typeof object && null !== object) {
-	    var $$typeof = object.$$typeof;
-	    switch ($$typeof) {
-	      case REACT_ELEMENT_TYPE:
-	        switch (((object = object.type), object)) {
-	          case REACT_FRAGMENT_TYPE:
-	          case REACT_PROFILER_TYPE:
-	          case REACT_STRICT_MODE_TYPE:
-	          case REACT_SUSPENSE_TYPE:
-	          case REACT_SUSPENSE_LIST_TYPE:
-	            return object;
-	          default:
-	            switch (((object = object && object.$$typeof), object)) {
-	              case REACT_CONTEXT_TYPE:
-	              case REACT_FORWARD_REF_TYPE:
-	              case REACT_LAZY_TYPE:
-	              case REACT_MEMO_TYPE:
-	                return object;
-	              case REACT_CONSUMER_TYPE:
-	                return object;
-	              default:
-	                return $$typeof;
-	            }
-	        }
-	      case REACT_PORTAL_TYPE:
-	        return $$typeof;
-	    }
-	  }
-	}
-	reactIs_production.ContextConsumer = REACT_CONSUMER_TYPE;
-	reactIs_production.ContextProvider = REACT_CONTEXT_TYPE;
-	reactIs_production.Element = REACT_ELEMENT_TYPE;
-	reactIs_production.ForwardRef = REACT_FORWARD_REF_TYPE;
-	reactIs_production.Fragment = REACT_FRAGMENT_TYPE;
-	reactIs_production.Lazy = REACT_LAZY_TYPE;
-	reactIs_production.Memo = REACT_MEMO_TYPE;
-	reactIs_production.Portal = REACT_PORTAL_TYPE;
-	reactIs_production.Profiler = REACT_PROFILER_TYPE;
-	reactIs_production.StrictMode = REACT_STRICT_MODE_TYPE;
-	reactIs_production.Suspense = REACT_SUSPENSE_TYPE;
-	reactIs_production.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	reactIs_production.isContextConsumer = function (object) {
-	  return typeOf(object) === REACT_CONSUMER_TYPE;
-	};
-	reactIs_production.isContextProvider = function (object) {
-	  return typeOf(object) === REACT_CONTEXT_TYPE;
-	};
-	reactIs_production.isElement = function (object) {
-	  return (
-	    "object" === typeof object &&
-	    null !== object &&
-	    object.$$typeof === REACT_ELEMENT_TYPE
-	  );
-	};
-	reactIs_production.isForwardRef = function (object) {
-	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	};
-	reactIs_production.isFragment = function (object) {
-	  return typeOf(object) === REACT_FRAGMENT_TYPE;
-	};
-	reactIs_production.isLazy = function (object) {
-	  return typeOf(object) === REACT_LAZY_TYPE;
-	};
-	reactIs_production.isMemo = function (object) {
-	  return typeOf(object) === REACT_MEMO_TYPE;
-	};
-	reactIs_production.isPortal = function (object) {
-	  return typeOf(object) === REACT_PORTAL_TYPE;
-	};
-	reactIs_production.isProfiler = function (object) {
-	  return typeOf(object) === REACT_PROFILER_TYPE;
-	};
-	reactIs_production.isStrictMode = function (object) {
-	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	};
-	reactIs_production.isSuspense = function (object) {
-	  return typeOf(object) === REACT_SUSPENSE_TYPE;
-	};
-	reactIs_production.isSuspenseList = function (object) {
-	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-	};
-	reactIs_production.isValidElementType = function (type) {
-	  return "string" === typeof type ||
-	    "function" === typeof type ||
-	    type === REACT_FRAGMENT_TYPE ||
-	    type === REACT_PROFILER_TYPE ||
-	    type === REACT_STRICT_MODE_TYPE ||
-	    type === REACT_SUSPENSE_TYPE ||
-	    type === REACT_SUSPENSE_LIST_TYPE ||
-	    type === REACT_OFFSCREEN_TYPE ||
-	    ("object" === typeof type &&
-	      null !== type &&
-	      (type.$$typeof === REACT_LAZY_TYPE ||
-	        type.$$typeof === REACT_MEMO_TYPE ||
-	        type.$$typeof === REACT_CONTEXT_TYPE ||
-	        type.$$typeof === REACT_CONSUMER_TYPE ||
-	        type.$$typeof === REACT_FORWARD_REF_TYPE ||
-	        type.$$typeof === REACT_CLIENT_REFERENCE ||
-	        void 0 !== type.getModuleId))
-	    ? !0
-	    : !1;
-	};
-	reactIs_production.typeOf = typeOf;
-	return reactIs_production;
+        ...result
+      };
+    };
+  } else {
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
+  }
+  return {
+    ...otherProps,
+    sx: finalSx
+  };
 }
 
-var reactIs_development = {};
-
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+const defaultGenerator = componentName => componentName;
+const createClassNameGenerator = () => {
+  let generate = defaultGenerator;
+  return {
+    configure(generator) {
+      generate = generator;
+    },
+    generate(componentName) {
+      return generate(componentName);
+    },
+    reset() {
+      generate = defaultGenerator;
+    }
+  };
+};
+const ClassNameGenerator = createClassNameGenerator();
 
-var hasRequiredReactIs_development;
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-function requireReactIs_development () {
-	if (hasRequiredReactIs_development) return reactIs_development;
-	hasRequiredReactIs_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function typeOf(object) {
-	      if ("object" === typeof object && null !== object) {
-	        var $$typeof = object.$$typeof;
-	        switch ($$typeof) {
-	          case REACT_ELEMENT_TYPE:
-	            switch (((object = object.type), object)) {
-	              case REACT_FRAGMENT_TYPE:
-	              case REACT_PROFILER_TYPE:
-	              case REACT_STRICT_MODE_TYPE:
-	              case REACT_SUSPENSE_TYPE:
-	              case REACT_SUSPENSE_LIST_TYPE:
-	                return object;
-	              default:
-	                switch (((object = object && object.$$typeof), object)) {
-	                  case REACT_CONTEXT_TYPE:
-	                  case REACT_FORWARD_REF_TYPE:
-	                  case REACT_LAZY_TYPE:
-	                  case REACT_MEMO_TYPE:
-	                    return object;
-	                  case REACT_CONSUMER_TYPE:
-	                    return object;
-	                  default:
-	                    return $$typeof;
-	                }
-	            }
-	          case REACT_PORTAL_TYPE:
-	            return $$typeof;
-	        }
-	      }
-	    }
-	    var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
-	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
-	    reactIs_development.ContextConsumer = REACT_CONSUMER_TYPE;
-	    reactIs_development.ContextProvider = REACT_CONTEXT_TYPE;
-	    reactIs_development.Element = REACT_ELEMENT_TYPE;
-	    reactIs_development.ForwardRef = REACT_FORWARD_REF_TYPE;
-	    reactIs_development.Fragment = REACT_FRAGMENT_TYPE;
-	    reactIs_development.Lazy = REACT_LAZY_TYPE;
-	    reactIs_development.Memo = REACT_MEMO_TYPE;
-	    reactIs_development.Portal = REACT_PORTAL_TYPE;
-	    reactIs_development.Profiler = REACT_PROFILER_TYPE;
-	    reactIs_development.StrictMode = REACT_STRICT_MODE_TYPE;
-	    reactIs_development.Suspense = REACT_SUSPENSE_TYPE;
-	    reactIs_development.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	    reactIs_development.isContextConsumer = function (object) {
-	      return typeOf(object) === REACT_CONSUMER_TYPE;
-	    };
-	    reactIs_development.isContextProvider = function (object) {
-	      return typeOf(object) === REACT_CONTEXT_TYPE;
-	    };
-	    reactIs_development.isElement = function (object) {
-	      return (
-	        "object" === typeof object &&
-	        null !== object &&
-	        object.$$typeof === REACT_ELEMENT_TYPE
-	      );
-	    };
-	    reactIs_development.isForwardRef = function (object) {
-	      return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	    };
-	    reactIs_development.isFragment = function (object) {
-	      return typeOf(object) === REACT_FRAGMENT_TYPE;
-	    };
-	    reactIs_development.isLazy = function (object) {
-	      return typeOf(object) === REACT_LAZY_TYPE;
-	    };
-	    reactIs_development.isMemo = function (object) {
-	      return typeOf(object) === REACT_MEMO_TYPE;
-	    };
-	    reactIs_development.isPortal = function (object) {
-	      return typeOf(object) === REACT_PORTAL_TYPE;
-	    };
-	    reactIs_development.isProfiler = function (object) {
-	      return typeOf(object) === REACT_PROFILER_TYPE;
-	    };
-	    reactIs_development.isStrictMode = function (object) {
-	      return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	    };
-	    reactIs_development.isSuspense = function (object) {
-	      return typeOf(object) === REACT_SUSPENSE_TYPE;
-	    };
-	    reactIs_development.isSuspenseList = function (object) {
-	      return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-	    };
-	    reactIs_development.isValidElementType = function (type) {
-	      return "string" === typeof type ||
-	        "function" === typeof type ||
-	        type === REACT_FRAGMENT_TYPE ||
-	        type === REACT_PROFILER_TYPE ||
-	        type === REACT_STRICT_MODE_TYPE ||
-	        type === REACT_SUSPENSE_TYPE ||
-	        type === REACT_SUSPENSE_LIST_TYPE ||
-	        type === REACT_OFFSCREEN_TYPE ||
-	        ("object" === typeof type &&
-	          null !== type &&
-	          (type.$$typeof === REACT_LAZY_TYPE ||
-	            type.$$typeof === REACT_MEMO_TYPE ||
-	            type.$$typeof === REACT_CONTEXT_TYPE ||
-	            type.$$typeof === REACT_CONSUMER_TYPE ||
-	            type.$$typeof === REACT_FORWARD_REF_TYPE ||
-	            type.$$typeof === REACT_CLIENT_REFERENCE ||
-	            void 0 !== type.getModuleId))
-	        ? !0
-	        : !1;
-	    };
-	    reactIs_development.typeOf = typeOf;
-	  })();
-	return reactIs_development;
+function createBox(options = {}) {
+  const {
+    themeId,
+    defaultTheme,
+    defaultClassName = 'MuiBox-root',
+    generateClassName
+  } = options;
+  const BoxRoot = styled$2('div', {
+    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+  })(styleFunctionSx);
+  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
+    const theme = useTheme$1(defaultTheme);
+    const {
+      className,
+      component = 'div',
+      ...other
+    } = extendSxProp$1(inProps);
+    return /*#__PURE__*/jsx(BoxRoot, {
+      as: component,
+      ref: ref,
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      theme: themeId ? theme[themeId] || theme : theme,
+      ...other
+    });
+  });
+  return Box;
 }
 
-if (process.env.NODE_ENV === 'production') {
-  reactIs.exports = requireReactIs_production();
-} else {
-  reactIs.exports = requireReactIs_development();
+const globalStateClasses = {
+  active: 'active',
+  checked: 'checked',
+  completed: 'completed',
+  disabled: 'disabled',
+  error: 'error',
+  expanded: 'expanded',
+  focused: 'focused',
+  focusVisible: 'focusVisible',
+  open: 'open',
+  readOnly: 'readOnly',
+  required: 'required',
+  selected: 'selected'
+};
+function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
+  const globalStateClass = globalStateClasses[slot];
+  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 }
 
-var reactIsExports = reactIs.exports;
+function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
+  const result = {};
+  slots.forEach(slot => {
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+  });
+  return result;
+}
 
 function getFunctionComponentName(Component, fallback = '') {
   return Component.displayName || Component.name || fallback;
@@ -5108,6 +5108,49 @@ function setRef(ref, value) {
   }
 }
 
+let globalId = 0;
+
+// TODO React 17: Remove `useGlobalId` once React 17 support is removed
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseId = safeReact.useId;
+
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride) {
+  // React.useId() is only available from React 17.0.0.
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? reactId;
+  }
+
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}
+
 function useControlled({
   controlled,
   default: defaultProp,
@@ -7053,7 +7096,7 @@ function setColor(obj, key, defaultValue) {
   }
 }
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -7345,7 +7388,7 @@ function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', private_safeColorChannel(toRgb(colors.main)));
@@ -9389,7 +9432,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$l = ownerState => {
+const useUtilityClasses$m = ownerState => {
   const {
     align,
     gutterBottom,
@@ -9530,7 +9573,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, {
     as: Component,
     ref: ref,
@@ -10358,7 +10401,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
   onExited: PropTypes.func
 } : {}; // Name the function so it is clearer in the documentation
 
-function noop() {}
+function noop$1() {}
 
 Transition.defaultProps = {
   in: false,
@@ -10367,12 +10410,12 @@ Transition.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  onEnter: noop,
-  onEntering: noop,
-  onEntered: noop,
-  onExit: noop,
-  onExiting: noop,
-  onExited: noop
+  onEnter: noop$1,
+  onEntering: noop$1,
+  onEntered: noop$1,
+  onExit: noop$1,
+  onExiting: noop$1,
+  onExited: noop$1
 };
 Transition.UNMOUNTED = UNMOUNTED;
 Transition.EXITED = EXITED;
@@ -11102,7 +11145,7 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const useUtilityClasses$k = ownerState => {
+const useUtilityClasses$l = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -11223,34 +11266,22 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       ripple.pulsate();
     }
   }, [disableRipple, focusRipple, focusVisible, ripple]);
-  function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
-    return useEventCallback(event => {
-      if (eventCallback) {
-        eventCallback(event);
-      }
-      const ignore = skipRippleAction;
-      if (!ignore) {
-        ripple[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const handleMouseDown = useRippleHandler('start', onMouseDown);
-  const handleContextMenu = useRippleHandler('stop', onContextMenu);
-  const handleDragLeave = useRippleHandler('stop', onDragLeave);
-  const handleMouseUp = useRippleHandler('stop', onMouseUp);
-  const handleMouseLeave = useRippleHandler('stop', event => {
+  const handleMouseDown = useRippleHandler(ripple, 'start', onMouseDown, disableTouchRipple);
+  const handleContextMenu = useRippleHandler(ripple, 'stop', onContextMenu, disableTouchRipple);
+  const handleDragLeave = useRippleHandler(ripple, 'stop', onDragLeave, disableTouchRipple);
+  const handleMouseUp = useRippleHandler(ripple, 'stop', onMouseUp, disableTouchRipple);
+  const handleMouseLeave = useRippleHandler(ripple, 'stop', event => {
     if (focusVisible) {
       event.preventDefault();
     }
     if (onMouseLeave) {
       onMouseLeave(event);
     }
-  });
-  const handleTouchStart = useRippleHandler('start', onTouchStart);
-  const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
-  const handleTouchMove = useRippleHandler('stop', onTouchMove);
-  const handleBlur = useRippleHandler('stop', event => {
+  }, disableTouchRipple);
+  const handleTouchStart = useRippleHandler(ripple, 'start', onTouchStart, disableTouchRipple);
+  const handleTouchEnd = useRippleHandler(ripple, 'stop', onTouchEnd, disableTouchRipple);
+  const handleTouchMove = useRippleHandler(ripple, 'stop', onTouchMove, disableTouchRipple);
+  const handleBlur = useRippleHandler(ripple, 'stop', event => {
     if (!isFocusVisible(event.target)) {
       setFocusVisible(false);
     }
@@ -11344,7 +11375,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -11374,6 +11405,17 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }) : null]
   });
 });
+function useRippleHandler(ripple, rippleAction, eventCallback, skipRippleAction = false) {
+  return useEventCallback(event => {
+    if (eventCallback) {
+      eventCallback(event);
+    }
+    if (!skipRippleAction) {
+      ripple[rippleAction](event);
+    }
+    return true;
+  });
+}
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -11538,7 +11580,7 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const useUtilityClasses$j = ownerState => {
+const useUtilityClasses$k = ownerState => {
   const {
     classes,
     checked,
@@ -11680,7 +11722,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /*#__PURE__*/jsxs(SwitchBaseRoot, {
     component: "span",
     className: clsx(classes.root, className),
@@ -11828,7 +11870,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const useUtilityClasses$i = ownerState => {
+const useUtilityClasses$j = ownerState => {
   const {
     color,
     fontSize,
@@ -11958,7 +12000,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -12048,9 +12090,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-if (SvgIcon) {
-  SvgIcon.muiName = 'SvgIcon';
-}
+SvgIcon.muiName = 'SvgIcon';
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
@@ -12172,7 +12212,7 @@ function getRadioUtilityClass(slot) {
 }
 const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 
-const useUtilityClasses$h = ownerState => {
+const useUtilityClasses$i = ownerState => {
   const {
     classes,
     color,
@@ -12295,7 +12335,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     color,
     size
   };
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
   const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -12432,7 +12472,7 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const useUtilityClasses$g = ownerState => {
+const useUtilityClasses$h = ownerState => {
   const {
     classes,
     indeterminate,
@@ -12539,7 +12579,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate,
     size
   };
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /*#__PURE__*/jsx(CheckboxRoot, {
     type: "checkbox",
     inputProps: {
@@ -12825,7 +12865,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const useUtilityClasses$f = ownerState => {
+const useUtilityClasses$g = ownerState => {
   const {
     square,
     elevation,
@@ -12897,7 +12937,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
@@ -12961,10 +13001,349 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
     return null;
   }),
   /**
-   * If `true`, rounded corners are disabled.
-   * @default false
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
+} : void 0;
+
+/**
+ * An internal function to create a Material UI slot.
+ *
+ * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+ * while Base UI does not need to support leaf component customization.
+ *
+ * @param {string} name: name of the slot
+ * @param {object} parameters
+ * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+ *
+ * Note: the returned slot's props
+ * - will never contain `component` prop.
+ * - might contain `as` prop.
+ */
+function useSlot(
+/**
+ * The slot's name. All Material UI components should have `root` slot.
+ *
+ * If the name is `root`, the logic behaves differently from other slots,
+ * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+ */
+name, parameters) {
+  const {
+    className,
+    elementType: initialElementType,
+    ownerState,
+    externalForwardedProps,
+    internalForwardedProps,
+    shouldForwardComponentProp = false,
+    ...useSlotPropsParams
+  } = parameters;
+  const {
+    component: rootComponent,
+    slots = {
+      [name]: undefined
+    },
+    slotProps = {
+      [name]: undefined
+    },
+    ...other
+  } = externalForwardedProps;
+  const elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
+  // `resolvedComponentsProps` is always a plain object.
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  const {
+    props: {
+      component: slotComponent,
+      ...mergedProps
+    },
+    internalRef
+  } = mergeSlotProps({
+    className,
+    ...useSlotPropsParams,
+    externalForwardedProps: name === 'root' ? other : undefined,
+    externalSlotProps: resolvedComponentsProps
+  });
+  const ref = useForkRef(internalRef, 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 getCircularProgressUtilityClass(slot) {
+  return generateUtilityClass('MuiCircularProgress', slot);
+}
+generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+
+const SIZE = 44;
+const circularRotateKeyframe = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const circularDashKeyframe = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+`;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const rotateAnimation = typeof circularRotateKeyframe !== 'string' ? css`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== 'string' ? css`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
+const useUtilityClasses$f = ownerState => {
+  const {
+    classes,
+    variant,
+    color,
+    disableShrink
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, `color${capitalize(color)}`],
+    svg: ['svg'],
+    circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']
+  };
+  return composeClasses(slots, getCircularProgressUtilityClass, classes);
+};
+const CircularProgressRoot = styled('span', {
+  name: 'MuiCircularProgress',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  display: 'inline-block',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('transform')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+})));
+const CircularProgressSVG = styled('svg', {
+  name: 'MuiCircularProgress',
+  slot: 'Svg',
+  overridesResolver: (props, styles) => styles.svg
+})({
+  display: 'block' // Keeps the progress centered
+});
+const CircularProgressCircle = styled('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Circle',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('stroke-dashoffset')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: '80px, 200px',
+      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+})));
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiCircularProgress'
+  });
+  const {
+    className,
+    color = 'primary',
+    disableShrink = false,
+    size = 40,
+    style,
+    thickness = 3.6,
+    value = 0,
+    variant = 'indeterminate',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color,
+    disableShrink,
+    size,
+    thickness,
+    value,
+    variant
+  };
+  const classes = useUtilityClasses$f(ownerState);
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+  if (variant === 'determinate') {
+    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps['aria-valuenow'] = Math.round(value);
+    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    rootStyle.transform = 'rotate(-90deg)';
+  }
+  return /*#__PURE__*/jsx(CircularProgressRoot, {
+    className: clsx(classes.root, className),
+    style: {
+      width: size,
+      height: size,
+      ...rootStyle,
+      ...style
+    },
+    ownerState: ownerState,
+    ref: ref,
+    role: "progressbar",
+    ...rootProps,
+    ...other,
+    children: /*#__PURE__*/jsx(CircularProgressSVG, {
+      className: classes.svg,
+      ownerState: ownerState,
+      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+      children: /*#__PURE__*/jsx(CircularProgressCircle, {
+        className: classes.circle,
+        style: circleStyle,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   * @default false
+   */
+  disableShrink: chainPropTypes(PropTypes.bool, props => {
+    if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
+      return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
+    }
+    return null;
+  }),
+  /**
+   * The size of the component.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * @default 40
    */
-  square: PropTypes.bool,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * @ignore
    */
@@ -12973,97 +13352,29 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The thickness of the circle.
+   * @default 3.6
+   */
+  thickness: PropTypes.number,
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
+   */
+  value: PropTypes.number,
   /**
    * The variant to use.
-   * @default 'elevation'
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
    */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
+  variant: PropTypes.oneOf(['determinate', 'indeterminate'])
 } : void 0;
 
-/**
- * An internal function to create a Material UI slot.
- *
- * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
- * while Base UI does not need to support leaf component customization.
- *
- * @param {string} name: name of the slot
- * @param {object} parameters
- * @returns {[Slot, slotProps]} The slot's React component and the slot's props
- *
- * Note: the returned slot's props
- * - will never contain `component` prop.
- * - might contain `as` prop.
- */
-function useSlot(
-/**
- * The slot's name. All Material UI components should have `root` slot.
- *
- * If the name is `root`, the logic behaves differently from other slots,
- * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
- */
-name, parameters) {
-  const {
-    className,
-    elementType: initialElementType,
-    ownerState,
-    externalForwardedProps,
-    getSlotOwnerState,
-    internalForwardedProps,
-    ...useSlotPropsParams
-  } = parameters;
-  const {
-    component: rootComponent,
-    slots = {
-      [name]: undefined
-    },
-    slotProps = {
-      [name]: undefined
-    },
-    ...other
-  } = externalForwardedProps;
-  const elementType = slots[name] || initialElementType;
-
-  // `slotProps[name]` can be a callback that receives the component's ownerState.
-  // `resolvedComponentsProps` is always a plain object.
-  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
-  const {
-    props: {
-      component: slotComponent,
-      ...mergedProps
-    },
-    internalRef
-  } = mergeSlotProps({
-    className,
-    ...useSlotPropsParams,
-    externalForwardedProps: name === 'root' ? other : undefined,
-    externalSlotProps: resolvedComponentsProps
-  });
-  const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
-  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = {
-    ...ownerState,
-    ...slotOwnerState
-  };
-  const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
-  const props = appendOwnerState(elementType, {
-    ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
-    ...(name !== 'root' && !slots[name] && internalForwardedProps),
-    ...mergedProps,
-    ...(LeafComponent && {
-      as: LeafComponent
-    }),
-    ref
-  }, finalOwnerState);
-  Object.keys(slotOwnerState).forEach(propName => {
-    delete props[propName];
-  });
-  return [elementType, props];
-}
-
 function getIconButtonUtilityClass(slot) {
   return generateUtilityClass('MuiIconButton', slot);
 }
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 
 const useUtilityClasses$e = ownerState => {
   const {
@@ -13071,10 +13382,13 @@ const useUtilityClasses$e = ownerState => {
     disabled,
     color,
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
@@ -13085,7 +13399,7 @@ const IconButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
 })(memoTheme(({
   theme
@@ -13188,8 +13502,34 @@ const IconButtonRoot = styled(ButtonBase, {
   [`&.${iconButtonClasses.disabled}`]: {
     backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = styled('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
@@ -13208,26 +13548,51 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disabled = false,
     disableFocusRipple = false,
     size = 'medium',
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses$e(ownerState);
-  return /*#__PURE__*/jsx(IconButtonRoot, {
+  return /*#__PURE__*/jsxs(IconButtonRoot, {
+    id: id,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [typeof loading === 'boolean' &&
+    /*#__PURE__*/
+    // use plain HTML span to minimize the runtime overhead
+    jsx("span", {
+      className: classes.loadingWrapper,
+      style: {
+        display: 'contents'
+      },
+      children: /*#__PURE__*/jsx(IconButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loading && loadingIndicator
+      })
+    }), children]
   });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
@@ -13286,6 +13651,23 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
    * @default false
    */
   edge: PropTypes.oneOf(['end', 'start', false]),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
@@ -13505,7 +13887,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
   enableColorOnDark: PropTypes.bool,
   /**
    * The positioning type. The behavior of the different options is described
-   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */
@@ -13561,13 +13943,9 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
       };
       return /*#__PURE__*/React.cloneElement(children, newProps);
     }
-    return /*#__PURE__*/jsx(React.Fragment, {
-      children: children
-    });
+    return children;
   }
-  return /*#__PURE__*/jsx(React.Fragment, {
-    children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
-  });
+  return mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode;
 });
 process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -14704,7 +15082,10 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -14714,7 +15095,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });
@@ -14800,13 +15181,6 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const removeOwnerState = props => {
-  const {
-    ownerState,
-    ...rest
-  } = props;
-  return rest;
-};
 const useUtilityClasses$b = ownerState => {
   const {
     classes,
@@ -14895,12 +15269,11 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionPropsRemoved,
+    ...transitionProps,
     children: /*#__PURE__*/jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
@@ -15033,7 +15406,7 @@ process.env.NODE_ENV !== "production" ? Box$2.propTypes /* remove-proptypes */ =
 function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
 
 /**
  * @ignore - internal component.
@@ -15058,13 +15431,16 @@ const useUtilityClasses$a = ownerState => {
     fullWidth,
     size,
     variant,
+    loading,
+    loadingPosition,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
-    label: ['label'],
+    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
     startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return {
@@ -15109,7 +15485,7 @@ const ButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
 })(memoTheme(({
   theme
@@ -15296,6 +15672,18 @@ const ButtonRoot = styled(ButtonBase, {
       style: {
         width: '100%'
       }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${buttonClasses.loading}`]: {
+          color: 'transparent'
+        }
+      }
     }]
   };
 }));
@@ -15306,9 +15694,11 @@ const ButtonStartIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4,
@@ -15319,8 +15709,28 @@ const ButtonStartIcon = styled('span', {
     style: {
       marginLeft: -2
     }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
   }, ...commonIconStyles]
-});
+}));
 const ButtonEndIcon = styled('span', {
   name: 'MuiButton',
   slot: 'EndIcon',
@@ -15328,9 +15738,11 @@ const ButtonEndIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8,
@@ -15341,7 +15753,128 @@ const ButtonEndIcon = styled('span', {
     style: {
       marginRight: -2
     }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
   }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder',
+  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
 });
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
@@ -15363,12 +15896,22 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     endIcon: endIconProp,
     focusVisibleClassName,
     fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
     size = 'medium',
     startIcon: startIconProp,
     type,
     variant = 'text',
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     color,
@@ -15377,34 +15920,58 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     disableElevation,
     disableFocusRipple,
     fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
     size,
     type,
     variant
   };
   const classes = useUtilityClasses$a(ownerState);
-  const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
-    children: startIconProp
+    children: startIconProp || /*#__PURE__*/jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
-  const endIcon = endIconProp && /*#__PURE__*/jsx(ButtonEndIcon, {
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsx(ButtonEndIcon, {
     className: classes.endIcon,
     ownerState: ownerState,
-    children: endIconProp
+    children: endIconProp || /*#__PURE__*/jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  jsx("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/jsx(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
   return /*#__PURE__*/jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
     component: component,
-    disabled: disabled,
+    disabled: disabled || loading,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
+    id: id,
     ...other,
     classes: classes,
-    children: [startIcon, children, endIcon]
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });
 process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
@@ -15477,6 +16044,28 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * If defined, an `a` element will be used as the root node.
    */
   href: PropTypes.string,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
@@ -16041,6 +16630,7 @@ function getContainer(container) {
 function getHasTransition(children) {
   return children ? children.props.hasOwnProperty('in') : false;
 }
+const noop = () => {};
 
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
@@ -16212,8 +16802,8 @@ function useModal(parameters) {
       }
     };
     return {
-      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
-      onExited: createChainedFunction(handleExited, children?.props.onExited)
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop),
+      onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop)
     };
   };
   return {
@@ -17128,7 +17718,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -17136,7 +17729,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...childProps
+        ...restChildProps
       });
     }
   });
@@ -17247,7 +17840,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
 function getDrawerUtilityClass(slot) {
   return generateUtilityClass('MuiDrawer', slot);
 }
-generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
 
 const overridesResolver$2 = (props, styles) => {
   const {
@@ -17262,7 +17855,7 @@ const useUtilityClasses$7 = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root'],
+    root: ['root', `anchor${capitalize(anchor)}`],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
     paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
@@ -17746,7 +18339,10 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -17757,7 +18353,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });
@@ -17960,6 +18556,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
       }) : /*#__PURE__*/jsxs(React.Fragment, {
         children: [position === 'start' ? (/* notranslate needed while Google Translate will not fix zero-width space issue */_span$1 || (_span$1 = /*#__PURE__*/jsx("span", {
           className: "notranslate",
+          "aria-hidden": true,
           children: "\u200B"
         }))) : null, children]
       })
@@ -18018,7 +18615,7 @@ process.env.NODE_ENV !== "production" ? InputAdornment.propTypes /* remove-propt
 function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }
-generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 
 const TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = keyframes`
@@ -18091,8 +18688,8 @@ const useUtilityClasses$5 = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, variant],
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
   return composeClasses(slots, getLinearProgressUtilityClass, classes);
 };
@@ -18210,7 +18807,7 @@ const LinearProgressBar1 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })(memoTheme(({
   theme
@@ -18274,7 +18871,7 @@ const LinearProgressBar2 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(memoTheme(({
   theme
@@ -19479,6 +20076,7 @@ function NotchedOutline(props) {
       }) : // notranslate needed while Google Translate will not fix zero-width space issue
       _span || (_span = /*#__PURE__*/jsx("span", {
         className: "notranslate",
+        "aria-hidden": true,
         children: "\u200B"
       }))
     })
@@ -19902,9 +20500,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-if (OutlinedInput) {
-  OutlinedInput.muiName = 'Input';
-}
+OutlinedInput.muiName = 'Input';
 
 const Stack = createStack({
   createStyledComponent: styled('div', {