npm - @mxenabled/connect-widget - Versions diffs - 2.0.0 → 2.1.0 - Mend

@mxenabled/connect-widget 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.es.js CHANGED Viewed

@@ -5468,7 +5468,7 @@ const _every = /*@__PURE__*/getDefaultExportFromCjs(every_1);
 var propTypes$4 = {exports: {}};
-var reactIs$4 = {exports: {}};
+var reactIs$5 = {exports: {}};
 var reactIs_production_min$3 = {};
@@ -5576,13 +5576,13 @@ function requireReactIs_production_min$3 () {
 	return reactIs_production_min$3;
 }
-var reactIs_development$3 = {};
+var reactIs_development$4 = {};
-var hasRequiredReactIs_development$3;
+var hasRequiredReactIs_development$4;
-function requireReactIs_development$3 () {
-	if (hasRequiredReactIs_development$3) return reactIs_development$3;
-	hasRequiredReactIs_development$3 = 1;
+function requireReactIs_development$4 () {
+	if (hasRequiredReactIs_development$4) return reactIs_development$4;
+	hasRequiredReactIs_development$4 = 1;
 	/** @license React v16.13.1
 	 * react-is.development.js
 	 *
@@ -5708,50 +5708,50 @@ function requireReactIs_development$3 () {
 	    function isSuspense(object) {
 	      return typeOf(object) === REACT_SUSPENSE_TYPE;
 	    }
-	    reactIs_development$3.AsyncMode = AsyncMode;
-	    reactIs_development$3.ConcurrentMode = ConcurrentMode;
-	    reactIs_development$3.ContextConsumer = ContextConsumer;
-	    reactIs_development$3.ContextProvider = ContextProvider;
-	    reactIs_development$3.Element = Element;
-	    reactIs_development$3.ForwardRef = ForwardRef;
-	    reactIs_development$3.Fragment = Fragment;
-	    reactIs_development$3.Lazy = Lazy;
-	    reactIs_development$3.Memo = Memo;
-	    reactIs_development$3.Portal = Portal;
-	    reactIs_development$3.Profiler = Profiler;
-	    reactIs_development$3.StrictMode = StrictMode;
-	    reactIs_development$3.Suspense = Suspense;
-	    reactIs_development$3.isAsyncMode = isAsyncMode;
-	    reactIs_development$3.isConcurrentMode = isConcurrentMode;
-	    reactIs_development$3.isContextConsumer = isContextConsumer;
-	    reactIs_development$3.isContextProvider = isContextProvider;
-	    reactIs_development$3.isElement = isElement;
-	    reactIs_development$3.isForwardRef = isForwardRef;
-	    reactIs_development$3.isFragment = isFragment;
-	    reactIs_development$3.isLazy = isLazy;
-	    reactIs_development$3.isMemo = isMemo;
-	    reactIs_development$3.isPortal = isPortal;
-	    reactIs_development$3.isProfiler = isProfiler;
-	    reactIs_development$3.isStrictMode = isStrictMode;
-	    reactIs_development$3.isSuspense = isSuspense;
-	    reactIs_development$3.isValidElementType = isValidElementType;
-	    reactIs_development$3.typeOf = typeOf;
+	    reactIs_development$4.AsyncMode = AsyncMode;
+	    reactIs_development$4.ConcurrentMode = ConcurrentMode;
+	    reactIs_development$4.ContextConsumer = ContextConsumer;
+	    reactIs_development$4.ContextProvider = ContextProvider;
+	    reactIs_development$4.Element = Element;
+	    reactIs_development$4.ForwardRef = ForwardRef;
+	    reactIs_development$4.Fragment = Fragment;
+	    reactIs_development$4.Lazy = Lazy;
+	    reactIs_development$4.Memo = Memo;
+	    reactIs_development$4.Portal = Portal;
+	    reactIs_development$4.Profiler = Profiler;
+	    reactIs_development$4.StrictMode = StrictMode;
+	    reactIs_development$4.Suspense = Suspense;
+	    reactIs_development$4.isAsyncMode = isAsyncMode;
+	    reactIs_development$4.isConcurrentMode = isConcurrentMode;
+	    reactIs_development$4.isContextConsumer = isContextConsumer;
+	    reactIs_development$4.isContextProvider = isContextProvider;
+	    reactIs_development$4.isElement = isElement;
+	    reactIs_development$4.isForwardRef = isForwardRef;
+	    reactIs_development$4.isFragment = isFragment;
+	    reactIs_development$4.isLazy = isLazy;
+	    reactIs_development$4.isMemo = isMemo;
+	    reactIs_development$4.isPortal = isPortal;
+	    reactIs_development$4.isProfiler = isProfiler;
+	    reactIs_development$4.isStrictMode = isStrictMode;
+	    reactIs_development$4.isSuspense = isSuspense;
+	    reactIs_development$4.isValidElementType = isValidElementType;
+	    reactIs_development$4.typeOf = typeOf;
 	  })();
 	}
-	return reactIs_development$3;
+	return reactIs_development$4;
 }
 var hasRequiredReactIs;
 function requireReactIs () {
-	if (hasRequiredReactIs) return reactIs$4.exports;
+	if (hasRequiredReactIs) return reactIs$5.exports;
 	hasRequiredReactIs = 1;
 	if (process.env.NODE_ENV === "production") {
-	  reactIs$4.exports = requireReactIs_production_min$3();
+	  reactIs$5.exports = requireReactIs_production_min$3();
 	} else {
-	  reactIs$4.exports = requireReactIs_development$3();
+	  reactIs$5.exports = requireReactIs_development$4();
 	}
-	return reactIs$4.exports;
+	return reactIs$5.exports;
 }
 var objectAssign;
@@ -15174,7 +15174,7 @@ var createCache = function createCache2(options) {
   return cache;
 };
-var reactIs$3 = {exports: {}};
+var reactIs$4 = {exports: {}};
 var reactIs_production_min$2 = {};
@@ -15282,13 +15282,13 @@ function requireReactIs_production_min$2 () {
 	return reactIs_production_min$2;
 }
-var reactIs_development$2 = {};
+var reactIs_development$3 = {};
-var hasRequiredReactIs_development$2;
+var hasRequiredReactIs_development$3;
-function requireReactIs_development$2 () {
-	if (hasRequiredReactIs_development$2) return reactIs_development$2;
-	hasRequiredReactIs_development$2 = 1;
+function requireReactIs_development$3 () {
+	if (hasRequiredReactIs_development$3) return reactIs_development$3;
+	hasRequiredReactIs_development$3 = 1;
 	/** @license React v16.13.1
 	 * react-is.development.js
 	 *
@@ -15414,48 +15414,48 @@ function requireReactIs_development$2 () {
 	    function isSuspense(object) {
 	      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$3.AsyncMode = AsyncMode;
+	    reactIs_development$3.ConcurrentMode = ConcurrentMode;
+	    reactIs_development$3.ContextConsumer = ContextConsumer;
+	    reactIs_development$3.ContextProvider = ContextProvider;
+	    reactIs_development$3.Element = Element;
+	    reactIs_development$3.ForwardRef = ForwardRef;
+	    reactIs_development$3.Fragment = Fragment;
+	    reactIs_development$3.Lazy = Lazy;
+	    reactIs_development$3.Memo = Memo;
+	    reactIs_development$3.Portal = Portal;
+	    reactIs_development$3.Profiler = Profiler;
+	    reactIs_development$3.StrictMode = StrictMode;
+	    reactIs_development$3.Suspense = Suspense;
+	    reactIs_development$3.isAsyncMode = isAsyncMode;
+	    reactIs_development$3.isConcurrentMode = isConcurrentMode;
+	    reactIs_development$3.isContextConsumer = isContextConsumer;
+	    reactIs_development$3.isContextProvider = isContextProvider;
+	    reactIs_development$3.isElement = isElement;
+	    reactIs_development$3.isForwardRef = isForwardRef;
+	    reactIs_development$3.isFragment = isFragment;
+	    reactIs_development$3.isLazy = isLazy;
+	    reactIs_development$3.isMemo = isMemo;
+	    reactIs_development$3.isPortal = isPortal;
+	    reactIs_development$3.isProfiler = isProfiler;
+	    reactIs_development$3.isStrictMode = isStrictMode;
+	    reactIs_development$3.isSuspense = isSuspense;
+	    reactIs_development$3.isValidElementType = isValidElementType;
+	    reactIs_development$3.typeOf = typeOf;
 	  })();
 	}
-	return reactIs_development$2;
+	return reactIs_development$3;
 }
 if (process.env.NODE_ENV === "production") {
-  reactIs$3.exports = requireReactIs_production_min$2();
+  reactIs$4.exports = requireReactIs_production_min$2();
 } else {
-  reactIs$3.exports = requireReactIs_development$2();
+  reactIs$4.exports = requireReactIs_development$3();
 }
-var reactIsExports$2 = reactIs$3.exports;
+var reactIsExports$3 = reactIs$4.exports;
-var reactIs$2 = reactIsExports$2;
+var reactIs$3 = reactIsExports$3;
 var FORWARD_REF_STATICS = {
   "$$typeof": true,
   render: true,
@@ -15472,8 +15472,8 @@ var MEMO_STATICS = {
   type: true
 };
 var TYPE_STATICS = {};
-TYPE_STATICS[reactIs$2.ForwardRef] = FORWARD_REF_STATICS;
-TYPE_STATICS[reactIs$2.Memo] = MEMO_STATICS;
+TYPE_STATICS[reactIs$3.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs$3.Memo] = MEMO_STATICS;
 var isBrowser = true;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -16222,28 +16222,56 @@ tags.forEach(function(tagName) {
   newStyled[tagName] = newStyled(tagName);
 });
-let cache;
-if (typeof document === "object") {
-  cache = createCache({
+function getCache(injectFirst, enableCssLayer) {
+  const emotionCache = createCache({
     key: "css",
-    prepend: true
+    prepend: injectFirst
   });
+  if (enableCssLayer) {
+    const prevInsert = emotionCache.insert;
+    emotionCache.insert = (...args) => {
+      if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      return prevInsert(...args);
+    };
+  }
+  return emotionCache;
 }
+const cacheMap = /* @__PURE__ */ new Map();
 function StyledEngineProvider(props) {
   const {
     injectFirst,
+    enableCssLayer,
     children
   } = props;
-  return injectFirst && cache ? /* @__PURE__ */ jsxRuntimeExports.jsx(CacheProvider, {
-    value: cache,
-    children
-  }) : children;
+  const cache = React$1.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === "object" && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
+  if (injectFirst || enableCssLayer) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(CacheProvider, {
+      value: cache,
+      children
+    });
+  }
+  return children;
 }
 process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
   /**
    * Your component tree.
    */
   children: PropTypes$1.node,
+  /**
+   * If true, MUI styles are wrapped in CSS `@layer mui` rule.
+   * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
+   */
+  enableCssLayer: PropTypes$1.bool,
   /**
    * By default, the styles are injected last in the <head> element of the page.
    * As a result, they gain more specificity than any other style sheet.
@@ -16290,6 +16318,11 @@ const internal_processStyles = (tag, processor) => {
     tag.__emotion_styles = processor(tag.__emotion_styles);
   }
 };
+const wrapper$1 = [];
+function internal_serializeStyles$1(styles) {
+  wrapper$1[0] = styles;
+  return serializeStyles(wrapper$1);
+}
 const styledEngine = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	__proto__: null,
@@ -16299,6 +16332,7 @@ const styledEngine = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProper
 	css,
 	default: styled$4,
 	internal_processStyles,
+	internal_serializeStyles: internal_serializeStyles$1,
 	keyframes
 }, Symbol.toStringTag, { value: 'Module' }));
@@ -16320,7 +16354,7 @@ function isPlainObject$2(item) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone$1(source) {
-  if (!isPlainObject$2(source)) {
+  if (/* @__PURE__ */ React$1.isValidElement(source) || !isPlainObject$2(source)) {
     return source;
   }
   const output = {};
@@ -16335,7 +16369,9 @@ function deepmerge$2(target, source, options = {
   const output = options.clone ? _extends$1({}, target) : target;
   if (isPlainObject$2(target) && isPlainObject$2(source)) {
     Object.keys(source).forEach((key) => {
-      if (isPlainObject$2(source[key]) && // Avoid prototype pollution
+      if (/* @__PURE__ */ React$1.isValidElement(source[key])) {
+        output[key] = source[key];
+      } else if (isPlainObject$2(source[key]) && // Avoid prototype pollution
       Object.prototype.hasOwnProperty.call(target, key) && isPlainObject$2(target[key])) {
         output[key] = deepmerge$2(target[key], source[key], options);
       } else if (options.clone) {
@@ -17308,7 +17344,8 @@ function unstable_createStyleFunctionSx$1() {
     var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null;
@@ -17342,7 +17379,8 @@ function unstable_createStyleFunctionSx$1() {
               if (objectsHaveSameKeys$1(breakpointsValues, value)) {
                 css[styleKey] = styleFunctionSx2({
                   sx: value,
-                  theme
+                  theme,
+                  nested: true
                 });
               } else {
                 css = merge$1(css, breakpointsValues);
@@ -17353,6 +17391,11 @@ function unstable_createStyleFunctionSx$1() {
           }
         }
       });
+      if (!nested && theme.modularCssLayers) {
+        return {
+          "@layer sx": removeUnusedBreakpoints$1(breakpointsKeys, css)
+        };
+      }
       return removeUnusedBreakpoints$1(breakpointsKeys, css);
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
@@ -17429,13 +17472,36 @@ function useTheme$5(defaultTheme = systemDefaultTheme$3) {
   return useTheme$6(defaultTheme);
 }
+function wrapGlobalLayer(styles) {
+  const serialized = internal_serializeStyles$1(styles);
+  if (styles !== serialized && serialized.styles) {
+    if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
+      serialized.styles = `@layer global{${serialized.styles}}`;
+    }
+    return serialized;
+  }
+  return styles;
+}
 function GlobalStyles$4({
   styles,
   themeId,
   defaultTheme = {}
 }) {
   const upperTheme = useTheme$5(defaultTheme);
-  const globalStyles = typeof styles === "function" ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
+  const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+  let globalStyles = typeof styles === "function" ? styles(resolvedTheme) : styles;
+  if (resolvedTheme.modularCssLayers) {
+    if (Array.isArray(globalStyles)) {
+      globalStyles = globalStyles.map((styleArg) => {
+        if (typeof styleArg === "function") {
+          return wrapGlobalLayer(styleArg(resolvedTheme));
+        }
+        return wrapGlobalLayer(styleArg);
+      });
+    } else {
+      globalStyles = wrapGlobalLayer(globalStyles);
+    }
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalStyles$5, {
     styles: globalStyles
   });
@@ -17557,317 +17623,225 @@ function generateUtilityClasses$1(componentName, slots, globalStatePrefix = "Mui
   return result;
 }
-var reactIs$1 = {exports: {}};
+var reactIs$2 = {exports: {}};
-var reactIs_production_min$1 = {};
+var reactIs_production = {};
-var hasRequiredReactIs_production_min$1;
+var hasRequiredReactIs_production;
-function requireReactIs_production_min$1 () {
-	if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
-	hasRequiredReactIs_production_min$1 = 1;
+function requireReactIs_production () {
+	if (hasRequiredReactIs_production) return reactIs_production;
+	hasRequiredReactIs_production = 1;
 	/**
 	 * @license React
-	 * react-is.production.min.js
+	 * react-is.production.js
 	 *
-	 * Copyright (c) Facebook, Inc. and its affiliates.
+	 * 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 b = Symbol.for("react.element"), c = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), e = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), h = Symbol.for("react.context"), k = Symbol.for("react.server_context"), l = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), n = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), t = Symbol.for("react.offscreen"), u;
-	u = Symbol.for("react.module.reference");
-	function v(a) {
-	  if ("object" === typeof a && null !== a) {
-	    var r = a.$$typeof;
-	    switch (r) {
-	      case b:
-	        switch (a = a.type, a) {
-	          case d:
-	          case f:
-	          case e:
-	          case m:
-	          case n:
-	            return a;
+	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 (a = a && a.$$typeof, a) {
-	              case k:
-	              case h:
-	              case l:
-	              case q:
-	              case p:
-	              case g:
-	                return a;
+	            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 r;
+	                return $$typeof;
 	            }
 	        }
-	      case c:
-	        return r;
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
 	    }
 	  }
 	}
-	reactIs_production_min$1.ContextConsumer = h;
-	reactIs_production_min$1.ContextProvider = g;
-	reactIs_production_min$1.Element = b;
-	reactIs_production_min$1.ForwardRef = l;
-	reactIs_production_min$1.Fragment = d;
-	reactIs_production_min$1.Lazy = q;
-	reactIs_production_min$1.Memo = p;
-	reactIs_production_min$1.Portal = c;
-	reactIs_production_min$1.Profiler = f;
-	reactIs_production_min$1.StrictMode = e;
-	reactIs_production_min$1.Suspense = m;
-	reactIs_production_min$1.SuspenseList = n;
-	reactIs_production_min$1.isAsyncMode = function() {
-	  return false;
+	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_min$1.isConcurrentMode = function() {
-	  return false;
+	reactIs_production.isContextProvider = function(object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
 	};
-	reactIs_production_min$1.isContextConsumer = function(a) {
-	  return v(a) === h;
+	reactIs_production.isElement = function(object) {
+	  return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
 	};
-	reactIs_production_min$1.isContextProvider = function(a) {
-	  return v(a) === g;
+	reactIs_production.isForwardRef = function(object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
 	};
-	reactIs_production_min$1.isElement = function(a) {
-	  return "object" === typeof a && null !== a && a.$$typeof === b;
+	reactIs_production.isFragment = function(object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
 	};
-	reactIs_production_min$1.isForwardRef = function(a) {
-	  return v(a) === l;
+	reactIs_production.isLazy = function(object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
 	};
-	reactIs_production_min$1.isFragment = function(a) {
-	  return v(a) === d;
+	reactIs_production.isMemo = function(object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
 	};
-	reactIs_production_min$1.isLazy = function(a) {
-	  return v(a) === q;
+	reactIs_production.isPortal = function(object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
 	};
-	reactIs_production_min$1.isMemo = function(a) {
-	  return v(a) === p;
+	reactIs_production.isProfiler = function(object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
 	};
-	reactIs_production_min$1.isPortal = function(a) {
-	  return v(a) === c;
+	reactIs_production.isStrictMode = function(object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
 	};
-	reactIs_production_min$1.isProfiler = function(a) {
-	  return v(a) === f;
+	reactIs_production.isSuspense = function(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
 	};
-	reactIs_production_min$1.isStrictMode = function(a) {
-	  return v(a) === e;
-	};
-	reactIs_production_min$1.isSuspense = function(a) {
-	  return v(a) === m;
-	};
-	reactIs_production_min$1.isSuspenseList = function(a) {
-	  return v(a) === n;
+	reactIs_production.isSuspenseList = function(object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
 	};
-	reactIs_production_min$1.isValidElementType = function(a) {
-	  return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? true : false;
+	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_min$1.typeOf = v;
-	return reactIs_production_min$1;
+	reactIs_production.typeOf = typeOf;
+	return reactIs_production;
 }
-var reactIs_development$1 = {};
+var reactIs_development$2 = {};
-var hasRequiredReactIs_development$1;
+var hasRequiredReactIs_development$2;
-function requireReactIs_development$1 () {
-	if (hasRequiredReactIs_development$1) return reactIs_development$1;
-	hasRequiredReactIs_development$1 = 1;
+function requireReactIs_development$2 () {
+	if (hasRequiredReactIs_development$2) return reactIs_development$2;
+	hasRequiredReactIs_development$2 = 1;
 	/**
 	 * @license React
 	 * react-is.development.js
 	 *
-	 * Copyright (c) Facebook, Inc. and its affiliates.
+	 * 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.
 	 */
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-	    var REACT_ELEMENT_TYPE = Symbol.for("react.element");
-	    var REACT_PORTAL_TYPE = Symbol.for("react.portal");
-	    var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	    var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
-	    var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_PROVIDER_TYPE = Symbol.for("react.provider");
-	    var REACT_CONTEXT_TYPE = Symbol.for("react.context");
-	    var REACT_SERVER_CONTEXT_TYPE = Symbol.for("react.server_context");
-	    var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
-	    var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
-	    var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
-	    var REACT_MEMO_TYPE = Symbol.for("react.memo");
-	    var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-	    var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
-	    var enableScopeAPI = false;
-	    var enableCacheElement = false;
-	    var enableTransitionTracing = false;
-	    var enableLegacyHidden = false;
-	    var enableDebugTracing = false;
-	    var REACT_MODULE_REFERENCE;
-	    {
-	      REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
-	    }
-	    function isValidElementType(type) {
-	      if (typeof type === "string" || typeof type === "function") {
-	        return true;
-	      }
-	      if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
-	        return true;
-	      }
-	      if (typeof type === "object" && type !== null) {
-	        if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
-	        // types supported by any Flight configuration anywhere since
-	        // we don't know which Flight build this will end up being used
-	        // with.
-	        type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== void 0) {
-	          return true;
-	        }
-	      }
-	      return false;
-	    }
-	    function typeOf(object) {
-	      if (typeof object === "object" && object !== null) {
-	        var $$typeof = object.$$typeof;
-	        switch ($$typeof) {
-	          case REACT_ELEMENT_TYPE:
-	            var type = object.type;
-	            switch (type) {
-	              case REACT_FRAGMENT_TYPE:
-	              case REACT_PROFILER_TYPE:
-	              case REACT_STRICT_MODE_TYPE:
-	              case REACT_SUSPENSE_TYPE:
-	              case REACT_SUSPENSE_LIST_TYPE:
-	                return type;
-	              default:
-	                var $$typeofType = type && type.$$typeof;
-	                switch ($$typeofType) {
-	                  case REACT_SERVER_CONTEXT_TYPE:
-	                  case REACT_CONTEXT_TYPE:
-	                  case REACT_FORWARD_REF_TYPE:
-	                  case REACT_LAZY_TYPE:
-	                  case REACT_MEMO_TYPE:
-	                  case REACT_PROVIDER_TYPE:
-	                    return $$typeofType;
-	                  default:
-	                    return $$typeof;
-	                }
-	            }
-	          case REACT_PORTAL_TYPE:
-	            return $$typeof;
-	        }
-	      }
-	      return void 0;
-	    }
-	    var ContextConsumer = REACT_CONTEXT_TYPE;
-	    var ContextProvider = REACT_PROVIDER_TYPE;
-	    var Element = REACT_ELEMENT_TYPE;
-	    var ForwardRef = REACT_FORWARD_REF_TYPE;
-	    var Fragment = REACT_FRAGMENT_TYPE;
-	    var Lazy = REACT_LAZY_TYPE;
-	    var Memo = REACT_MEMO_TYPE;
-	    var Portal = REACT_PORTAL_TYPE;
-	    var Profiler = REACT_PROFILER_TYPE;
-	    var StrictMode = REACT_STRICT_MODE_TYPE;
-	    var Suspense = REACT_SUSPENSE_TYPE;
-	    var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	    var hasWarnedAboutDeprecatedIsAsyncMode = false;
-	    var hasWarnedAboutDeprecatedIsConcurrentMode = false;
-	    function isAsyncMode(object) {
-	      {
-	        if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-	          hasWarnedAboutDeprecatedIsAsyncMode = true;
-	          console["warn"]("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.");
-	        }
-	      }
-	      return false;
-	    }
-	    function isConcurrentMode(object) {
-	      {
-	        if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
-	          hasWarnedAboutDeprecatedIsConcurrentMode = true;
-	          console["warn"]("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.");
-	        }
+	"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;
 	      }
-	      return false;
 	    }
-	    function isContextConsumer(object) {
-	      return typeOf(object) === REACT_CONTEXT_TYPE;
-	    }
-	    function isContextProvider(object) {
-	      return typeOf(object) === REACT_PROVIDER_TYPE;
-	    }
-	    function isElement(object) {
-	      return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-	    }
-	    function isForwardRef(object) {
-	      return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	    }
-	    function isFragment(object) {
-	      return typeOf(object) === REACT_FRAGMENT_TYPE;
-	    }
-	    function isLazy(object) {
-	      return typeOf(object) === REACT_LAZY_TYPE;
-	    }
-	    function isMemo(object) {
-	      return typeOf(object) === REACT_MEMO_TYPE;
-	    }
-	    function isPortal(object) {
-	      return typeOf(object) === REACT_PORTAL_TYPE;
-	    }
-	    function isProfiler(object) {
-	      return typeOf(object) === REACT_PROFILER_TYPE;
-	    }
-	    function isStrictMode(object) {
-	      return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	    }
-	    function isSuspense(object) {
-	      return typeOf(object) === REACT_SUSPENSE_TYPE;
-	    }
-	    function isSuspenseList(object) {
-	      return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-	    }
-	    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.SuspenseList = SuspenseList;
-	    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.isSuspenseList = isSuspenseList;
-	    reactIs_development$1.isValidElementType = isValidElementType;
-	    reactIs_development$1.typeOf = typeOf;
-	  })();
-	}
-	return reactIs_development$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");
+	  reactIs_development$2.ContextConsumer = REACT_CONSUMER_TYPE;
+	  reactIs_development$2.ContextProvider = REACT_CONTEXT_TYPE;
+	  reactIs_development$2.Element = REACT_ELEMENT_TYPE;
+	  reactIs_development$2.ForwardRef = REACT_FORWARD_REF_TYPE;
+	  reactIs_development$2.Fragment = REACT_FRAGMENT_TYPE;
+	  reactIs_development$2.Lazy = REACT_LAZY_TYPE;
+	  reactIs_development$2.Memo = REACT_MEMO_TYPE;
+	  reactIs_development$2.Portal = REACT_PORTAL_TYPE;
+	  reactIs_development$2.Profiler = REACT_PROFILER_TYPE;
+	  reactIs_development$2.StrictMode = REACT_STRICT_MODE_TYPE;
+	  reactIs_development$2.Suspense = REACT_SUSPENSE_TYPE;
+	  reactIs_development$2.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	  reactIs_development$2.isContextConsumer = function(object) {
+	    return typeOf(object) === REACT_CONSUMER_TYPE;
+	  };
+	  reactIs_development$2.isContextProvider = function(object) {
+	    return typeOf(object) === REACT_CONTEXT_TYPE;
+	  };
+	  reactIs_development$2.isElement = function(object) {
+	    return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+	  };
+	  reactIs_development$2.isForwardRef = function(object) {
+	    return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	  };
+	  reactIs_development$2.isFragment = function(object) {
+	    return typeOf(object) === REACT_FRAGMENT_TYPE;
+	  };
+	  reactIs_development$2.isLazy = function(object) {
+	    return typeOf(object) === REACT_LAZY_TYPE;
+	  };
+	  reactIs_development$2.isMemo = function(object) {
+	    return typeOf(object) === REACT_MEMO_TYPE;
+	  };
+	  reactIs_development$2.isPortal = function(object) {
+	    return typeOf(object) === REACT_PORTAL_TYPE;
+	  };
+	  reactIs_development$2.isProfiler = function(object) {
+	    return typeOf(object) === REACT_PROFILER_TYPE;
+	  };
+	  reactIs_development$2.isStrictMode = function(object) {
+	    return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	  };
+	  reactIs_development$2.isSuspense = function(object) {
+	    return typeOf(object) === REACT_SUSPENSE_TYPE;
+	  };
+	  reactIs_development$2.isSuspenseList = function(object) {
+	    return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	  };
+	  reactIs_development$2.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$2.typeOf = typeOf;
+	}();
+	return reactIs_development$2;
 }
 if (process.env.NODE_ENV === "production") {
-  reactIs$1.exports = requireReactIs_production_min$1();
+  reactIs$2.exports = requireReactIs_production();
 } else {
-  reactIs$1.exports = requireReactIs_development$1();
+  reactIs$2.exports = requireReactIs_development$2();
 }
-var reactIsExports$1 = reactIs$1.exports;
+var reactIsExports$2 = reactIs$2.exports;
 const fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/;
 function getFunctionName(fn) {
@@ -17894,9 +17868,9 @@ function getDisplayName$2(Component) {
   }
   if (typeof Component === "object") {
     switch (Component.$$typeof) {
-      case reactIsExports$1.ForwardRef:
+      case reactIsExports$2.ForwardRef:
         return getWrappedName$1(Component, Component.render, "ForwardRef");
-      case reactIsExports$1.Memo:
+      case reactIsExports$2.Memo:
         return getWrappedName$1(Component, Component.type, "memo");
       default:
         return void 0;
@@ -18666,6 +18640,12 @@ function isStringTag$1(tag) {
 function shouldForwardProp$1(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 const systemDefaultTheme$2 = createStyled$2.systemDefaultTheme = (0, _createTheme.default)();
 const lowercaseFirstLetter$1 = (string) => {
   if (!string) {
@@ -18686,7 +18666,7 @@ function defaultOverridesResolver$1(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
+function processStyleArg(callableStyle, _ref, layerName) {
   let {
     ownerState
   } = _ref, props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded$z);
@@ -18696,7 +18676,7 @@ function processStyleArg(callableStyle, _ref) {
   if (Array.isArray(resolvedStylesArg)) {
     return resolvedStylesArg.flatMap((resolvedStyle) => processStyleArg(resolvedStyle, (0, _extends2.default)({
       ownerState
-    }, props)));
+    }, props), layerName));
   }
   if (!!resolvedStylesArg && typeof resolvedStylesArg === "object" && Array.isArray(resolvedStylesArg.variants)) {
     const {
@@ -18720,14 +18700,15 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === "function" ? variant.style((0, _extends2.default)({
+        const variantStyle = typeof variant.style === "function" ? variant.style((0, _extends2.default)({
           ownerState
-        }, props, ownerState)) : variant.style);
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(variantStyle), layerName) : variantStyle);
       }
     });
     return result;
   }
-  return resolvedStylesArg;
+  return layerName ? shallowLayer((0, _styledEngine.internal_serializeStyles)(resolvedStylesArg), layerName) : resolvedStylesArg;
 }
 function createStyled$1(input = {}) {
   const {
@@ -18756,6 +18737,7 @@ function createStyled$1(input = {}) {
       // For more details: https://github.com/mui/material-ui/pull/37908
       overridesResolver = defaultOverridesResolver$1(lowercaseFirstLetter$1(componentSlot))
     } = inputOptions, options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded3$1);
+    const layerName = componentName && componentName.startsWith("Mui") || !!componentSlot ? "components" : "custom";
     const skipVariantsResolver = inputSkipVariantsResolver !== void 0 ? inputSkipVariantsResolver : (
       // TODO v6: remove `Root` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
@@ -18782,13 +18764,16 @@ function createStyled$1(input = {}) {
     }, options));
     const transformStyleArg = (stylesArg) => {
       if (typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg || (0, _deepmerge.isPlainObject)(stylesArg)) {
-        return (props) => processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
-          theme: resolveTheme({
+        return (props) => {
+          const theme = resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
-          })
-        }));
+          });
+          return processStyleArg(stylesArg, (0, _extends2.default)({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : void 0);
+        };
       }
       return stylesArg;
     };
@@ -18809,7 +18794,7 @@ function createStyled$1(input = {}) {
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
             resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, (0, _extends2.default)({}, props, {
               theme
-            }));
+            }), theme.modularCssLayers ? "theme" : void 0);
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -18826,7 +18811,7 @@ function createStyled$1(input = {}) {
             variants: themeVariants
           }, (0, _extends2.default)({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -19794,7 +19779,7 @@ function getIconUtilityClass$1(slot) {
 generateUtilityClasses$1("MuiIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 const _excluded$u = ["baseClassName", "className", "color", "component", "fontSize"];
-const useUtilityClasses$Z = (ownerState) => {
+const useUtilityClasses$_ = (ownerState) => {
   const {
     color,
     fontSize,
@@ -19866,7 +19851,7 @@ const Icon$1 = /* @__PURE__ */ React$1.forwardRef(function Icon2(inProps, ref) {
     component: Component,
     fontSize
   });
-  const classes = useUtilityClasses$Z(ownerState);
+  const classes = useUtilityClasses$_(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(IconRoot$1, _extends$1({
     as: Component,
     className: clsx(
@@ -21390,6 +21375,318 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui")
   return result;
 }
+var reactIs$1 = {exports: {}};
+var reactIs_production_min$1 = {};
+var hasRequiredReactIs_production_min$1;
+function requireReactIs_production_min$1 () {
+	if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
+	hasRequiredReactIs_production_min$1 = 1;
+	/**
+	 * @license React
+	 * react-is.production.min.js
+	 *
+	 * Copyright (c) Facebook, Inc. and its affiliates.
+	 *
+	 * This source code is licensed under the MIT license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	var b = Symbol.for("react.element"), c = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), e = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), g = Symbol.for("react.provider"), h = Symbol.for("react.context"), k = Symbol.for("react.server_context"), l = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), n = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), t = Symbol.for("react.offscreen"), u;
+	u = Symbol.for("react.module.reference");
+	function v(a) {
+	  if ("object" === typeof a && null !== a) {
+	    var r = a.$$typeof;
+	    switch (r) {
+	      case b:
+	        switch (a = a.type, a) {
+	          case d:
+	          case f:
+	          case e:
+	          case m:
+	          case n:
+	            return a;
+	          default:
+	            switch (a = a && a.$$typeof, a) {
+	              case k:
+	              case h:
+	              case l:
+	              case q:
+	              case p:
+	              case g:
+	                return a;
+	              default:
+	                return r;
+	            }
+	        }
+	      case c:
+	        return r;
+	    }
+	  }
+	}
+	reactIs_production_min$1.ContextConsumer = h;
+	reactIs_production_min$1.ContextProvider = g;
+	reactIs_production_min$1.Element = b;
+	reactIs_production_min$1.ForwardRef = l;
+	reactIs_production_min$1.Fragment = d;
+	reactIs_production_min$1.Lazy = q;
+	reactIs_production_min$1.Memo = p;
+	reactIs_production_min$1.Portal = c;
+	reactIs_production_min$1.Profiler = f;
+	reactIs_production_min$1.StrictMode = e;
+	reactIs_production_min$1.Suspense = m;
+	reactIs_production_min$1.SuspenseList = n;
+	reactIs_production_min$1.isAsyncMode = function() {
+	  return false;
+	};
+	reactIs_production_min$1.isConcurrentMode = function() {
+	  return false;
+	};
+	reactIs_production_min$1.isContextConsumer = function(a) {
+	  return v(a) === h;
+	};
+	reactIs_production_min$1.isContextProvider = function(a) {
+	  return v(a) === g;
+	};
+	reactIs_production_min$1.isElement = function(a) {
+	  return "object" === typeof a && null !== a && a.$$typeof === b;
+	};
+	reactIs_production_min$1.isForwardRef = function(a) {
+	  return v(a) === l;
+	};
+	reactIs_production_min$1.isFragment = function(a) {
+	  return v(a) === d;
+	};
+	reactIs_production_min$1.isLazy = function(a) {
+	  return v(a) === q;
+	};
+	reactIs_production_min$1.isMemo = function(a) {
+	  return v(a) === p;
+	};
+	reactIs_production_min$1.isPortal = function(a) {
+	  return v(a) === c;
+	};
+	reactIs_production_min$1.isProfiler = function(a) {
+	  return v(a) === f;
+	};
+	reactIs_production_min$1.isStrictMode = function(a) {
+	  return v(a) === e;
+	};
+	reactIs_production_min$1.isSuspense = function(a) {
+	  return v(a) === m;
+	};
+	reactIs_production_min$1.isSuspenseList = function(a) {
+	  return v(a) === n;
+	};
+	reactIs_production_min$1.isValidElementType = function(a) {
+	  return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? true : false;
+	};
+	reactIs_production_min$1.typeOf = v;
+	return reactIs_production_min$1;
+}
+var reactIs_development$1 = {};
+var hasRequiredReactIs_development$1;
+function requireReactIs_development$1 () {
+	if (hasRequiredReactIs_development$1) return reactIs_development$1;
+	hasRequiredReactIs_development$1 = 1;
+	/**
+	 * @license React
+	 * react-is.development.js
+	 *
+	 * Copyright (c) Facebook, Inc. and its affiliates.
+	 *
+	 * This source code is licensed under the MIT license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+	    var REACT_ELEMENT_TYPE = Symbol.for("react.element");
+	    var REACT_PORTAL_TYPE = Symbol.for("react.portal");
+	    var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	    var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
+	    var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+	    var REACT_PROVIDER_TYPE = Symbol.for("react.provider");
+	    var REACT_CONTEXT_TYPE = Symbol.for("react.context");
+	    var REACT_SERVER_CONTEXT_TYPE = Symbol.for("react.server_context");
+	    var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+	    var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
+	    var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
+	    var REACT_MEMO_TYPE = Symbol.for("react.memo");
+	    var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+	    var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
+	    var enableScopeAPI = false;
+	    var enableCacheElement = false;
+	    var enableTransitionTracing = false;
+	    var enableLegacyHidden = false;
+	    var enableDebugTracing = false;
+	    var REACT_MODULE_REFERENCE;
+	    {
+	      REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
+	    }
+	    function isValidElementType(type) {
+	      if (typeof type === "string" || typeof type === "function") {
+	        return true;
+	      }
+	      if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
+	        return true;
+	      }
+	      if (typeof type === "object" && type !== null) {
+	        if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+	        // types supported by any Flight configuration anywhere since
+	        // we don't know which Flight build this will end up being used
+	        // with.
+	        type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== void 0) {
+	          return true;
+	        }
+	      }
+	      return false;
+	    }
+	    function typeOf(object) {
+	      if (typeof object === "object" && object !== null) {
+	        var $$typeof = object.$$typeof;
+	        switch ($$typeof) {
+	          case REACT_ELEMENT_TYPE:
+	            var type = object.type;
+	            switch (type) {
+	              case REACT_FRAGMENT_TYPE:
+	              case REACT_PROFILER_TYPE:
+	              case REACT_STRICT_MODE_TYPE:
+	              case REACT_SUSPENSE_TYPE:
+	              case REACT_SUSPENSE_LIST_TYPE:
+	                return type;
+	              default:
+	                var $$typeofType = type && type.$$typeof;
+	                switch ($$typeofType) {
+	                  case REACT_SERVER_CONTEXT_TYPE:
+	                  case REACT_CONTEXT_TYPE:
+	                  case REACT_FORWARD_REF_TYPE:
+	                  case REACT_LAZY_TYPE:
+	                  case REACT_MEMO_TYPE:
+	                  case REACT_PROVIDER_TYPE:
+	                    return $$typeofType;
+	                  default:
+	                    return $$typeof;
+	                }
+	            }
+	          case REACT_PORTAL_TYPE:
+	            return $$typeof;
+	        }
+	      }
+	      return void 0;
+	    }
+	    var ContextConsumer = REACT_CONTEXT_TYPE;
+	    var ContextProvider = REACT_PROVIDER_TYPE;
+	    var Element = REACT_ELEMENT_TYPE;
+	    var ForwardRef = REACT_FORWARD_REF_TYPE;
+	    var Fragment = REACT_FRAGMENT_TYPE;
+	    var Lazy = REACT_LAZY_TYPE;
+	    var Memo = REACT_MEMO_TYPE;
+	    var Portal = REACT_PORTAL_TYPE;
+	    var Profiler = REACT_PROFILER_TYPE;
+	    var StrictMode = REACT_STRICT_MODE_TYPE;
+	    var Suspense = REACT_SUSPENSE_TYPE;
+	    var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	    var hasWarnedAboutDeprecatedIsAsyncMode = false;
+	    var hasWarnedAboutDeprecatedIsConcurrentMode = false;
+	    function isAsyncMode(object) {
+	      {
+	        if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+	          hasWarnedAboutDeprecatedIsAsyncMode = true;
+	          console["warn"]("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.");
+	        }
+	      }
+	      return false;
+	    }
+	    function isConcurrentMode(object) {
+	      {
+	        if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+	          hasWarnedAboutDeprecatedIsConcurrentMode = true;
+	          console["warn"]("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.");
+	        }
+	      }
+	      return false;
+	    }
+	    function isContextConsumer(object) {
+	      return typeOf(object) === REACT_CONTEXT_TYPE;
+	    }
+	    function isContextProvider(object) {
+	      return typeOf(object) === REACT_PROVIDER_TYPE;
+	    }
+	    function isElement(object) {
+	      return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	    }
+	    function isForwardRef(object) {
+	      return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	    }
+	    function isFragment(object) {
+	      return typeOf(object) === REACT_FRAGMENT_TYPE;
+	    }
+	    function isLazy(object) {
+	      return typeOf(object) === REACT_LAZY_TYPE;
+	    }
+	    function isMemo(object) {
+	      return typeOf(object) === REACT_MEMO_TYPE;
+	    }
+	    function isPortal(object) {
+	      return typeOf(object) === REACT_PORTAL_TYPE;
+	    }
+	    function isProfiler(object) {
+	      return typeOf(object) === REACT_PROFILER_TYPE;
+	    }
+	    function isStrictMode(object) {
+	      return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	    }
+	    function isSuspense(object) {
+	      return typeOf(object) === REACT_SUSPENSE_TYPE;
+	    }
+	    function isSuspenseList(object) {
+	      return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	    }
+	    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.SuspenseList = SuspenseList;
+	    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.isSuspenseList = isSuspenseList;
+	    reactIs_development$1.isValidElementType = isValidElementType;
+	    reactIs_development$1.typeOf = typeOf;
+	  })();
+	}
+	return reactIs_development$1;
+}
+if (process.env.NODE_ENV === "production") {
+  reactIs$1.exports = requireReactIs_production_min$1();
+} else {
+  reactIs$1.exports = requireReactIs_development$1();
+}
+var reactIsExports$1 = reactIs$1.exports;
 function getFunctionComponentName(Component, fallback = "") {
   return Component.displayName || Component.name || fallback;
 }
@@ -22115,6 +22412,17 @@ function useId(idOverride) {
   return useGlobalId(idOverride);
 }
+function unsupportedProp(props, propName, componentName, location, propFullName) {
+  if (process.env.NODE_ENV === "production") {
+    return null;
+  }
+  const propFullNameSafe = propFullName || propName;
+  if (typeof props[propName] !== "undefined") {
+    return new Error(`The prop \`${propFullNameSafe}\` is not supported. Please remove it.`);
+  }
+  return null;
+}
 function useControlled({
   controlled,
   default: defaultProp,
@@ -25112,7 +25420,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$Y = (ownerState) => {
+const useUtilityClasses$Z = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -25252,7 +25560,7 @@ const Typography$1 = /* @__PURE__ */ React$1.forwardRef(function Typography2(inP
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping$1[variant]) || "span";
-  const classes = useUtilityClasses$Y(ownerState);
+  const classes = useUtilityClasses$Z(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot$1, {
     as: Component,
     ref,
@@ -26467,7 +26775,7 @@ function getButtonBaseUtilityClass$1(slot) {
 }
 const buttonBaseClasses$1 = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$X = (ownerState) => {
+const useUtilityClasses$Y = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -26696,7 +27004,7 @@ const ButtonBase$1 = /* @__PURE__ */ React$1.forwardRef(function ButtonBase2(inP
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$X(ownerState);
+  const classes = useUtilityClasses$Y(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot$1, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -26890,7 +27198,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge"]);
-const useUtilityClasses$W = (ownerState) => {
+const useUtilityClasses$X = (ownerState) => {
   const {
     classes,
     disabled,
@@ -27036,7 +27344,7 @@ const IconButton$1 = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inP
     disableFocusRipple,
     size
   };
-  const classes = useUtilityClasses$W(ownerState);
+  const classes = useUtilityClasses$X(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonRoot, {
     className: clsx(classes.root, className),
     centerRipple: true,
@@ -27121,7 +27429,7 @@ function getSvgIconUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$V = (ownerState) => {
+const useUtilityClasses$W = (ownerState) => {
   const {
     color,
     fontSize,
@@ -27260,7 +27568,7 @@ const SvgIcon$1 = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps,
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$V(ownerState);
+  const classes = useUtilityClasses$W(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -27380,7 +27688,7 @@ function getListUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
-const useUtilityClasses$U = (ownerState) => {
+const useUtilityClasses$V = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -27446,7 +27754,7 @@ const List$1 = /* @__PURE__ */ React$1.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$U(ownerState);
+  const classes = useUtilityClasses$V(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext$1.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot$1, {
@@ -27990,7 +28298,7 @@ const inputOverridesResolver$1 = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === "small" && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === "search" && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$T = (ownerState) => {
+const useUtilityClasses$U = (ownerState) => {
   const {
     classes,
     color,
@@ -28394,7 +28702,7 @@ const InputBase$1 = /* @__PURE__ */ React$1.forwardRef(function InputBase2(inPro
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot$1;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
@@ -28695,7 +29003,7 @@ const inputClasses$1 = {
   ...generateUtilityClasses("MuiInput", ["root", "underline", "input"])
 };
-const useUtilityClasses$S = (ownerState) => {
+const useUtilityClasses$T = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -28828,7 +29136,7 @@ const Input$1 = /* @__PURE__ */ React$1.forwardRef(function Input2(inProps, ref)
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$S(props);
+  const classes = useUtilityClasses$T(props);
   const ownerState = {
     disableUnderline
   };
@@ -29052,7 +29360,7 @@ const filledInputClasses$1 = {
   ...generateUtilityClasses("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
 };
-const useUtilityClasses$R = (ownerState) => {
+const useUtilityClasses$S = (ownerState) => {
   const {
     classes,
     disableUnderline,
@@ -29331,7 +29639,7 @@ const FilledInput$1 = /* @__PURE__ */ React$1.forwardRef(function FilledInput2(i
     multiline,
     type
   };
-  const classes = useUtilityClasses$R(props);
+  const classes = useUtilityClasses$S(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -29706,7 +30014,7 @@ const outlinedInputClasses$1 = {
   ...generateUtilityClasses("MuiOutlinedInput", ["root", "notchedOutline", "input"])
 };
-const useUtilityClasses$Q = (ownerState) => {
+const useUtilityClasses$R = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -29885,7 +30193,7 @@ const OutlinedInput$1 = /* @__PURE__ */ React$1.forwardRef(function OutlinedInpu
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$Q(props);
+  const classes = useUtilityClasses$R(props);
   const muiFormControl = useFormControl$1();
   const fcs = formControlState$1({
     props,
@@ -30106,7 +30414,7 @@ function getFormLabelUtilityClasses$1(slot) {
 }
 const formLabelClasses$1 = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
-const useUtilityClasses$P = (ownerState) => {
+const useUtilityClasses$Q = (ownerState) => {
   const {
     classes,
     color,
@@ -30207,7 +30515,7 @@ const FormLabel$1 = /* @__PURE__ */ React$1.forwardRef(function FormLabel2(inPro
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot$1, {
     as: component,
     ownerState,
@@ -30281,7 +30589,7 @@ function getInputLabelUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
-const useUtilityClasses$O = (ownerState) => {
+const useUtilityClasses$P = (ownerState) => {
   const {
     classes,
     formControl,
@@ -30470,7 +30778,7 @@ const InputLabel$1 = /* @__PURE__ */ React$1.forwardRef(function InputLabel2(inP
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot$1, {
     "data-shrink": shrink,
     ref,
@@ -30553,7 +30861,7 @@ function getFormControlUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
-const useUtilityClasses$N = (ownerState) => {
+const useUtilityClasses$O = (ownerState) => {
   const {
     classes,
     margin,
@@ -30646,7 +30954,7 @@ const FormControl$1 = /* @__PURE__ */ React$1.forwardRef(function FormControl2(i
     size,
     variant
   };
-  const classes = useUtilityClasses$N(ownerState);
+  const classes = useUtilityClasses$O(ownerState);
   const [adornedStart, setAdornedStart] = React$1.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -30822,7 +31130,7 @@ function getFormHelperTextUtilityClasses$1(slot) {
 const formHelperTextClasses$1 = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 var _span$5;
-const useUtilityClasses$M = (ownerState) => {
+const useUtilityClasses$N = (ownerState) => {
   const {
     classes,
     contained,
@@ -30917,7 +31225,7 @@ const FormHelperText$1 = /* @__PURE__ */ React$1.forwardRef(function FormHelperT
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$M(ownerState);
+  const classes = useUtilityClasses$N(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -32012,7 +32320,7 @@ const removeOwnerState = (props) => {
   } = props;
   return rest;
 };
-const useUtilityClasses$L = (ownerState) => {
+const useUtilityClasses$M = (ownerState) => {
   const {
     classes,
     invisible
@@ -32075,7 +32383,7 @@ const Backdrop$1 = /* @__PURE__ */ React$1.forwardRef(function Backdrop2(inProps
     component,
     invisible
   };
-  const classes = useUtilityClasses$L(ownerState);
+  const classes = useUtilityClasses$M(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -32373,7 +32681,7 @@ function getModalUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
-const useUtilityClasses$K = (ownerState) => {
+const useUtilityClasses$L = (ownerState) => {
   const {
     open,
     exited,
@@ -32484,7 +32792,7 @@ const Modal$1 = /* @__PURE__ */ React$1.forwardRef(function Modal2(inProps, ref)
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -32749,7 +33057,7 @@ function getPaperUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$J = (ownerState) => {
+const useUtilityClasses$K = (ownerState) => {
   const {
     square,
     elevation,
@@ -32821,7 +33129,7 @@ const Paper$1 = /* @__PURE__ */ React$1.forwardRef(function Paper2(inProps, ref)
     square,
     variant
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
@@ -32937,7 +33245,7 @@ function getTransformOriginValue$1(transformOrigin) {
 function resolveAnchorEl$1(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$I = (ownerState) => {
+const useUtilityClasses$J = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -33019,7 +33327,7 @@ const Popover$1 = /* @__PURE__ */ React$1.forwardRef(function Popover2(inProps,
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   const getAnchorOffset = React$1.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -33429,7 +33737,7 @@ const LTR_ORIGIN$1 = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$H = (ownerState) => {
+const useUtilityClasses$I = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -33503,7 +33811,7 @@ const Menu$1 = /* @__PURE__ */ React$1.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$1.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -33702,7 +34010,7 @@ function getNativeSelectUtilityClasses$1(slot) {
 }
 const nativeSelectClasses$1 = generateUtilityClasses("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
-const useUtilityClasses$G = (ownerState) => {
+const useUtilityClasses$H = (ownerState) => {
   const {
     classes,
     variant,
@@ -33857,7 +34165,7 @@ const NativeSelectInput$1 = /* @__PURE__ */ React$1.forwardRef(function NativeSe
     variant,
     error
   };
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$1.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect$1, {
       ownerState,
@@ -34002,7 +34310,7 @@ function areEqualValues$1(a, b) {
 function isEmpty$3(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$F = (ownerState) => {
+const useUtilityClasses$G = (ownerState) => {
   const {
     classes,
     variant,
@@ -34320,7 +34628,7 @@ const SelectInput$1 = /* @__PURE__ */ React$1.forwardRef(function SelectInput2(p
     open,
     error
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...MenuProps.slotProps?.paper
@@ -34556,7 +34864,7 @@ const ArrowDropDownIcon$1 = createSvgIcon$1(/* @__PURE__ */ jsxRuntimeExports.js
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
-const useUtilityClasses$E = (ownerState) => {
+const useUtilityClasses$F = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -34613,7 +34921,7 @@ const Select$2 = /* @__PURE__ */ React$1.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const {
     root,
     ...restOfClasses
@@ -34837,7 +35145,7 @@ const variantComponent$1 = {
   filled: FilledInput$1,
   outlined: OutlinedInput$1
 };
-const useUtilityClasses$D = (ownerState) => {
+const useUtilityClasses$E = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -34905,7 +35213,7 @@ const TextField$1 = /* @__PURE__ */ React$1.forwardRef(function TextField2(inPro
     select,
     variant
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -35235,7 +35543,7 @@ const overridesResolver$1 = (props, styles) => {
   } = props;
   return [styles.root, styles[`position${capitalize(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
 };
-const useUtilityClasses$C = (ownerState) => {
+const useUtilityClasses$D = (ownerState) => {
   const {
     classes,
     disablePointerEvents,
@@ -35328,7 +35636,7 @@ const InputAdornment = /* @__PURE__ */ React$1.forwardRef(function InputAdornmen
     position,
     variant
   };
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormControlContext$1.Provider, {
     value: null,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornmentRoot, {
@@ -35416,7 +35724,7 @@ if (process.env.NODE_ENV !== "production") {
   ButtonGroupButtonContext$1.displayName = "ButtonGroupButtonContext";
 }
-const useUtilityClasses$B = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -35745,7 +36053,7 @@ const Button$2 = /* @__PURE__ */ React$1.forwardRef(function Button2(inProps, re
     type,
     variant
   };
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   const startIcon = startIconProp && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon$1, {
     className: classes.startIcon,
     ownerState,
@@ -35878,7 +36186,7 @@ function getListItemSecondaryActionClassesUtilityClass(slot) {
 }
 generateUtilityClasses("MuiListItemSecondaryAction", ["root", "disableGutters"]);
-const useUtilityClasses$A = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     disableGutters,
     classes
@@ -35925,7 +36233,7 @@ const ListItemSecondaryAction = /* @__PURE__ */ React$1.forwardRef(function List
     ...props,
     disableGutters: context.disableGutters
   };
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -35963,7 +36271,7 @@ const overridesResolver = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === "flex-start" && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.hasSecondaryAction && styles.secondaryAction];
 };
-const useUtilityClasses$z = (ownerState) => {
+const useUtilityClasses$A = (ownerState) => {
   const {
     alignItems,
     classes,
@@ -36130,7 +36438,7 @@ const ListItem = /* @__PURE__ */ React$1.forwardRef(function ListItem2(inProps,
     divider,
     hasSecondaryAction
   };
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
@@ -36311,6 +36619,563 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes = {
   sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object])
 } : void 0;
+const CancelIcon = createSvgIcon$1(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+}), "Cancel");
+function getChipUtilityClass(slot) {
+  return generateUtilityClass("MuiChip", slot);
+}
+const chipClasses = generateUtilityClasses("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]);
+const useUtilityClasses$z = (ownerState) => {
+  const {
+    classes,
+    disabled,
+    size,
+    color,
+    iconColor,
+    onDelete,
+    clickable,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ["root", variant, disabled && "disabled", `size${capitalize(size)}`, `color${capitalize(color)}`, clickable && "clickable", clickable && `clickableColor${capitalize(color)}`, onDelete && "deletable", onDelete && `deletableColor${capitalize(color)}`, `${variant}${capitalize(color)}`],
+    label: ["label", `label${capitalize(size)}`],
+    avatar: ["avatar", `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],
+    icon: ["icon", `icon${capitalize(size)}`, `iconColor${capitalize(iconColor)}`],
+    deleteIcon: ["deleteIcon", `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, `deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+  };
+  return composeClasses(slots, getChipUtilityClass, classes);
+};
+const ChipRoot = styled("div", {
+  name: "MuiChip",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      color,
+      iconColor,
+      clickable,
+      onDelete,
+      size,
+      variant
+    } = ownerState;
+    return [{
+      [`& .${chipClasses.avatar}`]: styles.avatar
+    }, {
+      [`& .${chipClasses.avatar}`]: styles[`avatar${capitalize(size)}`]
+    }, {
+      [`& .${chipClasses.avatar}`]: styles[`avatarColor${capitalize(color)}`]
+    }, {
+      [`& .${chipClasses.icon}`]: styles.icon
+    }, {
+      [`& .${chipClasses.icon}`]: styles[`icon${capitalize(size)}`]
+    }, {
+      [`& .${chipClasses.icon}`]: styles[`iconColor${capitalize(iconColor)}`]
+    }, {
+      [`& .${chipClasses.deleteIcon}`]: styles.deleteIcon
+    }, {
+      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(size)}`]
+    }, {
+      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
+    }, {
+      [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
+    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== "default" && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== "default" && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  const textColor = theme.palette.mode === "light" ? theme.palette.grey[700] : theme.palette.grey[300];
+  return {
+    maxWidth: "100%",
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.pxToRem(13),
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 32,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
+    borderRadius: 32 / 2,
+    whiteSpace: "nowrap",
+    transition: theme.transitions.create(["background-color", "box-shadow"]),
+    // reset cursor explicitly in case ButtonBase is used
+    cursor: "unset",
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    textDecoration: "none",
+    border: 0,
+    // Remove `button` border
+    padding: 0,
+    // Remove `button` padding
+    verticalAlign: "middle",
+    boxSizing: "border-box",
+    [`&.${chipClasses.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      pointerEvents: "none"
+    },
+    [`& .${chipClasses.avatar}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+      width: 24,
+      height: 24,
+      color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
+      fontSize: theme.typography.pxToRem(12)
+    },
+    [`& .${chipClasses.avatarColorPrimary}`]: {
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    },
+    [`& .${chipClasses.avatarColorSecondary}`]: {
+      color: (theme.vars || theme).palette.secondary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.secondary.dark
+    },
+    [`& .${chipClasses.avatarSmall}`]: {
+      marginLeft: 4,
+      marginRight: -4,
+      width: 18,
+      height: 18,
+      fontSize: theme.typography.pxToRem(10)
+    },
+    [`& .${chipClasses.icon}`]: {
+      marginLeft: 5,
+      marginRight: -6
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+      WebkitTapHighlightColor: "transparent",
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
+      fontSize: 22,
+      cursor: "pointer",
+      margin: "0 5px 0 -6px",
+      "&:hover": {
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+      }
+    },
+    variants: [{
+      props: {
+        size: "small"
+      },
+      style: {
+        height: 24,
+        [`& .${chipClasses.icon}`]: {
+          fontSize: 18,
+          marginLeft: 4,
+          marginRight: -4
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
+          fontSize: 16,
+          marginRight: 4,
+          marginLeft: -4
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["contrastText"])).map(([color]) => {
+      return {
+        props: {
+          color
+        },
+        style: {
+          backgroundColor: (theme.vars || theme).palette[color].main,
+          color: (theme.vars || theme).palette[color].contrastText,
+          [`& .${chipClasses.deleteIcon}`]: {
+            color: theme.vars ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)` : alpha(theme.palette[color].contrastText, 0.7),
+            "&:hover, &:active": {
+              color: (theme.vars || theme).palette[color].contrastText
+            }
+          }
+        }
+      };
+    }), {
+      props: (props) => props.iconColor === props.color,
+      style: {
+        [`& .${chipClasses.icon}`]: {
+          color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+        }
+      }
+    }, {
+      props: (props) => props.iconColor === props.color && props.color !== "default",
+      style: {
+        [`& .${chipClasses.icon}`]: {
+          color: "inherit"
+        }
+      }
+    }, {
+      props: {
+        onDelete: true
+      },
+      style: {
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["dark"])).map(([color]) => {
+      return {
+        props: {
+          color,
+          onDelete: true
+        },
+        style: {
+          [`&.${chipClasses.focusVisible}`]: {
+            background: (theme.vars || theme).palette[color].dark
+          }
+        }
+      };
+    }), {
+      props: {
+        clickable: true
+      },
+      style: {
+        userSelect: "none",
+        WebkitTapHighlightColor: "transparent",
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+        },
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        },
+        "&:active": {
+          boxShadow: (theme.vars || theme).shadows[1]
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["dark"])).map(([color]) => ({
+      props: {
+        color,
+        clickable: true
+      },
+      style: {
+        [`&:hover, &.${chipClasses.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        }
+      }
+    })), {
+      props: {
+        variant: "outlined"
+      },
+      style: {
+        backgroundColor: "transparent",
+        border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === "light" ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+        [`&.${chipClasses.clickable}:hover`]: {
+          backgroundColor: (theme.vars || theme).palette.action.hover
+        },
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette.action.focus
+        },
+        [`& .${chipClasses.avatar}`]: {
+          marginLeft: 4
+        },
+        [`& .${chipClasses.avatarSmall}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.icon}`]: {
+          marginLeft: 4
+        },
+        [`& .${chipClasses.iconSmall}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
+          marginRight: 5
+        },
+        [`& .${chipClasses.deleteIconSmall}`]: {
+          marginRight: 3
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+      props: {
+        variant: "outlined",
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main,
+        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7)}`,
+        [`&.${chipClasses.clickable}:hover`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        },
+        [`&.${chipClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[color].main, theme.palette.action.focusOpacity)
+        },
+        [`& .${chipClasses.deleteIcon}`]: {
+          color: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7),
+          "&:hover, &:active": {
+            color: (theme.vars || theme).palette[color].main
+          }
+        }
+      }
+    }))]
+  };
+}));
+const ChipLabel = styled("span", {
+  name: "MuiChip",
+  slot: "Label",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      size
+    } = ownerState;
+    return [styles.label, styles[`label${capitalize(size)}`]];
+  }
+})({
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  paddingLeft: 12,
+  paddingRight: 12,
+  whiteSpace: "nowrap",
+  variants: [{
+    props: {
+      variant: "outlined"
+    },
+    style: {
+      paddingLeft: 11,
+      paddingRight: 11
+    }
+  }, {
+    props: {
+      size: "small"
+    },
+    style: {
+      paddingLeft: 8,
+      paddingRight: 8
+    }
+  }, {
+    props: {
+      size: "small",
+      variant: "outlined"
+    },
+    style: {
+      paddingLeft: 7,
+      paddingRight: 7
+    }
+  }]
+});
+function isDeleteKeyboardEvent(keyboardEvent) {
+  return keyboardEvent.key === "Backspace" || keyboardEvent.key === "Delete";
+}
+const Chip = /* @__PURE__ */ React$1.forwardRef(function Chip2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiChip"
+  });
+  const {
+    avatar: avatarProp,
+    className,
+    clickable: clickableProp,
+    color = "default",
+    component: ComponentProp,
+    deleteIcon: deleteIconProp,
+    disabled = false,
+    icon: iconProp,
+    label,
+    onClick,
+    onDelete,
+    onKeyDown,
+    onKeyUp,
+    size = "medium",
+    variant = "filled",
+    tabIndex,
+    skipFocusWhenDisabled = false,
+    // TODO v6: Rename to `focusableWhenDisabled`.
+    ...other
+  } = props;
+  const chipRef = React$1.useRef(null);
+  const handleRef = useForkRef(chipRef, ref);
+  const handleDeleteIconClick = (event) => {
+    event.stopPropagation();
+    if (onDelete) {
+      onDelete(event);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
+      event.preventDefault();
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (event.currentTarget === event.target) {
+      if (onDelete && isDeleteKeyboardEvent(event)) {
+        onDelete(event);
+      }
+    }
+    if (onKeyUp) {
+      onKeyUp(event);
+    }
+  };
+  const clickable = clickableProp !== false && onClick ? true : clickableProp;
+  const component = clickable || onDelete ? ButtonBase$1 : ComponentProp || "div";
+  const ownerState = {
+    ...props,
+    component,
+    disabled,
+    size,
+    color,
+    iconColor: /* @__PURE__ */ React$1.isValidElement(iconProp) ? iconProp.props.color || color : color,
+    onDelete: !!onDelete,
+    clickable,
+    variant
+  };
+  const classes = useUtilityClasses$z(ownerState);
+  const moreProps = component === ButtonBase$1 ? {
+    component: ComponentProp || "div",
+    focusVisibleClassName: classes.focusVisible,
+    ...onDelete && {
+      disableRipple: true
+    }
+  } : {};
+  let deleteIcon = null;
+  if (onDelete) {
+    deleteIcon = deleteIconProp && /* @__PURE__ */ React$1.isValidElement(deleteIconProp) ? /* @__PURE__ */ React$1.cloneElement(deleteIconProp, {
+      className: clsx(deleteIconProp.props.className, classes.deleteIcon),
+      onClick: handleDeleteIconClick
+    }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CancelIcon, {
+      className: clsx(classes.deleteIcon),
+      onClick: handleDeleteIconClick
+    });
+  }
+  let avatar = null;
+  if (avatarProp && /* @__PURE__ */ React$1.isValidElement(avatarProp)) {
+    avatar = /* @__PURE__ */ React$1.cloneElement(avatarProp, {
+      className: clsx(classes.avatar, avatarProp.props.className)
+    });
+  }
+  let icon = null;
+  if (iconProp && /* @__PURE__ */ React$1.isValidElement(iconProp)) {
+    icon = /* @__PURE__ */ React$1.cloneElement(iconProp, {
+      className: clsx(classes.icon, iconProp.props.className)
+    });
+  }
+  if (process.env.NODE_ENV !== "production") {
+    if (avatar && icon) {
+      console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one.");
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ChipRoot, {
+    as: component,
+    className: clsx(classes.root, className),
+    disabled: clickable && disabled ? true : void 0,
+    onClick,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    ref: handleRef,
+    tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
+    ownerState,
+    ...moreProps,
+    ...other,
+    children: [avatar || icon, /* @__PURE__ */ jsxRuntimeExports.jsx(ChipLabel, {
+      className: clsx(classes.label),
+      ownerState,
+      children: label
+    }), deleteIcon]
+  });
+});
+process.env.NODE_ENV !== "production" ? Chip.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The Avatar element to display.
+   */
+  avatar: PropTypes$1.element,
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: unsupportedProp,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable: PropTypes$1.bool,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'default'
+   */
+  color: PropTypes$1.oneOfType([PropTypes$1.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes$1.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes$1.elementType,
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: PropTypes$1.element,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes$1.bool,
+  /**
+   * Icon element.
+   */
+  icon: PropTypes$1.element,
+  /**
+   * The content of the component.
+   */
+  label: PropTypes$1.node,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes$1.func,
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: PropTypes$1.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes$1.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: PropTypes$1.func,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes$1.oneOfType([PropTypes$1.oneOf(["medium", "small"]), PropTypes$1.string]),
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled: PropTypes$1.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object]),
+  /**
+   * @ignore
+   */
+  tabIndex: PropTypes$1.number,
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant: PropTypes$1.oneOfType([PropTypes$1.oneOf(["filled", "outlined"]), PropTypes$1.string])
+} : void 0;
 function getDialogContentUtilityClass(slot) {
   return generateUtilityClass("MuiDialogContent", slot);
 }
@@ -62806,7 +63671,7 @@ const PopularInstitutionsList = (props) => {
       InstituionGrid,
       {
         handleSelectInstitution,
-        institutions,
+        institutions: institutions.filter((institution) => !institution.is_disabled_by_client),
         posthogEvent: AnalyticEvents.SELECT_POPULAR_INSTITUTION
       }
     ) }),
@@ -62910,13 +63775,13 @@ const InstitutionTile = (props) => {
   const { institution, selectInstitution, size } = props;
   const tokens = useTokens();
   const styles = getStyles$1j(tokens);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Button$2,
     {
       "aria-label": __("Add account with %1", institution.name),
       className: "institutionButton ",
       "data-test": `${institution.name.replace(/\s+/g, "-")}-row`,
-      endIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { color: tokens.TextColor.Default, height: 16, width: 16 }),
+      endIcon: !institution.is_disabled_by_client && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { color: tokens.TextColor.Default, height: 16, width: 16 }),
       fullWidth: true,
       onClick: selectInstitution,
       startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -62957,10 +63822,13 @@ const InstitutionTile = (props) => {
           visibility: "visible"
         }
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.textColumn, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.name, children: institution.name }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.url, children: formatUrl(institution.url) })
-      ] })
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.textColumn, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.name, children: institution.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.url, children: formatUrl(institution.url) })
+        ] }),
+        institution.is_disabled_by_client && /* @__PURE__ */ jsxRuntimeExports.jsx(Chip, { color: "secondary", label: __("DISABLED"), size: "small", sx: styles.chip })
+      ]
     }
   );
 };
@@ -63016,6 +63884,12 @@ const getStyles$1j = (tokens) => {
       textOverflow: "ellipsis",
       overflow: "hidden",
       whiteSpace: "nowrap"
+    },
+    chip: {
+      padding: `${tokens.Spacing.XTiny}px 0`,
+      background: "#ECECEC",
+      color: "#494949",
+      height: tokens.Spacing.Medium
     }
   };
 };
@@ -81144,6 +82018,13 @@ const connectThemeOverrides = (palette) => ({
           fontFamily: "MaterialSymbolsRounded"
         }
       }
+    },
+    MuiChip: {
+      styleOverrides: {
+        label: {
+          fontWeight: 700
+        }
+      }
     }
   }
 });