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

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import React__default, { Children, isValidElement, cloneElement, useState, useCallback, useEffect } from 'react';
-import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp, Info, Warning, SearchOutlined, AttachFile, UploadFileOutlined, DeleteOutline } from '@mui/icons-material';
+import React__default, { isValidElement, cloneElement, Children, useState, useCallback, useEffect } from 'react';
+import { InfoRounded, WarningRounded, ErrorRounded, CheckCircleRounded, Close, KeyboardArrowDown, KeyboardArrowUp, Warning, Info, SearchOutlined, AttachFile, UploadFileOutlined, DeleteOutline } from '@mui/icons-material';
 import { withEmotionCache, ThemeContext, Global, keyframes, css } from '@emotion/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
@@ -45,9 +45,9 @@ function _asyncToGenerator(n) {
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 function _iterableToArray(r) {
@@ -61,15 +61,15 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     try {
       if (i = (t = t.call(r)).next, 0 === l) {
         if (Object(t) !== t) return;
         f = !1;
       } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = !0, n = r;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -99,7 +99,7 @@ function ownKeys(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
       _defineProperty(e, r, t[r]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
@@ -113,8 +113,8 @@ function _objectWithoutProperties(e, t) {
     r,
     i = _objectWithoutPropertiesLoose$1(e, t);
   if (Object.getOwnPropertySymbols) {
-    var s = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -122,7 +122,7 @@ function _objectWithoutPropertiesLoose$1(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -145,9 +145,9 @@ function _regeneratorRuntime() {
   function define(t, e, r) {
     return Object.defineProperty(t, e, {
       value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
+      enumerable: true,
+      configurable: true,
+      writable: true
     }), t[e];
   }
   try {
@@ -240,7 +240,7 @@ function _regeneratorRuntime() {
         if ("throw" === i) throw a;
         return {
           value: t,
-          done: !0
+          done: true
         };
       }
       for (n.method = i, n.arg = a;;) {
@@ -291,7 +291,7 @@ function _regeneratorRuntime() {
   function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+    }], t.forEach(pushTryEntry, this), this.reset(true);
   }
   function values(e) {
     if (e || "" === e) {
@@ -301,8 +301,8 @@ function _regeneratorRuntime() {
       if (!isNaN(e.length)) {
         var o = -1,
           i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
+            return next.value = t, next.done = true, next;
           };
         return i.next = i;
       }
@@ -311,10 +311,10 @@ function _regeneratorRuntime() {
   }
   return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
     value: GeneratorFunctionPrototype,
-    configurable: !0
+    configurable: true
   }), o(GeneratorFunctionPrototype, "constructor", {
     value: GeneratorFunction,
-    configurable: !0
+    configurable: true
   }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
     var e = "function" == typeof t && t.constructor;
     return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
@@ -343,17 +343,17 @@ function _regeneratorRuntime() {
     return r.reverse(), function next() {
       for (; r.length;) {
         var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
+        if (t in e) return next.value = t, next.done = false, next;
       }
-      return next.done = !0, next;
+      return next.done = true, next;
     };
   }, e.values = values, Context.prototype = {
     constructor: Context,
     reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
-      this.done = !0;
+      this.done = true;
       var t = this.tryEntries[0].completion;
       if ("throw" === t.type) throw t.arg;
       return this.rval;
@@ -372,10 +372,10 @@ function _regeneratorRuntime() {
           var c = n.call(i, "catchLoc"),
             u = n.call(i, "finallyLoc");
           if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
           } else {
             if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
@@ -438,7 +438,7 @@ function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+    var i = e.call(t, r);
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -670,8 +670,6 @@ function memoize$1(fn) {
   };
 }
 
-var isDevelopment = false;
-
 var hyphenateRegex = /[A-Z]|^ms/g;
 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
 
@@ -712,8 +710,6 @@ var processStyleValue = function processStyleValue(key, value) {
   return value;
 };
 
-var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
-
 function handleInterpolation(mergedProps, registered, interpolation) {
   if (interpolation == null) {
     return '';
@@ -814,9 +810,6 @@ function createStringFromObject(mergedProps, registered, obj) {
           string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
         }
       } else {
-        if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
-          throw new Error(noComponentSelectorMessage);
-        }
 
         if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
           for (var _i = 0; _i < value.length; _i++) {
@@ -2310,7 +2303,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$2.propTypes = {
 } : void 0;
 
 /**
- * @mui/styled-engine v6.4.0
+ * @mui/styled-engine v6.4.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2483,8 +2476,8 @@ function requireReactIs_production () {
 	        type.$$typeof === REACT_FORWARD_REF_TYPE ||
 	        type.$$typeof === REACT_CLIENT_REFERENCE ||
 	        void 0 !== type.getModuleId))
-	    ? !0
-	    : !1;
+	    ? true
+	    : false;
 	};
 	reactIs_production.typeOf = typeOf;
 	return reactIs_production;
@@ -2623,8 +2616,8 @@ function requireReactIs_development () {
 	            type.$$typeof === REACT_FORWARD_REF_TYPE ||
 	            type.$$typeof === REACT_CLIENT_REFERENCE ||
 	            void 0 !== type.getModuleId))
-	        ? !0
-	        : !1;
+	        ? true
+	        : false;
 	    };
 	    reactIs_development.typeOf = typeOf;
 	  })();
@@ -2703,7 +2696,7 @@ function deepmerge(target, source, options = {
 
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-const sortBreakpointsValues$1 = values => {
+const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
@@ -2719,7 +2712,7 @@ const sortBreakpointsValues$1 = values => {
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
-function createBreakpoints$1(breakpoints) {
+function createBreakpoints(breakpoints) {
   const {
     // The breakpoint **start** at this value.
     // For instance with the first breakpoint xs: [xs, sm).
@@ -2738,7 +2731,7 @@ function createBreakpoints$1(breakpoints) {
     step = 5,
     ...other
   } = breakpoints;
-  const sortedValues = sortBreakpointsValues$1(values);
+  const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
@@ -4001,7 +3994,7 @@ function createTheme$1(options = {}, ...args) {
     shape: shapeInput = {},
     ...other
   } = options;
-  const breakpoints = createBreakpoints$1(breakpointsInput);
+  const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
     breakpoints,
@@ -5108,49 +5101,6 @@ 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,
@@ -6207,105 +6157,47 @@ const grey = {
 
 const purple = {
   50: '#f3e5f5',
-  100: '#e1bee7',
   200: '#ce93d8',
   300: '#ba68c8',
   400: '#ab47bc',
   500: '#9c27b0',
-  600: '#8e24aa',
-  700: '#7b1fa2',
-  800: '#6a1b9a',
-  900: '#4a148c',
-  A100: '#ea80fc',
-  A200: '#e040fb',
-  A400: '#d500f9',
-  A700: '#aa00ff'
-};
+  700: '#7b1fa2'};
 
 const red = {
-  50: '#ffebee',
-  100: '#ffcdd2',
-  200: '#ef9a9a',
   300: '#e57373',
   400: '#ef5350',
   500: '#f44336',
-  600: '#e53935',
   700: '#d32f2f',
-  800: '#c62828',
-  900: '#b71c1c',
-  A100: '#ff8a80',
-  A200: '#ff5252',
-  A400: '#ff1744',
-  A700: '#d50000'
-};
+  800: '#c62828'};
 
 const orange = {
-  50: '#fff3e0',
-  100: '#ffe0b2',
-  200: '#ffcc80',
   300: '#ffb74d',
   400: '#ffa726',
   500: '#ff9800',
-  600: '#fb8c00',
   700: '#f57c00',
-  800: '#ef6c00',
-  900: '#e65100',
-  A100: '#ffd180',
-  A200: '#ffab40',
-  A400: '#ff9100',
-  A700: '#ff6d00'
-};
+  900: '#e65100'};
 
 const blue = {
   50: '#e3f2fd',
-  100: '#bbdefb',
   200: '#90caf9',
-  300: '#64b5f6',
   400: '#42a5f5',
-  500: '#2196f3',
-  600: '#1e88e5',
   700: '#1976d2',
-  800: '#1565c0',
-  900: '#0d47a1',
-  A100: '#82b1ff',
-  A200: '#448aff',
-  A400: '#2979ff',
-  A700: '#2962ff'
-};
+  800: '#1565c0'};
 
 const lightBlue = {
-  50: '#e1f5fe',
-  100: '#b3e5fc',
-  200: '#81d4fa',
   300: '#4fc3f7',
   400: '#29b6f6',
   500: '#03a9f4',
-  600: '#039be5',
   700: '#0288d1',
-  800: '#0277bd',
-  900: '#01579b',
-  A100: '#80d8ff',
-  A200: '#40c4ff',
-  A400: '#00b0ff',
-  A700: '#0091ea'
-};
+  900: '#01579b'};
 
 const green = {
-  50: '#e8f5e9',
-  100: '#c8e6c9',
-  200: '#a5d6a7',
   300: '#81c784',
   400: '#66bb6a',
   500: '#4caf50',
-  600: '#43a047',
   700: '#388e3c',
   800: '#2e7d32',
-  900: '#1b5e20',
-  A100: '#b9f6ca',
-  A200: '#69f0ae',
-  A400: '#00e676',
-  A700: '#00c853'
-};
+  900: '#1b5e20'};
 
 function getLight() {
   return {
@@ -7096,7 +6988,7 @@ function setColor(obj, key, defaultValue) {
   }
 }
 function toRgb(color) {
-  if (typeof color !== 'string' || !color.startsWith('hsl')) {
+  if (!color || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -7388,7 +7280,7 @@ function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', private_safeColorChannel(toRgb(colors.main)));
@@ -9209,94 +9101,6 @@ var paletteADC = _objectSpread2({
   }
 }, BasicPalette);
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-const _excluded$1 = ["values", "unit", "step"];
-const sortBreakpointsValues = values => {
-  const breakpointsAsArray = Object.keys(values).map(key => ({
-    key,
-    val: values[key]
-  })) || [];
-  // Sort in ascending order
-  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-  return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
-      [obj.key]: obj.val
-    });
-  }, {});
-};
-
-// Keep in mind that @media is inclusive by the CSS specification.
-function createBreakpoints(breakpoints) {
-  const {
-      // The breakpoint **start** at this value.
-      // For instance with the first breakpoint xs: [xs, sm).
-      values = {
-        xs: 0,
-        // phone
-        sm: 600,
-        // tablet
-        md: 900,
-        // small laptop
-        lg: 1200,
-        // desktop
-        xl: 1536 // large screen
-      },
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$1);
-  const sortedValues = sortBreakpointsValues(values);
-  const keys = Object.keys(sortedValues);
-  function up(key) {
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (min-width:${value}${unit})`;
-  }
-  function down(key) {
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (max-width:${value - step / 100}${unit})`;
-  }
-  function between(start, end) {
-    const endIndex = keys.indexOf(end);
-    return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
-  }
-  function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  }
-  function not(key) {
-    // handle first and last key separately, for better readability
-    const keyIndex = keys.indexOf(key);
-    if (keyIndex === 0) {
-      return up(keys[1]);
-    }
-    if (keyIndex === keys.length - 1) {
-      return down(keys[keyIndex]);
-    }
-    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
-  }
-  return _extends({
-    keys,
-    values: sortedValues,
-    up,
-    down,
-    between,
-    only,
-    not,
-    unit
-  }, other);
-}
-
 var breakpoints = createBreakpoints({
   values: {
     xs: 0,
@@ -9432,7 +9236,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$m = ownerState => {
+const useUtilityClasses$l = ownerState => {
   const {
     align,
     gutterBottom,
@@ -9573,7 +9377,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, {
     as: Component,
     ref: ref,
@@ -9769,6 +9573,16 @@ function createControlledPromise() {
   return p;
 }
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
 function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
     return t.__proto__ = e, t;
@@ -10401,7 +10215,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
   onExited: PropTypes.func
 } : {}; // Name the function so it is clearer in the documentation
 
-function noop$1() {}
+function noop() {}
 
 Transition.defaultProps = {
   in: false,
@@ -10410,12 +10224,12 @@ Transition.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  onEnter: noop$1,
-  onEntering: noop$1,
-  onEntered: noop$1,
-  onExit: noop$1,
-  onExiting: noop$1,
-  onExited: noop$1
+  onEnter: noop,
+  onEntering: noop,
+  onEntered: noop,
+  onExit: noop,
+  onExiting: noop,
+  onExited: noop
 };
 Transition.UNMOUNTED = UNMOUNTED;
 Transition.EXITED = EXITED;
@@ -11145,7 +10959,7 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const useUtilityClasses$l = ownerState => {
+const useUtilityClasses$k = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -11266,22 +11080,34 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       ripple.pulsate();
     }
   }, [disableRipple, focusRipple, focusVisible, ripple]);
-  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 => {
+  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 => {
     if (focusVisible) {
       event.preventDefault();
     }
     if (onMouseLeave) {
       onMouseLeave(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 => {
+  });
+  const handleTouchStart = useRippleHandler('start', onTouchStart);
+  const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
+  const handleTouchMove = useRippleHandler('stop', onTouchMove);
+  const handleBlur = useRippleHandler('stop', event => {
     if (!isFocusVisible(event.target)) {
       setFocusVisible(false);
     }
@@ -11375,7 +11201,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -11405,17 +11231,6 @@ 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. │
@@ -11580,7 +11395,7 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const useUtilityClasses$k = ownerState => {
+const useUtilityClasses$j = ownerState => {
   const {
     classes,
     checked,
@@ -11722,7 +11537,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   return /*#__PURE__*/jsxs(SwitchBaseRoot, {
     component: "span",
     className: clsx(classes.root, className),
@@ -11870,7 +11685,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const useUtilityClasses$j = ownerState => {
+const useUtilityClasses$i = ownerState => {
   const {
     color,
     fontSize,
@@ -12000,7 +11815,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -12090,7 +11905,9 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
@@ -12212,7 +12029,7 @@ function getRadioUtilityClass(slot) {
 }
 const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 
-const useUtilityClasses$i = ownerState => {
+const useUtilityClasses$h = ownerState => {
   const {
     classes,
     color,
@@ -12335,7 +12152,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     color,
     size
   };
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
   const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -12472,7 +12289,7 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const useUtilityClasses$h = ownerState => {
+const useUtilityClasses$g = ownerState => {
   const {
     classes,
     indeterminate,
@@ -12579,7 +12396,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate,
     size
   };
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   return /*#__PURE__*/jsx(CheckboxRoot, {
     type: "checkbox",
     inputProps: {
@@ -12865,7 +12682,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$g = ownerState => {
+const useUtilityClasses$f = ownerState => {
   const {
     square,
     elevation,
@@ -12937,7 +12754,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$f(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'));
@@ -13047,8 +12864,8 @@ name, parameters) {
     elementType: initialElementType,
     ownerState,
     externalForwardedProps,
+    getSlotOwnerState,
     internalForwardedProps,
-    shouldForwardComponentProp = false,
     ...useSlotPropsParams
   } = parameters;
   const {
@@ -13079,302 +12896,31 @@ name, parameters) {
     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 && !shouldForwardComponentProp && {
+    ...(LeafComponent && {
       as: LeafComponent
     }),
-    ...(LeafComponent && shouldForwardComponentProp && {
-      component: LeafComponent
-    }),
     ref
-  }, ownerState);
+  }, finalOwnerState);
+  Object.keys(slotOwnerState).forEach(propName => {
+    delete props[propName];
+  });
   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
-   */
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * @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 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.
-   * Use indeterminate when there is no progress value.
-   * @default 'indeterminate'
-   */
-  variant: PropTypes.oneOf(['determinate', 'indeterminate'])
-} : void 0;
-
 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', 'loading', 'loadingIndicator', 'loadingWrapper']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 
 const useUtilityClasses$e = ownerState => {
   const {
@@ -13382,13 +12928,10 @@ const useUtilityClasses$e = ownerState => {
     disabled,
     color,
     edge,
-    size,
-    loading
+    size
   } = ownerState;
   const slots = {
-    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
-    loadingIndicator: ['loadingIndicator'],
-    loadingWrapper: ['loadingWrapper']
+    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
@@ -13399,7 +12942,7 @@ const IconButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    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)}`]];
+    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
 })(memoTheme(({
   theme
@@ -13502,34 +13045,8 @@ 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
@@ -13548,51 +13065,26 @@ 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__*/jsxs(IconButtonRoot, {
-    id: id,
+  return /*#__PURE__*/jsx(IconButtonRoot, {
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled || loading,
+    disabled: disabled,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    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]
+    children: children
   });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
@@ -13651,23 +13143,6 @@ 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.
@@ -13887,7 +13362,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/Web/CSS/position).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */
@@ -13943,9 +13418,13 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
       };
       return /*#__PURE__*/React.cloneElement(children, newProps);
     }
-    return children;
+    return /*#__PURE__*/jsx(React.Fragment, {
+      children: children
+    });
   }
-  return mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode;
+  return /*#__PURE__*/jsx(React.Fragment, {
+    children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
+  });
 });
 process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -14968,7 +14447,6 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
    */
   value: PropTypes.any
 } : void 0;
-var InputBase$1 = InputBase;
 
 function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
@@ -15082,10 +14560,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout,
     ...other,
-    children: (state, {
-      ownerState,
-      ...restChildProps
-    }) => {
+    children: (state, childProps) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -15095,7 +14570,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...restChildProps
+        ...childProps
       });
     }
   });
@@ -15181,6 +14656,13 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
+const removeOwnerState = props => {
+  const {
+    ownerState,
+    ...rest
+  } = props;
+  return rest;
+};
 const useUtilityClasses$b = ownerState => {
   const {
     classes,
@@ -15269,11 +14751,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionProps,
+    ...transitionPropsRemoved,
     children: /*#__PURE__*/jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
@@ -15406,7 +14889,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', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
+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']);
 
 /**
  * @ignore - internal component.
@@ -15431,16 +14914,13 @@ const useUtilityClasses$a = ownerState => {
     fullWidth,
     size,
     variant,
-    loading,
-    loadingPosition,
     classes
   } = ownerState;
   const slots = {
-    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)}`],
+    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
+    label: ['label'],
     startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
-    loadingIndicator: ['loadingIndicator'],
-    loadingWrapper: ['loadingWrapper']
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return {
@@ -15485,7 +14965,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, ownerState.loading && styles.loading];
+    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];
   }
 })(memoTheme(({
   theme
@@ -15672,18 +15152,6 @@ 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'
-        }
-      }
     }]
   };
 }));
@@ -15694,11 +15162,9 @@ const ButtonStartIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})(({
-  theme
-}) => ({
+})({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4,
@@ -15709,28 +15175,8 @@ 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',
@@ -15738,11 +15184,9 @@ const ButtonEndIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})(({
-  theme
-}) => ({
+})({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8,
@@ -15753,128 +15197,7 @@ 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`
@@ -15896,22 +15219,12 @@ 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,
@@ -15920,58 +15233,34 @@ 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 || loading && loadingPosition === 'start') && /*#__PURE__*/jsx(ButtonStartIcon, {
+  const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
-    children: startIconProp || /*#__PURE__*/jsx(ButtonLoadingIconPlaceholder, {
-      className: classes.loadingIconPlaceholder,
-      ownerState: ownerState
-    })
+    children: startIconProp
   });
-  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsx(ButtonEndIcon, {
+  const endIcon = endIconProp && /*#__PURE__*/jsx(ButtonEndIcon, {
     className: classes.endIcon,
     ownerState: ownerState,
-    children: endIconProp || /*#__PURE__*/jsx(ButtonLoadingIconPlaceholder, {
-      className: classes.loadingIconPlaceholder,
-      ownerState: ownerState
-    })
+    children: endIconProp
   });
   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 || loading,
+    disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
-    id: id,
     ...other,
     classes: classes,
-    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
+    children: [startIcon, children, endIcon]
   });
 });
 process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
@@ -16044,28 +15333,6 @@ 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.
@@ -16630,7 +15897,6 @@ 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.
@@ -16802,8 +16068,8 @@ function useModal(parameters) {
       }
     };
     return {
-      onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop),
-      onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop)
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
+      onExited: createChainedFunction(handleExited, children?.props.onExited)
     };
   };
   return {
@@ -17718,10 +16984,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, {
-      ownerState,
-      ...restChildProps
-    }) => {
+    children: (state, childProps) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -17729,7 +16992,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...restChildProps
+        ...childProps
       });
     }
   });
@@ -17840,7 +17103,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
 function getDrawerUtilityClass(slot) {
   return generateUtilityClass('MuiDrawer', slot);
 }
-generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
 
 const overridesResolver$2 = (props, styles) => {
   const {
@@ -17855,7 +17118,7 @@ const useUtilityClasses$7 = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `anchor${capitalize(anchor)}`],
+    root: ['root'],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
     paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
@@ -18339,10 +17602,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, {
-      ownerState,
-      ...restChildProps
-    }) => {
+    children: (state, childProps) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -18353,7 +17613,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...restChildProps
+        ...childProps
       });
     }
   });
@@ -18556,7 +17816,6 @@ 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]
       })
@@ -18615,7 +17874,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', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 
 const TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = keyframes`
@@ -18688,8 +17947,8 @@ const useUtilityClasses$5 = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, variant],
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    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']
+    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']
   };
   return composeClasses(slots, getLinearProgressUtilityClass, classes);
 };
@@ -18807,7 +18066,7 @@ const LinearProgressBar1 = styled('span', {
     const {
       ownerState
     } = props;
-    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];
+    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];
   }
 })(memoTheme(({
   theme
@@ -18871,7 +18130,7 @@ const LinearProgressBar2 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(memoTheme(({
   theme
@@ -20076,7 +19335,6 @@ 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"
       }))
     })
@@ -20310,7 +19568,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
-  return /*#__PURE__*/jsx(InputBase$1, {
+  return /*#__PURE__*/jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -20500,7 +19758,9 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-OutlinedInput.muiName = 'Input';
+if (OutlinedInput) {
+  OutlinedInput.muiName = 'Input';
+}
 
 const Stack = createStack({
   createStyledComponent: styled('div', {
@@ -24635,7 +23895,7 @@ function sanitizeDegreesDouble(degrees) {
  */
 function rotationDirection(from, to) {
     const increasingDifference = sanitizeDegreesDouble(to - from);
-    return increasingDifference <= 180.0 ? 1.0 : -1.0;
+    return increasingDifference <= 180.0 ? 1.0 : -1;
 }
 /**
  * Distance of two points on a circle, represented using degrees.
@@ -24977,7 +24237,7 @@ class ViewingConditions {
         const xyz = whitePoint;
         const rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
         const gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
-        const bW = xyz[0] * -0.002079 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
+        const bW = xyz[0] * -2079e-6 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
         const f = 0.8 + surround / 10.0;
         const c = f >= 0.9 ? lerp(0.59, 0.69, (f - 0.9) * 10.0) :
             lerp(0.525, 0.59, (f - 0.8) * 10.0);
@@ -25140,7 +24400,7 @@ class Cam16 {
         const z = 0.01932141 * redL + 0.11916382 * greenL + 0.95034478 * blueL;
         const rC = 0.401288 * x + 0.650173 * y - 0.051461 * z;
         const gC = -0.250268 * x + 1.204414 * y + 0.045854 * z;
-        const bC = -0.002079 * x + 0.048952 * y + 0.953127 * z;
+        const bC = -2079e-6 * x + 0.048952 * y + 0.953127 * z;
         const rD = viewingConditions.rgbD[0] * rC;
         const gD = viewingConditions.rgbD[1] * gC;
         const bD = viewingConditions.rgbD[2] * bC;
@@ -25150,7 +24410,7 @@ class Cam16 {
         const rA = (signum(rD) * 400.0 * rAF) / (rAF + 27.13);
         const gA = (signum(gD) * 400.0 * gAF) / (gAF + 27.13);
         const bA = (signum(bD) * 400.0 * bAF) / (bAF + 27.13);
-        const a = (11.0 * rA + -12.0 * gA + bA) / 11.0;
+        const a = (11.0 * rA + -12 * gA + bA) / 11.0;
         const b = (rA + gA - 2.0 * bA) / 9.0;
         const u = (20.0 * rA + 20.0 * gA + 21.0 * bA) / 20.0;
         const p2 = (40.0 * rA + 20.0 * gA + bA) / 20.0;
@@ -25289,7 +24549,7 @@ class Cam16 {
         const bF = bC / viewingConditions.rgbD[2];
         const x = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF;
         const y = 0.38752654 * rF + 0.62144744 * gF - 0.00897398 * bF;
-        const z = -0.01584150 * rF - 0.03412294 * gF + 1.04996444 * bF;
+        const z = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF;
         const argb = argbFromXyz(x, y, z);
         return argb;
     }
@@ -25299,7 +24559,7 @@ class Cam16 {
         // Transform XYZ to 'cone'/'rgb' responses
         const rC = 0.401288 * x + 0.650173 * y - 0.051461 * z;
         const gC = -0.250268 * x + 1.204414 * y + 0.045854 * z;
-        const bC = -0.002079 * x + 0.048952 * y + 0.953127 * z;
+        const bC = -2079e-6 * x + 0.048952 * y + 0.953127 * z;
         // Discount illuminant
         const rD = viewingConditions.rgbD[0] * rC;
         const gD = viewingConditions.rgbD[1] * gC;
@@ -25312,7 +24572,7 @@ class Cam16 {
         const gA = signum(gD) * 400.0 * gAF / (gAF + 27.13);
         const bA = signum(bD) * 400.0 * bAF / (bAF + 27.13);
         // redness-greenness
-        const a = (11.0 * rA + -12.0 * gA + bA) / 11.0;
+        const a = (11.0 * rA + -12 * gA + bA) / 11.0;
         // yellowness-blueness
         const b = (rA + gA - 2.0 * bA) / 9.0;
         // auxiliary components
@@ -25385,7 +24645,7 @@ class Cam16 {
         const bF = bC / viewingConditions.rgbD[2];
         const x = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF;
         const y = 0.38752654 * rF + 0.62144744 * gF - 0.00897398 * bF;
-        const z = -0.01584150 * rF - 0.03412294 * gF + 1.04996444 * bF;
+        const z = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF;
         return [x, y, z];
     }
 }
@@ -25462,7 +24722,7 @@ class HctSolver {
         const gA = HctSolver.chromaticAdaptation(scaledDiscount[1]);
         const bA = HctSolver.chromaticAdaptation(scaledDiscount[2]);
         // redness-greenness
-        const a = (11.0 * rA + -12.0 * gA + bA) / 11.0;
+        const a = (11.0 * rA + -12 * gA + bA) / 11.0;
         // yellowness-blueness
         const b = (rA + gA - 2.0 * bA) / 9.0;
         return Math.atan2(b, a);
@@ -25532,7 +24792,7 @@ class HctSolver {
                 return [r, g, b];
             }
             else {
-                return [-1.0, -1.0, -1.0];
+                return [-1, -1, -1];
             }
         }
         else if (n < 8) {
@@ -25543,7 +24803,7 @@ class HctSolver {
                 return [r, g, b];
             }
             else {
-                return [-1.0, -1.0, -1.0];
+                return [-1, -1, -1];
             }
         }
         else {
@@ -25554,7 +24814,7 @@ class HctSolver {
                 return [r, g, b];
             }
             else {
-                return [-1.0, -1.0, -1.0];
+                return [-1, -1, -1];
             }
         }
     }
@@ -25568,7 +24828,7 @@ class HctSolver {
      * desired color.
      */
     static bisectToSegment(y, targetHue) {
-        let left = [-1.0, -1.0, -1.0];
+        let left = [-1, -1, -1];
         let right = left;
         let leftHue = 0.0;
         let rightHue = 0.0;
@@ -26182,7 +25442,7 @@ class Contrast {
      */
     static lighter(tone, ratio) {
         if (tone < 0.0 || tone > 100.0) {
-            return -1.0;
+            return -1;
         }
         const darkY = yFromLstar(tone);
         const lightY = ratio * (darkY + 5.0) - 5.0;
@@ -26211,7 +25471,7 @@ class Contrast {
      */
     static darker(tone, ratio) {
         if (tone < 0.0 || tone > 100.0) {
-            return -1.0;
+            return -1;
         }
         const lightY = yFromLstar(tone);
         const darkY = ((lightY + 5.0) / ratio) - 5.0;
@@ -26754,7 +26014,7 @@ class ContrastCurve {
      * @return The contrast ratio, a number between 1.0 and 21.0.
      */
     getContrast(contrastLevel) {
-        if (contrastLevel <= -1.0) {
+        if (contrastLevel <= -1) {
             return this.low;
         }
         else if (contrastLevel < 0.0) {
@@ -26858,7 +26118,7 @@ function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
     if (closestToChroma.chroma < chroma) {
         let chromaPeak = closestToChroma.chroma;
         while (closestToChroma.chroma < chroma) {
-            answer += byDecreasingTone ? -1.0 : 1.0;
+            answer += byDecreasingTone ? -1 : 1.0;
             const potentialSolution = Hct.from(hue, chroma, answer);
             if (chromaPeak > potentialSolution.chroma) {
                 break;
@@ -27701,8 +26961,8 @@ class QuantizerWsmeans {
         if (startingClusters.length === 0 && additionalClustersNeeded > 0) {
             for (let i = 0; i < additionalClustersNeeded; i++) {
                 const l = Math.random() * 100.0;
-                const a = Math.random() * (100.0 - (-100.0) + 1) + -100;
-                const b = Math.random() * (100.0 - (-100.0) + 1) + -100;
+                const a = Math.random() * (100.0 - (-100) + 1) + -100;
+                const b = Math.random() * (100.0 - (-100) + 1) + -100;
                 clusters.push(new Array(l, a, b));
             }
         }
@@ -28837,7 +28097,7 @@ function customColor(source, color) {
 }
 
 var DynamicColor = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
     var imageElement, dynamicPalette, extractHctInstance, _dynamicPalette$palet, primary, secondary, _dynamicPalette$schem, dark, light, primaryMain, secondaryMain, primaryLight, primaryDark, secondaryLight, secondaryDark, primaryColor, secondaryColor, backgroundColor;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {