@mxenabled/connect-widget 1.2.8 → 2.1.0

package/dist/index.es.js

@@ -5087,23 +5087,39 @@ function baseFindIndex$2(array, predicate, fromIndex, fromRight) {
 }
 var _baseFindIndex = baseFindIndex$2;
 
-var reWhitespace = /\s/;
-function trimmedEndIndex$1(string) {
-  var index = string.length;
-  while (index-- && reWhitespace.test(string.charAt(index))) {
-  }
-  return index;
+var _trimmedEndIndex;
+var hasRequired_trimmedEndIndex;
+
+function require_trimmedEndIndex () {
+	if (hasRequired_trimmedEndIndex) return _trimmedEndIndex;
+	hasRequired_trimmedEndIndex = 1;
+	var reWhitespace = /\s/;
+	function trimmedEndIndex(string) {
+	  var index = string.length;
+	  while (index-- && reWhitespace.test(string.charAt(index))) {
+	  }
+	  return index;
+	}
+	_trimmedEndIndex = trimmedEndIndex;
+	return _trimmedEndIndex;
 }
-var _trimmedEndIndex = trimmedEndIndex$1;
 
-var trimmedEndIndex = _trimmedEndIndex;
-var reTrimStart = /^\s+/;
-function baseTrim$1(string) {
-  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+var _baseTrim;
+var hasRequired_baseTrim;
+
+function require_baseTrim () {
+	if (hasRequired_baseTrim) return _baseTrim;
+	hasRequired_baseTrim = 1;
+	var trimmedEndIndex = require_trimmedEndIndex();
+	var reTrimStart = /^\s+/;
+	function baseTrim(string) {
+	  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+	}
+	_baseTrim = baseTrim;
+	return _baseTrim;
 }
-var _baseTrim = baseTrim$1;
 
-var baseTrim = _baseTrim, isObject$7 = isObject_1, isSymbol$1 = isSymbol_1;
+var baseTrim = require_baseTrim(), isObject$7 = isObject_1, isSymbol$1 = isSymbol_1;
 var NAN = 0 / 0;
 var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
 var reIsBinary = /^0b[01]+$/i;
@@ -5452,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 = {};
 
@@ -5560,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
 	 *
@@ -5692,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;
@@ -8559,7 +8575,7 @@ var hasRequiredTrim;
 function requireTrim () {
 	if (hasRequiredTrim) return trim_1;
 	hasRequiredTrim = 1;
-	var baseToString = _baseToString, baseTrim = _baseTrim, castSlice = require_castSlice(), charsEndIndex = require_charsEndIndex(), charsStartIndex = require_charsStartIndex(), stringToArray = require_stringToArray(), toString = toString_1;
+	var baseToString = _baseToString, baseTrim = require_baseTrim(), castSlice = require_castSlice(), charsEndIndex = require_charsEndIndex(), charsStartIndex = require_charsStartIndex(), stringToArray = require_stringToArray(), toString = toString_1;
 	function trim(string, chars, guard) {
 	  string = toString(string);
 	  if (string && (guard || chars === void 0)) {
@@ -15158,7 +15174,7 @@ var createCache = function createCache2(options) {
   return cache;
 };
 
-var reactIs$3 = {exports: {}};
+var reactIs$4 = {exports: {}};
 
 var reactIs_production_min$2 = {};
 
@@ -15266,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
 	 *
@@ -15398,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,
@@ -15456,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) {
@@ -16206,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.
@@ -16274,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,
@@ -16283,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' }));
 
@@ -16304,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 = {};
@@ -16319,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) {
@@ -17292,7 +17344,8 @@ function unstable_createStyleFunctionSx$1() {
     var _theme$unstable_sxCon;
     const {
       sx,
-      theme = {}
+      theme = {},
+      nested
     } = props || {};
     if (!sx) {
       return null;
@@ -17326,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);
@@ -17337,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);
@@ -17413,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
   });
@@ -17541,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_min$1.isStrictMode = function(a) {
-	  return v(a) === e;
-	};
-	reactIs_production_min$1.isSuspense = function(a) {
-	  return v(a) === m;
+	reactIs_production.isSuspense = function(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
 	};
-	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) {
@@ -17878,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;
@@ -18650,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) {
@@ -18670,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);
@@ -18680,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 {
@@ -18704,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 {
@@ -18740,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
@@ -18766,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;
     };
@@ -18793,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);
         });
@@ -18810,7 +18811,7 @@ function createStyled$1(input = {}) {
             variants: themeVariants
           }, (0, _extends2.default)({}, props, {
             theme
-          }));
+          }), theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -19778,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,
@@ -19850,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(
@@ -21374,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;
 }
@@ -22099,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,
@@ -25096,7 +25420,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$Y = (ownerState) => {
+const useUtilityClasses$Z = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -25236,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,
@@ -26451,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,
@@ -26680,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),
@@ -26874,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,
@@ -27020,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,
@@ -27105,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,
@@ -27244,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),
@@ -27364,7 +27688,7 @@ function getListUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
 
-const useUtilityClasses$U = (ownerState) => {
+const useUtilityClasses$V = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -27430,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, {
@@ -27734,7 +28058,7 @@ process.env.NODE_ENV !== "production" ? MenuList$1.propTypes = {
 function getStyleValue$1(value) {
   return parseInt(value, 10) || 0;
 }
-const styles$5 = {
+const styles$6 = {
   shadow: {
     // Visibility needed to hide the extra text area on iPads
     visibility: "hidden",
@@ -27873,7 +28197,7 @@ const TextareaAutosize$1 = /* @__PURE__ */ React$1.forwardRef(function TextareaA
       ref: shadowRef,
       tabIndex: -1,
       style: {
-        ...styles$5.shadow,
+        ...styles$6.shadow,
         ...style,
         paddingTop: 0,
         paddingBottom: 0
@@ -27974,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,
@@ -28378,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;
@@ -28679,7 +29003,7 @@ const inputClasses$1 = {
   ...generateUtilityClasses("MuiInput", ["root", "underline", "input"])
 };
 
-const useUtilityClasses$S = (ownerState) => {
+const useUtilityClasses$T = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -28812,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
   };
@@ -29036,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,
@@ -29315,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
@@ -29690,7 +30014,7 @@ const outlinedInputClasses$1 = {
   ...generateUtilityClasses("MuiOutlinedInput", ["root", "notchedOutline", "input"])
 };
 
-const useUtilityClasses$Q = (ownerState) => {
+const useUtilityClasses$R = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -29869,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,
@@ -30090,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,
@@ -30191,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,
@@ -30265,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,
@@ -30454,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,
@@ -30537,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,
@@ -30630,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) {
@@ -30806,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,
@@ -30901,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),
@@ -30993,7 +31317,7 @@ function getTransitionProps$1(props, options) {
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
-const styles$4 = {
+const styles$5 = {
   entering: {
     opacity: 1,
     transform: getScale$1(1)
@@ -31134,7 +31458,7 @@ const Grow$1 = /* @__PURE__ */ React$1.forwardRef(function Grow2(props, ref) {
           opacity: 0,
           transform: getScale$1(0.75),
           visibility: state === "exited" && !inProp ? "hidden" : void 0,
-          ...styles$4[state],
+          ...styles$5[state],
           ...style,
           ...children.props.style
         },
@@ -31798,7 +32122,7 @@ function useSlot(name, parameters) {
   return [elementType, props];
 }
 
-const styles$3 = {
+const styles$4 = {
   entering: {
     opacity: 1
   },
@@ -31898,7 +32222,7 @@ const Fade$1 = /* @__PURE__ */ React$1.forwardRef(function Fade2(props, ref) {
         style: {
           opacity: 0,
           visibility: state === "exited" && !inProp ? "hidden" : void 0,
-          ...styles$3[state],
+          ...styles$4[state],
           ...style,
           ...children.props.style
         },
@@ -31996,7 +32320,7 @@ const removeOwnerState = (props) => {
   } = props;
   return rest;
 };
-const useUtilityClasses$L = (ownerState) => {
+const useUtilityClasses$M = (ownerState) => {
   const {
     classes,
     invisible
@@ -32059,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,
@@ -32357,7 +32681,7 @@ function getModalUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
 
-const useUtilityClasses$K = (ownerState) => {
+const useUtilityClasses$L = (ownerState) => {
   const {
     open,
     exited,
@@ -32468,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";
@@ -32733,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,
@@ -32805,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"));
@@ -32921,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;
@@ -33003,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") {
@@ -33413,7 +33737,7 @@ const LTR_ORIGIN$1 = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$H = (ownerState) => {
+const useUtilityClasses$I = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -33487,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) => {
@@ -33686,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,
@@ -33841,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,
@@ -33986,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,
@@ -34304,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
@@ -34540,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;
@@ -34597,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
@@ -34821,7 +35145,7 @@ const variantComponent$1 = {
   filled: FilledInput$1,
   outlined: OutlinedInput$1
 };
-const useUtilityClasses$D = (ownerState) => {
+const useUtilityClasses$E = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -34889,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`.");
@@ -35219,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,
@@ -35312,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, {
@@ -35400,7 +35724,7 @@ if (process.env.NODE_ENV !== "production") {
   ButtonGroupButtonContext$1.displayName = "ButtonGroupButtonContext";
 }
 
-const useUtilityClasses$B = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -35729,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,
@@ -35862,7 +36186,7 @@ function getListItemSecondaryActionClassesUtilityClass(slot) {
 }
 generateUtilityClasses("MuiListItemSecondaryAction", ["root", "disableGutters"]);
 
-const useUtilityClasses$A = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     disableGutters,
     classes
@@ -35909,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,
@@ -35947,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,
@@ -36114,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 || {};
@@ -36295,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);
 }
@@ -39213,7 +40094,7 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 const _excluded$n = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
-const styles$2 = {
+const styles$3 = {
   entering: {
     opacity: 1
   },
@@ -39312,7 +40193,7 @@ const Fade = /* @__PURE__ */ React$1.forwardRef(function Fade2(props, ref) {
         style: _extends$1({
           opacity: 0,
           visibility: state === "exited" && !inProp ? "hidden" : void 0
-        }, styles$2[state], style, children.props.style),
+        }, styles$3[state], style, children.props.style),
         ref: handleRef
       }, childProps));
     }
@@ -40407,7 +41288,7 @@ const _excluded$i = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
-const styles$1 = {
+const styles$2 = {
   shadow: {
     // Visibility needed to hide the extra text area on iPads
     visibility: "hidden",
@@ -40543,7 +41424,7 @@ const TextareaAutosize = /* @__PURE__ */ React$1.forwardRef(function TextareaAut
       readOnly: true,
       ref: shadowRef,
       tabIndex: -1,
-      style: _extends$1({}, styles$1.shadow, style, {
+      style: _extends$1({}, styles$2.shadow, style, {
         paddingTop: 0,
         paddingBottom: 0
       })
@@ -43651,7 +44532,7 @@ const _excluded$6 = ["addEndListener", "appear", "children", "easing", "in", "on
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
 }
-const styles = {
+const styles$1 = {
   entering: {
     opacity: 1,
     transform: getScale(1)
@@ -43791,7 +44672,7 @@ const Grow = /* @__PURE__ */ React$1.forwardRef(function Grow2(props, ref) {
           opacity: 0,
           transform: getScale(0.75),
           visibility: state === "exited" && !inProp ? "hidden" : void 0
-        }, styles[state], style, children.props.style),
+        }, styles$1[state], style, children.props.style),
         ref: handleRef
       }, childProps));
     }
@@ -62790,7 +63671,7 @@ const PopularInstitutionsList = (props) => {
       InstituionGrid,
       {
         handleSelectInstitution,
-        institutions,
+        institutions: institutions.filter((institution) => !institution.is_disabled_by_client),
         posthogEvent: AnalyticEvents.SELECT_POPULAR_INSTITUTION
       }
     ) }),
@@ -62894,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(
@@ -62941,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 })
+      ]
     }
   );
 };
@@ -63000,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
     }
   };
 };
@@ -65648,6 +66538,11 @@ const focusElement = (element) => {
   }
 };
 
+const container = "_container_1pcxm_1";
+const styles = {
+	container: container
+};
+
 const initialState$1 = {
   currentView: SEARCH_VIEWS.LOADING,
   popularInstitutions: [],
@@ -65863,7 +66758,7 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
     }
   }, 500);
   const tokens = useTokens();
-  const styles = getStyles$13(tokens, state.currentView);
+  const inlineStyles = getStyles$13(tokens, state.currentView);
   if (state.currentView === SEARCH_VIEWS.OOPS) {
     throw state.error;
   }
@@ -65877,8 +66772,8 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.searchBar, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: inlineStyles.searchBar, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         x,
         {
@@ -65887,7 +66782,7 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
           component: "h2",
           "data-test": "search-header",
           id: "connect-search-header",
-          style: styles.headerText,
+          style: inlineStyles.headerText,
           tabIndex: -1,
           truncate: false,
           variant: "H2",
@@ -65913,7 +66808,7 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
                   searchInput.current.value = "";
                   searchInput.current.focus();
                 },
-                style: styles.resetButton,
+                style: inlineStyles.resetButton,
                 variant: "text",
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseOutline, {})
               }
@@ -65931,7 +66826,7 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
         }
       )
     ] }),
-    state.currentView === SEARCH_VIEWS.LOADING && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.spinner, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSpinner, {}) }),
+    state.currentView === SEARCH_VIEWS.LOADING && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: inlineStyles.spinner, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSpinner, {}) }),
     state.currentView === SEARCH_VIEWS.SEARCH_FAILED && /* @__PURE__ */ jsxRuntimeExports.jsx(SearchFailed, {}),
     state.currentView === SEARCH_VIEWS.NO_RESULTS && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SearchNoResult,
@@ -65948,7 +66843,7 @@ const Search$2 = React__default.forwardRef((props, navigationRef) => {
         setAriaLiveRegionMessage
       }
     ),
-    state.currentView === SEARCH_VIEWS.SEARCH_LOADING && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.spinner, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSpinner, {}) }),
+    state.currentView === SEARCH_VIEWS.SEARCH_LOADING && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: inlineStyles.spinner, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingSpinner, {}) }),
     state.currentView === SEARCH_VIEWS.SEARCHED && /* @__PURE__ */ jsxRuntimeExports.jsx(
       SearchedInstitutionsList,
       {
@@ -81123,6 +82018,13 @@ const connectThemeOverrides = (palette) => ({
           fontFamily: "MaterialSymbolsRounded"
         }
       }
+    },
+    MuiChip: {
+      styleOverrides: {
+        label: {
+          fontWeight: 700
+        }
+      }
     }
   }
 });