@sinco/react 1.2.5-rc.13 → 1.2.5-rc.14

package/index.esm.js

@@ -127,306 +127,115 @@ function _objectWithoutPropertiesLoose$1(r, e) {
   }
   return t;
 }
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return e;
-  };
-  var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    }), t[e];
-  }
-  try {
-    define({}, "");
-  } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
-    };
-  }
-  function wrap(t, e, r, n) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
-  }
-  function tryCatch(t, e, r) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(e, r)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
-  }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
-    return this;
-  });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
-      });
-    });
-  }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
-      if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
-        }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
-        }, function (t) {
-          return invoke("throw", t, i, a);
-        });
-      }
-      a(c.arg);
-    }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
         }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
         return {
           value: t,
-          done: true
+          done: y
         };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
-      }
-    };
+      };
+    }(r, o, i), true), u;
   }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
-    var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
-  }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
-  }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
-  }
-  function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(true);
-  }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      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 = false, next;
-            return next.value = t, next.done = true, next;
-          };
-        return i.next = i;
-      }
-    }
-    throw new TypeError(typeof e + " is not iterable");
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: true
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    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));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
-    return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
     return this;
-  }), define(g, "toString", function () {
+  }), _regeneratorDefine(u, "toString", function () {
     return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = false, next;
-      }
-      return next.done = true, next;
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
     };
-  }, e.values = values, Context.prototype = {
-    constructor: Context,
-    reset: function (e) {
-      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 = true;
-      var t = this.tryEntries[0].completion;
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
-      }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            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, true);
-          } else {
-            if (!u) throw Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
-        }
-      }
-    },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
-          break;
-        }
-      }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
-    },
-    complete: function (t, e) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
-    },
-    finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
-      }
-    },
-    catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
-          if ("throw" === n.type) {
-            var o = n.arg;
-            resetTryEntry(r);
-          }
-          return o;
-        }
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    if (r) i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n;else {
+      function o(r, n) {
+        _regeneratorDefine(e, r, function (e) {
+          return this._invoke(r, n, e);
+        });
       }
-      throw Error("illegal catch attempt");
-    },
-    delegateYield: function (e, r, n) {
-      return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
+      o("next", 0), o("throw", 1), o("return", 2);
     }
-  }, e;
+  }, _regeneratorDefine(e, r, n, t);
 }
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
@@ -466,7 +275,7 @@ function _unsupportedIterableToArray(r, a) {
  *   ...
  * @param {number} code
  */
-function formatMuiErrorMessage$1(code, ...args) {
+function formatMuiErrorMessage(code, ...args) {
   const url = new URL(`https://mui.com/production-error/?code=${code}`);
   args.forEach(arg => url.searchParams.append('args[]', arg));
   return `Minified MUI error #${code}; visit ${url} for the full message.`;
@@ -474,22 +283,6 @@ function formatMuiErrorMessage$1(code, ...args) {
 
 var THEME_ID = '$$material';
 
-/**
- * WARNING: Don't import this directly. It's imported by the code generated by
- * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
- * constructors to ensure the plugin works as expected. Supported patterns include:
- *   throw new Error('My message');
- *   throw new Error(`My message: ${foo}`);
- *   throw new Error(`My message: ${foo}` + 'another string');
- *   ...
- * @param {number} code
- */
-function formatMuiErrorMessage(code, ...args) {
-  const url = new URL(`https://mui.com/production-error/?code=${code}`);
-  args.forEach(arg => url.searchParams.append('args[]', arg));
-  return `Minified MUI error #${code}; visit ${url} for the full message.`;
-}
-
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -1102,7 +895,7 @@ function getDefaultExportFromCjs (x) {
 
 var propTypes = {exports: {}};
 
-var reactIs$2 = {exports: {}};
+var reactIs$1 = {exports: {}};
 
 var reactIs_production_min = {};
 
@@ -1129,7 +922,7 @@ var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):601
 	return reactIs_production_min;
 }
 
-var reactIs_development$2 = {};
+var reactIs_development$1 = {};
 
 /** @license React v16.13.1
  * react-is.development.js
@@ -1140,11 +933,11 @@ var reactIs_development$2 = {};
  * LICENSE file in the root directory of this source tree.
  */
 
-var hasRequiredReactIs_development$2;
+var hasRequiredReactIs_development$1;
 
-function requireReactIs_development$2 () {
-	if (hasRequiredReactIs_development$2) return reactIs_development$2;
-	hasRequiredReactIs_development$2 = 1;
+function requireReactIs_development$1 () {
+	if (hasRequiredReactIs_development$1) return reactIs_development$1;
+	hasRequiredReactIs_development$1 = 1;
 
 
 
@@ -1285,51 +1078,51 @@ function requireReactIs_development$2 () {
 	  return typeOf(object) === REACT_SUSPENSE_TYPE;
 	}
 
-	reactIs_development$2.AsyncMode = AsyncMode;
-	reactIs_development$2.ConcurrentMode = ConcurrentMode;
-	reactIs_development$2.ContextConsumer = ContextConsumer;
-	reactIs_development$2.ContextProvider = ContextProvider;
-	reactIs_development$2.Element = Element;
-	reactIs_development$2.ForwardRef = ForwardRef;
-	reactIs_development$2.Fragment = Fragment;
-	reactIs_development$2.Lazy = Lazy;
-	reactIs_development$2.Memo = Memo;
-	reactIs_development$2.Portal = Portal;
-	reactIs_development$2.Profiler = Profiler;
-	reactIs_development$2.StrictMode = StrictMode;
-	reactIs_development$2.Suspense = Suspense;
-	reactIs_development$2.isAsyncMode = isAsyncMode;
-	reactIs_development$2.isConcurrentMode = isConcurrentMode;
-	reactIs_development$2.isContextConsumer = isContextConsumer;
-	reactIs_development$2.isContextProvider = isContextProvider;
-	reactIs_development$2.isElement = isElement;
-	reactIs_development$2.isForwardRef = isForwardRef;
-	reactIs_development$2.isFragment = isFragment;
-	reactIs_development$2.isLazy = isLazy;
-	reactIs_development$2.isMemo = isMemo;
-	reactIs_development$2.isPortal = isPortal;
-	reactIs_development$2.isProfiler = isProfiler;
-	reactIs_development$2.isStrictMode = isStrictMode;
-	reactIs_development$2.isSuspense = isSuspense;
-	reactIs_development$2.isValidElementType = isValidElementType;
-	reactIs_development$2.typeOf = typeOf;
+	reactIs_development$1.AsyncMode = AsyncMode;
+	reactIs_development$1.ConcurrentMode = ConcurrentMode;
+	reactIs_development$1.ContextConsumer = ContextConsumer;
+	reactIs_development$1.ContextProvider = ContextProvider;
+	reactIs_development$1.Element = Element;
+	reactIs_development$1.ForwardRef = ForwardRef;
+	reactIs_development$1.Fragment = Fragment;
+	reactIs_development$1.Lazy = Lazy;
+	reactIs_development$1.Memo = Memo;
+	reactIs_development$1.Portal = Portal;
+	reactIs_development$1.Profiler = Profiler;
+	reactIs_development$1.StrictMode = StrictMode;
+	reactIs_development$1.Suspense = Suspense;
+	reactIs_development$1.isAsyncMode = isAsyncMode;
+	reactIs_development$1.isConcurrentMode = isConcurrentMode;
+	reactIs_development$1.isContextConsumer = isContextConsumer;
+	reactIs_development$1.isContextProvider = isContextProvider;
+	reactIs_development$1.isElement = isElement;
+	reactIs_development$1.isForwardRef = isForwardRef;
+	reactIs_development$1.isFragment = isFragment;
+	reactIs_development$1.isLazy = isLazy;
+	reactIs_development$1.isMemo = isMemo;
+	reactIs_development$1.isPortal = isPortal;
+	reactIs_development$1.isProfiler = isProfiler;
+	reactIs_development$1.isStrictMode = isStrictMode;
+	reactIs_development$1.isSuspense = isSuspense;
+	reactIs_development$1.isValidElementType = isValidElementType;
+	reactIs_development$1.typeOf = typeOf;
 	  })();
 	}
-	return reactIs_development$2;
+	return reactIs_development$1;
 }
 
 var hasRequiredReactIs;
 
 function requireReactIs () {
-	if (hasRequiredReactIs) return reactIs$2.exports;
+	if (hasRequiredReactIs) return reactIs$1.exports;
 	hasRequiredReactIs = 1;
 
 	if (process.env.NODE_ENV === 'production') {
-	  reactIs$2.exports = requireReactIs_production_min();
+	  reactIs$1.exports = requireReactIs_production_min();
 	} else {
-	  reactIs$2.exports = requireReactIs_development$2();
+	  reactIs$1.exports = requireReactIs_development$1();
 	}
-	return reactIs$2.exports;
+	return reactIs$1.exports;
 }
 
 /*
@@ -2341,9 +2134,9 @@ function internal_serializeStyles(styles) {
   return serializeStyles(wrapper);
 }
 
-var reactIs$1 = {exports: {}};
+var reactIs = {exports: {}};
 
-var reactIs_production$1 = {};
+var reactIs_production = {};
 
 /**
  * @license React
@@ -2355,11 +2148,11 @@ var reactIs_production$1 = {};
  * LICENSE file in the root directory of this source tree.
  */
 
-var hasRequiredReactIs_production$1;
+var hasRequiredReactIs_production;
 
-function requireReactIs_production$1 () {
-	if (hasRequiredReactIs_production$1) return reactIs_production$1;
-	hasRequiredReactIs_production$1 = 1;
+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"),
@@ -2405,59 +2198,59 @@ function requireReactIs_production$1 () {
 	    }
 	  }
 	}
-	reactIs_production$1.ContextConsumer = REACT_CONSUMER_TYPE;
-	reactIs_production$1.ContextProvider = REACT_CONTEXT_TYPE;
-	reactIs_production$1.Element = REACT_ELEMENT_TYPE;
-	reactIs_production$1.ForwardRef = REACT_FORWARD_REF_TYPE;
-	reactIs_production$1.Fragment = REACT_FRAGMENT_TYPE;
-	reactIs_production$1.Lazy = REACT_LAZY_TYPE;
-	reactIs_production$1.Memo = REACT_MEMO_TYPE;
-	reactIs_production$1.Portal = REACT_PORTAL_TYPE;
-	reactIs_production$1.Profiler = REACT_PROFILER_TYPE;
-	reactIs_production$1.StrictMode = REACT_STRICT_MODE_TYPE;
-	reactIs_production$1.Suspense = REACT_SUSPENSE_TYPE;
-	reactIs_production$1.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	reactIs_production$1.isContextConsumer = function (object) {
+	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$1.isContextProvider = function (object) {
+	reactIs_production.isContextProvider = function (object) {
 	  return typeOf(object) === REACT_CONTEXT_TYPE;
 	};
-	reactIs_production$1.isElement = function (object) {
+	reactIs_production.isElement = function (object) {
 	  return (
 	    "object" === typeof object &&
 	    null !== object &&
 	    object.$$typeof === REACT_ELEMENT_TYPE
 	  );
 	};
-	reactIs_production$1.isForwardRef = function (object) {
+	reactIs_production.isForwardRef = function (object) {
 	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
 	};
-	reactIs_production$1.isFragment = function (object) {
+	reactIs_production.isFragment = function (object) {
 	  return typeOf(object) === REACT_FRAGMENT_TYPE;
 	};
-	reactIs_production$1.isLazy = function (object) {
+	reactIs_production.isLazy = function (object) {
 	  return typeOf(object) === REACT_LAZY_TYPE;
 	};
-	reactIs_production$1.isMemo = function (object) {
+	reactIs_production.isMemo = function (object) {
 	  return typeOf(object) === REACT_MEMO_TYPE;
 	};
-	reactIs_production$1.isPortal = function (object) {
+	reactIs_production.isPortal = function (object) {
 	  return typeOf(object) === REACT_PORTAL_TYPE;
 	};
-	reactIs_production$1.isProfiler = function (object) {
+	reactIs_production.isProfiler = function (object) {
 	  return typeOf(object) === REACT_PROFILER_TYPE;
 	};
-	reactIs_production$1.isStrictMode = function (object) {
+	reactIs_production.isStrictMode = function (object) {
 	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
 	};
-	reactIs_production$1.isSuspense = function (object) {
+	reactIs_production.isSuspense = function (object) {
 	  return typeOf(object) === REACT_SUSPENSE_TYPE;
 	};
-	reactIs_production$1.isSuspenseList = function (object) {
+	reactIs_production.isSuspenseList = function (object) {
 	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
 	};
-	reactIs_production$1.isValidElementType = function (type) {
+	reactIs_production.isValidElementType = function (type) {
 	  return "string" === typeof type ||
 	    "function" === typeof type ||
 	    type === REACT_FRAGMENT_TYPE ||
@@ -2477,11 +2270,11 @@ function requireReactIs_production$1 () {
 	    ? true
 	    : false;
 	};
-	reactIs_production$1.typeOf = typeOf;
-	return reactIs_production$1;
+	reactIs_production.typeOf = typeOf;
+	return reactIs_production;
 }
 
-var reactIs_development$1 = {};
+var reactIs_development = {};
 
 /**
  * @license React
@@ -2493,11 +2286,11 @@ var reactIs_development$1 = {};
  * LICENSE file in the root directory of this source tree.
  */
 
-var hasRequiredReactIs_development$1;
+var hasRequiredReactIs_development;
 
-function requireReactIs_development$1 () {
-	if (hasRequiredReactIs_development$1) return reactIs_development$1;
-	hasRequiredReactIs_development$1 = 1;
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
 	"production" !== process.env.NODE_ENV &&
 	  (function () {
 	    function typeOf(object) {
@@ -2545,59 +2338,59 @@ function requireReactIs_development$1 () {
 	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
 	      REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
 	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
-	    reactIs_development$1.ContextConsumer = REACT_CONSUMER_TYPE;
-	    reactIs_development$1.ContextProvider = REACT_CONTEXT_TYPE;
-	    reactIs_development$1.Element = REACT_ELEMENT_TYPE;
-	    reactIs_development$1.ForwardRef = REACT_FORWARD_REF_TYPE;
-	    reactIs_development$1.Fragment = REACT_FRAGMENT_TYPE;
-	    reactIs_development$1.Lazy = REACT_LAZY_TYPE;
-	    reactIs_development$1.Memo = REACT_MEMO_TYPE;
-	    reactIs_development$1.Portal = REACT_PORTAL_TYPE;
-	    reactIs_development$1.Profiler = REACT_PROFILER_TYPE;
-	    reactIs_development$1.StrictMode = REACT_STRICT_MODE_TYPE;
-	    reactIs_development$1.Suspense = REACT_SUSPENSE_TYPE;
-	    reactIs_development$1.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	    reactIs_development$1.isContextConsumer = function (object) {
+	    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$1.isContextProvider = function (object) {
+	    reactIs_development.isContextProvider = function (object) {
 	      return typeOf(object) === REACT_CONTEXT_TYPE;
 	    };
-	    reactIs_development$1.isElement = function (object) {
+	    reactIs_development.isElement = function (object) {
 	      return (
 	        "object" === typeof object &&
 	        null !== object &&
 	        object.$$typeof === REACT_ELEMENT_TYPE
 	      );
 	    };
-	    reactIs_development$1.isForwardRef = function (object) {
+	    reactIs_development.isForwardRef = function (object) {
 	      return typeOf(object) === REACT_FORWARD_REF_TYPE;
 	    };
-	    reactIs_development$1.isFragment = function (object) {
+	    reactIs_development.isFragment = function (object) {
 	      return typeOf(object) === REACT_FRAGMENT_TYPE;
 	    };
-	    reactIs_development$1.isLazy = function (object) {
+	    reactIs_development.isLazy = function (object) {
 	      return typeOf(object) === REACT_LAZY_TYPE;
 	    };
-	    reactIs_development$1.isMemo = function (object) {
+	    reactIs_development.isMemo = function (object) {
 	      return typeOf(object) === REACT_MEMO_TYPE;
 	    };
-	    reactIs_development$1.isPortal = function (object) {
+	    reactIs_development.isPortal = function (object) {
 	      return typeOf(object) === REACT_PORTAL_TYPE;
 	    };
-	    reactIs_development$1.isProfiler = function (object) {
+	    reactIs_development.isProfiler = function (object) {
 	      return typeOf(object) === REACT_PROFILER_TYPE;
 	    };
-	    reactIs_development$1.isStrictMode = function (object) {
+	    reactIs_development.isStrictMode = function (object) {
 	      return typeOf(object) === REACT_STRICT_MODE_TYPE;
 	    };
-	    reactIs_development$1.isSuspense = function (object) {
+	    reactIs_development.isSuspense = function (object) {
 	      return typeOf(object) === REACT_SUSPENSE_TYPE;
 	    };
-	    reactIs_development$1.isSuspenseList = function (object) {
+	    reactIs_development.isSuspenseList = function (object) {
 	      return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
 	    };
-	    reactIs_development$1.isValidElementType = function (type) {
+	    reactIs_development.isValidElementType = function (type) {
 	      return "string" === typeof type ||
 	        "function" === typeof type ||
 	        type === REACT_FRAGMENT_TYPE ||
@@ -2617,34 +2410,34 @@ function requireReactIs_development$1 () {
 	        ? true
 	        : false;
 	    };
-	    reactIs_development$1.typeOf = typeOf;
+	    reactIs_development.typeOf = typeOf;
 	  })();
-	return reactIs_development$1;
+	return reactIs_development;
 }
 
 if (process.env.NODE_ENV === 'production') {
-  reactIs$1.exports = requireReactIs_production$1();
+  reactIs.exports = requireReactIs_production();
 } else {
-  reactIs$1.exports = requireReactIs_development$1();
+  reactIs.exports = requireReactIs_development();
 }
 
-var reactIsExports$1 = reactIs$1.exports;
+var reactIsExports = reactIs.exports;
 
 // https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
-function isPlainObject$1(item) {
+function isPlainObject(item) {
   if (typeof item !== 'object' || item === null) {
     return false;
   }
   const prototype = Object.getPrototypeOf(item);
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
-function deepClone$1(source) {
-  if (/*#__PURE__*/React.isValidElement(source) || reactIsExports$1.isValidElementType(source) || !isPlainObject$1(source)) {
+function deepClone(source) {
+  if (/*#__PURE__*/React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
   Object.keys(source).forEach(key => {
-    output[key] = deepClone$1(source[key]);
+    output[key] = deepClone(source[key]);
   });
   return output;
 }
@@ -2667,23 +2460,23 @@ function deepClone$1(source) {
  * @param options.clone Set to `false` to merge the source object directly into the target object.
  * @returns The merged object.
  */
-function deepmerge$1(target, source, options = {
+function deepmerge(target, source, options = {
   clone: true
 }) {
   const output = options.clone ? {
     ...target
   } : target;
-  if (isPlainObject$1(target) && isPlainObject$1(source)) {
+  if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
-      if (/*#__PURE__*/React.isValidElement(source[key]) || reactIsExports$1.isValidElementType(source[key])) {
+      if (/*#__PURE__*/React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
         output[key] = source[key];
-      } else if (isPlainObject$1(source[key]) &&
+      } else if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
-      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject$1(target[key])) {
+      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
-        output[key] = deepmerge$1(target[key], source[key], options);
+        output[key] = deepmerge(target[key], source[key], options);
       } else if (options.clone) {
-        output[key] = isPlainObject$1(source[key]) ? deepClone$1(source[key]) : source[key];
+        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
       } else {
         output[key] = source[key];
       }
@@ -2852,7 +2645,7 @@ function merge(acc, item) {
   if (!item) {
     return acc;
   }
-  return deepmerge$1(acc, item, {
+  return deepmerge(acc, item, {
     clone: false // No need to clone deep, it's way faster.
   });
 }
@@ -2939,7 +2732,7 @@ function removeUnusedBreakpoints(breakpointKeys, style) {
 }
 function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
   const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
-  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge$1(prev, next), {});
+  const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => deepmerge(prev, next), {});
   return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
 }
 
@@ -2997,7 +2790,7 @@ function resolveBreakpointValues({
 //
 // A strict capitalization should uppercase the first letter of each word in the sentence.
 // We only handle the first word.
-function capitalize$1(string) {
+function capitalize(string) {
   if (typeof string !== 'string') {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : formatMuiErrorMessage(7));
   }
@@ -3058,7 +2851,7 @@ function style$2(options) {
       let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize$1(propValueFinal)}`, propValueFinal);
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -3830,7 +3623,7 @@ function unstable_createStyleFunctionSx() {
       let value = getStyleValue$1(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize$1(propValueFinal)}`, propValueFinal);
+        value = getStyleValue$1(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -4010,7 +3803,7 @@ function createTheme$1(options = {}, ...args) {
   } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
-  let muiTheme = deepmerge$1({
+  let muiTheme = deepmerge({
     breakpoints,
     direction: 'ltr',
     components: {},
@@ -4027,7 +3820,7 @@ function createTheme$1(options = {}, ...args) {
   }, other);
   muiTheme = cssContainerQueries(muiTheme);
   muiTheme.applyStyles = applyStyles;
-  muiTheme = args.reduce((acc, argument) => deepmerge$1(acc, argument), muiTheme);
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...other?.unstable_sxConfig
@@ -4138,7 +3931,7 @@ function extendSxProp$1(props) {
   } else if (typeof inSx === 'function') {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!isPlainObject$1(result)) {
+      if (!isPlainObject(result)) {
         return systemProps;
       }
       return {
@@ -4158,9 +3951,9 @@ function extendSxProp$1(props) {
   };
 }
 
-const defaultGenerator$1 = componentName => componentName;
-const createClassNameGenerator$1 = () => {
-  let generate = defaultGenerator$1;
+const defaultGenerator = componentName => componentName;
+const createClassNameGenerator = () => {
+  let generate = defaultGenerator;
   return {
     configure(generator) {
       generate = generator;
@@ -4169,11 +3962,11 @@ const createClassNameGenerator$1 = () => {
       return generate(componentName);
     },
     reset() {
-      generate = defaultGenerator$1;
+      generate = defaultGenerator;
     }
   };
 };
-const ClassNameGenerator$1 = createClassNameGenerator$1();
+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}
 
@@ -4205,7 +3998,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const globalStateClasses$1 = {
+const globalStateClasses = {
   active: 'active',
   checked: 'checked',
   completed: 'completed',
@@ -4219,9 +4012,17 @@ const globalStateClasses$1 = {
   required: 'required',
   selected: 'selected'
 };
-function generateUtilityClass$1(componentName, slot, globalStatePrefix = 'Mui') {
-  const globalStateClass = globalStateClasses$1[slot];
-  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+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;
 }
 
 function getFunctionComponentName(Component, fallback = '') {
@@ -4251,9 +4052,9 @@ function getDisplayName(Component) {
   // TypeScript can't have components as objects but they exist in the form of `memo` or `Suspense`
   if (typeof Component === 'object') {
     switch (Component.$$typeof) {
-      case reactIsExports$1.ForwardRef:
+      case reactIsExports.ForwardRef:
         return getWrappedName(Component, Component.render, 'ForwardRef');
-      case reactIsExports$1.Memo:
+      case reactIsExports.Memo:
         return getWrappedName(Component, Component.type, 'memo');
       default:
         return undefined;
@@ -4443,7 +4244,7 @@ function createStyled(input = {}) {
           return processStyle(props, style, props.theme.modularCssLayers ? layerName : undefined);
         };
       }
-      if (isPlainObject$1(style)) {
+      if (isPlainObject(style)) {
         const serialized = preprocessStyles(style);
         return function styleObjectProcessor(props) {
           if (!serialized.variants) {
@@ -4531,7 +4332,7 @@ function createStyled(input = {}) {
 }
 function generateDisplayName(componentName, componentSlot, tag) {
   if (componentName) {
-    return `${componentName}${capitalize$1(componentSlot || '')}`;
+    return `${componentName}${capitalize(componentSlot || '')}`;
   }
   return `Styled(${getDisplayName(tag)})`;
 }
@@ -4580,7 +4381,7 @@ const styled$1 = createStyled();
  *   and `style` objects are merged with props taking precedence.
  * @returns resolved props
  */
-function resolveProps$1(defaultProps, props, mergeClassNameAndStyle = false) {
+function resolveProps(defaultProps, props, mergeClassNameAndStyle = false) {
   const output = {
     ...props
   };
@@ -4606,7 +4407,7 @@ function resolveProps$1(defaultProps, props, mergeClassNameAndStyle = false) {
           for (const slotKey in defaultSlotProps) {
             if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
               const slotPropName = slotKey;
-              output[propName][slotPropName] = resolveProps$1(defaultSlotProps[slotPropName], slotProps[slotPropName], mergeClassNameAndStyle);
+              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName], mergeClassNameAndStyle);
             }
           }
         }
@@ -4634,7 +4435,7 @@ function getThemeProps$1(params) {
   if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
     return props;
   }
-  return resolveProps$1(theme.components[name].defaultProps, props);
+  return resolveProps(theme.components[name].defaultProps, props);
 }
 
 function useThemeProps({
@@ -4654,6 +4455,15 @@ function useThemeProps({
   });
 }
 
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
   return Math.max(min, Math.min(val, max));
 }
@@ -4953,6 +4763,27 @@ function private_safeEmphasize(color, coefficient, warning) {
   }
 }
 
+// This module is based on https://github.com/airbnb/prop-types-exact repository.
+// However, in order to reduce the number of dependencies and to remove some extra safe checks
+// the module was forked.
+
+const specialProperty = 'exact-prop: \u200b';
+function exactProp(propTypes) {
+  if (process.env.NODE_ENV === 'production') {
+    return propTypes;
+  }
+  return {
+    ...propTypes,
+    [specialProperty]: props => {
+      const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
+      if (unsupportedProps.length > 0) {
+        return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
+      }
+      return null;
+    }
+  };
+}
+
 const RtlContext = /*#__PURE__*/React.createContext();
 process.env.NODE_ENV !== "production" ? {
   children: PropTypes.node,
@@ -4990,11 +4821,11 @@ function getThemeProps(params) {
   const config = theme.components[name];
   if (config.defaultProps) {
     // compatible with v5 signature
-    return resolveProps$1(config.defaultProps, props, theme.components.mergeClassNameAndStyle);
+    return resolveProps(config.defaultProps, props, theme.components.mergeClassNameAndStyle);
   }
   if (!config.styleOverrides && !config.variants) {
     // v6 signature, no property 'defaultProps'
-    return resolveProps$1(config, props, theme.components.mergeClassNameAndStyle);
+    return resolveProps(config, props, theme.components.mergeClassNameAndStyle);
   }
   return props;
 }
@@ -5012,15 +4843,58 @@ function useDefaultProps$1({
   });
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
+let globalId = 0;
 
-// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
-// allocate more objects.
-const arg = {
-  theme: undefined
-};
+// 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);
+}
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
+// allocate more objects.
+const arg = {
+  theme: undefined
+};
+
+/**
  * Memoize style function on theme.
  * Intended to be used in styled() calls that only need access to the theme.
  */
@@ -5222,7 +5096,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       css,
       varsWithDefaults
     } = cssVarsParser(scheme, parserConfig);
-    themeVars = deepmerge$1(themeVars, varsWithDefaults);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[key] = {
       css,
       vars
@@ -5235,7 +5109,7 @@ function prepareCssVars(theme, parserConfig = {}) {
       vars,
       varsWithDefaults
     } = cssVarsParser(defaultScheme, parserConfig);
-    themeVars = deepmerge$1(themeVars, varsWithDefaults);
+    themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
@@ -5281,7 +5155,7 @@ function prepareCssVars(theme, parserConfig = {}) {
     Object.entries(colorSchemesMap).forEach(([, {
       vars: schemeVars
     }]) => {
-      vars = deepmerge$1(vars, schemeVars);
+      vars = deepmerge(vars, schemeVars);
     });
     return vars;
   };
@@ -5403,7 +5277,7 @@ function createGetColorSchemeSelector(selector) {
  * @param classes the input classes from props
  * @returns the resolved classes for all slots
  */
-function composeClasses$1(slots, getUtilityClass, classes = undefined) {
+function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
   for (const slotName in slots) {
     const slot = slots[slotName];
@@ -5523,7 +5397,7 @@ const style = ({
         }
       };
     };
-    styles = deepmerge$1(styles, handleBreakpoints({
+    styles = deepmerge(styles, handleBreakpoints({
       theme
     }, spacingValues, styleFromPropValue));
   }
@@ -5541,7 +5415,7 @@ function createStack(options = {}) {
     const slots = {
       root: ['root']
     };
-    return composeClasses$1(slots, slot => generateUtilityClass$1(componentName, slot), {});
+    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
   };
   const StackRoot = createStyledComponent(style);
   const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
@@ -5582,357 +5456,6 @@ function createStack(options = {}) {
   return Stack;
 }
 
-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_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
-	  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:
-	          case REACT_VIEW_TRANSITION_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 ||
-	    ("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))
-	    ? true
-	    : false;
-	};
-	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:
-	              case REACT_VIEW_TRANSITION_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_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"),
-	      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 ||
-	        ("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))
-	        ? true
-	        : false;
-	    };
-	    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) {
-    return false;
-  }
-  const prototype = Object.getPrototypeOf(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) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
-    return source;
-  }
-  const output = {};
-  Object.keys(source).forEach(key => {
-    output[key] = deepClone(source[key]);
-  });
-  return output;
-}
-
-/**
- * Merge objects deeply.
- * It will shallow copy React elements.
- *
- * If `options.clone` is set to `false` the source object will be merged directly into the target object.
- *
- * @example
- * ```ts
- * deepmerge({ a: { b: 1 }, d: 2 }, { a: { c: 2 }, d: 4 });
- * // => { a: { b: 1, c: 2 }, d: 4 }
- * ````
- *
- * @param target The target object.
- * @param source The source object.
- * @param options The merge options.
- * @param options.clone Set to `false` to merge the source object directly into the target object.
- * @returns The merged object.
- */
-function deepmerge(target, source, options = {
-  clone: true
-}) {
-  const output = options.clone ? {
-    ...target
-  } : target;
-  if (isPlainObject(target) && isPlainObject(source)) {
-    Object.keys(source).forEach(key => {
-      if (/*#__PURE__*/React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
-        output[key] = source[key];
-      } else if (isPlainObject(source[key]) &&
-      // Avoid prototype pollution
-      Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
-        // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
-        output[key] = deepmerge(target[key], source[key], options);
-      } else if (options.clone) {
-        output[key] = isPlainObject(source[key]) ? deepClone(source[key]) : source[key];
-      } else {
-        output[key] = source[key];
-      }
-    });
-  }
-  return output;
-}
-
 const common = {
   black: '#000',
   white: '#fff'
@@ -6208,10 +5731,10 @@ function createPalette(palette) {
       color.main = color[mainShade];
     }
     if (!color.hasOwnProperty('main')) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage$1(11, name ? ` (${name})` : '', mainShade));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
     }
     if (typeof color.main !== 'string') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : formatMuiErrorMessage$1(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);
@@ -6285,58 +5808,22 @@ function createPalette(palette) {
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
     tonalOffset,
-    // The light and dark mode object.
-    ...modeHydrated
-  }, other);
-  return paletteOutput;
-}
-
-function prepareTypographyVars(typography) {
-  const vars = {};
-  const entries = Object.entries(typography);
-  entries.forEach(entry => {
-    const [key, value] = entry;
-    if (typeof value === 'object') {
-      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
-    }
-  });
-  return vars;
-}
-
-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();
+    // The light and dark mode object.
+    ...modeHydrated
+  }, other);
+  return paletteOutput;
+}
 
-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 prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
 }
 
 function createMixins(breakpoints, mixins) {
@@ -6632,7 +6119,7 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
     // #host-reference
-    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : formatMuiErrorMessage$1(20));
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = createTheme$1(options);
@@ -6937,7 +6424,7 @@ function createThemeWithVars(options = {}, ...args) {
     defaultScheme = true;
   }
   if (!defaultScheme) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : formatMuiErrorMessage$1(21, defaultColorScheme));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : formatMuiErrorMessage(21, defaultColorScheme));
   }
 
   // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
@@ -8435,14 +7922,14 @@ var components = {
   },
   MuiInputLabel: {
     styleOverrides: {
-      asterisk: function asterisk(_ref10) {
-        var theme = _ref10.theme;
+      asterisk: function asterisk(_ref0) {
+        var theme = _ref0.theme;
         return {
           color: theme.palette.error.main
         };
       },
-      error: function error(_ref11) {
-        var theme = _ref11.theme;
+      error: function error(_ref1) {
+        var theme = _ref1.theme;
         return {
           color: theme.palette.text.secondary
         };
@@ -8964,60 +8451,6 @@ var mixins = {
   })
 };
 
-/* eslint no-restricted-syntax: 0, prefer-template: 0, guard-for-in: 0
-   ---
-   These rules are preventing the performance optimizations below.
- */
-
-/**
- * Compose classes from multiple sources.
- *
- * @example
- * ```tsx
- * const slots = {
- *  root: ['root', 'primary'],
- *  label: ['label'],
- * };
- *
- * const getUtilityClass = (slot) => `MuiButton-${slot}`;
- *
- * const classes = {
- *   root: 'my-root-class',
- * };
- *
- * const output = composeClasses(slots, getUtilityClass, classes);
- * // {
- * //   root: 'MuiButton-root MuiButton-primary my-root-class',
- * //   label: 'MuiButton-label',
- * // }
- * ```
- *
- * @param slots a list of classes for each possible slot
- * @param getUtilityClass a function to resolve the class based on the slot name
- * @param classes the input classes from props
- * @returns the resolved classes for all slots
- */
-function composeClasses(slots, getUtilityClass, classes = undefined) {
-  const output = {};
-  for (const slotName in slots) {
-    const slot = slots[slotName];
-    let buffer = '';
-    let start = true;
-    for (let i = 0; i < slot.length; i += 1) {
-      const value = slot[i];
-      if (value) {
-        buffer += (start === true ? '' : ' ') + getUtilityClass(value);
-        start = false;
-        if (classes && classes[value]) {
-          buffer += ' ' + classes[value];
-        }
-      }
-    }
-    output[slotName] = buffer;
-  }
-  return output;
-}
-
 function GlobalStyles(props) {
   return /*#__PURE__*/jsx(GlobalStyles$1, {
     ...props,
@@ -9076,17 +8509,6 @@ function useDefaultProps(params) {
   return useDefaultProps$1(params);
 }
 
-// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
-//
-// A strict capitalization should uppercase the first letter of each word in the sentence.
-// We only handle the first word.
-function capitalize(string) {
-  if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : formatMuiErrorMessage$1(7));
-  }
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
 /**
  * Type guard to check if the object has a "main" property of type string.
  *
@@ -9129,14 +8551,6 @@ function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
   return ([, value]) => value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck);
 }
 
-function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
-  const result = {};
-  slots.forEach(slot => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
-}
-
 function getTypographyUtilityClass(slot) {
   return generateUtilityClass('MuiTypography', slot);
 }
@@ -9575,15 +8989,6 @@ function useForkRef(...refs) {
   }, refs);
 }
 
-/**
- * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
- * This is useful for effects that are only needed for client-side rendering but not for SSR.
- *
- * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
- * and confirm it doesn't apply to your use-case.
- */
-const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 /**
  * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
  * See RFC in https://github.com/reactjs/rfcs/pull/220
@@ -12869,49 +12274,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);
-}
-
 // Brought from [Base UI](https://github.com/mui/base-ui/blob/master/packages/react/src/merge-props/mergeProps.ts#L119)
 // Use it directly from Base UI once it's a package dependency.
 function isEventHandler(key, value) {
@@ -14441,27 +13803,6 @@ function getReactElementRef(element) {
   return element?.ref || null;
 }
 
-// This module is based on https://github.com/airbnb/prop-types-exact repository.
-// However, in order to reduce the number of dependencies and to remove some extra safe checks
-// the module was forked.
-
-const specialProperty = 'exact-prop: \u200b';
-function exactProp(propTypes) {
-  if (process.env.NODE_ENV === 'production') {
-    return propTypes;
-  }
-  return {
-    ...propTypes,
-    [specialProperty]: props => {
-      const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
-      if (unsupportedProps.length > 0) {
-        return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
-      }
-      return null;
-    }
-  };
-}
-
 function getContainer$1(container) {
   return typeof container === 'function' ? container() : container;
 }
@@ -15188,7 +14529,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
     if (!isControlled) {
       const element = event.target || inputRef.current;
       if (element == null) {
-        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : formatMuiErrorMessage$1(1));
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Expected valid input target. ' + 'Did you use a custom `inputComponent` and forget to forward refs? ' + 'See https://mui.com/r/input-component-ref-interface for more info.' : formatMuiErrorMessage(1));
       }
       checkDirty({
         value: element.value
@@ -16011,85 +15352,31 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
 const boxClasses = generateUtilityClasses('MuiBox', ['root']);
 
 const defaultTheme = createTheme();
-const Box$2 = createBox({
-  themeId: THEME_ID,
-  defaultTheme,
-  defaultClassName: boxClasses.root,
-  generateClassName: ClassNameGenerator.generate
-});
-process.env.NODE_ENV !== "production" ? Box$2.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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * 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])
-} : void 0;
-
-/**
- * Add keys, values of `defaultProps` that does not exist in `props`
- * @param defaultProps
- * @param props
- * @param mergeClassNameAndStyle If `true`, merges `className` and `style` props instead of overriding them.
- *   When `false` (default), props override defaultProps. When `true`, `className` values are concatenated
- *   and `style` objects are merged with props taking precedence.
- * @returns resolved props
- */
-function resolveProps(defaultProps, props, mergeClassNameAndStyle = false) {
-  const output = {
-    ...props
-  };
-  for (const key in defaultProps) {
-    if (Object.prototype.hasOwnProperty.call(defaultProps, key)) {
-      const propName = key;
-      if (propName === 'components' || propName === 'slots') {
-        output[propName] = {
-          ...defaultProps[propName],
-          ...output[propName]
-        };
-      } else if (propName === 'componentsProps' || propName === 'slotProps') {
-        const defaultSlotProps = defaultProps[propName];
-        const slotProps = props[propName];
-        if (!slotProps) {
-          output[propName] = defaultSlotProps || {};
-        } else if (!defaultSlotProps) {
-          output[propName] = slotProps;
-        } else {
-          output[propName] = {
-            ...slotProps
-          };
-          for (const slotKey in defaultSlotProps) {
-            if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
-              const slotPropName = slotKey;
-              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName], mergeClassNameAndStyle);
-            }
-          }
-        }
-      } else if (propName === 'className' && mergeClassNameAndStyle && props.className) {
-        output.className = clsx(defaultProps?.className, props?.className);
-      } else if (propName === 'style' && mergeClassNameAndStyle && props.style) {
-        output.style = {
-          ...defaultProps?.style,
-          ...props?.style
-        };
-      } else if (output[propName] === undefined) {
-        output[propName] = defaultProps[propName];
-      }
-    }
-  }
-  return output;
-}
+const Box$2 = createBox({
+  themeId: THEME_ID,
+  defaultTheme,
+  defaultClassName: boxClasses.root,
+  generateClassName: ClassNameGenerator.generate
+});
+process.env.NODE_ENV !== "production" ? Box$2.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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * 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])
+} : void 0;
 
 function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
@@ -27271,8 +26558,8 @@ let DynamicColor$1 = class DynamicColor {
             const amNearer = this.name === nearer.name;
             const expansionDir = scheme.isDark ? 1 : -1;
             // 1st round: solve to min, each
-            const nContrast = nearer.contrastCurve.getContrast(scheme.contrastLevel);
-            const fContrast = farther.contrastCurve.getContrast(scheme.contrastLevel);
+            const nContrast = nearer.contrastCurve.get(scheme.contrastLevel);
+            const fContrast = farther.contrastCurve.get(scheme.contrastLevel);
             // If a color is good enough, it is not adjusted.
             // Initial and adjusted tones for `nearer`
             const nInitialTone = nearer.tone(scheme);
@@ -27346,7 +26633,7 @@ let DynamicColor$1 = class DynamicColor {
                 return answer; // No adjustment for colors with no background.
             }
             const bgTone = this.background(scheme).getTone(scheme);
-            const desiredRatio = this.contrastCurve.getContrast(scheme.contrastLevel);
+            const desiredRatio = this.contrastCurve.get(scheme.contrastLevel);
             if (Contrast.ratioOfTones(bgTone, answer) >= desiredRatio) ;
             else {
                 // Rough improvement.
@@ -27471,7 +26758,7 @@ let DynamicColor$1 = class DynamicColor {
 
 /**
  * @license
- * Copyright 2022 Google LLC
+ * Copyright 2021 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27486,22 +26773,130 @@ let DynamicColor$1 = class DynamicColor {
  * limitations under the License.
  */
 /**
- * Set of themes supported by Dynamic Color.
- * Instantiate the corresponding subclass, ex. SchemeTonalSpot, to create
- * colors corresponding to the theme.
+ *  A convenience class for retrieving colors that are constant in hue and
+ *  chroma, but vary in tone.
  */
-var Variant;
-(function (Variant) {
-    Variant[Variant["MONOCHROME"] = 0] = "MONOCHROME";
-    Variant[Variant["NEUTRAL"] = 1] = "NEUTRAL";
-    Variant[Variant["TONAL_SPOT"] = 2] = "TONAL_SPOT";
-    Variant[Variant["VIBRANT"] = 3] = "VIBRANT";
-    Variant[Variant["EXPRESSIVE"] = 4] = "EXPRESSIVE";
-    Variant[Variant["FIDELITY"] = 5] = "FIDELITY";
-    Variant[Variant["CONTENT"] = 6] = "CONTENT";
-    Variant[Variant["RAINBOW"] = 7] = "RAINBOW";
-    Variant[Variant["FRUIT_SALAD"] = 8] = "FRUIT_SALAD";
-})(Variant || (Variant = {}));
+class TonalPalette {
+    /**
+     * @param argb ARGB representation of a color
+     * @return Tones matching that color's hue and chroma.
+     */
+    static fromInt(argb) {
+        const hct = Hct.fromInt(argb);
+        return TonalPalette.fromHct(hct);
+    }
+    /**
+     * @param hct Hct
+     * @return Tones matching that color's hue and chroma.
+     */
+    static fromHct(hct) {
+        return new TonalPalette(hct.hue, hct.chroma, hct);
+    }
+    /**
+     * @param hue HCT hue
+     * @param chroma HCT chroma
+     * @return Tones matching hue and chroma.
+     */
+    static fromHueAndChroma(hue, chroma) {
+        const keyColor = new KeyColor(hue, chroma).create();
+        return new TonalPalette(hue, chroma, keyColor);
+    }
+    constructor(hue, chroma, keyColor) {
+        this.hue = hue;
+        this.chroma = chroma;
+        this.keyColor = keyColor;
+        this.cache = new Map();
+    }
+    /**
+     * @param tone HCT tone, measured from 0 to 100.
+     * @return ARGB representation of a color with that tone.
+     */
+    tone(tone) {
+        let argb = this.cache.get(tone);
+        if (argb === undefined) {
+            argb = Hct.from(this.hue, this.chroma, tone).toInt();
+            this.cache.set(tone, argb);
+        }
+        return argb;
+    }
+    /**
+     * @param tone HCT tone.
+     * @return HCT representation of a color with that tone.
+     */
+    getHct(tone) {
+        return Hct.fromInt(this.tone(tone));
+    }
+}
+/**
+ * Key color is a color that represents the hue and chroma of a tonal palette
+ */
+class KeyColor {
+    constructor(hue, requestedChroma) {
+        this.hue = hue;
+        this.requestedChroma = requestedChroma;
+        // Cache that maps tone to max chroma to avoid duplicated HCT calculation.
+        this.chromaCache = new Map();
+        this.maxChromaValue = 200.0;
+    }
+    /**
+     * Creates a key color from a [hue] and a [chroma].
+     * The key color is the first tone, starting from T50, matching the given hue
+     * and chroma.
+     *
+     * @return Key color [Hct]
+     */
+    create() {
+        // Pivot around T50 because T50 has the most chroma available, on
+        // average. Thus it is most likely to have a direct answer.
+        const pivotTone = 50;
+        const toneStepSize = 1;
+        // Epsilon to accept values slightly higher than the requested chroma.
+        const epsilon = 0.01;
+        // Binary search to find the tone that can provide a chroma that is closest
+        // to the requested chroma.
+        let lowerTone = 0;
+        let upperTone = 100;
+        while (lowerTone < upperTone) {
+            const midTone = Math.floor((lowerTone + upperTone) / 2);
+            const isAscending = this.maxChroma(midTone) < this.maxChroma(midTone + toneStepSize);
+            const sufficientChroma = this.maxChroma(midTone) >= this.requestedChroma - epsilon;
+            if (sufficientChroma) {
+                // Either range [lowerTone, midTone] or [midTone, upperTone] has
+                // the answer, so search in the range that is closer the pivot tone.
+                if (Math.abs(lowerTone - pivotTone) < Math.abs(upperTone - pivotTone)) {
+                    upperTone = midTone;
+                }
+                else {
+                    if (lowerTone === midTone) {
+                        return Hct.from(this.hue, this.requestedChroma, lowerTone);
+                    }
+                    lowerTone = midTone;
+                }
+            }
+            else {
+                // As there is no sufficient chroma in the midTone, follow the direction
+                // to the chroma peak.
+                if (isAscending) {
+                    lowerTone = midTone + toneStepSize;
+                }
+                else {
+                    // Keep midTone for potential chroma peak.
+                    upperTone = midTone;
+                }
+            }
+        }
+        return Hct.from(this.hue, this.requestedChroma, lowerTone);
+    }
+    // Find the maximum chroma for a given tone
+    maxChroma(tone) {
+        if (this.chromaCache.has(tone)) {
+            return this.chromaCache.get(tone);
+        }
+        const chroma = Hct.from(this.hue, this.maxChromaValue, tone).chroma;
+        this.chromaCache.set(tone, chroma);
+        return chroma;
+    }
+}
 
 /**
  * @license
@@ -27520,19 +26915,20 @@ var Variant;
  * limitations under the License.
  */
 /**
- * A class containing the contrast curve for a dynamic color on its background.
+ * A class containing a value that changes with the contrast level.
  *
- * The four values correspond to contrast requirements for contrast levels
- * -1.0, 0.0, 0.5, and 1.0, respectively.
+ * Usually represents the contrast requirements for a dynamic color on its
+ * background. The four values correspond to values for contrast levels -1.0,
+ * 0.0, 0.5, and 1.0, respectively.
  */
 class ContrastCurve {
     /**
      * Creates a `ContrastCurve` object.
      *
-     * @param low Contrast requirement for contrast level -1.0
-     * @param normal Contrast requirement for contrast level 0.0
-     * @param medium Contrast requirement for contrast level 0.5
-     * @param high Contrast requirement for contrast level 1.0
+     * @param low Value for contrast level -1.0
+     * @param normal Value for contrast level 0.0
+     * @param medium Value for contrast level 0.5
+     * @param high Value for contrast level 1.0
      */
     constructor(low, normal, medium, high) {
         this.low = low;
@@ -27541,13 +26937,13 @@ class ContrastCurve {
         this.high = high;
     }
     /**
-     * Returns the contrast ratio at a given contrast level.
+     * Returns the value at a given contrast level.
      *
-     * @param contrastLevel The contrast level. 0.0 is the default (normal);
-     * -1.0 is the lowest; 1.0 is the highest.
-     * @return The contrast ratio, a number between 1.0 and 21.0.
+     * @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
+     *     is the lowest; 1.0 is the highest.
+     * @return The value. For contrast ratios, a number between 1.0 and 21.0.
      */
-    getContrast(contrastLevel) {
+    get(contrastLevel) {
         if (contrastLevel <= -1) {
             return this.low;
         }
@@ -27623,6 +27019,40 @@ class ToneDeltaPair {
     }
 }
 
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Set of themes supported by Dynamic Color.
+ * Instantiate the corresponding subclass, ex. SchemeTonalSpot, to create
+ * colors corresponding to the theme.
+ */
+var Variant;
+(function (Variant) {
+    Variant[Variant["MONOCHROME"] = 0] = "MONOCHROME";
+    Variant[Variant["NEUTRAL"] = 1] = "NEUTRAL";
+    Variant[Variant["TONAL_SPOT"] = 2] = "TONAL_SPOT";
+    Variant[Variant["VIBRANT"] = 3] = "VIBRANT";
+    Variant[Variant["EXPRESSIVE"] = 4] = "EXPRESSIVE";
+    Variant[Variant["FIDELITY"] = 5] = "FIDELITY";
+    Variant[Variant["CONTENT"] = 6] = "CONTENT";
+    Variant[Variant["RAINBOW"] = 7] = "RAINBOW";
+    Variant[Variant["FRUIT_SALAD"] = 8] = "FRUIT_SALAD";
+})(Variant || (Variant = {}));
+
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -27670,24 +27100,6 @@ function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
     }
     return answer;
 }
-function viewingConditionsForAlbers(scheme) {
-    return ViewingConditions.make(
-    /*whitePoint=*/ undefined, 
-    /*adaptingLuminance=*/ undefined, 
-    /*backgroundLstar=*/ scheme.isDark ? 30 : 80, 
-    /*surround=*/ undefined, 
-    /*discountingIlluminant=*/ undefined);
-}
-function performAlbers(prealbers, scheme) {
-    const albersd = prealbers.inViewingConditions(viewingConditionsForAlbers(scheme));
-    if (DynamicColor$1.tonePrefersLightForeground(prealbers.tone) &&
-        !DynamicColor$1.toneAllowsLightForeground(albersd.tone)) {
-        return DynamicColor$1.enableLightForeground(prealbers.tone);
-    }
-    else {
-        return DynamicColor$1.enableLightForeground(albersd.tone);
-    }
-}
 /**
  * DynamicColors for the colors in the Material Design system.
  */
@@ -27747,43 +27159,51 @@ MaterialDynamicColors.surface = DynamicColor$1.fromPalette({
 MaterialDynamicColors.surfaceDim = DynamicColor$1.fromPalette({
     name: 'surface_dim',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 6 : 87,
+    tone: (s) => s.isDark ? 6 : new ContrastCurve(87, 87, 80, 75).get(s.contrastLevel),
     isBackground: true,
 });
 MaterialDynamicColors.surfaceBright = DynamicColor$1.fromPalette({
     name: 'surface_bright',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 24 : 98,
+    tone: (s) => s.isDark ? new ContrastCurve(24, 24, 29, 34).get(s.contrastLevel) : 98,
     isBackground: true,
 });
 MaterialDynamicColors.surfaceContainerLowest = DynamicColor$1.fromPalette({
     name: 'surface_container_lowest',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 4 : 100,
+    tone: (s) => s.isDark ? new ContrastCurve(4, 4, 2, 0).get(s.contrastLevel) : 100,
     isBackground: true,
 });
 MaterialDynamicColors.surfaceContainerLow = DynamicColor$1.fromPalette({
     name: 'surface_container_low',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 10 : 96,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(10, 10, 11, 12).get(s.contrastLevel) :
+        new ContrastCurve(96, 96, 96, 95).get(s.contrastLevel),
     isBackground: true,
 });
 MaterialDynamicColors.surfaceContainer = DynamicColor$1.fromPalette({
     name: 'surface_container',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 12 : 94,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(12, 12, 16, 20).get(s.contrastLevel) :
+        new ContrastCurve(94, 94, 92, 90).get(s.contrastLevel),
     isBackground: true,
 });
 MaterialDynamicColors.surfaceContainerHigh = DynamicColor$1.fromPalette({
     name: 'surface_container_high',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 17 : 92,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(17, 17, 21, 25).get(s.contrastLevel) :
+        new ContrastCurve(92, 92, 88, 85).get(s.contrastLevel),
     isBackground: true,
 });
 MaterialDynamicColors.surfaceContainerHighest = DynamicColor$1.fromPalette({
     name: 'surface_container_highest',
     palette: (s) => s.neutralPalette,
-    tone: (s) => s.isDark ? 22 : 90,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(22, 22, 26, 30).get(s.contrastLevel) :
+        new ContrastCurve(90, 90, 84, 80).get(s.contrastLevel),
     isBackground: true,
 });
 MaterialDynamicColors.onSurface = DynamicColor$1.fromPalette({
@@ -27830,7 +27250,7 @@ MaterialDynamicColors.outlineVariant = DynamicColor$1.fromPalette({
     palette: (s) => s.neutralVariantPalette,
     tone: (s) => s.isDark ? 30 : 80,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
 });
 MaterialDynamicColors.shadow = DynamicColor$1.fromPalette({
     name: 'shadow',
@@ -27859,8 +27279,8 @@ MaterialDynamicColors.primary = DynamicColor$1.fromPalette({
     },
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 10, 'nearer', false),
 });
 MaterialDynamicColors.onPrimary = DynamicColor$1.fromPalette({
     name: 'on_primary',
@@ -27879,7 +27299,7 @@ MaterialDynamicColors.primaryContainer = DynamicColor$1.fromPalette({
     palette: (s) => s.primaryPalette,
     tone: (s) => {
         if (isFidelity(s)) {
-            return performAlbers(s.sourceColorHct, s);
+            return s.sourceColorHct.tone;
         }
         if (isMonochrome(s)) {
             return s.isDark ? 85 : 25;
@@ -27888,8 +27308,8 @@ MaterialDynamicColors.primaryContainer = DynamicColor$1.fromPalette({
     },
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 10, 'nearer', false),
 });
 MaterialDynamicColors.onPrimaryContainer = DynamicColor$1.fromPalette({
     name: 'on_primary_container',
@@ -27901,17 +27321,17 @@ MaterialDynamicColors.onPrimaryContainer = DynamicColor$1.fromPalette({
         if (isMonochrome(s)) {
             return s.isDark ? 0 : 100;
         }
-        return s.isDark ? 90 : 10;
+        return s.isDark ? 90 : 30;
     },
     background: (s) => MaterialDynamicColors.primaryContainer,
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
 });
 MaterialDynamicColors.inversePrimary = DynamicColor$1.fromPalette({
     name: 'inverse_primary',
     palette: (s) => s.primaryPalette,
     tone: (s) => s.isDark ? 40 : 80,
     background: (s) => MaterialDynamicColors.inverseSurface,
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
 });
 MaterialDynamicColors.secondary = DynamicColor$1.fromPalette({
     name: 'secondary',
@@ -27919,8 +27339,8 @@ MaterialDynamicColors.secondary = DynamicColor$1.fromPalette({
     tone: (s) => s.isDark ? 80 : 40,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 10, 'nearer', false),
 });
 MaterialDynamicColors.onSecondary = DynamicColor$1.fromPalette({
     name: 'on_secondary',
@@ -27947,26 +27367,27 @@ MaterialDynamicColors.secondaryContainer = DynamicColor$1.fromPalette({
         if (!isFidelity(s)) {
             return initialTone;
         }
-        let answer = findDesiredChromaByTone(s.secondaryPalette.hue, s.secondaryPalette.chroma, initialTone, s.isDark ? false : true);
-        answer = performAlbers(s.secondaryPalette.getHct(answer), s);
-        return answer;
+        return findDesiredChromaByTone(s.secondaryPalette.hue, s.secondaryPalette.chroma, initialTone, s.isDark ? false : true);
     },
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 10, 'nearer', false),
 });
 MaterialDynamicColors.onSecondaryContainer = DynamicColor$1.fromPalette({
     name: 'on_secondary_container',
     palette: (s) => s.secondaryPalette,
     tone: (s) => {
-        if (!isFidelity(s)) {
+        if (isMonochrome(s)) {
             return s.isDark ? 90 : 10;
         }
+        if (!isFidelity(s)) {
+            return s.isDark ? 90 : 30;
+        }
         return DynamicColor$1.foregroundTone(MaterialDynamicColors.secondaryContainer.tone(s), 4.5);
     },
     background: (s) => MaterialDynamicColors.secondaryContainer,
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
 });
 MaterialDynamicColors.tertiary = DynamicColor$1.fromPalette({
     name: 'tertiary',
@@ -27979,8 +27400,8 @@ MaterialDynamicColors.tertiary = DynamicColor$1.fromPalette({
     },
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 10, 'nearer', false),
 });
 MaterialDynamicColors.onTertiary = DynamicColor$1.fromPalette({
     name: 'on_tertiary',
@@ -28004,14 +27425,13 @@ MaterialDynamicColors.tertiaryContainer = DynamicColor$1.fromPalette({
         if (!isFidelity(s)) {
             return s.isDark ? 30 : 90;
         }
-        const albersTone = performAlbers(s.tertiaryPalette.getHct(s.sourceColorHct.tone), s);
-        const proposedHct = s.tertiaryPalette.getHct(albersTone);
+        const proposedHct = s.tertiaryPalette.getHct(s.sourceColorHct.tone);
         return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
     },
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 10, 'nearer', false),
 });
 MaterialDynamicColors.onTertiaryContainer = DynamicColor$1.fromPalette({
     name: 'on_tertiary_container',
@@ -28021,12 +27441,12 @@ MaterialDynamicColors.onTertiaryContainer = DynamicColor$1.fromPalette({
             return s.isDark ? 0 : 100;
         }
         if (!isFidelity(s)) {
-            return s.isDark ? 90 : 10;
+            return s.isDark ? 90 : 30;
         }
         return DynamicColor$1.foregroundTone(MaterialDynamicColors.tertiaryContainer.tone(s), 4.5);
     },
     background: (s) => MaterialDynamicColors.tertiaryContainer,
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
 });
 MaterialDynamicColors.error = DynamicColor$1.fromPalette({
     name: 'error',
@@ -28034,8 +27454,8 @@ MaterialDynamicColors.error = DynamicColor$1.fromPalette({
     tone: (s) => s.isDark ? 80 : 40,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 10, 'nearer', false),
 });
 MaterialDynamicColors.onError = DynamicColor$1.fromPalette({
     name: 'on_error',
@@ -28050,15 +27470,20 @@ MaterialDynamicColors.errorContainer = DynamicColor$1.fromPalette({
     tone: (s) => s.isDark ? 30 : 90,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
-    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 15, 'nearer', false),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 10, 'nearer', false),
 });
 MaterialDynamicColors.onErrorContainer = DynamicColor$1.fromPalette({
     name: 'on_error_container',
     palette: (s) => s.errorPalette,
-    tone: (s) => s.isDark ? 90 : 10,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 90 : 10;
+        }
+        return s.isDark ? 90 : 30;
+    },
     background: (s) => MaterialDynamicColors.errorContainer,
-    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
 });
 MaterialDynamicColors.primaryFixed = DynamicColor$1.fromPalette({
     name: 'primary_fixed',
@@ -28066,7 +27491,7 @@ MaterialDynamicColors.primaryFixed = DynamicColor$1.fromPalette({
     tone: (s) => isMonochrome(s) ? 40.0 : 90.0,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
     toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, 'lighter', true),
 });
 MaterialDynamicColors.primaryFixedDim = DynamicColor$1.fromPalette({
@@ -28075,7 +27500,7 @@ MaterialDynamicColors.primaryFixedDim = DynamicColor$1.fromPalette({
     tone: (s) => isMonochrome(s) ? 30.0 : 80.0,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
     toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, 'lighter', true),
 });
 MaterialDynamicColors.onPrimaryFixed = DynamicColor$1.fromPalette({
@@ -28100,7 +27525,7 @@ MaterialDynamicColors.secondaryFixed = DynamicColor$1.fromPalette({
     tone: (s) => isMonochrome(s) ? 80.0 : 90.0,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
     toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, 'lighter', true),
 });
 MaterialDynamicColors.secondaryFixedDim = DynamicColor$1.fromPalette({
@@ -28109,7 +27534,7 @@ MaterialDynamicColors.secondaryFixedDim = DynamicColor$1.fromPalette({
     tone: (s) => isMonochrome(s) ? 70.0 : 80.0,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
     toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, 'lighter', true),
 });
 MaterialDynamicColors.onSecondaryFixed = DynamicColor$1.fromPalette({
@@ -28134,7 +27559,7 @@ MaterialDynamicColors.tertiaryFixed = DynamicColor$1.fromPalette({
     tone: (s) => isMonochrome(s) ? 40.0 : 90.0,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
     toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, 'lighter', true),
 });
 MaterialDynamicColors.tertiaryFixedDim = DynamicColor$1.fromPalette({
@@ -28143,7 +27568,7 @@ MaterialDynamicColors.tertiaryFixedDim = DynamicColor$1.fromPalette({
     tone: (s) => isMonochrome(s) ? 30.0 : 80.0,
     isBackground: true,
     background: (s) => MaterialDynamicColors.highestSurface(s),
-    contrastCurve: new ContrastCurve(1, 1, 3, 7),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
     toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, 'lighter', true),
 });
 MaterialDynamicColors.onTertiaryFixed = DynamicColor$1.fromPalette({
@@ -28163,110 +27588,6 @@ MaterialDynamicColors.onTertiaryFixedVariant = DynamicColor$1.fromPalette({
     contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
 });
 
-/**
- * @license
- * Copyright 2021 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- *  A convenience class for retrieving colors that are constant in hue and
- *  chroma, but vary in tone.
- */
-class TonalPalette {
-    /**
-     * @param argb ARGB representation of a color
-     * @return Tones matching that color's hue and chroma.
-     */
-    static fromInt(argb) {
-        const hct = Hct.fromInt(argb);
-        return TonalPalette.fromHct(hct);
-    }
-    /**
-     * @param hct Hct
-     * @return Tones matching that color's hue and chroma.
-     */
-    static fromHct(hct) {
-        return new TonalPalette(hct.hue, hct.chroma, hct);
-    }
-    /**
-     * @param hue HCT hue
-     * @param chroma HCT chroma
-     * @return Tones matching hue and chroma.
-     */
-    static fromHueAndChroma(hue, chroma) {
-        return new TonalPalette(hue, chroma, TonalPalette.createKeyColor(hue, chroma));
-    }
-    constructor(hue, chroma, keyColor) {
-        this.hue = hue;
-        this.chroma = chroma;
-        this.keyColor = keyColor;
-        this.cache = new Map();
-    }
-    static createKeyColor(hue, chroma) {
-        const startTone = 50.0;
-        let smallestDeltaHct = Hct.from(hue, chroma, startTone);
-        let smallestDelta = Math.abs(smallestDeltaHct.chroma - chroma);
-        // Starting from T50, check T+/-delta to see if they match the requested
-        // chroma.
-        //
-        // Starts from T50 because T50 has the most chroma available, on
-        // average. Thus it is most likely to have a direct answer and minimize
-        // iteration.
-        for (let delta = 1.0; delta < 50.0; delta += 1.0) {
-            // Termination condition rounding instead of minimizing delta to avoid
-            // case where requested chroma is 16.51, and the closest chroma is 16.49.
-            // Error is minimized, but when rounded and displayed, requested chroma
-            // is 17, key color's chroma is 16.
-            if (Math.round(chroma) === Math.round(smallestDeltaHct.chroma)) {
-                return smallestDeltaHct;
-            }
-            const hctAdd = Hct.from(hue, chroma, startTone + delta);
-            const hctAddDelta = Math.abs(hctAdd.chroma - chroma);
-            if (hctAddDelta < smallestDelta) {
-                smallestDelta = hctAddDelta;
-                smallestDeltaHct = hctAdd;
-            }
-            const hctSubtract = Hct.from(hue, chroma, startTone - delta);
-            const hctSubtractDelta = Math.abs(hctSubtract.chroma - chroma);
-            if (hctSubtractDelta < smallestDelta) {
-                smallestDelta = hctSubtractDelta;
-                smallestDeltaHct = hctSubtract;
-            }
-        }
-        return smallestDeltaHct;
-    }
-    /**
-     * @param tone HCT tone, measured from 0 to 100.
-     * @return ARGB representation of a color with that tone.
-     */
-    tone(tone) {
-        let argb = this.cache.get(tone);
-        if (argb === undefined) {
-            argb = Hct.from(this.hue, this.chroma, tone).toInt();
-            this.cache.set(tone, argb);
-        }
-        return argb;
-    }
-    /**
-     * @param tone HCT tone.
-     * @return HCT representation of a color with that tone.
-     */
-    getHct(tone) {
-        return Hct.fromInt(this.tone(tone));
-    }
-}
-
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -29101,6 +28422,11 @@ class QuantizerCelebi {
  */
 // This file is automatically generated. Do not modify it.
 /**
+ * DEPRECATED. The `Scheme` class is deprecated in favor of `DynamicScheme`.
+ * Please see
+ * https://github.com/material-foundation/material-color-utilities/blob/main/make_schemes.md
+ * for migration guidance.
+ *
  * Represents a Material color scheme, a mapping of color roles to colors.
  */
 class Scheme {
@@ -29499,7 +28825,7 @@ async function sourceColorFromImage(image) {
             reject(new Error('Could not get canvas context'));
             return;
         }
-        const callback = () => {
+        const loadCallback = () => {
             canvas.width = image.width;
             canvas.height = image.height;
             context.drawImage(image, 0, 0);
@@ -29514,11 +28840,15 @@ async function sourceColorFromImage(image) {
             const [sx, sy, sw, sh] = rect;
             resolve(context.getImageData(sx, sy, sw, sh).data);
         };
+        const errorCallback = () => {
+            reject(new Error('Image load failed'));
+        };
         if (image.complete) {
-            callback();
+            loadCallback();
         }
         else {
-            image.onload = callback;
+            image.onload = loadCallback;
+            image.onerror = errorCallback;
         }
     });
     // Convert Image data to Pixel Array
@@ -29631,17 +28961,17 @@ function customColor(source, color) {
 }
 
 var DynamicColor = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(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) {
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
         case 0:
           imageElement = document.createElement("img");
           imageElement.src = src;
-          _context.next = 4;
+          _context.n = 1;
           return themeFromImage(imageElement);
-        case 4:
-          dynamicPalette = _context.sent;
+        case 1:
+          dynamicPalette = _context.v;
           extractHctInstance = function extractHctInstance(color) {
             var _color$keyColor = color.keyColor,
               hue = _color$keyColor.hue,
@@ -29673,14 +29003,11 @@ var DynamicColor = /*#__PURE__*/function () {
             "default": alpha(primaryMain, 0.1),
             paper: "#fff"
           };
-          return _context.abrupt("return", {
+          return _context.a(2, {
             primaryColor: primaryColor,
             secondaryColor: secondaryColor,
             backgroundColor: backgroundColor
           });
-        case 18:
-        case "end":
-          return _context.stop();
       }
     }, _callee);
   }));