sevago-sso-fe 1.0.11 → 1.0.13

package/dist/index.cjs.js

@@ -10,6 +10,7 @@ const material = require("@mui/material");
 const system = require("@mui/system");
 const emStyled = require("@emotion/styled");
 require("@emotion/react");
+const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -468,7 +469,7 @@ const toObjectSet = (arrayOrString, delimiter) => {
   isArray$1(arrayOrString) ? define(arrayOrString) : define(String(arrayOrString).split(delimiter));
   return obj;
 };
-const noop$1 = () => {
+const noop$2 = () => {
 };
 const toFiniteNumber = (value2, defaultValue) => {
   return value2 != null && Number.isFinite(value2 = +value2) ? value2 : defaultValue;
@@ -571,7 +572,7 @@ const utils$1 = {
   freezeMethods,
   toObjectSet,
   toCamelCase,
-  noop: noop$1,
+  noop: noop$2,
   toFiniteNumber,
   findKey,
   global: _global,
@@ -584,7 +585,7 @@ const utils$1 = {
   asap,
   isIterable
 };
-function AxiosError$1(message, code, config, request, response) {
+function AxiosError$1(message, code, config2, request, response) {
   Error.call(this);
   if (Error.captureStackTrace) {
     Error.captureStackTrace(this, this.constructor);
@@ -594,7 +595,7 @@ function AxiosError$1(message, code, config, request, response) {
   this.message = message;
   this.name = "AxiosError";
   code && (this.code = code);
-  config && (this.config = config);
+  config2 && (this.config = config2);
   request && (this.request = request);
   if (response) {
     this.response = response;
@@ -643,7 +644,7 @@ const descriptors = {};
 });
 Object.defineProperties(AxiosError$1, descriptors);
 Object.defineProperty(prototype$1, "isAxiosError", { value: true });
-AxiosError$1.from = (error, code, config, request, response, customProps) => {
+AxiosError$1.from = (error, code, config2, request, response, customProps) => {
   const axiosError = Object.create(prototype$1);
   utils$1.toFlatObject(error, axiosError, function filter3(obj) {
     return obj !== Error.prototype;
@@ -652,7 +653,7 @@ AxiosError$1.from = (error, code, config, request, response, customProps) => {
   });
   const msg = error && error.message ? error.message : "Error";
   const errCode = code == null && error ? error.code : code;
-  AxiosError$1.call(axiosError, msg, errCode, config, request, response);
+  AxiosError$1.call(axiosError, msg, errCode, config2, request, response);
   if (error && axiosError.cause == null) {
     Object.defineProperty(axiosError, "cause", { value: error, configurable: true });
   }
@@ -1368,12 +1369,12 @@ utils$1.reduceDescriptors(AxiosHeaders$1.prototype, ({ value: value2 }, key) =>
 });
 utils$1.freezeMethods(AxiosHeaders$1);
 function transformData(fns, response) {
-  const config = this || defaults;
-  const context = response || config;
+  const config2 = this || defaults;
+  const context = response || config2;
   const headers = AxiosHeaders$1.from(context.headers);
   let data = context.data;
   utils$1.forEach(fns, function transform(fn) {
-    data = fn.call(config, data, headers.normalize(), response ? response.status : void 0);
+    data = fn.call(config2, data, headers.normalize(), response ? response.status : void 0);
   });
   headers.normalize();
   return data;
@@ -1381,8 +1382,8 @@ function transformData(fns, response) {
 function isCancel$1(value2) {
   return !!(value2 && value2.__CANCEL__);
 }
-function CanceledError$1(message, config, request) {
-  AxiosError$1.call(this, message == null ? "canceled" : message, AxiosError$1.ERR_CANCELED, config, request);
+function CanceledError$1(message, config2, request) {
+  AxiosError$1.call(this, message == null ? "canceled" : message, AxiosError$1.ERR_CANCELED, config2, request);
   this.name = "CanceledError";
 }
 utils$1.inherits(CanceledError$1, AxiosError$1, {
@@ -1558,7 +1559,7 @@ function buildFullPath(baseURL, requestedURL, allowAbsoluteUrls) {
 const headersToObject = (thing) => thing instanceof AxiosHeaders$1 ? { ...thing } : thing;
 function mergeConfig$1(config1, config2) {
   config2 = config2 || {};
-  const config = {};
+  const config3 = {};
   function getMergedValue(target, source, prop, caseless) {
     if (utils$1.isPlainObject(target) && utils$1.isPlainObject(source)) {
       return utils$1.merge.call({ caseless }, target, source);
@@ -1629,15 +1630,15 @@ function mergeConfig$1(config1, config2) {
   utils$1.forEach(Object.keys({ ...config1, ...config2 }), function computeConfigValue(prop) {
     const merge2 = mergeMap[prop] || mergeDeepProperties;
     const configValue = merge2(config1[prop], config2[prop], prop);
-    utils$1.isUndefined(configValue) && merge2 !== mergeDirectKeys || (config[prop] = configValue);
+    utils$1.isUndefined(configValue) && merge2 !== mergeDirectKeys || (config3[prop] = configValue);
   });
-  return config;
+  return config3;
 }
-const resolveConfig = (config) => {
-  const newConfig = mergeConfig$1({}, config);
+const resolveConfig = (config2) => {
+  const newConfig = mergeConfig$1({}, config2);
   let { data, withXSRFToken, xsrfHeaderName, xsrfCookieName, headers, auth } = newConfig;
   newConfig.headers = headers = AxiosHeaders$1.from(headers);
-  newConfig.url = buildURL(buildFullPath(newConfig.baseURL, newConfig.url, newConfig.allowAbsoluteUrls), config.params, config.paramsSerializer);
+  newConfig.url = buildURL(buildFullPath(newConfig.baseURL, newConfig.url, newConfig.allowAbsoluteUrls), config2.params, config2.paramsSerializer);
   if (auth) {
     headers.set(
       "Authorization",
@@ -1669,9 +1670,9 @@ const resolveConfig = (config) => {
   return newConfig;
 };
 const isXHRAdapterSupported = typeof XMLHttpRequest !== "undefined";
-const xhrAdapter = isXHRAdapterSupported && function(config) {
+const xhrAdapter = isXHRAdapterSupported && function(config2) {
   return new Promise(function dispatchXhrRequest(resolve, reject) {
-    const _config = resolveConfig(config);
+    const _config = resolveConfig(config2);
     let requestData = _config.data;
     const requestHeaders = AxiosHeaders$1.from(_config.headers).normalize();
     let { responseType, onUploadProgress, onDownloadProgress } = _config;
@@ -1700,7 +1701,7 @@ const xhrAdapter = isXHRAdapterSupported && function(config) {
         status: request.status,
         statusText: request.statusText,
         headers: responseHeaders,
-        config,
+        config: config2,
         request
       };
       settle(function _resolve(value2) {
@@ -1729,12 +1730,12 @@ const xhrAdapter = isXHRAdapterSupported && function(config) {
       if (!request) {
         return;
       }
-      reject(new AxiosError$1("Request aborted", AxiosError$1.ECONNABORTED, config, request));
+      reject(new AxiosError$1("Request aborted", AxiosError$1.ECONNABORTED, config2, request));
       request = null;
     };
     request.onerror = function handleError(event) {
       const msg = event && event.message ? event.message : "Network Error";
-      const err = new AxiosError$1(msg, AxiosError$1.ERR_NETWORK, config, request);
+      const err = new AxiosError$1(msg, AxiosError$1.ERR_NETWORK, config2, request);
       err.event = event || null;
       reject(err);
       request = null;
@@ -1748,7 +1749,7 @@ const xhrAdapter = isXHRAdapterSupported && function(config) {
       reject(new AxiosError$1(
         timeoutErrorMessage,
         transitional2.clarifyTimeoutError ? AxiosError$1.ETIMEDOUT : AxiosError$1.ECONNABORTED,
-        config,
+        config2,
         request
       ));
       request = null;
@@ -1779,7 +1780,7 @@ const xhrAdapter = isXHRAdapterSupported && function(config) {
         if (!request) {
           return;
         }
-        reject(!cancel || cancel.type ? new CanceledError$1(null, config, request) : cancel);
+        reject(!cancel || cancel.type ? new CanceledError$1(null, config2, request) : cancel);
         request.abort();
         request = null;
       };
@@ -1790,15 +1791,15 @@ const xhrAdapter = isXHRAdapterSupported && function(config) {
     }
     const protocol2 = parseProtocol(_config.url);
     if (protocol2 && platform.protocols.indexOf(protocol2) === -1) {
-      reject(new AxiosError$1("Unsupported protocol " + protocol2 + ":", AxiosError$1.ERR_BAD_REQUEST, config));
+      reject(new AxiosError$1("Unsupported protocol " + protocol2 + ":", AxiosError$1.ERR_BAD_REQUEST, config2));
       return;
     }
     request.send(requestData || null);
   });
 };
-const composeSignals = (signals, timeout) => {
+const composeSignals = (signals, timeout2) => {
   const { length } = signals = signals ? signals.filter(Boolean) : [];
-  if (timeout || length) {
+  if (timeout2 || length) {
     let controller = new AbortController();
     let aborted;
     const onabort = function(reason) {
@@ -1809,10 +1810,10 @@ const composeSignals = (signals, timeout) => {
         controller.abort(err instanceof AxiosError$1 ? err : new CanceledError$1(err instanceof Error ? err.message : err));
       }
     };
-    let timer = timeout && setTimeout(() => {
+    let timer = timeout2 && setTimeout(() => {
       timer = null;
-      onabort(new AxiosError$1(`timeout ${timeout} of ms exceeded`, AxiosError$1.ETIMEDOUT));
-    }, timeout);
+      onabort(new AxiosError$1(`timeout ${timeout2} of ms exceeded`, AxiosError$1.ETIMEDOUT));
+    }, timeout2);
     const unsubscribe = () => {
       if (signals) {
         timer && clearTimeout(timer);
@@ -1952,12 +1953,12 @@ const factory = (env) => {
   };
   isFetchSupported && (() => {
     ["text", "arrayBuffer", "blob", "formData", "stream"].forEach((type) => {
-      !resolvers[type] && (resolvers[type] = (res, config) => {
+      !resolvers[type] && (resolvers[type] = (res, config2) => {
         let method = res && res[type];
         if (method) {
           return method.call(res);
         }
-        throw new AxiosError$1(`Response type '${type}' is not supported`, AxiosError$1.ERR_NOT_SUPPORT, config);
+        throw new AxiosError$1(`Response type '${type}' is not supported`, AxiosError$1.ERR_NOT_SUPPORT, config2);
       });
     });
   })();
@@ -1989,24 +1990,24 @@ const factory = (env) => {
     const length = utils$1.toFiniteNumber(headers.getContentLength());
     return length == null ? getBodyLength(body) : length;
   };
-  return async (config) => {
+  return async (config2) => {
     let {
       url: url2,
       method,
       data,
       signal,
       cancelToken,
-      timeout,
+      timeout: timeout2,
       onDownloadProgress,
       onUploadProgress,
       responseType,
       headers,
       withCredentials = "same-origin",
       fetchOptions
-    } = resolveConfig(config);
+    } = resolveConfig(config2);
     let _fetch = envFetch || fetch;
     responseType = responseType ? (responseType + "").toLowerCase() : "text";
-    let composedSignal = composeSignals([signal, cancelToken && cancelToken.toAbortSignal()], timeout);
+    let composedSignal = composeSignals([signal, cancelToken && cancelToken.toAbortSignal()], timeout2);
     let request = null;
     const unsubscribe = composedSignal && composedSignal.unsubscribe && (() => {
       composedSignal.unsubscribe();
@@ -2066,7 +2067,7 @@ const factory = (env) => {
         );
       }
       responseType = responseType || "text";
-      let responseData = await resolvers[utils$1.findKey(resolvers, responseType) || "text"](response, config);
+      let responseData = await resolvers[utils$1.findKey(resolvers, responseType) || "text"](response, config2);
       !isStreamResponse && unsubscribe && unsubscribe();
       return await new Promise((resolve, reject) => {
         settle(resolve, reject, {
@@ -2074,7 +2075,7 @@ const factory = (env) => {
           headers: AxiosHeaders$1.from(response.headers),
           status: response.status,
           statusText: response.statusText,
-          config,
+          config: config2,
           request
         });
       });
@@ -2082,19 +2083,19 @@ const factory = (env) => {
       unsubscribe && unsubscribe();
       if (err && err.name === "TypeError" && /Load failed|fetch/i.test(err.message)) {
         throw Object.assign(
-          new AxiosError$1("Network Error", AxiosError$1.ERR_NETWORK, config, request),
+          new AxiosError$1("Network Error", AxiosError$1.ERR_NETWORK, config2, request),
           {
             cause: err.cause || err
           }
         );
       }
-      throw AxiosError$1.from(err, err && err.code, config, request);
+      throw AxiosError$1.from(err, err && err.code, config2, request);
     }
   };
 };
 const seedCache = /* @__PURE__ */ new Map();
-const getFetch = (config) => {
-  let env = config ? config.env : {};
+const getFetch = (config2) => {
+  let env = config2 ? config2.env : {};
   const { fetch: fetch2, Request: Request2, Response } = env;
   const seeds = [
     Request2,
@@ -2130,7 +2131,7 @@ utils$1.forEach(knownAdapters, (fn, value2) => {
 const renderReason = (reason) => `- ${reason}`;
 const isResolvedHandle = (adapter) => utils$1.isFunction(adapter) || adapter === null || adapter === false;
 const adapters = {
-  getAdapter: (adapters2, config) => {
+  getAdapter: (adapters2, config2) => {
     adapters2 = utils$1.isArray(adapters2) ? adapters2 : [adapters2];
     const { length } = adapters2;
     let nameOrAdapter;
@@ -2146,7 +2147,7 @@ const adapters = {
           throw new AxiosError$1(`Unknown adapter '${id2}'`);
         }
       }
-      if (adapter && (utils$1.isFunction(adapter) || (adapter = adapter.get(config)))) {
+      if (adapter && (utils$1.isFunction(adapter) || (adapter = adapter.get(config2)))) {
         break;
       }
       rejectedReasons[id2 || "#" + i] = adapter;
@@ -2165,41 +2166,41 @@ const adapters = {
   },
   adapters: knownAdapters
 };
-function throwIfCancellationRequested(config) {
-  if (config.cancelToken) {
-    config.cancelToken.throwIfRequested();
+function throwIfCancellationRequested(config2) {
+  if (config2.cancelToken) {
+    config2.cancelToken.throwIfRequested();
   }
-  if (config.signal && config.signal.aborted) {
-    throw new CanceledError$1(null, config);
+  if (config2.signal && config2.signal.aborted) {
+    throw new CanceledError$1(null, config2);
   }
 }
-function dispatchRequest(config) {
-  throwIfCancellationRequested(config);
-  config.headers = AxiosHeaders$1.from(config.headers);
-  config.data = transformData.call(
-    config,
-    config.transformRequest
+function dispatchRequest(config2) {
+  throwIfCancellationRequested(config2);
+  config2.headers = AxiosHeaders$1.from(config2.headers);
+  config2.data = transformData.call(
+    config2,
+    config2.transformRequest
   );
-  if (["post", "put", "patch"].indexOf(config.method) !== -1) {
-    config.headers.setContentType("application/x-www-form-urlencoded", false);
+  if (["post", "put", "patch"].indexOf(config2.method) !== -1) {
+    config2.headers.setContentType("application/x-www-form-urlencoded", false);
   }
-  const adapter = adapters.getAdapter(config.adapter || defaults.adapter, config);
-  return adapter(config).then(function onAdapterResolution(response) {
-    throwIfCancellationRequested(config);
+  const adapter = adapters.getAdapter(config2.adapter || defaults.adapter, config2);
+  return adapter(config2).then(function onAdapterResolution(response) {
+    throwIfCancellationRequested(config2);
     response.data = transformData.call(
-      config,
-      config.transformResponse,
+      config2,
+      config2.transformResponse,
       response
     );
     response.headers = AxiosHeaders$1.from(response.headers);
     return response;
   }, function onAdapterRejection(reason) {
     if (!isCancel$1(reason)) {
-      throwIfCancellationRequested(config);
+      throwIfCancellationRequested(config2);
       if (reason && reason.response) {
         reason.response.data = transformData.call(
-          config,
-          config.transformResponse,
+          config2,
+          config2.transformResponse,
           reason.response
         );
         reason.response.headers = AxiosHeaders$1.from(reason.response.headers);
@@ -2267,11 +2268,11 @@ function assertOptions(options, schema, allowUnknown) {
     }
   }
 }
-const validator = {
+const validator$1 = {
   assertOptions,
   validators: validators$1
 };
-const validators = validator.validators;
+const validators = validator$1.validators;
 let Axios$1 = class Axios {
   constructor(instanceConfig) {
     this.defaults = instanceConfig || {};
@@ -2288,9 +2289,9 @@ let Axios$1 = class Axios {
    *
    * @returns {Promise} The Promise to be fulfilled
    */
-  async request(configOrUrl, config) {
+  async request(configOrUrl, config2) {
     try {
-      return await this._request(configOrUrl, config);
+      return await this._request(configOrUrl, config2);
     } catch (err) {
       if (err instanceof Error) {
         let dummy = {};
@@ -2308,17 +2309,17 @@ let Axios$1 = class Axios {
       throw err;
     }
   }
-  _request(configOrUrl, config) {
+  _request(configOrUrl, config2) {
     if (typeof configOrUrl === "string") {
-      config = config || {};
-      config.url = configOrUrl;
+      config2 = config2 || {};
+      config2.url = configOrUrl;
     } else {
-      config = configOrUrl || {};
+      config2 = configOrUrl || {};
     }
-    config = mergeConfig$1(this.defaults, config);
-    const { transitional: transitional2, paramsSerializer, headers } = config;
+    config2 = mergeConfig$1(this.defaults, config2);
+    const { transitional: transitional2, paramsSerializer, headers } = config2;
     if (transitional2 !== void 0) {
-      validator.assertOptions(transitional2, {
+      validator$1.assertOptions(transitional2, {
         silentJSONParsing: validators.transitional(validators.boolean),
         forcedJSONParsing: validators.transitional(validators.boolean),
         clarifyTimeoutError: validators.transitional(validators.boolean)
@@ -2326,30 +2327,30 @@ let Axios$1 = class Axios {
     }
     if (paramsSerializer != null) {
       if (utils$1.isFunction(paramsSerializer)) {
-        config.paramsSerializer = {
+        config2.paramsSerializer = {
           serialize: paramsSerializer
         };
       } else {
-        validator.assertOptions(paramsSerializer, {
+        validator$1.assertOptions(paramsSerializer, {
           encode: validators.function,
           serialize: validators.function
         }, true);
       }
     }
-    if (config.allowAbsoluteUrls !== void 0) ;
+    if (config2.allowAbsoluteUrls !== void 0) ;
     else if (this.defaults.allowAbsoluteUrls !== void 0) {
-      config.allowAbsoluteUrls = this.defaults.allowAbsoluteUrls;
+      config2.allowAbsoluteUrls = this.defaults.allowAbsoluteUrls;
     } else {
-      config.allowAbsoluteUrls = true;
+      config2.allowAbsoluteUrls = true;
     }
-    validator.assertOptions(config, {
+    validator$1.assertOptions(config2, {
       baseUrl: validators.spelling("baseURL"),
       withXsrfToken: validators.spelling("withXSRFToken")
     }, true);
-    config.method = (config.method || this.defaults.method || "get").toLowerCase();
+    config2.method = (config2.method || this.defaults.method || "get").toLowerCase();
     let contextHeaders = headers && utils$1.merge(
       headers.common,
-      headers[config.method]
+      headers[config2.method]
     );
     headers && utils$1.forEach(
       ["delete", "get", "head", "post", "put", "patch", "common"],
@@ -2357,11 +2358,11 @@ let Axios$1 = class Axios {
         delete headers[method];
       }
     );
-    config.headers = AxiosHeaders$1.concat(contextHeaders, headers);
+    config2.headers = AxiosHeaders$1.concat(contextHeaders, headers);
     const requestInterceptorChain = [];
     let synchronousRequestInterceptors = true;
     this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
-      if (typeof interceptor.runWhen === "function" && interceptor.runWhen(config) === false) {
+      if (typeof interceptor.runWhen === "function" && interceptor.runWhen(config2) === false) {
         return;
       }
       synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;
@@ -2379,14 +2380,14 @@ let Axios$1 = class Axios {
       chain.unshift(...requestInterceptorChain);
       chain.push(...responseInterceptorChain);
       len = chain.length;
-      promise = Promise.resolve(config);
+      promise = Promise.resolve(config2);
       while (i < len) {
         promise = promise.then(chain[i++], chain[i++]);
       }
       return promise;
     }
     len = requestInterceptorChain.length;
-    let newConfig = config;
+    let newConfig = config2;
     while (i < len) {
       const onFulfilled = requestInterceptorChain[i++];
       const onRejected = requestInterceptorChain[i++];
@@ -2409,25 +2410,25 @@ let Axios$1 = class Axios {
     }
     return promise;
   }
-  getUri(config) {
-    config = mergeConfig$1(this.defaults, config);
-    const fullPath = buildFullPath(config.baseURL, config.url, config.allowAbsoluteUrls);
-    return buildURL(fullPath, config.params, config.paramsSerializer);
+  getUri(config2) {
+    config2 = mergeConfig$1(this.defaults, config2);
+    const fullPath = buildFullPath(config2.baseURL, config2.url, config2.allowAbsoluteUrls);
+    return buildURL(fullPath, config2.params, config2.paramsSerializer);
   }
 };
 utils$1.forEach(["delete", "get", "head", "options"], function forEachMethodNoData(method) {
-  Axios$1.prototype[method] = function(url2, config) {
-    return this.request(mergeConfig$1(config || {}, {
+  Axios$1.prototype[method] = function(url2, config2) {
+    return this.request(mergeConfig$1(config2 || {}, {
       method,
       url: url2,
-      data: (config || {}).data
+      data: (config2 || {}).data
     }));
   };
 });
 utils$1.forEach(["post", "put", "patch"], function forEachMethodWithData(method) {
   function generateHTTPMethod(isForm) {
-    return function httpMethod(url2, data, config) {
-      return this.request(mergeConfig$1(config || {}, {
+    return function httpMethod(url2, data, config2) {
+      return this.request(mergeConfig$1(config2 || {}, {
         method,
         headers: isForm ? {
           "Content-Type": "multipart/form-data"
@@ -2469,11 +2470,11 @@ let CancelToken$1 = class CancelToken {
       };
       return promise;
     };
-    executor(function cancel(message, config, request) {
+    executor(function cancel(message, config2, request) {
       if (token.reason) {
         return;
       }
-      token.reason = new CanceledError$1(message, config, request);
+      token.reason = new CanceledError$1(message, config2, request);
       resolvePromise(token.reason);
     });
   }
@@ -3354,12 +3355,12 @@ const axiosRequest = axios.create({
   headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "CSRF-Token" },
   withCredentials: true
 });
-axiosRequest.interceptors.request.use(async (config) => {
+axiosRequest.interceptors.request.use(async (config2) => {
   const { userUnitPositionId, accessToken } = store.getState().account;
-  if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+  if (accessToken) config2.headers.Authorization = `Bearer ${accessToken}`;
   if (userUnitPositionId)
-    config.headers["userUnitPositionId"] = userUnitPositionId;
-  return config;
+    config2.headers["userUnitPositionId"] = userUnitPositionId;
+  return config2;
 });
 let refreshingToken = null;
 axiosRequest.interceptors.response.use(
@@ -4854,12 +4855,12 @@ const ERROR_FACTORY$2 = new ErrorFactory("app", "Firebase", ERRORS);
  * limitations under the License.
  */
 class FirebaseAppImpl {
-  constructor(options, config, container) {
+  constructor(options, config2, container) {
     this._isDeleted = false;
     this._options = { ...options };
-    this._config = { ...config };
-    this._name = config.name;
-    this._automaticDataCollectionEnabled = config.automaticDataCollectionEnabled;
+    this._config = { ...config2 };
+    this._name = config2.name;
+    this._automaticDataCollectionEnabled = config2.automaticDataCollectionEnabled;
     this._container = container;
     this.container.addComponent(new Component(
       "app",
@@ -4913,12 +4914,12 @@ function initializeApp(_options, rawConfig = {}) {
     const name3 = rawConfig;
     rawConfig = { name: name3 };
   }
-  const config = {
+  const config2 = {
     name: DEFAULT_ENTRY_NAME,
     automaticDataCollectionEnabled: true,
     ...rawConfig
   };
-  const name2 = config.name;
+  const name2 = config2.name;
   if (typeof name2 !== "string" || !name2) {
     throw ERROR_FACTORY$2.create("bad-app-name", {
       appName: String(name2)
@@ -4933,7 +4934,7 @@ function initializeApp(_options, rawConfig = {}) {
   }
   const existingApp = _apps.get(name2);
   if (existingApp) {
-    if (deepEqual(options, existingApp.options) && deepEqual(config, existingApp.config)) {
+    if (deepEqual(options, existingApp.options) && deepEqual(config2, existingApp.config)) {
       return existingApp;
     } else {
       throw ERROR_FACTORY$2.create("duplicate-app", { appName: name2 });
@@ -4943,7 +4944,7 @@ function initializeApp(_options, rawConfig = {}) {
   for (const component of _components.values()) {
     container.addComponent(component);
   }
-  const newApp = new FirebaseAppImpl(options, config, container);
+  const newApp = new FirebaseAppImpl(options, config2, container);
   _apps.set(name2, newApp);
   return newApp;
 }
@@ -9539,8 +9540,8 @@ class Socket2 extends Emitter {
    */
   _registerAckCallback(id2, ack) {
     var _a;
-    const timeout = (_a = this.flags.timeout) !== null && _a !== void 0 ? _a : this._opts.ackTimeout;
-    if (timeout === void 0) {
+    const timeout2 = (_a = this.flags.timeout) !== null && _a !== void 0 ? _a : this._opts.ackTimeout;
+    if (timeout2 === void 0) {
       this.acks[id2] = ack;
       return;
     }
@@ -9552,7 +9553,7 @@ class Socket2 extends Emitter {
         }
       }
       ack.call(this, new Error("operation has timed out"));
-    }, timeout);
+    }, timeout2);
     const fn = (...args) => {
       this.io.clearTimeoutFn(timer);
       ack.apply(this, args);
@@ -9950,8 +9951,8 @@ class Socket2 extends Emitter {
    *
    * @returns self
    */
-  timeout(timeout) {
-    this.flags.timeout = timeout;
+  timeout(timeout2) {
+    this.flags.timeout = timeout2;
     return this;
   }
   /**
@@ -10272,12 +10273,12 @@ class Manager extends Emitter {
     };
     const errorSub = on(socket, "error", onError);
     if (false !== this._timeout) {
-      const timeout = this._timeout;
+      const timeout2 = this._timeout;
       const timer = this.setTimeoutFn(() => {
         openSubDestroy();
         onError(new Error("timeout"));
         socket.close();
-      }, timeout);
+      }, timeout2);
       if (this.opts.autoUnref) {
         timer.unref();
       }
@@ -13825,6 +13826,214 @@ function composeClasses(slots, getUtilityClass, classes = void 0) {
   }
   return output;
 }
+const useEnhancedEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+function useEventCallback$1(fn) {
+  const ref = React__namespace.useRef(fn);
+  useEnhancedEffect(() => {
+    ref.current = fn;
+  });
+  return React__namespace.useRef((...args) => (
+    // @ts-expect-error hide `this`
+    (0, ref.current)(...args)
+  )).current;
+}
+const UNINITIALIZED = {};
+function useLazyRef(init, initArg) {
+  const ref = React__namespace.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}
+const EMPTY = [];
+function useOnMount(fn) {
+  React__namespace.useEffect(fn, EMPTY);
+}
+class Timeout {
+  static create() {
+    return new Timeout();
+  }
+  currentId = null;
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay2, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay2);
+  }
+  clear = () => {
+    if (this.currentId !== null) {
+      clearTimeout(this.currentId);
+      this.currentId = null;
+    }
+  };
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+function useTimeout() {
+  const timeout2 = useLazyRef(Timeout.create).current;
+  useOnMount(timeout2.disposeEffect);
+  return timeout2;
+}
+function extractEventHandlers(object2, excludeKeys = []) {
+  if (object2 === void 0) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object2).filter((prop) => prop.match(/^on[A-Z]/) && typeof object2[prop] === "function" && !excludeKeys.includes(prop)).forEach((prop) => {
+    result[prop] = object2[prop];
+  });
+  return result;
+}
+function useSnackbar$1(parameters = {}) {
+  const {
+    autoHideDuration = null,
+    disableWindowBlurListener = false,
+    onClose,
+    open,
+    resumeHideDuration
+  } = parameters;
+  const timerAutoHide = useTimeout();
+  React__namespace.useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    function handleKeyDown(nativeEvent) {
+      if (!nativeEvent.defaultPrevented) {
+        if (nativeEvent.key === "Escape") {
+          onClose?.(nativeEvent, "escapeKeyDown");
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onClose]);
+  const handleClose = useEventCallback$1((event, reason) => {
+    onClose?.(event, reason);
+  });
+  const setAutoHideTimer = useEventCallback$1((autoHideDurationParam) => {
+    if (!onClose || autoHideDurationParam == null) {
+      return;
+    }
+    timerAutoHide.start(autoHideDurationParam, () => {
+      handleClose(null, "timeout");
+    });
+  });
+  React__namespace.useEffect(() => {
+    if (open) {
+      setAutoHideTimer(autoHideDuration);
+    }
+    return timerAutoHide.clear;
+  }, [open, autoHideDuration, setAutoHideTimer, timerAutoHide]);
+  const handleClickAway = (event) => {
+    onClose?.(event, "clickaway");
+  };
+  const handlePause = timerAutoHide.clear;
+  const handleResume = React__namespace.useCallback(() => {
+    if (autoHideDuration != null) {
+      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+    }
+  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+  const createHandleBlur = (otherHandlers) => (event) => {
+    const onBlurCallback = otherHandlers.onBlur;
+    onBlurCallback?.(event);
+    handleResume();
+  };
+  const createHandleFocus = (otherHandlers) => (event) => {
+    const onFocusCallback = otherHandlers.onFocus;
+    onFocusCallback?.(event);
+    handlePause();
+  };
+  const createMouseEnter = (otherHandlers) => (event) => {
+    const onMouseEnterCallback = otherHandlers.onMouseEnter;
+    onMouseEnterCallback?.(event);
+    handlePause();
+  };
+  const createMouseLeave = (otherHandlers) => (event) => {
+    const onMouseLeaveCallback = otherHandlers.onMouseLeave;
+    onMouseLeaveCallback?.(event);
+    handleResume();
+  };
+  React__namespace.useEffect(() => {
+    if (!disableWindowBlurListener && open) {
+      window.addEventListener("focus", handleResume);
+      window.addEventListener("blur", handlePause);
+      return () => {
+        window.removeEventListener("focus", handleResume);
+        window.removeEventListener("blur", handlePause);
+      };
+    }
+    return void 0;
+  }, [disableWindowBlurListener, open, handleResume, handlePause]);
+  const getRootProps = (externalProps = {}) => {
+    const externalEventHandlers = {
+      ...extractEventHandlers(parameters),
+      ...extractEventHandlers(externalProps)
+    };
+    return {
+      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+      // See https://github.com/mui/material-ui/issues/29080
+      role: "presentation",
+      ...externalProps,
+      ...externalEventHandlers,
+      onBlur: createHandleBlur(externalEventHandlers),
+      onFocus: createHandleFocus(externalEventHandlers),
+      onMouseEnter: createMouseEnter(externalEventHandlers),
+      onMouseLeave: createMouseLeave(externalEventHandlers)
+    };
+  };
+  return {
+    getRootProps,
+    onClickAway: handleClickAway
+  };
+}
+function ownerDocument(node) {
+  return node && node.ownerDocument || document;
+}
+function useForkRef(...refs) {
+  const cleanupRef = React__namespace.useRef(void 0);
+  const refEffect = React__namespace.useCallback((instance) => {
+    const cleanups = refs.map((ref) => {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup?.());
+    };
+  }, refs);
+  return React__namespace.useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (value2) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value2 != null) {
+        cleanupRef.current = refEffect(value2);
+      }
+    };
+  }, refs);
+}
 function chainPropTypes(propType1, propType2) {
   if (process.env.NODE_ENV === "production") {
     return () => null;
@@ -13833,6 +14042,188 @@ function chainPropTypes(propType1, propType2) {
     return propType1(...args) || propType2(...args);
   };
 }
+function isClassComponent(elementType) {
+  const {
+    prototype: prototype2 = {}
+  } = elementType;
+  return Boolean(prototype2.isReactComponent);
+}
+function acceptingRef(props, propName, componentName, location2, propFullName) {
+  const element = props[propName];
+  const safePropName = propFullName || propName;
+  if (element == null || // When server-side rendering React doesn't warn either.
+  // This is not an accurate check for SSR.
+  // This is only in place for Emotion compat.
+  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
+  typeof window === "undefined") {
+    return null;
+  }
+  let warningHint;
+  const elementType = element.type;
+  if (typeof elementType === "function" && !isClassComponent(elementType)) {
+    warningHint = "Did you accidentally use a plain function component for an element instead?";
+  }
+  if (warningHint !== void 0) {
+    return new Error(`Invalid ${location2} \`${safePropName}\` supplied to \`${componentName}\`. Expected an element that can hold a ref. ${warningHint} For more information see https://mui.com/r/caveat-with-refs-guide`);
+  }
+  return null;
+}
+const elementAcceptingRef = chainPropTypes(PropTypes.element, acceptingRef);
+elementAcceptingRef.isRequired = chainPropTypes(PropTypes.element.isRequired, acceptingRef);
+const specialProperty = "exact-prop: ​";
+function exactProp(propTypes2) {
+  if (process.env.NODE_ENV === "production") {
+    return propTypes2;
+  }
+  return {
+    ...propTypes2,
+    [specialProperty]: (props) => {
+      const unsupportedProps = Object.keys(props).filter((prop) => !propTypes2.hasOwnProperty(prop));
+      if (unsupportedProps.length > 0) {
+        return new Error(`The following props are not supported: ${unsupportedProps.map((prop) => `\`${prop}\``).join(", ")}. Please remove them.`);
+      }
+      return null;
+    }
+  };
+}
+function getReactElementRef(element) {
+  if (parseInt(React__namespace.version, 10) >= 19) {
+    return element?.props?.ref || null;
+  }
+  return element?.ref || null;
+}
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+function ClickAwayListener(props) {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = "onClick",
+    onClickAway,
+    touchEvent = "onTouchEnd"
+  } = props;
+  const movedRef = React__namespace.useRef(false);
+  const nodeRef = React__namespace.useRef(null);
+  const activatedRef = React__namespace.useRef(false);
+  const syntheticEventRef = React__namespace.useRef(false);
+  React__namespace.useEffect(() => {
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+  const handleRef = useForkRef(getReactElementRef(children), nodeRef);
+  const handleClickAway = useEventCallback$1((event) => {
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current);
+    if (!activatedRef.current || !nodeRef.current || "clientX" in event && clickedRootScrollbar(event, doc)) {
+      return;
+    }
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+    if (event.composedPath) {
+      insideDOM = event.composedPath().includes(nodeRef.current);
+    } else {
+      insideDOM = !doc.documentElement.contains(
+        // @ts-expect-error returns `false` as intended when not dispatched from a Node
+        event.target
+      ) || nodeRef.current.contains(
+        // @ts-expect-error returns `false` as intended when not dispatched from a Node
+        event.target
+      );
+    }
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+  const createHandleSynthetic = (handlerName) => (event) => {
+    syntheticEventRef.current = true;
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const childrenProps = {
+    ref: handleRef
+  };
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+  React__namespace.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = ownerDocument(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener("touchmove", handleTouchMove);
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener("touchmove", handleTouchMove);
+      };
+    }
+    return void 0;
+  }, [handleClickAway, touchEvent]);
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+  React__namespace.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+    return void 0;
+  }, [handleClickAway, mouseEvent]);
+  return /* @__PURE__ */ React__namespace.cloneElement(children, childrenProps);
+}
+process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: PropTypes.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: PropTypes.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", false]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: PropTypes.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: PropTypes.oneOf(["onTouchEnd", "onTouchStart", false])
+} : void 0;
+if (process.env.NODE_ENV !== "production") {
+  ClickAwayListener["propTypes"] = exactProp(ClickAwayListener.propTypes);
+}
 function formatMuiErrorMessage(code, ...args) {
   const url2 = new URL(`https://mui.com/production-error/?code=${code}`);
   args.forEach((arg) => url2.searchParams.append("args[]", arg));
@@ -14461,8 +14852,8 @@ process.env.NODE_ENV !== "production" ? spacingKeys.reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
-function compose(...styles) {
-  const handlers = styles.reduce((acc, style2) => {
+function compose(...styles2) {
+  const handlers = styles2.reduce((acc, style2) => {
     style2.filterProps.forEach((prop) => {
       acc[prop] = style2;
     });
@@ -14476,8 +14867,8 @@ function compose(...styles) {
       return acc;
     }, {});
   };
-  fn.propTypes = process.env.NODE_ENV !== "production" ? styles.reduce((acc, style2) => Object.assign(acc, style2.propTypes), {}) : {};
-  fn.filterProps = styles.reduce((acc, style2) => acc.concat(style2.filterProps), []);
+  fn.propTypes = process.env.NODE_ENV !== "production" ? styles2.reduce((acc, style2) => Object.assign(acc, style2.propTypes), {}) : {};
+  fn.filterProps = styles2.reduce((acc, style2) => acc.concat(style2.filterProps), []);
   return fn;
 }
 function borderTransform(value2) {
@@ -14970,12 +15361,12 @@ function callIfFn(maybeFn, arg) {
   return typeof maybeFn === "function" ? maybeFn(arg) : maybeFn;
 }
 function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme, config) {
+  function getThemeValue(prop, val, theme, config2) {
     const props = {
       [prop]: val,
       theme
     };
-    const options = config[prop];
+    const options = config2[prop];
     if (!options) {
       return {
         [prop]: val
@@ -15022,7 +15413,7 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null;
     }
-    const config = theme.unstable_sxConfig ?? defaultSxConfig;
+    const config2 = theme.unstable_sxConfig ?? defaultSxConfig;
     function traverse(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === "function") {
@@ -15040,8 +15431,8 @@ function unstable_createStyleFunctionSx() {
         const value2 = callIfFn(sxObject[styleKey], theme);
         if (value2 !== null && value2 !== void 0) {
           if (typeof value2 === "object") {
-            if (config[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value2, theme, config));
+            if (config2[styleKey]) {
+              css = merge(css, getThemeValue(styleKey, value2, theme, config2));
             } else {
               const breakpointsValues = handleBreakpoints({
                 theme
@@ -15059,7 +15450,7 @@ function unstable_createStyleFunctionSx() {
               }
             }
           } else {
-            css = merge(css, getThemeValue(styleKey, value2, theme, config));
+            css = merge(css, getThemeValue(styleKey, value2, theme, config2));
           }
         }
       });
@@ -15833,8 +16224,8 @@ function handleInterpolation(mergedProps, registered, interpolation) {
             next = next.next;
           }
         }
-        var styles = serializedStyles.styles + ";";
-        return styles;
+        var styles2 = serializedStyles.styles + ";";
+        return styles2;
       }
       return createStringFromObject(mergedProps, registered, interpolation);
     }
@@ -15890,33 +16281,33 @@ function serializeStyles(args, registered, mergedProps) {
     return args[0];
   }
   var stringMode = true;
-  var styles = "";
+  var styles2 = "";
   cursor = void 0;
   var strings = args[0];
   if (strings == null || strings.raw === void 0) {
     stringMode = false;
-    styles += handleInterpolation(mergedProps, registered, strings);
+    styles2 += handleInterpolation(mergedProps, registered, strings);
   } else {
     var asTemplateStringsArr = strings;
-    styles += asTemplateStringsArr[0];
+    styles2 += asTemplateStringsArr[0];
   }
   for (var i = 1; i < args.length; i++) {
-    styles += handleInterpolation(mergedProps, registered, args[i]);
+    styles2 += handleInterpolation(mergedProps, registered, args[i]);
     if (stringMode) {
       var templateStringsArr = strings;
-      styles += templateStringsArr[i];
+      styles2 += templateStringsArr[i];
     }
   }
   labelPattern.lastIndex = 0;
   var identifierName = "";
   var match;
-  while ((match = labelPattern.exec(styles)) !== null) {
+  while ((match = labelPattern.exec(styles2)) !== null) {
     identifierName += "-" + match[1];
   }
-  var name2 = murmur2(styles) + identifierName;
+  var name2 = murmur2(styles2) + identifierName;
   return {
     name: name2,
-    styles,
+    styles: styles2,
     next: cursor
   };
 }
@@ -15930,14 +16321,14 @@ function serializeStyles(args, registered, mergedProps) {
 function styled$1(tag, options) {
   const stylesFactory = emStyled(tag, options);
   if (process.env.NODE_ENV !== "production") {
-    return (...styles) => {
+    return (...styles2) => {
       const component = typeof tag === "string" ? `"${tag}"` : "component";
-      if (styles.length === 0) {
+      if (styles2.length === 0) {
         console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n"));
-      } else if (styles.some((style2) => style2 === void 0)) {
+      } else if (styles2.some((style2) => style2 === void 0)) {
         console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
       }
-      return stylesFactory(...styles);
+      return stylesFactory(...styles2);
     };
   }
   return stylesFactory;
@@ -15948,8 +16339,8 @@ function internal_mutateStyles(tag, processor) {
   }
 }
 const wrapper = [];
-function internal_serializeStyles(styles) {
-  wrapper[0] = styles;
+function internal_serializeStyles(styles2) {
+  wrapper[0] = styles2;
   return serializeStyles(wrapper);
 }
 function r(e) {
@@ -16033,12 +16424,12 @@ function getThemeProps(params) {
   if (!theme || !theme.components || !theme.components[name2]) {
     return props;
   }
-  const config = theme.components[name2];
-  if (config.defaultProps) {
-    return resolveProps(config.defaultProps, props, theme.components.mergeClassNameAndStyle);
+  const config2 = theme.components[name2];
+  if (config2.defaultProps) {
+    return resolveProps(config2.defaultProps, props, theme.components.mergeClassNameAndStyle);
   }
-  if (!config.styleOverrides && !config.variants) {
-    return resolveProps(config, props, theme.components.mergeClassNameAndStyle);
+  if (!config2.styleOverrides && !config2.variants) {
+    return resolveProps(config2, props, theme.components.mergeClassNameAndStyle);
   }
   return props;
 }
@@ -16154,7 +16545,7 @@ function createSpacing(spacingInput = 8, transform = createUnarySpacing({
   spacing.mui = true;
   return spacing;
 }
-function applyStyles(key, styles) {
+function applyStyles(key, styles2) {
   const theme = this;
   if (theme.vars) {
     if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== "function") {
@@ -16162,17 +16553,17 @@ function applyStyles(key, styles) {
     }
     let selector = theme.getColorSchemeSelector(key);
     if (selector === "&") {
-      return styles;
+      return styles2;
     }
     if (selector.includes("data-") || selector.includes(".")) {
       selector = `*:where(${selector.replace(/\s*&$/, "")}) &`;
     }
     return {
-      [selector]: styles
+      [selector]: styles2
     };
   }
   if (theme.palette.mode === key) {
-    return styles;
+    return styles2;
   }
   return {};
 }
@@ -17519,7 +17910,7 @@ function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
   }
-  return (_props, styles) => styles[slot];
+  return (_props, styles2) => styles2[slot];
 }
 function attachTheme(props, themeId, defaultTheme2) {
   props.theme = isObjectEmpty(props.theme) ? defaultTheme2 : props.theme[themeId] || props.theme;
@@ -17591,7 +17982,7 @@ function createStyled(input = {}) {
     attachTheme(props, themeId, defaultTheme2);
   }
   const styled2 = (tag, inputOptions = {}) => {
-    internal_mutateStyles(tag, (styles) => styles.filter((style2) => style2 !== styleFunctionSx));
+    internal_mutateStyles(tag, (styles2) => styles2.filter((style2) => style2 !== styleFunctionSx));
     const {
       name: componentName,
       slot: componentSlot,
@@ -17744,31 +18135,1611 @@ const styled = createStyled({
   defaultTheme,
   rootShouldForwardProp
 });
-const memoTheme = system.unstable_memoTheme;
-process.env.NODE_ENV !== "production" ? {
+const memoTheme = system.unstable_memoTheme;
+process.env.NODE_ENV !== "production" ? {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.object.isRequired
+} : void 0;
+function useDefaultProps(params) {
+  return useDefaultProps$1(params);
+}
+function _objectWithoutPropertiesLoose$1(r2, e) {
+  if (null == r2) return {};
+  var t = {};
+  for (var n in r2) if ({}.hasOwnProperty.call(r2, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r2[n];
+  }
+  return t;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
+    return t2.__proto__ = e2, t2;
+  }, _setPrototypeOf(t, e);
+}
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+const config = {
+  disabled: false
+};
+var timeoutsShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+  enter: PropTypes.number,
+  exit: PropTypes.number,
+  appear: PropTypes.number
+}).isRequired]) : null;
+process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+  enter: PropTypes.string,
+  exit: PropTypes.string,
+  active: PropTypes.string
+}), PropTypes.shape({
+  enter: PropTypes.string,
+  enterDone: PropTypes.string,
+  enterActive: PropTypes.string,
+  exit: PropTypes.string,
+  exitDone: PropTypes.string,
+  exitActive: PropTypes.string
+})]) : null;
+const TransitionGroupContext = React.createContext(null);
+var forceReflow = function forceReflow2(node) {
+  return node.scrollTop;
+};
+var UNMOUNTED = "unmounted";
+var EXITED = "exited";
+var ENTERING = "entering";
+var ENTERED = "entered";
+var EXITING = "exiting";
+var Transition = /* @__PURE__ */ (function(_React$Component) {
+  _inheritsLoose(Transition2, _React$Component);
+  function Transition2(props, context) {
+    var _this;
+    _this = _React$Component.call(this, props, context) || this;
+    var parentGroup = context;
+    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
+    var initialStatus;
+    _this.appearStatus = null;
+    if (props.in) {
+      if (appear) {
+        initialStatus = EXITED;
+        _this.appearStatus = ENTERING;
+      } else {
+        initialStatus = ENTERED;
+      }
+    } else {
+      if (props.unmountOnExit || props.mountOnEnter) {
+        initialStatus = UNMOUNTED;
+      } else {
+        initialStatus = EXITED;
+      }
+    }
+    _this.state = {
+      status: initialStatus
+    };
+    _this.nextCallback = null;
+    return _this;
+  }
+  Transition2.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
+    var nextIn = _ref.in;
+    if (nextIn && prevState.status === UNMOUNTED) {
+      return {
+        status: EXITED
+      };
+    }
+    return null;
+  };
+  var _proto = Transition2.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateStatus(true, this.appearStatus);
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var nextStatus = null;
+    if (prevProps !== this.props) {
+      var status = this.state.status;
+      if (this.props.in) {
+        if (status !== ENTERING && status !== ENTERED) {
+          nextStatus = ENTERING;
+        }
+      } else {
+        if (status === ENTERING || status === ENTERED) {
+          nextStatus = EXITING;
+        }
+      }
+    }
+    this.updateStatus(false, nextStatus);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.cancelNextCallback();
+  };
+  _proto.getTimeouts = function getTimeouts() {
+    var timeout2 = this.props.timeout;
+    var exit, enter, appear;
+    exit = enter = appear = timeout2;
+    if (timeout2 != null && typeof timeout2 !== "number") {
+      exit = timeout2.exit;
+      enter = timeout2.enter;
+      appear = timeout2.appear !== void 0 ? timeout2.appear : enter;
+    }
+    return {
+      exit,
+      enter,
+      appear
+    };
+  };
+  _proto.updateStatus = function updateStatus(mounting, nextStatus) {
+    if (mounting === void 0) {
+      mounting = false;
+    }
+    if (nextStatus !== null) {
+      this.cancelNextCallback();
+      if (nextStatus === ENTERING) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
+          if (node) forceReflow(node);
+        }
+        this.performEnter(mounting);
+      } else {
+        this.performExit();
+      }
+    } else if (this.props.unmountOnExit && this.state.status === EXITED) {
+      this.setState({
+        status: UNMOUNTED
+      });
+    }
+  };
+  _proto.performEnter = function performEnter(mounting) {
+    var _this2 = this;
+    var enter = this.props.enter;
+    var appearing = this.context ? this.context.isMounting : mounting;
+    var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing], maybeNode = _ref2[0], maybeAppearing = _ref2[1];
+    var timeouts = this.getTimeouts();
+    var enterTimeout = appearing ? timeouts.appear : timeouts.enter;
+    if (!mounting && !enter || config.disabled) {
+      this.safeSetState({
+        status: ENTERED
+      }, function() {
+        _this2.props.onEntered(maybeNode);
+      });
+      return;
+    }
+    this.props.onEnter(maybeNode, maybeAppearing);
+    this.safeSetState({
+      status: ENTERING
+    }, function() {
+      _this2.props.onEntering(maybeNode, maybeAppearing);
+      _this2.onTransitionEnd(enterTimeout, function() {
+        _this2.safeSetState({
+          status: ENTERED
+        }, function() {
+          _this2.props.onEntered(maybeNode, maybeAppearing);
+        });
+      });
+    });
+  };
+  _proto.performExit = function performExit() {
+    var _this3 = this;
+    var exit = this.props.exit;
+    var timeouts = this.getTimeouts();
+    var maybeNode = this.props.nodeRef ? void 0 : ReactDOM.findDOMNode(this);
+    if (!exit || config.disabled) {
+      this.safeSetState({
+        status: EXITED
+      }, function() {
+        _this3.props.onExited(maybeNode);
+      });
+      return;
+    }
+    this.props.onExit(maybeNode);
+    this.safeSetState({
+      status: EXITING
+    }, function() {
+      _this3.props.onExiting(maybeNode);
+      _this3.onTransitionEnd(timeouts.exit, function() {
+        _this3.safeSetState({
+          status: EXITED
+        }, function() {
+          _this3.props.onExited(maybeNode);
+        });
+      });
+    });
+  };
+  _proto.cancelNextCallback = function cancelNextCallback() {
+    if (this.nextCallback !== null) {
+      this.nextCallback.cancel();
+      this.nextCallback = null;
+    }
+  };
+  _proto.safeSetState = function safeSetState(nextState, callback) {
+    callback = this.setNextCallback(callback);
+    this.setState(nextState, callback);
+  };
+  _proto.setNextCallback = function setNextCallback(callback) {
+    var _this4 = this;
+    var active = true;
+    this.nextCallback = function(event) {
+      if (active) {
+        active = false;
+        _this4.nextCallback = null;
+        callback(event);
+      }
+    };
+    this.nextCallback.cancel = function() {
+      active = false;
+    };
+    return this.nextCallback;
+  };
+  _proto.onTransitionEnd = function onTransitionEnd(timeout2, handler) {
+    this.setNextCallback(handler);
+    var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
+    var doesNotHaveTimeoutOrListener = timeout2 == null && !this.props.addEndListener;
+    if (!node || doesNotHaveTimeoutOrListener) {
+      setTimeout(this.nextCallback, 0);
+      return;
+    }
+    if (this.props.addEndListener) {
+      var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback], maybeNode = _ref3[0], maybeNextCallback = _ref3[1];
+      this.props.addEndListener(maybeNode, maybeNextCallback);
+    }
+    if (timeout2 != null) {
+      setTimeout(this.nextCallback, timeout2);
+    }
+  };
+  _proto.render = function render() {
+    var status = this.state.status;
+    if (status === UNMOUNTED) {
+      return null;
+    }
+    var _this$props = this.props, children = _this$props.children;
+    _this$props.in;
+    _this$props.mountOnEnter;
+    _this$props.unmountOnExit;
+    _this$props.appear;
+    _this$props.enter;
+    _this$props.exit;
+    _this$props.timeout;
+    _this$props.addEndListener;
+    _this$props.onEnter;
+    _this$props.onEntering;
+    _this$props.onEntered;
+    _this$props.onExit;
+    _this$props.onExiting;
+    _this$props.onExited;
+    _this$props.nodeRef;
+    var childProps = _objectWithoutPropertiesLoose$1(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+    return (
+      // allows for nested Transitions
+      /* @__PURE__ */ React.createElement(TransitionGroupContext.Provider, {
+        value: null
+      }, typeof children === "function" ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))
+    );
+  };
+  return Transition2;
+})(React.Component);
+Transition.contextType = TransitionGroupContext;
+Transition.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * A React reference to DOM element that need to transition:
+   * https://stackoverflow.com/a/51127130/4671932
+   *
+   *   - When `nodeRef` prop is used, `node` is not passed to callback functions
+   *      (e.g. `onEnter`) because user already has direct access to the node.
+   *   - When changing `key` prop of `Transition` in a `TransitionGroup` a new
+   *     `nodeRef` need to be provided to `Transition` with changed `key` prop
+   *     (see
+   *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
+   */
+  nodeRef: PropTypes.shape({
+    current: typeof Element === "undefined" ? PropTypes.any : function(propValue, key, componentName, location2, propFullName, secret) {
+      var value2 = propValue[key];
+      return PropTypes.instanceOf(value2 && "ownerDocument" in value2 ? value2.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location2, propFullName, secret);
+    }
+  }),
+  /**
+   * A `function` child can be used instead of a React element. This function is
+   * called with the current transition status (`'entering'`, `'entered'`,
+   * `'exiting'`, `'exited'`), which can be used to apply context
+   * specific props to a component.
+   *
+   * ```jsx
+   * <Transition in={this.state.in} timeout={150}>
+   *   {state => (
+   *     <MyComponent className={`fade fade-${state}`} />
+   *   )}
+   * </Transition>
+   * ```
+   */
+  children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
+  /**
+   * Show the component; triggers the enter or exit states
+   */
+  in: PropTypes.bool,
+  /**
+   * By default the child component is mounted immediately along with
+   * the parent `Transition` component. If you want to "lazy mount" the component on the
+   * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
+   * mounted, even on "exited", unless you also specify `unmountOnExit`.
+   */
+  mountOnEnter: PropTypes.bool,
+  /**
+   * By default the child component stays mounted after it reaches the `'exited'` state.
+   * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
+   */
+  unmountOnExit: PropTypes.bool,
+  /**
+   * By default the child component does not perform the enter transition when
+   * it first mounts, regardless of the value of `in`. If you want this
+   * behavior, set both `appear` and `in` to `true`.
+   *
+   * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
+   * > only adds an additional enter transition. However, in the
+   * > `<CSSTransition>` component that first enter transition does result in
+   * > additional `.appear-*` classes, that way you can choose to style it
+   * > differently.
+   */
+  appear: PropTypes.bool,
+  /**
+   * Enable or disable enter transitions.
+   */
+  enter: PropTypes.bool,
+  /**
+   * Enable or disable exit transitions.
+   */
+  exit: PropTypes.bool,
+  /**
+   * The duration of the transition, in milliseconds.
+   * Required unless `addEndListener` is provided.
+   *
+   * You may specify a single timeout for all transitions:
+   *
+   * ```jsx
+   * timeout={500}
+   * ```
+   *
+   * or individually:
+   *
+   * ```jsx
+   * timeout={{
+   *  appear: 500,
+   *  enter: 300,
+   *  exit: 500,
+   * }}
+   * ```
+   *
+   * - `appear` defaults to the value of `enter`
+   * - `enter` defaults to `0`
+   * - `exit` defaults to `0`
+   *
+   * @type {number | { enter?: number, exit?: number, appear?: number }}
+   */
+  timeout: function timeout(props) {
+    var pt = timeoutsShape;
+    if (!props.addEndListener) pt = pt.isRequired;
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    return pt.apply(void 0, [props].concat(args));
+  },
+  /**
+   * Add a custom transition end trigger. Called with the transitioning
+   * DOM node and a `done` callback. Allows for more fine grained transition end
+   * logic. Timeouts are still used as a fallback if provided.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * ```jsx
+   * addEndListener={(node, done) => {
+   *   // use the css transitionend event to mark the finish of a transition
+   *   node.addEventListener('transitionend', done, false);
+   * }}
+   * ```
+   */
+  addEndListener: PropTypes.func,
+  /**
+   * Callback fired before the "entering" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool) -> void
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the "entering" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool)
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the "entered" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool) -> void
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the "exiting" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the "exiting" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the "exited" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExited: PropTypes.func
+} : {};
+function noop$1() {
+}
+Transition.defaultProps = {
+  in: false,
+  mountOnEnter: false,
+  unmountOnExit: false,
+  appear: false,
+  enter: true,
+  exit: true,
+  onEnter: noop$1,
+  onEntering: noop$1,
+  onEntered: noop$1,
+  onExit: noop$1,
+  onExiting: noop$1,
+  onExited: noop$1
+};
+Transition.UNMOUNTED = UNMOUNTED;
+Transition.EXITED = EXITED;
+Transition.ENTERING = ENTERING;
+Transition.ENTERED = ENTERED;
+Transition.EXITING = EXITING;
+const reflow = (node) => node.scrollTop;
+function getTransitionProps(props, options) {
+  const {
+    timeout: timeout2,
+    easing: easing2,
+    style: style2 = {}
+  } = props;
+  return {
+    duration: style2.transitionDuration ?? (typeof timeout2 === "number" ? timeout2 : timeout2[options.mode] || 0),
+    easing: style2.transitionTimingFunction ?? (typeof easing2 === "object" ? easing2[options.mode] : easing2),
+    delay: style2.transitionDelay
+  };
+}
+function getScale(value2) {
+  return `scale(${value2}, ${value2 ** 2})`;
+}
+const styles = {
+  entering: {
+    opacity: 1,
+    transform: getScale(1)
+  },
+  entered: {
+    opacity: 1,
+    transform: "none"
+  }
+};
+const isWebKit154 = typeof navigator !== "undefined" && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
+const Grow = /* @__PURE__ */ React__namespace.forwardRef(function Grow2(props, ref) {
+  const {
+    addEndListener,
+    appear = true,
+    children,
+    easing: easing2,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style: style2,
+    timeout: timeout2 = "auto",
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
+  const timer = useTimeout();
+  const autoTimeout = React__namespace.useRef();
+  const theme = useTheme();
+  const nodeRef = React__namespace.useRef(null);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
+  const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
+    if (callback) {
+      const node = nodeRef.current;
+      if (maybeIsAppearing === void 0) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+  const handleEntering = normalizedTransitionCallback(onEntering);
+  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+    reflow(node);
+    const {
+      duration: transitionDuration,
+      delay: delay2,
+      easing: transitionTimingFunction
+    } = getTransitionProps({
+      style: style2,
+      timeout: timeout2,
+      easing: easing2
+    }, {
+      mode: "enter"
+    });
+    let duration2;
+    if (timeout2 === "auto") {
+      duration2 = theme.transitions.getAutoHeightDuration(node.clientHeight);
+      autoTimeout.current = duration2;
+    } else {
+      duration2 = transitionDuration;
+    }
+    node.style.transition = [theme.transitions.create("opacity", {
+      duration: duration2,
+      delay: delay2
+    }), theme.transitions.create("transform", {
+      duration: isWebKit154 ? duration2 : duration2 * 0.666,
+      delay: delay2,
+      easing: transitionTimingFunction
+    })].join(",");
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  });
+  const handleEntered = normalizedTransitionCallback(onEntered);
+  const handleExiting = normalizedTransitionCallback(onExiting);
+  const handleExit = normalizedTransitionCallback((node) => {
+    const {
+      duration: transitionDuration,
+      delay: delay2,
+      easing: transitionTimingFunction
+    } = getTransitionProps({
+      style: style2,
+      timeout: timeout2,
+      easing: easing2
+    }, {
+      mode: "exit"
+    });
+    let duration2;
+    if (timeout2 === "auto") {
+      duration2 = theme.transitions.getAutoHeightDuration(node.clientHeight);
+      autoTimeout.current = duration2;
+    } else {
+      duration2 = transitionDuration;
+    }
+    node.style.transition = [theme.transitions.create("opacity", {
+      duration: duration2,
+      delay: delay2
+    }), theme.transitions.create("transform", {
+      duration: isWebKit154 ? duration2 : duration2 * 0.666,
+      delay: isWebKit154 ? delay2 : delay2 || duration2 * 0.333,
+      easing: transitionTimingFunction
+    })].join(",");
+    node.style.opacity = 0;
+    node.style.transform = getScale(0.75);
+    if (onExit) {
+      onExit(node);
+    }
+  });
+  const handleExited = normalizedTransitionCallback(onExited);
+  const handleAddEndListener = (next) => {
+    if (timeout2 === "auto") {
+      timer.start(autoTimeout.current || 0, next);
+    }
+    if (addEndListener) {
+      addEndListener(nodeRef.current, next);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TransitionComponent, {
+    appear,
+    in: inProp,
+    nodeRef,
+    onEnter: handleEnter,
+    onEntered: handleEntered,
+    onEntering: handleEntering,
+    onExit: handleExit,
+    onExited: handleExited,
+    onExiting: handleExiting,
+    addEndListener: handleAddEndListener,
+    timeout: timeout2 === "auto" ? null : timeout2,
+    ...other,
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
+      return /* @__PURE__ */ React__namespace.cloneElement(children, {
+        style: {
+          opacity: 0,
+          transform: getScale(0.75),
+          visibility: state === "exited" && !inProp ? "hidden" : void 0,
+          ...styles[state],
+          ...style2,
+          ...children.props.style
+        },
+        ref: handleRef,
+        ...restChildProps
+      });
+    }
+  });
+});
+process.env.NODE_ENV !== "production" ? Grow.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: PropTypes.func,
+  /**
+   * Perform the enter transition when it first mounts if `in` is also `true`.
+   * Set this to `false` to disable this behavior.
+   * @default true
+   */
+  appear: PropTypes.bool,
+  /**
+   * A single child content element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: PropTypes.oneOfType([PropTypes.shape({
+    enter: PropTypes.string,
+    exit: PropTypes.string
+  }), PropTypes.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExit: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExited: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExiting: PropTypes.func,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   * @default 'auto'
+   */
+  timeout: PropTypes.oneOfType([PropTypes.oneOf(["auto"]), PropTypes.number, PropTypes.shape({
+    appear: PropTypes.number,
+    enter: PropTypes.number,
+    exit: PropTypes.number
+  })])
+} : void 0;
+if (Grow) {
+  Grow.muiSupportAuto = true;
+}
+function getTypeByValue(value2) {
+  const valueType = typeof value2;
+  switch (valueType) {
+    case "number":
+      if (Number.isNaN(value2)) {
+        return "NaN";
+      }
+      if (!Number.isFinite(value2)) {
+        return "Infinity";
+      }
+      if (value2 !== Math.floor(value2)) {
+        return "float";
+      }
+      return "number";
+    case "object":
+      if (value2 === null) {
+        return "null";
+      }
+      return value2.constructor.name;
+    default:
+      return valueType;
+  }
+}
+function requiredInteger(props, propName, componentName, location2) {
+  const propValue = props[propName];
+  if (propValue == null || !Number.isInteger(propValue)) {
+    const propType = getTypeByValue(propValue);
+    return new RangeError(`Invalid ${location2} \`${propName}\` of type \`${propType}\` supplied to \`${componentName}\`, expected \`integer\`.`);
+  }
+  return null;
+}
+function validator(props, propName, componentName, location2) {
+  const propValue = props[propName];
+  if (propValue === void 0) {
+    return null;
+  }
+  return requiredInteger(props, propName, componentName, location2);
+}
+function validatorNoop() {
+  return null;
+}
+validator.isRequired = requiredInteger;
+validatorNoop.isRequired = validatorNoop;
+const integerPropType = process.env.NODE_ENV === "production" ? validatorNoop : validator;
+function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
+  const result = {};
+  slots.forEach((slot) => {
+    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+  });
+  return result;
+}
+function getPaperUtilityClass(slot) {
+  return generateUtilityClass("MuiPaper", 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$3 = (ownerState) => {
+  const {
+    square,
+    elevation,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", variant, !square && "rounded", variant === "elevation" && `elevation${elevation}`]
+  };
+  return composeClasses(slots, getPaperUtilityClass, classes);
+};
+const PaperRoot = styled("div", {
+  name: "MuiPaper",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[ownerState.variant], !ownerState.square && styles2.rounded, ownerState.variant === "elevation" && styles2[`elevation${ownerState.elevation}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create("box-shadow"),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: "outlined"
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: "elevation"
+    },
+    style: {
+      boxShadow: "var(--Paper-shadow)",
+      backgroundImage: "var(--Paper-overlay)"
+    }
+  }]
+})));
+const Paper = /* @__PURE__ */ React__namespace.forwardRef(function Paper2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiPaper"
+  });
+  const theme = useTheme();
+  const {
+    className,
+    component = "div",
+    elevation = 1,
+    square = false,
+    variant = "elevation",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    component,
+    elevation,
+    square,
+    variant
+  };
+  const classes = useUtilityClasses$3(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"));
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(PaperRoot, {
+    as: component,
+    ownerState,
+    className: clsx(classes.root, className),
+    ref,
+    ...other,
+    style: {
+      ...variant === "elevation" && {
+        "--Paper-shadow": (theme.vars || theme).shadows[elevation],
+        ...theme.vars && {
+          "--Paper-overlay": theme.vars.overlays?.[elevation]
+        },
+        ...!theme.vars && theme.palette.mode === "dark" && {
+          "--Paper-overlay": `linear-gradient(${alpha$1("#fff", getOverlayAlpha(elevation))}, ${alpha$1("#fff", getOverlayAlpha(elevation))})`
+        }
+      },
+      ...other.style
+    }
+  });
+});
+process.env.NODE_ENV !== "production" ? Paper.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 1
+   */
+  elevation: chainPropTypes(integerPropType, (props) => {
+    const {
+      elevation,
+      variant
+    } = props;
+    if (elevation > 0 && variant === "outlined") {
+      return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
+    }
+    return null;
+  }),
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant: PropTypes.oneOfType([PropTypes.oneOf(["elevation", "outlined"]), PropTypes.string])
+} : void 0;
+function getSnackbarContentUtilityClass(slot) {
+  return generateUtilityClass("MuiSnackbarContent", slot);
+}
+generateUtilityClasses("MuiSnackbarContent", ["root", "message", "action"]);
+const useUtilityClasses$2 = (ownerState) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root"],
+    action: ["action"],
+    message: ["message"]
+  };
+  return composeClasses(slots, getSnackbarContentUtilityClass, classes);
+};
+const SnackbarContentRoot = styled(Paper, {
+  name: "MuiSnackbarContent",
+  slot: "Root"
+})(memoTheme(({
+  theme
+}) => {
+  const emphasis = theme.palette.mode === "light" ? 0.8 : 0.98;
+  return {
+    ...theme.typography.body2,
+    color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(emphasize(theme.palette.background.default, emphasis)),
+    backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : emphasize(theme.palette.background.default, emphasis),
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    padding: "6px 16px",
+    flexGrow: 1,
+    [theme.breakpoints.up("sm")]: {
+      flexGrow: "initial",
+      minWidth: 288
+    }
+  };
+}));
+const SnackbarContentMessage = styled("div", {
+  name: "MuiSnackbarContent",
+  slot: "Message"
+})({
+  padding: "8px 0"
+});
+const SnackbarContentAction = styled("div", {
+  name: "MuiSnackbarContent",
+  slot: "Action"
+})({
+  display: "flex",
+  alignItems: "center",
+  marginLeft: "auto",
+  paddingLeft: 16,
+  marginRight: -8
+});
+const SnackbarContent = /* @__PURE__ */ React__namespace.forwardRef(function SnackbarContent2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiSnackbarContent"
+  });
+  const {
+    action,
+    className,
+    message,
+    role = "alert",
+    ...other
+  } = props;
+  const ownerState = props;
+  const classes = useUtilityClasses$2(ownerState);
+  return /* @__PURE__ */ jsxRuntime.jsxs(SnackbarContentRoot, {
+    role,
+    elevation: 6,
+    className: clsx(classes.root, className),
+    ownerState,
+    ref,
+    ...other,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(SnackbarContentMessage, {
+      className: classes.message,
+      ownerState,
+      children: message
+    }), action ? /* @__PURE__ */ jsxRuntime.jsx(SnackbarContentAction, {
+      className: classes.action,
+      ownerState,
+      children: action
+    }) : null]
+  });
+});
+process.env.NODE_ENV !== "production" ? SnackbarContent.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The action to display. It renders after the message, at the end of the snackbar.
+   */
+  action: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The message to display.
+   */
+  message: PropTypes.node,
+  /**
+   * The ARIA role attribute of the element.
+   * @default 'alert'
+   */
+  role: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+function getSnackbarUtilityClass(slot) {
+  return generateUtilityClass("MuiSnackbar", slot);
+}
+generateUtilityClasses("MuiSnackbar", ["root", "anchorOriginTopCenter", "anchorOriginBottomCenter", "anchorOriginTopRight", "anchorOriginBottomRight", "anchorOriginTopLeft", "anchorOriginBottomLeft"]);
+function isHostComponent(element) {
+  return typeof element === "string";
+}
+function appendOwnerState(elementType, otherProps, ownerState) {
+  if (elementType === void 0 || isHostComponent(elementType)) {
+    return otherProps;
+  }
+  return {
+    ...otherProps,
+    ownerState: {
+      ...otherProps.ownerState,
+      ...ownerState
+    }
+  };
+}
+function resolveComponentProps(componentProps, ownerState, slotState) {
+  if (typeof componentProps === "function") {
+    return componentProps(ownerState, slotState);
+  }
+  return componentProps;
+}
+function omitEventHandlers(object2) {
+  if (object2 === void 0) {
+    return {};
+  }
+  const result = {};
+  Object.keys(object2).filter((prop) => !(prop.match(/^on[A-Z]/) && typeof object2[prop] === "function")).forEach((prop) => {
+    result[prop] = object2[prop];
+  });
+  return result;
+}
+function mergeSlotProps(parameters) {
+  const {
+    getSlotProps,
+    additionalProps,
+    externalSlotProps,
+    externalForwardedProps,
+    className
+  } = parameters;
+  if (!getSlotProps) {
+    const joinedClasses2 = clsx(additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
+    const mergedStyle2 = {
+      ...additionalProps?.style,
+      ...externalForwardedProps?.style,
+      ...externalSlotProps?.style
+    };
+    const props2 = {
+      ...additionalProps,
+      ...externalForwardedProps,
+      ...externalSlotProps
+    };
+    if (joinedClasses2.length > 0) {
+      props2.className = joinedClasses2;
+    }
+    if (Object.keys(mergedStyle2).length > 0) {
+      props2.style = mergedStyle2;
+    }
+    return {
+      props: props2,
+      internalRef: void 0
+    };
+  }
+  const eventHandlers = extractEventHandlers({
+    ...externalForwardedProps,
+    ...externalSlotProps
+  });
+  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+  const internalSlotProps = getSlotProps(eventHandlers);
+  const joinedClasses = clsx(internalSlotProps?.className, additionalProps?.className, className, externalForwardedProps?.className, externalSlotProps?.className);
+  const mergedStyle = {
+    ...internalSlotProps?.style,
+    ...additionalProps?.style,
+    ...externalForwardedProps?.style,
+    ...externalSlotProps?.style
+  };
+  const props = {
+    ...internalSlotProps,
+    ...additionalProps,
+    ...otherPropsWithoutEventHandlers,
+    ...componentsPropsWithoutEventHandlers
+  };
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
+  }
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+  return {
+    props,
+    internalRef: internalSlotProps.ref
+  };
+}
+function useSlot(name2, parameters) {
+  const {
+    className,
+    elementType: initialElementType,
+    ownerState,
+    externalForwardedProps,
+    internalForwardedProps,
+    shouldForwardComponentProp = false,
+    ...useSlotPropsParams
+  } = parameters;
+  const {
+    component: rootComponent,
+    slots = {
+      [name2]: void 0
+    },
+    slotProps = {
+      [name2]: void 0
+    },
+    ...other
+  } = externalForwardedProps;
+  const elementType = slots[name2] || initialElementType;
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name2], ownerState);
+  const {
+    props: {
+      component: slotComponent,
+      ...mergedProps
+    },
+    internalRef
+  } = mergeSlotProps({
+    className,
+    ...useSlotPropsParams,
+    externalForwardedProps: name2 === "root" ? other : void 0,
+    externalSlotProps: resolvedComponentsProps
+  });
+  const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
+  const LeafComponent = name2 === "root" ? slotComponent || rootComponent : slotComponent;
+  const props = appendOwnerState(elementType, {
+    ...name2 === "root" && !rootComponent && !slots[name2] && internalForwardedProps,
+    ...name2 !== "root" && !slots[name2] && internalForwardedProps,
+    ...mergedProps,
+    ...LeafComponent && !shouldForwardComponentProp && {
+      as: LeafComponent
+    },
+    ...LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    },
+    ref
+  }, ownerState);
+  return [elementType, props];
+}
+const useUtilityClasses$1 = (ownerState) => {
+  const {
+    classes,
+    anchorOrigin
+  } = ownerState;
+  const slots = {
+    root: ["root", `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`]
+  };
+  return composeClasses(slots, getSnackbarUtilityClass, classes);
+};
+const SnackbarRoot = styled("div", {
+  name: "MuiSnackbar",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.snackbar,
+  position: "fixed",
+  display: "flex",
+  left: 8,
+  right: 8,
+  justifyContent: "center",
+  alignItems: "center",
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "top",
+    style: {
+      top: 8,
+      [theme.breakpoints.up("sm")]: {
+        top: 24
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical !== "top",
+    style: {
+      bottom: 8,
+      [theme.breakpoints.up("sm")]: {
+        bottom: 24
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === "left",
+    style: {
+      justifyContent: "flex-start",
+      [theme.breakpoints.up("sm")]: {
+        left: 24,
+        right: "auto"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === "right",
+    style: {
+      justifyContent: "flex-end",
+      [theme.breakpoints.up("sm")]: {
+        right: 24,
+        left: "auto"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === "center",
+    style: {
+      [theme.breakpoints.up("sm")]: {
+        left: "50%",
+        right: "auto",
+        transform: "translateX(-50%)"
+      }
+    }
+  }]
+})));
+const Snackbar = /* @__PURE__ */ React__namespace.forwardRef(function Snackbar2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiSnackbar"
+  });
+  const theme = useTheme();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+  const {
+    action,
+    anchorOrigin: {
+      vertical,
+      horizontal
+    } = {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    autoHideDuration = null,
+    children,
+    className,
+    ClickAwayListenerProps: ClickAwayListenerPropsProp,
+    ContentProps: ContentPropsProp,
+    disableWindowBlurListener = false,
+    message,
+    onBlur,
+    onClose,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    open,
+    resumeHideDuration,
+    slots = {},
+    slotProps = {},
+    TransitionComponent: TransitionComponentProp,
+    transitionDuration = defaultTransitionDuration,
+    TransitionProps: {
+      onEnter,
+      onExited,
+      ...TransitionPropsProp
+    } = {},
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    anchorOrigin: {
+      vertical,
+      horizontal
+    },
+    autoHideDuration,
+    disableWindowBlurListener,
+    TransitionComponent: TransitionComponentProp,
+    transitionDuration
+  };
+  const classes = useUtilityClasses$1(ownerState);
+  const {
+    getRootProps,
+    onClickAway
+  } = useSnackbar$1({
+    ...ownerState
+  });
+  const [exited, setExited] = React__namespace.useState(true);
+  const handleExited = (node) => {
+    setExited(true);
+    if (onExited) {
+      onExited(node);
+    }
+  };
+  const handleEnter = (node, isAppearing) => {
+    setExited(false);
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  };
+  const externalForwardedProps = {
+    slots: {
+      transition: TransitionComponentProp,
+      ...slots
+    },
+    slotProps: {
+      content: ContentPropsProp,
+      clickAwayListener: ClickAwayListenerPropsProp,
+      transition: TransitionPropsProp,
+      ...slotProps
+    }
+  };
+  const [Root, rootProps] = useSlot("root", {
+    ref,
+    className: [classes.root, className],
+    elementType: SnackbarRoot,
+    getSlotProps: getRootProps,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState
+  });
+  const [ClickAwaySlot, {
+    ownerState: clickAwayOwnerStateProp,
+    ...clickAwayListenerProps
+  }] = useSlot("clickAwayListener", {
+    elementType: ClickAwayListener,
+    externalForwardedProps,
+    getSlotProps: (handlers) => ({
+      onClickAway: (...params) => {
+        const event = params[0];
+        handlers.onClickAway?.(...params);
+        if (event?.defaultMuiPrevented) {
+          return;
+        }
+        onClickAway(...params);
+      }
+    }),
+    ownerState
+  });
+  const [ContentSlot, contentSlotProps] = useSlot("content", {
+    elementType: SnackbarContent,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    additionalProps: {
+      message,
+      action
+    },
+    ownerState
+  });
+  const [TransitionSlot, transitionProps] = useSlot("transition", {
+    elementType: Grow,
+    externalForwardedProps,
+    getSlotProps: (handlers) => ({
+      onEnter: (...params) => {
+        handlers.onEnter?.(...params);
+        handleEnter(...params);
+      },
+      onExited: (...params) => {
+        handlers.onExited?.(...params);
+        handleExited(...params);
+      }
+    }),
+    additionalProps: {
+      appear: true,
+      in: open,
+      timeout: transitionDuration,
+      direction: vertical === "top" ? "down" : "up"
+    },
+    ownerState
+  });
+  if (!open && exited) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ClickAwaySlot, {
+    ...clickAwayListenerProps,
+    ...slots.clickAwayListener && {
+      ownerState: clickAwayOwnerStateProp
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(Root, {
+      ...rootProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TransitionSlot, {
+        ...transitionProps,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(ContentSlot, {
+          ...contentSlotProps
+        })
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? Snackbar.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The action to display. It renders after the message, at the end of the snackbar.
+   */
+  action: PropTypes.node,
+  /**
+   * The anchor of the `Snackbar`.
+   * On smaller screens, the component grows to occupy all the available width,
+   * the horizontal alignment is ignored.
+   * @default { vertical: 'bottom', horizontal: 'left' }
+   */
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOf(["center", "left", "right"]).isRequired,
+    vertical: PropTypes.oneOf(["bottom", "top"]).isRequired
+  }),
+  /**
+   * The number of milliseconds to wait before automatically calling the
+   * `onClose` function. `onClose` should then set the state of the `open`
+   * prop to hide the Snackbar. This behavior is disabled by default with
+   * the `null` value.
+   * @default null
+   */
+  autoHideDuration: PropTypes.number,
+  /**
+   * Replace the `SnackbarContent` component.
+   */
+  children: PropTypes.element,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   /**
    * @ignore
    */
-  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Props applied to the `ClickAwayListener` element.
+   * @deprecated Use `slotProps.clickAwayListener` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  ClickAwayListenerProps: PropTypes.object,
+  /**
+   * Props applied to the [`SnackbarContent`](https://mui.com/material-ui/api/snackbar-content/) element.
+   * @deprecated Use `slotProps.content` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  ContentProps: PropTypes.object,
+  /**
+   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
+   * @default false
+   */
+  disableWindowBlurListener: PropTypes.bool,
+  /**
+   * When displaying multiple consecutive snackbars using a single parent-rendered
+   * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
+   * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
+   * in place, and features like `autoHideDuration` could be affected.
+   */
+  key: () => null,
+  /**
+   * The message to display.
+   */
+  message: PropTypes.node,
   /**
    * @ignore
    */
-  value: PropTypes.object.isRequired
+  onBlur: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Typically `onClose` is used to set state in the parent component,
+   * which is used to control the `Snackbar` `open` prop.
+   * The `reason` parameter can optionally be used to control the response to `onClose`,
+   * for example ignoring `clickaway`.
+   *
+   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
+   */
+  onClose: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool,
+  /**
+   * The number of milliseconds to wait before dismissing after user interaction.
+   * If `autoHideDuration` prop isn't specified, it does nothing.
+   * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
+   * we default to `autoHideDuration / 2` ms.
+   */
+  resumeHideDuration: PropTypes.number,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    clickAwayListener: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    clickAwayListener: PropTypes.elementType,
+    content: PropTypes.elementType,
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @default Grow
+   */
+  TransitionComponent: PropTypes.elementType,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    appear: PropTypes.number,
+    enter: PropTypes.number,
+    exit: PropTypes.number
+  })]),
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @default {}
+   */
+  TransitionProps: PropTypes.object
 } : void 0;
-function useDefaultProps(params) {
-  return useDefaultProps$1(params);
-}
-function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
-  const result = {};
-  slots.forEach((slot) => {
-    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
-  });
-  return result;
-}
 var SnackbarType = /* @__PURE__ */ ((SnackbarType2) => {
   SnackbarType2["INFO"] = "info";
   SnackbarType2["SUCCESS"] = "success";
@@ -17776,10 +19747,61 @@ var SnackbarType = /* @__PURE__ */ ((SnackbarType2) => {
   SnackbarType2["WARNING"] = "warning";
   return SnackbarType2;
 })(SnackbarType || {});
-const SnackbarContext = React.createContext(void 0);
+const SnackbarContext = React.createContext(
+  void 0
+);
+const SnackbarProvider = ({
+  children
+}) => {
+  const [snackbar, setSnackbar] = React.useState(
+    {
+      open: false,
+      message: "",
+      type: "info"
+      /* INFO */
+    }
+  );
+  const showSnackbar = (params) => {
+    setSnackbar({
+      open: true,
+      ...params
+    });
+  };
+  const handleClose = () => {
+    setSnackbar({ ...snackbar, open: false });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(SnackbarContext.Provider, { value: { showSnackbar }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Snackbar,
+      {
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        sx: {
+          "&.MuiSnackbar-root": {
+            bottom: STYLE.PADDING_GAP_LAYOUT,
+            right: STYLE.PADDING_GAP_LAYOUT
+          }
+        },
+        open: snackbar.open,
+        autoHideDuration: 6e3,
+        onClose: handleClose,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Alert,
+          {
+            sx: { borderRadius: STYLE.BORDER_RADIUS_ELEMENT, boxShadow: 1 },
+            onClose: handleClose,
+            severity: snackbar.type,
+            children: snackbar.message
+          }
+        )
+      }
+    )
+  ] });
+};
 const useSnackbar = () => {
   const context = React.useContext(SnackbarContext);
-  if (!context) throw new Error("useSnackbar must be used within a SnackbarProvider");
+  if (!context)
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
   return context;
 };
 const useTagSelector = (movementId) => {
@@ -17793,11 +19815,15 @@ const useTagSelector = (movementId) => {
   const { showSnackbar } = useSnackbar();
   React.useEffect(() => {
     if (searchQuery.trim()) {
-      const filtered = users.filter((user) => user.name.toLowerCase().includes(searchQuery.toLowerCase())).filter((user) => !taggedUserIds.has(user.id));
+      const filtered = users.filter(
+        (user) => user.name.toLowerCase().includes(searchQuery.toLowerCase())
+      ).filter((user) => !taggedUserIds.has(user.id));
       setFilteredUsers(filtered);
       setSelectedUserIndex(0);
     } else {
-      const availableUsers = users.filter((user) => !taggedUserIds.has(user?.id));
+      const availableUsers = users.filter(
+        (user) => !taggedUserIds.has(user?.id)
+      );
       setFilteredUsers(availableUsers);
       setSelectedUserIndex(0);
     }
@@ -17813,7 +19839,10 @@ const useTagSelector = (movementId) => {
       const spaceIndex = afterAt?.indexOf(" ");
       if (spaceIndex === -1) {
         setSearchQuery(afterAt);
-        setTagPosition({ start: lastAtSymbol, end: lastAtSymbol + afterAt.length + 1 });
+        setTagPosition({
+          start: lastAtSymbol,
+          end: lastAtSymbol + afterAt.length + 1
+        });
         setShowTagSelector(true);
         return;
       }
@@ -17900,7 +19929,9 @@ const useUpdateCurrentAccess = () => {
     async (pathname) => {
       const currentAccess = findCurrentAccessByPath(pathname);
       if (currentAccess) {
-        await dispatch(ACTION_ACCOUNT.updateCurrentAccess(currentAccess)).unwrap();
+        await dispatch(
+          ACTION_ACCOUNT.updateCurrentAccess(currentAccess)
+        ).unwrap();
       }
     },
     [dispatch]
@@ -17937,6 +19968,44 @@ const useVersionCheck = (options) => {
     }
   }, [options?.interval]);
 };
+const SidebarContext = React.createContext(
+  void 0
+);
+const SidebarProvider = ({
+  children
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [activeExpandMenu, setActiveExpandMenu] = React.useState(
+    null
+  );
+  const { current_access } = reactRedux.useSelector(
+    (state) => state.account
+  );
+  React.useEffect(() => {
+    setActiveExpandMenu(null);
+  }, [current_access]);
+  const sidebarWidth = activeExpandMenu ? isCollapsed ? STYLE.WIDTH_COLLAPSE + STYLE.WIDTH_SIDEBAR_EXPAND : STYLE.WIDTH_SIDEBAR + STYLE.WIDTH_SIDEBAR_EXPAND : isCollapsed ? STYLE.WIDTH_COLLAPSE : STYLE.WIDTH_SIDEBAR;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarContext.Provider,
+    {
+      value: {
+        isCollapsed,
+        setIsCollapsed,
+        activeExpandMenu,
+        setActiveExpandMenu,
+        sidebarWidth: `${sidebarWidth}px`
+      },
+      children
+    }
+  );
+};
+const useSidebar = () => {
+  const context = React.useContext(SidebarContext);
+  if (context === void 0) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
 const AuthLayout = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Stack,
@@ -18391,11 +20460,11 @@ const useUtilityClasses = (ownerState) => {
 const CircularProgressRoot = styled("span", {
   name: "MuiCircularProgress",
   slot: "Root",
-  overridesResolver: (props, styles) => {
+  overridesResolver: (props, styles2) => {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];
+    return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize(ownerState.color)}`]];
   }
 })(memoTheme(({
   theme
@@ -18434,11 +20503,11 @@ const CircularProgressSVG = styled("svg", {
 const CircularProgressCircle = styled("circle", {
   name: "MuiCircularProgress",
   slot: "Circle",
-  overridesResolver: (props, styles) => {
+  overridesResolver: (props, styles2) => {
     const {
       ownerState
     } = props;
-    return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
+    return [styles2.circle, styles2[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
   }
 })(memoTheme(({
   theme
@@ -19193,8 +21262,32 @@ const MonitorPart = ({
 const DashboardLayout = ({
   children
 }) => {
-  useUpdateCurrentAccess();
-  return /* @__PURE__ */ jsxRuntime.jsx(MonitorPart, { children });
+  const isSystemMonitor = useIsSystemMonitor();
+  const { sidebarWidth } = useSidebar();
+  if (isSystemMonitor) return /* @__PURE__ */ jsxRuntime.jsx(MonitorPart, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Stack,
+    {
+      sx: {
+        minHeight: "100vh",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { p: 0, gap: 0, children: /* @__PURE__ */ jsxRuntime.jsx(StackRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.Stack,
+        {
+          sx: {
+            overflowY: "auto",
+            marginLeft: sidebarWidth,
+            width: "100%",
+            transition: "margin-left 0.3s ease",
+            background: "#F5F6F8",
+            minHeight: `calc(100vh - ${STYLE.HEIGHT_HEADER}px)`
+          },
+          children
+        }
+      ) }) })
+    }
+  );
 };
 const DefaultLayout = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -22116,13 +24209,13 @@ Object.assign(/* @__PURE__ */ Object.create(null), {
 });
 const isSchema = (obj) => obj && obj.__isYupSchema__;
 class Condition {
-  static fromOptions(refs, config) {
-    if (!config.then && !config.otherwise) throw new TypeError("either `then:` or `otherwise:` is required for `when()` conditions");
+  static fromOptions(refs, config2) {
+    if (!config2.then && !config2.otherwise) throw new TypeError("either `then:` or `otherwise:` is required for `when()` conditions");
     let {
       is,
       then,
       otherwise
-    } = config;
+    } = config2;
     let check = typeof is === "function" ? is : (...values2) => values2.every((value2) => value2 === is);
     return new Condition(refs, (values2, schema) => {
       var _branch;
@@ -22208,7 +24301,7 @@ class Reference {
 }
 Reference.prototype.__isYupRef = true;
 const isAbsent = (value2) => value2 == null;
-function createValidation(config) {
+function createValidation(config2) {
   function validate({
     value: value2,
     path = "",
@@ -22222,7 +24315,7 @@ function createValidation(config) {
       params,
       message,
       skipAbsent
-    } = config;
+    } = config2;
     let {
       parent,
       context,
@@ -22290,7 +24383,7 @@ function createValidation(config) {
     }
     handleResult(result);
   }
-  validate.OPTIONS = config;
+  validate.OPTIONS = config2;
   return validate;
 }
 function resolveParams(params, options) {
@@ -24171,37 +26264,6 @@ const NotFoundPage = ({}) => {
     /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
   ] });
 };
-const SidebarContext = React.createContext(
-  void 0
-);
-const SidebarProvider = ({
-  children
-}) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(false);
-  const [activeExpandMenu, setActiveExpandMenu] = React.useState(
-    null
-  );
-  const { current_access } = reactRedux.useSelector(
-    (state) => state.account
-  );
-  React.useEffect(() => {
-    setActiveExpandMenu(null);
-  }, [current_access]);
-  const sidebarWidth = activeExpandMenu ? isCollapsed ? STYLE.WIDTH_COLLAPSE + STYLE.WIDTH_SIDEBAR_EXPAND : STYLE.WIDTH_SIDEBAR + STYLE.WIDTH_SIDEBAR_EXPAND : isCollapsed ? STYLE.WIDTH_COLLAPSE : STYLE.WIDTH_SIDEBAR;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SidebarContext.Provider,
-    {
-      value: {
-        isCollapsed,
-        setIsCollapsed,
-        activeExpandMenu,
-        setActiveExpandMenu,
-        sidebarWidth: `${sidebarWidth}px`
-      },
-      children
-    }
-  );
-};
 const LayoutGroupContext = React.createContext({});
 function useConstant(init) {
   const ref = React.useRef(null);
@@ -27526,10 +29588,10 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
   }
   return values2;
 }
-const makeUseVisualState = (config) => (props, isStatic) => {
+const makeUseVisualState = (config2) => (props, isStatic) => {
   const context = React.useContext(MotionContext);
   const presenceContext = React.useContext(PresenceContext);
-  const make = () => makeState(config, props, context, presenceContext);
+  const make = () => makeState(config2, props, context, presenceContext);
   return isStatic ? make() : useConstant(make);
 };
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
@@ -29861,13 +31923,13 @@ class FlatTree {
     this.children.forEach(callback);
   }
 }
-function delay(callback, timeout) {
+function delay(callback, timeout2) {
   const start = time.now();
   const checkElapsed = ({ timestamp }) => {
     const elapsed = timestamp - start;
-    if (elapsed >= timeout) {
+    if (elapsed >= timeout2) {
       cancelFrame(checkElapsed);
-      callback(elapsed - timeout);
+      callback(elapsed - timeout2);
     }
   };
   frame.setup(checkElapsed, true);
@@ -30853,10 +32915,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       const stack = this.sharedNodes.get(layoutId);
       stack.add(node);
-      const config = node.options.initialPromotionConfig;
+      const config2 = node.options.initialPromotionConfig;
       node.promote({
-        transition: config ? config.transition : void 0,
-        preserveFollowOpacity: config && config.shouldPreserveFollowOpacity ? config.shouldPreserveFollowOpacity(node) : void 0
+        transition: config2 ? config2.transition : void 0,
+        preserveFollowOpacity: config2 && config2.shouldPreserveFollowOpacity ? config2.shouldPreserveFollowOpacity(node) : void 0
       });
     }
     isLead() {
@@ -31477,7 +33539,7 @@ const MotionBox = ({
   } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
 };
-const IconRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+const IconLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: "20",
@@ -31489,7 +33551,7 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
-        d: "M12 1L19 8M19 8L12 15M19 8L1 8",
+        d: "M8 15L1 8M1 8L8 1M1 8L19 8",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
@@ -31498,7 +33560,7 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
-const IconLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+const IconRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: "20",
@@ -31510,7 +33572,7 @@ const IconLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
-        d: "M8 15L1 8M1 8L8 1M1 8L19 8",
+        d: "M12 1L19 8M19 8L12 15M19 8L1 8",
         stroke: "currentColor",
         "stroke-width": "2",
         "stroke-linecap": "round",
@@ -31539,12 +33601,25 @@ const AppGrid = ({
   const pageSize = Math.max(1, columns * Math.max(1, rows));
   const totalPages = Math.max(1, Math.ceil(apps.length / pageSize));
   const [page, setPage] = React.useState(0);
+  const { user } = reactRedux.useSelector((state) => state.account);
   React.useEffect(() => {
     setPage((prev) => prev >= totalPages ? totalPages - 1 : prev);
   }, [totalPages, columns, rows, apps.length]);
   const start = page * pageSize;
   const end = start + pageSize;
   const visibleApps = totalPages > 1 ? apps.slice(start, end) : apps;
+  const findLink = (app2) => {
+    if (!app2.children?.length) {
+      return app2.path;
+    }
+    for (const i of app2.children || []) {
+      if (user?.type && i.allowUserTypes.includes(user?.type)) {
+        if (i.path) {
+          return `${i.path}`;
+        }
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
@@ -31556,62 +33631,73 @@ const AppGrid = ({
         },
         children: visibleApps.map((app2, index) => {
           const isSelected = selectedAppId === app2.key;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            MotionBox,
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactRouterDom.Link,
             {
-              preset: "staggerItem",
-              index,
-              hover: true,
-              onClick: () => onClickItem?.(app2),
-              sx: {
-                cursor: "pointer",
-                display: "flex",
-                flex: 1,
-                alignItems: "center",
-                flexDirection: "column"
+              to: findLink(app2) || "#",
+              style: {
+                textDecoration: "none",
+                color: "inherit",
+                width: "100%"
               },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Box,
-                  {
-                    sx: {
-                      width: iconSize,
-                      height: iconSize,
-                      borderRadius: iconRadius,
-                      mb: 1.5,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      background: getAppColor(app2.category),
-                      boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
-                    },
-                    children: app2.icon.startsWith("/") && /* @__PURE__ */ jsxRuntime.jsx(
-                      ImageElement,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                MotionBox,
+                {
+                  preset: "staggerItem",
+                  index,
+                  hover: true,
+                  onClick: () => onClickItem?.(app2),
+                  sx: {
+                    cursor: "pointer",
+                    display: "flex",
+                    flex: 1,
+                    alignItems: "center",
+                    flexDirection: "column"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Box,
                       {
-                        sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
-                        url: app2.icon,
-                        sizeType: ImageSizeType.SQUARE
+                        sx: {
+                          width: iconSize,
+                          height: iconSize,
+                          borderRadius: iconRadius,
+                          mb: 1.5,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          background: getAppColor(app2.category),
+                          boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
+                        },
+                        children: app2.icon.startsWith("/") && /* @__PURE__ */ jsxRuntime.jsx(
+                          ImageElement,
+                          {
+                            sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
+                            url: app2.icon,
+                            sizeType: ImageSizeType.SQUARE
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        variant: titleVariant,
+                        sx: { color: titleColor ?? theme.palette.common.white },
+                        children: app2.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        variant: captionVariant,
+                        sx: { color: captionColor ?? theme.palette.common.white },
+                        children: app2.caption
                       }
                     )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Typography,
-                  {
-                    variant: titleVariant,
-                    sx: { color: titleColor ?? theme.palette.common.white },
-                    children: app2.title
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Typography,
-                  {
-                    variant: captionVariant,
-                    sx: { color: captionColor ?? theme.palette.common.white },
-                    children: app2.caption
-                  }
-                )
-              ]
+                  ]
+                }
+              )
             },
             app2.key
           );
@@ -31831,13 +33917,6 @@ const routes = [
     ]
   }
 ];
-const useSidebar = () => {
-  const context = React.useContext(SidebarContext);
-  if (context === void 0) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-  return context;
-};
 const AppsSidebar = ({
   isOpen,
   onClose
@@ -32165,6 +34244,8 @@ exports.SYSTEM_MODULES = SYSTEM_MODULES;
 exports.SidebarContext = SidebarContext;
 exports.SidebarProvider = SidebarProvider;
 exports.SmallIcon = SmallIcon;
+exports.SnackbarProvider = SnackbarProvider;
+exports.SnackbarType = SnackbarType;
 exports.SocketNamespace = SocketNamespace;
 exports.SocketSystemEvent = SocketSystemEvent;
 exports.SocketSystemRoom = SocketSystemRoom;
@@ -32295,6 +34376,7 @@ exports.useActiveSidebar = useActiveSidebar;
 exports.useAllApps = useAllApps;
 exports.useApps = useApps;
 exports.useIsSystemMonitor = useIsSystemMonitor;
+exports.useSidebar = useSidebar;
 exports.useSidebarState = useSidebarState;
 exports.useSnackbar = useSnackbar;
 exports.useTagSelector = useTagSelector;