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

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useState, useCallback, useEffect } from 'react';
-import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp, Info, Warning, SearchOutlined } from '@mui/icons-material';
+import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp, Info, Warning, SearchOutlined, AttachFile, UploadFileOutlined, DeleteOutline } from '@mui/icons-material';
 import { withEmotionCache, ThemeContext, Global, keyframes, css } from '@emotion/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
@@ -484,7 +484,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-function memoize$1(fn) {
+function memoize$2(fn) {
   var cache = Object.create(null);
   return function (arg) {
     if (cache[arg] === undefined) cache[arg] = fn(arg);
@@ -492,10 +492,9 @@ function memoize$1(fn) {
   };
 }
 
-// eslint-disable-next-line no-undef
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
-var isPropValid = /* #__PURE__ */memoize$1(function (prop) {
+var isPropValid = /* #__PURE__ */memoize$2(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
   /* o */
   && prop.charCodeAt(1) === 110
@@ -663,6 +662,14 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
+function memoize$1(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
 var isDevelopment = false;
 
 var hyphenateRegex = /[A-Z]|^ms/g;
@@ -1105,7 +1112,7 @@ var propTypes = {exports: {}};
 
 var reactIs$1 = {exports: {}};
 
-var reactIs_production_min$1 = {};
+var reactIs_production_min = {};
 
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -1116,18 +1123,18 @@ var reactIs_production_min$1 = {};
  * LICENSE file in the root directory of this source tree.
  */
 
-var hasRequiredReactIs_production_min$1;
+var hasRequiredReactIs_production_min;
 
-function requireReactIs_production_min$1 () {
-	if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
-	hasRequiredReactIs_production_min$1 = 1;
+function requireReactIs_production_min () {
+	if (hasRequiredReactIs_production_min) return reactIs_production_min;
+	hasRequiredReactIs_production_min = 1;
 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
 	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min$1.AsyncMode=l;reactIs_production_min$1.ConcurrentMode=m;reactIs_production_min$1.ContextConsumer=k;reactIs_production_min$1.ContextProvider=h;reactIs_production_min$1.Element=c;reactIs_production_min$1.ForwardRef=n;reactIs_production_min$1.Fragment=e;reactIs_production_min$1.Lazy=t;reactIs_production_min$1.Memo=r;reactIs_production_min$1.Portal=d;
-	reactIs_production_min$1.Profiler=g;reactIs_production_min$1.StrictMode=f;reactIs_production_min$1.Suspense=p;reactIs_production_min$1.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min$1.isConcurrentMode=A;reactIs_production_min$1.isContextConsumer=function(a){return z(a)===k};reactIs_production_min$1.isContextProvider=function(a){return z(a)===h};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min$1.isForwardRef=function(a){return z(a)===n};reactIs_production_min$1.isFragment=function(a){return z(a)===e};reactIs_production_min$1.isLazy=function(a){return z(a)===t};
-	reactIs_production_min$1.isMemo=function(a){return z(a)===r};reactIs_production_min$1.isPortal=function(a){return z(a)===d};reactIs_production_min$1.isProfiler=function(a){return z(a)===g};reactIs_production_min$1.isStrictMode=function(a){return z(a)===f};reactIs_production_min$1.isSuspense=function(a){return z(a)===p};
-	reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min$1.typeOf=z;
-	return reactIs_production_min$1;
+	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+	return reactIs_production_min;
 }
 
 var reactIs_development$1 = {};
@@ -1326,7 +1333,7 @@ function requireReactIs () {
 	hasRequiredReactIs = 1;
 
 	if (process.env.NODE_ENV === 'production') {
-	  reactIs$1.exports = requireReactIs_production_min$1();
+	  reactIs$1.exports = requireReactIs_production_min();
 	} else {
 	  reactIs$1.exports = requireReactIs_development$1();
 	}
@@ -2303,7 +2310,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$2.propTypes = {
 } : void 0;
 
 /**
- * @mui/styled-engine v6.1.8
+ * @mui/styled-engine v6.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2343,6 +2350,295 @@ function internal_serializeStyles(styles) {
   return serializeStyles(wrapper);
 }
 
+var reactIs = {exports: {}};
+
+var reactIs_production = {};
+
+/**
+ * @license React
+ * react-is.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production;
+
+function requireReactIs_production () {
+	if (hasRequiredReactIs_production) return reactIs_production;
+	hasRequiredReactIs_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	  REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	  REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+	var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	  REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	  REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	  REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	  REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	  REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	  REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	  REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
+	  REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+	function typeOf(object) {
+	  if ("object" === typeof object && null !== object) {
+	    var $$typeof = object.$$typeof;
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        switch (((object = object.type), object)) {
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	          case REACT_SUSPENSE_LIST_TYPE:
+	            return object;
+	          default:
+	            switch (((object = object && object.$$typeof), object)) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	                return object;
+	              case REACT_CONSUMER_TYPE:
+	                return object;
+	              default:
+	                return $$typeof;
+	            }
+	        }
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+	}
+	reactIs_production.ContextConsumer = REACT_CONSUMER_TYPE;
+	reactIs_production.ContextProvider = REACT_CONTEXT_TYPE;
+	reactIs_production.Element = REACT_ELEMENT_TYPE;
+	reactIs_production.ForwardRef = REACT_FORWARD_REF_TYPE;
+	reactIs_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactIs_production.Lazy = REACT_LAZY_TYPE;
+	reactIs_production.Memo = REACT_MEMO_TYPE;
+	reactIs_production.Portal = REACT_PORTAL_TYPE;
+	reactIs_production.Profiler = REACT_PROFILER_TYPE;
+	reactIs_production.StrictMode = REACT_STRICT_MODE_TYPE;
+	reactIs_production.Suspense = REACT_SUSPENSE_TYPE;
+	reactIs_production.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	reactIs_production.isContextConsumer = function (object) {
+	  return typeOf(object) === REACT_CONSUMER_TYPE;
+	};
+	reactIs_production.isContextProvider = function (object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	};
+	reactIs_production.isElement = function (object) {
+	  return (
+	    "object" === typeof object &&
+	    null !== object &&
+	    object.$$typeof === REACT_ELEMENT_TYPE
+	  );
+	};
+	reactIs_production.isForwardRef = function (object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	};
+	reactIs_production.isFragment = function (object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	};
+	reactIs_production.isLazy = function (object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	};
+	reactIs_production.isMemo = function (object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	};
+	reactIs_production.isPortal = function (object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	};
+	reactIs_production.isProfiler = function (object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	};
+	reactIs_production.isStrictMode = function (object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	};
+	reactIs_production.isSuspense = function (object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	};
+	reactIs_production.isSuspenseList = function (object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	};
+	reactIs_production.isValidElementType = function (type) {
+	  return "string" === typeof type ||
+	    "function" === typeof type ||
+	    type === REACT_FRAGMENT_TYPE ||
+	    type === REACT_PROFILER_TYPE ||
+	    type === REACT_STRICT_MODE_TYPE ||
+	    type === REACT_SUSPENSE_TYPE ||
+	    type === REACT_SUSPENSE_LIST_TYPE ||
+	    type === REACT_OFFSCREEN_TYPE ||
+	    ("object" === typeof type &&
+	      null !== type &&
+	      (type.$$typeof === REACT_LAZY_TYPE ||
+	        type.$$typeof === REACT_MEMO_TYPE ||
+	        type.$$typeof === REACT_CONTEXT_TYPE ||
+	        type.$$typeof === REACT_CONSUMER_TYPE ||
+	        type.$$typeof === REACT_FORWARD_REF_TYPE ||
+	        type.$$typeof === REACT_CLIENT_REFERENCE ||
+	        void 0 !== type.getModuleId))
+	    ? !0
+	    : !1;
+	};
+	reactIs_production.typeOf = typeOf;
+	return reactIs_production;
+}
+
+var reactIs_development = {};
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function typeOf(object) {
+	      if ("object" === typeof object && null !== object) {
+	        var $$typeof = object.$$typeof;
+	        switch ($$typeof) {
+	          case REACT_ELEMENT_TYPE:
+	            switch (((object = object.type), object)) {
+	              case REACT_FRAGMENT_TYPE:
+	              case REACT_PROFILER_TYPE:
+	              case REACT_STRICT_MODE_TYPE:
+	              case REACT_SUSPENSE_TYPE:
+	              case REACT_SUSPENSE_LIST_TYPE:
+	                return object;
+	              default:
+	                switch (((object = object && object.$$typeof), object)) {
+	                  case REACT_CONTEXT_TYPE:
+	                  case REACT_FORWARD_REF_TYPE:
+	                  case REACT_LAZY_TYPE:
+	                  case REACT_MEMO_TYPE:
+	                    return object;
+	                  case REACT_CONSUMER_TYPE:
+	                    return object;
+	                  default:
+	                    return $$typeof;
+	                }
+	            }
+	          case REACT_PORTAL_TYPE:
+	            return $$typeof;
+	        }
+	      }
+	    }
+	    var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+	    reactIs_development.ContextConsumer = REACT_CONSUMER_TYPE;
+	    reactIs_development.ContextProvider = REACT_CONTEXT_TYPE;
+	    reactIs_development.Element = REACT_ELEMENT_TYPE;
+	    reactIs_development.ForwardRef = REACT_FORWARD_REF_TYPE;
+	    reactIs_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactIs_development.Lazy = REACT_LAZY_TYPE;
+	    reactIs_development.Memo = REACT_MEMO_TYPE;
+	    reactIs_development.Portal = REACT_PORTAL_TYPE;
+	    reactIs_development.Profiler = REACT_PROFILER_TYPE;
+	    reactIs_development.StrictMode = REACT_STRICT_MODE_TYPE;
+	    reactIs_development.Suspense = REACT_SUSPENSE_TYPE;
+	    reactIs_development.SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	    reactIs_development.isContextConsumer = function (object) {
+	      return typeOf(object) === REACT_CONSUMER_TYPE;
+	    };
+	    reactIs_development.isContextProvider = function (object) {
+	      return typeOf(object) === REACT_CONTEXT_TYPE;
+	    };
+	    reactIs_development.isElement = function (object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    };
+	    reactIs_development.isForwardRef = function (object) {
+	      return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	    };
+	    reactIs_development.isFragment = function (object) {
+	      return typeOf(object) === REACT_FRAGMENT_TYPE;
+	    };
+	    reactIs_development.isLazy = function (object) {
+	      return typeOf(object) === REACT_LAZY_TYPE;
+	    };
+	    reactIs_development.isMemo = function (object) {
+	      return typeOf(object) === REACT_MEMO_TYPE;
+	    };
+	    reactIs_development.isPortal = function (object) {
+	      return typeOf(object) === REACT_PORTAL_TYPE;
+	    };
+	    reactIs_development.isProfiler = function (object) {
+	      return typeOf(object) === REACT_PROFILER_TYPE;
+	    };
+	    reactIs_development.isStrictMode = function (object) {
+	      return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	    };
+	    reactIs_development.isSuspense = function (object) {
+	      return typeOf(object) === REACT_SUSPENSE_TYPE;
+	    };
+	    reactIs_development.isSuspenseList = function (object) {
+	      return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	    };
+	    reactIs_development.isValidElementType = function (type) {
+	      return "string" === typeof type ||
+	        "function" === typeof type ||
+	        type === REACT_FRAGMENT_TYPE ||
+	        type === REACT_PROFILER_TYPE ||
+	        type === REACT_STRICT_MODE_TYPE ||
+	        type === REACT_SUSPENSE_TYPE ||
+	        type === REACT_SUSPENSE_LIST_TYPE ||
+	        type === REACT_OFFSCREEN_TYPE ||
+	        ("object" === typeof type &&
+	          null !== type &&
+	          (type.$$typeof === REACT_LAZY_TYPE ||
+	            type.$$typeof === REACT_MEMO_TYPE ||
+	            type.$$typeof === REACT_CONTEXT_TYPE ||
+	            type.$$typeof === REACT_CONSUMER_TYPE ||
+	            type.$$typeof === REACT_FORWARD_REF_TYPE ||
+	            type.$$typeof === REACT_CLIENT_REFERENCE ||
+	            void 0 !== type.getModuleId))
+	        ? !0
+	        : !1;
+	    };
+	    reactIs_development.typeOf = typeOf;
+	  })();
+	return reactIs_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs.exports = requireReactIs_production();
+} else {
+  reactIs.exports = requireReactIs_development();
+}
+
+var reactIsExports = reactIs.exports;
+
 // https://github.com/sindresorhus/is-plain-obj/blob/main/index.js
 function isPlainObject(item) {
   if (typeof item !== 'object' || item === null) {
@@ -2352,7 +2648,7 @@ function isPlainObject(item) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone(source) {
-  if (/*#__PURE__*/React.isValidElement(source) || !isPlainObject(source)) {
+  if (/*#__PURE__*/React.isValidElement(source) || reactIsExports.isValidElementType(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
@@ -2361,6 +2657,25 @@ function deepClone(source) {
   });
   return output;
 }
+
+/**
+ * Merge objects deeply.
+ * It will shallow copy React elements.
+ *
+ * If `options.clone` is set to `false` the source object will be merged directly into the target object.
+ *
+ * @example
+ * ```ts
+ * deepmerge({ a: { b: 1 }, d: 2 }, { a: { c: 2 }, d: 4 });
+ * // => { a: { b: 1, c: 2 }, d: 4 }
+ * ````
+ *
+ * @param target The target object.
+ * @param source The source object.
+ * @param options The merge options.
+ * @param options.clone Set to `false` to merge the source object directly into the target object.
+ * @returns The merged object.
+ */
 function deepmerge(target, source, options = {
   clone: true
 }) {
@@ -2369,7 +2684,7 @@ function deepmerge(target, source, options = {
   } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
-      if (/*#__PURE__*/React.isValidElement(source[key])) {
+      if (/*#__PURE__*/React.isValidElement(source[key]) || reactIsExports.isValidElementType(source[key])) {
         output[key] = source[key];
       } else if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
@@ -2388,7 +2703,7 @@ function deepmerge(target, source, options = {
 
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-const sortBreakpointsValues = values => {
+const sortBreakpointsValues$1 = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
@@ -2404,7 +2719,7 @@ const sortBreakpointsValues = values => {
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
-function createBreakpoints(breakpoints) {
+function createBreakpoints$1(breakpoints) {
   const {
     // The breakpoint **start** at this value.
     // For instance with the first breakpoint xs: [xs, sm).
@@ -2423,7 +2738,7 @@ function createBreakpoints(breakpoints) {
     step = 5,
     ...other
   } = breakpoints;
-  const sortedValues = sortBreakpointsValues(values);
+  const sortedValues = sortBreakpointsValues$1(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
@@ -3599,10 +3914,14 @@ styleFunctionSx.filterProps = ['sx'];
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
  *
+ * With the styled function:
  * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
- *
  * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
  *
+ * With the sx prop:
+ * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
+ * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
+ *
  * @example
  * 1. using with `styled`:
  * ```jsx
@@ -3618,9 +3937,9 @@ styleFunctionSx.filterProps = ['sx'];
  * @example
  * 2. using with `sx` prop:
  * ```jsx
- *   <Box sx={theme => [
+ *   <Box sx={[
  *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
+ *     theme => theme.applyStyles('dark', {
  *        background: '#1c1c1c',
  *        color: '#fff',
  *      }),
@@ -3682,7 +4001,7 @@ function createTheme$1(options = {}, ...args) {
     shape: shapeInput = {},
     ...other
   } = options;
-  const breakpoints = createBreakpoints(breakpointsInput);
+  const breakpoints = createBreakpoints$1(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
     breakpoints,
@@ -3882,270 +4201,6 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
   return result;
 }
 
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production_min;
-
-function requireReactIs_production_min () {
-	if (hasRequiredReactIs_production_min) return reactIs_production_min;
-	hasRequiredReactIs_production_min = 1;
-var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
-	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
-	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
-	return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_development;
-
-function requireReactIs_development () {
-	if (hasRequiredReactIs_development) return reactIs_development;
-	hasRequiredReactIs_development = 1;
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	// ATTENTION
-	// When adding new symbols to this file,
-	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-	// The Symbol used to tag the ReactElement-like types.
-	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-	var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-	var REACT_MEMO_TYPE = Symbol.for('react.memo');
-	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-
-	// -----------------------------------------------------------------------------
-
-	var enableScopeAPI = false; // Experimental Create Event Handle API.
-	var enableCacheElement = false;
-	var enableTransitionTracing = false; // No known bugs, but needs performance testing
-
-	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-	// stuff. Intended to enable React core members to more easily debug scheduling
-	// issues in DEV builds.
-
-	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
-
-	var REACT_MODULE_REFERENCE;
-
-	{
-	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-	}
-
-	function isValidElementType(type) {
-	  if (typeof type === 'string' || typeof type === 'function') {
-	    return true;
-	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-
-	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
-	    return true;
-	  }
-
-	  if (typeof type === 'object' && type !== null) {
-	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
-	    // types supported by any Flight configuration anywhere since
-	    // we don't know which Flight build this will end up being used
-	    // with.
-	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-	      return true;
-	    }
-	  }
-
-	  return false;
-	}
-
-	function typeOf(object) {
-	  if (typeof object === 'object' && object !== null) {
-	    var $$typeof = object.$$typeof;
-
-	    switch ($$typeof) {
-	      case REACT_ELEMENT_TYPE:
-	        var type = object.type;
-
-	        switch (type) {
-	          case REACT_FRAGMENT_TYPE:
-	          case REACT_PROFILER_TYPE:
-	          case REACT_STRICT_MODE_TYPE:
-	          case REACT_SUSPENSE_TYPE:
-	          case REACT_SUSPENSE_LIST_TYPE:
-	            return type;
-
-	          default:
-	            var $$typeofType = type && type.$$typeof;
-
-	            switch ($$typeofType) {
-	              case REACT_SERVER_CONTEXT_TYPE:
-	              case REACT_CONTEXT_TYPE:
-	              case REACT_FORWARD_REF_TYPE:
-	              case REACT_LAZY_TYPE:
-	              case REACT_MEMO_TYPE:
-	              case REACT_PROVIDER_TYPE:
-	                return $$typeofType;
-
-	              default:
-	                return $$typeof;
-	            }
-
-	        }
-
-	      case REACT_PORTAL_TYPE:
-	        return $$typeof;
-	    }
-	  }
-
-	  return undefined;
-	}
-	var ContextConsumer = REACT_CONTEXT_TYPE;
-	var ContextProvider = REACT_PROVIDER_TYPE;
-	var Element = REACT_ELEMENT_TYPE;
-	var ForwardRef = REACT_FORWARD_REF_TYPE;
-	var Fragment = REACT_FRAGMENT_TYPE;
-	var Lazy = REACT_LAZY_TYPE;
-	var Memo = REACT_MEMO_TYPE;
-	var Portal = REACT_PORTAL_TYPE;
-	var Profiler = REACT_PROFILER_TYPE;
-	var StrictMode = REACT_STRICT_MODE_TYPE;
-	var Suspense = REACT_SUSPENSE_TYPE;
-	var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	var hasWarnedAboutDeprecatedIsAsyncMode = false;
-	var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
-
-	function isAsyncMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-	    }
-	  }
-
-	  return false;
-	}
-	function isConcurrentMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
-	      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-	    }
-	  }
-
-	  return false;
-	}
-	function isContextConsumer(object) {
-	  return typeOf(object) === REACT_CONTEXT_TYPE;
-	}
-	function isContextProvider(object) {
-	  return typeOf(object) === REACT_PROVIDER_TYPE;
-	}
-	function isElement(object) {
-	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-	}
-	function isForwardRef(object) {
-	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	}
-	function isFragment(object) {
-	  return typeOf(object) === REACT_FRAGMENT_TYPE;
-	}
-	function isLazy(object) {
-	  return typeOf(object) === REACT_LAZY_TYPE;
-	}
-	function isMemo(object) {
-	  return typeOf(object) === REACT_MEMO_TYPE;
-	}
-	function isPortal(object) {
-	  return typeOf(object) === REACT_PORTAL_TYPE;
-	}
-	function isProfiler(object) {
-	  return typeOf(object) === REACT_PROFILER_TYPE;
-	}
-	function isStrictMode(object) {
-	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	}
-	function isSuspense(object) {
-	  return typeOf(object) === REACT_SUSPENSE_TYPE;
-	}
-	function isSuspenseList(object) {
-	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-	}
-
-	reactIs_development.ContextConsumer = ContextConsumer;
-	reactIs_development.ContextProvider = ContextProvider;
-	reactIs_development.Element = Element;
-	reactIs_development.ForwardRef = ForwardRef;
-	reactIs_development.Fragment = Fragment;
-	reactIs_development.Lazy = Lazy;
-	reactIs_development.Memo = Memo;
-	reactIs_development.Portal = Portal;
-	reactIs_development.Profiler = Profiler;
-	reactIs_development.StrictMode = StrictMode;
-	reactIs_development.Suspense = Suspense;
-	reactIs_development.SuspenseList = SuspenseList;
-	reactIs_development.isAsyncMode = isAsyncMode;
-	reactIs_development.isConcurrentMode = isConcurrentMode;
-	reactIs_development.isContextConsumer = isContextConsumer;
-	reactIs_development.isContextProvider = isContextProvider;
-	reactIs_development.isElement = isElement;
-	reactIs_development.isForwardRef = isForwardRef;
-	reactIs_development.isFragment = isFragment;
-	reactIs_development.isLazy = isLazy;
-	reactIs_development.isMemo = isMemo;
-	reactIs_development.isPortal = isPortal;
-	reactIs_development.isProfiler = isProfiler;
-	reactIs_development.isStrictMode = isStrictMode;
-	reactIs_development.isSuspense = isSuspense;
-	reactIs_development.isSuspenseList = isSuspenseList;
-	reactIs_development.isValidElementType = isValidElementType;
-	reactIs_development.typeOf = typeOf;
-	  })();
-	}
-	return reactIs_development;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  reactIs.exports = requireReactIs_production_min();
-} else {
-  reactIs.exports = requireReactIs_development();
-}
-
-var reactIsExports = reactIs.exports;
-
 function getFunctionComponentName(Component, fallback = '') {
   return Component.displayName || Component.name || fallback;
 }
@@ -4594,6 +4649,11 @@ function hexToRgb(color) {
   if (colors && colors[0].length === 1) {
     colors = colors.map(n => n + n);
   }
+  if (process.env.NODE_ENV !== 'production') {
+    if (color.length !== color.trim().length) {
+      console.error(`MUI: The color: "${color}" is invalid. Make sure the color input doesn't contain leading/trailing space.`);
+    }
+  }
   return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
     return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
   }).join(', ')})` : '';
@@ -5048,6 +5108,49 @@ function setRef(ref, value) {
   }
 }
 
+let globalId = 0;
+
+// TODO React 17: Remove `useGlobalId` once React 17 support is removed
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseId = safeReact.useId;
+
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride) {
+  // React.useId() is only available from React 17.0.0.
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? reactId;
+  }
+
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}
+
 function useControlled({
   controlled,
   default: defaultProp,
@@ -5271,6 +5374,34 @@ var integerPropType = process.env.NODE_ENV === 'production' ? validatorNoop : va
    These rules are preventing the performance optimizations below.
  */
 
+/**
+ * Compose classes from multiple sources.
+ *
+ * @example
+ * ```tsx
+ * const slots = {
+ *  root: ['root', 'primary'],
+ *  label: ['label'],
+ * };
+ *
+ * const getUtilityClass = (slot) => `MuiButton-${slot}`;
+ *
+ * const classes = {
+ *   root: 'my-root-class',
+ * };
+ *
+ * const output = composeClasses(slots, getUtilityClass, classes);
+ * // {
+ * //   root: 'MuiButton-root MuiButton-primary my-root-class',
+ * //   label: 'MuiButton-label',
+ * // }
+ * ```
+ *
+ * @param slots a list of classes for each possible slot
+ * @param getUtilityClass a function to resolve the class based on the slot name
+ * @param classes the input classes from props
+ * @returns the resolved classes for all slots
+ */
 function composeClasses(slots, getUtilityClass, classes = undefined) {
   const output = {};
   for (const slotName in slots) {
@@ -6965,7 +7096,7 @@ function setColor(obj, key, defaultValue) {
   }
 }
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -7257,7 +7388,7 @@ function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', private_safeColorChannel(toRgb(colors.main)));
@@ -9076,7 +9207,95 @@ var paletteADC = _objectSpread2({
     light: "#EBEBEB",
     contrastText: "#545E73"
   }
-}, BasicPalette);
+}, BasicPalette);
+
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+const _excluded$1 = ["values", "unit", "step"];
+const sortBreakpointsValues = values => {
+  const breakpointsAsArray = Object.keys(values).map(key => ({
+    key,
+    val: values[key]
+  })) || [];
+  // Sort in ascending order
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => {
+    return _extends({}, acc, {
+      [obj.key]: obj.val
+    });
+  }, {});
+};
+
+// Keep in mind that @media is inclusive by the CSS specification.
+function createBreakpoints(breakpoints) {
+  const {
+      // The breakpoint **start** at this value.
+      // For instance with the first breakpoint xs: [xs, sm).
+      values = {
+        xs: 0,
+        // phone
+        sm: 600,
+        // tablet
+        md: 900,
+        // small laptop
+        lg: 1200,
+        // desktop
+        xl: 1536 // large screen
+      },
+      unit = 'px',
+      step = 5
+    } = breakpoints,
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$1);
+  const sortedValues = sortBreakpointsValues(values);
+  const keys = Object.keys(sortedValues);
+  function up(key) {
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}${unit})`;
+  }
+  function down(key) {
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (max-width:${value - step / 100}${unit})`;
+  }
+  function between(start, end) {
+    const endIndex = keys.indexOf(end);
+    return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
+  }
+  function only(key) {
+    if (keys.indexOf(key) + 1 < keys.length) {
+      return between(key, keys[keys.indexOf(key) + 1]);
+    }
+    return up(key);
+  }
+  function not(key) {
+    // handle first and last key separately, for better readability
+    const keyIndex = keys.indexOf(key);
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+  }
+  return _extends({
+    keys,
+    values: sortedValues,
+    up,
+    down,
+    between,
+    only,
+    not,
+    unit
+  }, other);
+}
 
 var breakpoints = createBreakpoints({
   values: {
@@ -9213,7 +9432,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$l = ownerState => {
+const useUtilityClasses$m = ownerState => {
   const {
     align,
     gutterBottom,
@@ -9354,7 +9573,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     variantMapping
   };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /*#__PURE__*/jsx(TypographyRoot, {
     as: Component,
     ref: ref,
@@ -9550,16 +9769,6 @@ function createControlledPromise() {
   return p;
 }
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
 function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
     return t.__proto__ = e, t;
@@ -10192,7 +10401,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
   onExited: PropTypes.func
 } : {}; // Name the function so it is clearer in the documentation
 
-function noop() {}
+function noop$1() {}
 
 Transition.defaultProps = {
   in: false,
@@ -10201,12 +10410,12 @@ Transition.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  onEnter: noop,
-  onEntering: noop,
-  onEntered: noop,
-  onExit: noop,
-  onExiting: noop,
-  onExited: noop
+  onEnter: noop$1,
+  onEntering: noop$1,
+  onEntered: noop$1,
+  onExit: noop$1,
+  onExiting: noop$1,
+  onExited: noop$1
 };
 Transition.UNMOUNTED = UNMOUNTED;
 Transition.EXITED = EXITED;
@@ -10936,7 +11145,7 @@ function getButtonBaseUtilityClass(slot) {
 }
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
-const useUtilityClasses$k = ownerState => {
+const useUtilityClasses$l = ownerState => {
   const {
     disabled,
     focusVisible,
@@ -11057,34 +11266,22 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       ripple.pulsate();
     }
   }, [disableRipple, focusRipple, focusVisible, ripple]);
-  function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
-    return useEventCallback(event => {
-      if (eventCallback) {
-        eventCallback(event);
-      }
-      const ignore = skipRippleAction;
-      if (!ignore) {
-        ripple[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const handleMouseDown = useRippleHandler('start', onMouseDown);
-  const handleContextMenu = useRippleHandler('stop', onContextMenu);
-  const handleDragLeave = useRippleHandler('stop', onDragLeave);
-  const handleMouseUp = useRippleHandler('stop', onMouseUp);
-  const handleMouseLeave = useRippleHandler('stop', event => {
+  const handleMouseDown = useRippleHandler(ripple, 'start', onMouseDown, disableTouchRipple);
+  const handleContextMenu = useRippleHandler(ripple, 'stop', onContextMenu, disableTouchRipple);
+  const handleDragLeave = useRippleHandler(ripple, 'stop', onDragLeave, disableTouchRipple);
+  const handleMouseUp = useRippleHandler(ripple, 'stop', onMouseUp, disableTouchRipple);
+  const handleMouseLeave = useRippleHandler(ripple, 'stop', event => {
     if (focusVisible) {
       event.preventDefault();
     }
     if (onMouseLeave) {
       onMouseLeave(event);
     }
-  });
-  const handleTouchStart = useRippleHandler('start', onTouchStart);
-  const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
-  const handleTouchMove = useRippleHandler('stop', onTouchMove);
-  const handleBlur = useRippleHandler('stop', event => {
+  }, disableTouchRipple);
+  const handleTouchStart = useRippleHandler(ripple, 'start', onTouchStart, disableTouchRipple);
+  const handleTouchEnd = useRippleHandler(ripple, 'stop', onTouchEnd, disableTouchRipple);
+  const handleTouchMove = useRippleHandler(ripple, 'stop', onTouchMove, disableTouchRipple);
+  const handleBlur = useRippleHandler(ripple, 'stop', event => {
     if (!isFocusVisible(event.target)) {
       setFocusVisible(false);
     }
@@ -11178,7 +11375,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   return /*#__PURE__*/jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -11208,6 +11405,17 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }) : null]
   });
 });
+function useRippleHandler(ripple, rippleAction, eventCallback, skipRippleAction = false) {
+  return useEventCallback(event => {
+    if (eventCallback) {
+      eventCallback(event);
+    }
+    if (!skipRippleAction) {
+      ripple[rippleAction](event);
+    }
+    return true;
+  });
+}
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -11372,7 +11580,7 @@ function getSwitchBaseUtilityClass(slot) {
 }
 generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-const useUtilityClasses$j = ownerState => {
+const useUtilityClasses$k = ownerState => {
   const {
     classes,
     checked,
@@ -11514,7 +11722,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /*#__PURE__*/jsxs(SwitchBaseRoot, {
     component: "span",
     className: clsx(classes.root, className),
@@ -11662,7 +11870,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const useUtilityClasses$i = ownerState => {
+const useUtilityClasses$j = ownerState => {
   const {
     color,
     fontSize,
@@ -11792,7 +12000,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   return /*#__PURE__*/jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -11882,9 +12090,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-if (SvgIcon) {
-  SvgIcon.muiName = 'SvgIcon';
-}
+SvgIcon.muiName = 'SvgIcon';
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
@@ -12006,7 +12212,7 @@ function getRadioUtilityClass(slot) {
 }
 const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 
-const useUtilityClasses$h = ownerState => {
+const useUtilityClasses$i = ownerState => {
   const {
     classes,
     color,
@@ -12129,7 +12335,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     color,
     size
   };
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
   const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -12266,7 +12472,7 @@ function getCheckboxUtilityClass(slot) {
 }
 const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 
-const useUtilityClasses$g = ownerState => {
+const useUtilityClasses$h = ownerState => {
   const {
     classes,
     indeterminate,
@@ -12373,7 +12579,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
     indeterminate,
     size
   };
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /*#__PURE__*/jsx(CheckboxRoot, {
     type: "checkbox",
     inputProps: {
@@ -12659,7 +12865,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const useUtilityClasses$f = ownerState => {
+const useUtilityClasses$g = ownerState => {
   const {
     square,
     elevation,
@@ -12731,7 +12937,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
@@ -12841,8 +13047,8 @@ name, parameters) {
     elementType: initialElementType,
     ownerState,
     externalForwardedProps,
-    getSlotOwnerState,
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
   } = parameters;
   const {
@@ -12873,31 +13079,302 @@ name, parameters) {
     externalSlotProps: resolvedComponentsProps
   });
   const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
-  const slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
-  const finalOwnerState = {
-    ...ownerState,
-    ...slotOwnerState
-  };
   const LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
   const props = appendOwnerState(elementType, {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
     ...(name !== 'root' && !slots[name] && internalForwardedProps),
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
-  }, finalOwnerState);
-  Object.keys(slotOwnerState).forEach(propName => {
-    delete props[propName];
-  });
+  }, ownerState);
   return [elementType, props];
 }
 
+function getCircularProgressUtilityClass(slot) {
+  return generateUtilityClass('MuiCircularProgress', slot);
+}
+generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+
+const SIZE = 44;
+const circularRotateKeyframe = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const circularDashKeyframe = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+`;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const rotateAnimation = typeof circularRotateKeyframe !== 'string' ? css`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== 'string' ? css`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
+const useUtilityClasses$f = ownerState => {
+  const {
+    classes,
+    variant,
+    color,
+    disableShrink
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, `color${capitalize(color)}`],
+    svg: ['svg'],
+    circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']
+  };
+  return composeClasses(slots, getCircularProgressUtilityClass, classes);
+};
+const CircularProgressRoot = styled('span', {
+  name: 'MuiCircularProgress',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  display: 'inline-block',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('transform')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+})));
+const CircularProgressSVG = styled('svg', {
+  name: 'MuiCircularProgress',
+  slot: 'Svg',
+  overridesResolver: (props, styles) => styles.svg
+})({
+  display: 'block' // Keeps the progress centered
+});
+const CircularProgressCircle = styled('circle', {
+  name: 'MuiCircularProgress',
+  slot: 'Circle',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: 'currentColor',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('stroke-dashoffset')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: '80px, 200px',
+      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+})));
+
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiCircularProgress'
+  });
+  const {
+    className,
+    color = 'primary',
+    disableShrink = false,
+    size = 40,
+    style,
+    thickness = 3.6,
+    value = 0,
+    variant = 'indeterminate',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color,
+    disableShrink,
+    size,
+    thickness,
+    value,
+    variant
+  };
+  const classes = useUtilityClasses$f(ownerState);
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+  if (variant === 'determinate') {
+    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps['aria-valuenow'] = Math.round(value);
+    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    rootStyle.transform = 'rotate(-90deg)';
+  }
+  return /*#__PURE__*/jsx(CircularProgressRoot, {
+    className: clsx(classes.root, className),
+    style: {
+      width: size,
+      height: size,
+      ...rootStyle,
+      ...style
+    },
+    ownerState: ownerState,
+    ref: ref,
+    role: "progressbar",
+    ...rootProps,
+    ...other,
+    children: /*#__PURE__*/jsx(CircularProgressSVG, {
+      className: classes.svg,
+      ownerState: ownerState,
+      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+      children: /*#__PURE__*/jsx(CircularProgressCircle, {
+        className: classes.circle,
+        style: circleStyle,
+        ownerState: ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   * @default false
+   */
+  disableShrink: chainPropTypes(PropTypes.bool, props => {
+    if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {
+      return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');
+    }
+    return null;
+  }),
+  /**
+   * The size of the component.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * @default 40
+   */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The thickness of the circle.
+   * @default 3.6
+   */
+  thickness: PropTypes.number,
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
+   */
+  value: PropTypes.number,
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: PropTypes.oneOf(['determinate', 'indeterminate'])
+} : void 0;
+
 function getIconButtonUtilityClass(slot) {
   return generateUtilityClass('MuiIconButton', slot);
 }
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 
 const useUtilityClasses$e = ownerState => {
   const {
@@ -12905,10 +13382,13 @@ const useUtilityClasses$e = ownerState => {
     disabled,
     color,
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
@@ -12919,7 +13399,7 @@ const IconButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
 })(memoTheme(({
   theme
@@ -13022,8 +13502,34 @@ const IconButtonRoot = styled(ButtonBase, {
   [`&.${iconButtonClasses.disabled}`]: {
     backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = styled('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
@@ -13042,26 +13548,51 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disabled = false,
     disableFocusRipple = false,
     size = 'medium',
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses$e(ownerState);
-  return /*#__PURE__*/jsx(IconButtonRoot, {
+  return /*#__PURE__*/jsxs(IconButtonRoot, {
+    id: id,
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [typeof loading === 'boolean' &&
+    /*#__PURE__*/
+    // use plain HTML span to minimize the runtime overhead
+    jsx("span", {
+      className: classes.loadingWrapper,
+      style: {
+        display: 'contents'
+      },
+      children: /*#__PURE__*/jsx(IconButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loading && loadingIndicator
+      })
+    }), children]
   });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
@@ -13120,6 +13651,23 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
    * @default false
    */
   edge: PropTypes.oneOf(['end', 'start', false]),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
@@ -13339,7 +13887,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
   enableColorOnDark: PropTypes.bool,
   /**
    * The positioning type. The behavior of the different options is described
-   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */
@@ -13395,13 +13943,9 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
       };
       return /*#__PURE__*/React.cloneElement(children, newProps);
     }
-    return /*#__PURE__*/jsx(React.Fragment, {
-      children: children
-    });
+    return children;
   }
-  return /*#__PURE__*/jsx(React.Fragment, {
-    children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
-  });
+  return mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode;
 });
 process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -14424,6 +14968,7 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
    */
   value: PropTypes.any
 } : void 0;
+var InputBase$1 = InputBase;
 
 function getOutlinedInputUtilityClass(slot) {
   return generateUtilityClass('MuiOutlinedInput', slot);
@@ -14537,7 +15082,10 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -14547,7 +15095,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });
@@ -14633,13 +15181,6 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const removeOwnerState = props => {
-  const {
-    ownerState,
-    ...rest
-  } = props;
-  return rest;
-};
 const useUtilityClasses$b = ownerState => {
   const {
     classes,
@@ -14728,12 +15269,11 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionPropsRemoved,
+    ...transitionProps,
     children: /*#__PURE__*/jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
@@ -14866,7 +15406,7 @@ process.env.NODE_ENV !== "production" ? Box$2.propTypes /* remove-proptypes */ =
 function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }
-const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorError', 'colorInfo', 'colorWarning', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'icon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge', 'loading', 'loadingWrapper', 'loadingIconPlaceholder', 'loadingIndicator', 'loadingPositionCenter', 'loadingPositionStart', 'loadingPositionEnd']);
 
 /**
  * @ignore - internal component.
@@ -14891,13 +15431,16 @@ const useUtilityClasses$a = ownerState => {
     fullWidth,
     size,
     variant,
+    loading,
+    loadingPosition,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
-    label: ['label'],
+    root: ['root', loading && 'loading', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`],
     startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`],
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return {
@@ -14942,7 +15485,7 @@ const ButtonRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
+    return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.loading && styles.loading];
   }
 })(memoTheme(({
   theme
@@ -15129,6 +15672,18 @@ const ButtonRoot = styled(ButtonBase, {
       style: {
         width: '100%'
       }
+    }, {
+      props: {
+        loadingPosition: 'center'
+      },
+      style: {
+        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        [`&.${buttonClasses.loading}`]: {
+          color: 'transparent'
+        }
+      }
     }]
   };
 }));
@@ -15139,9 +15694,11 @@ const ButtonStartIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4,
@@ -15152,8 +15709,28 @@ const ButtonStartIcon = styled('span', {
     style: {
       marginLeft: -2
     }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginRight: -8
+    }
   }, ...commonIconStyles]
-});
+}));
 const ButtonEndIcon = styled('span', {
   name: 'MuiButton',
   slot: 'EndIcon',
@@ -15161,9 +15738,11 @@ const ButtonEndIcon = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]];
+    return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd, styles[`iconSize${capitalize(ownerState.size)}`]];
   }
-})({
+})(({
+  theme
+}) => ({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8,
@@ -15174,7 +15753,128 @@ const ButtonEndIcon = styled('span', {
     style: {
       marginRight: -2
     }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true
+    },
+    style: {
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      loading: true,
+      fullWidth: true
+    },
+    style: {
+      marginLeft: -8
+    }
   }, ...commonIconStyles]
+}));
+const ButtonLoadingIndicator = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }, {
+    props: {
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'start',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      fullWidth: true
+    },
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
+}));
+const ButtonLoadingIconPlaceholder = styled('span', {
+  name: 'MuiButton',
+  slot: 'LoadingIconPlaceholder',
+  overridesResolver: (props, styles) => styles.loadingIconPlaceholder
+})({
+  display: 'inline-block',
+  width: '1em',
+  height: '1em'
 });
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
@@ -15196,12 +15896,22 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     endIcon: endIconProp,
     focusVisibleClassName,
     fullWidth = false,
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    loadingPosition = 'center',
     size = 'medium',
     startIcon: startIconProp,
     type,
     variant = 'text',
     ...other
   } = props;
+  const id = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/jsx(CircularProgress, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     color,
@@ -15210,34 +15920,58 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     disableElevation,
     disableFocusRipple,
     fullWidth,
+    loading,
+    loadingIndicator,
+    loadingPosition,
     size,
     type,
     variant
   };
   const classes = useUtilityClasses$a(ownerState);
-  const startIcon = startIconProp && /*#__PURE__*/jsx(ButtonStartIcon, {
+  const startIcon = (startIconProp || loading && loadingPosition === 'start') && /*#__PURE__*/jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState: ownerState,
-    children: startIconProp
+    children: startIconProp || /*#__PURE__*/jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
-  const endIcon = endIconProp && /*#__PURE__*/jsx(ButtonEndIcon, {
+  const endIcon = (endIconProp || loading && loadingPosition === 'end') && /*#__PURE__*/jsx(ButtonEndIcon, {
     className: classes.endIcon,
     ownerState: ownerState,
-    children: endIconProp
+    children: endIconProp || /*#__PURE__*/jsx(ButtonLoadingIconPlaceholder, {
+      className: classes.loadingIconPlaceholder,
+      ownerState: ownerState
+    })
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
+  const loader = typeof loading === 'boolean' ?
+  /*#__PURE__*/
+  // use plain HTML span to minimize the runtime overhead
+  jsx("span", {
+    className: classes.loadingWrapper,
+    style: {
+      display: 'contents'
+    },
+    children: loading && /*#__PURE__*/jsx(ButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loadingIndicator
+    })
+  }) : null;
   return /*#__PURE__*/jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
     component: component,
-    disabled: disabled,
+    disabled: disabled || loading,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
     type: type,
+    id: id,
     ...other,
     classes: classes,
-    children: [startIcon, children, endIcon]
+    children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });
 process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
@@ -15310,6 +16044,28 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * If defined, an `a` element will be used as the root node.
    */
   href: PropTypes.string,
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.
@@ -15874,6 +16630,7 @@ function getContainer(container) {
 function getHasTransition(children) {
   return children ? children.props.hasOwnProperty('in') : false;
 }
+const noop = () => {};
 
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
@@ -16045,8 +16802,8 @@ function useModal(parameters) {
       }
     };
     return {
-      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
-      onExited: createChainedFunction(handleExited, children?.props.onExited)
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop),
+      onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop)
     };
   };
   return {
@@ -16961,7 +17718,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     in: inProp,
     timeout: timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         ref: handleRef,
         style: {
@@ -16969,7 +17729,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
           ...style,
           ...children.props.style
         },
-        ...childProps
+        ...restChildProps
       });
     }
   });
@@ -17080,7 +17840,7 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
 function getDrawerUtilityClass(slot) {
   return generateUtilityClass('MuiDrawer', slot);
 }
-generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
 
 const overridesResolver$2 = (props, styles) => {
   const {
@@ -17095,7 +17855,7 @@ const useUtilityClasses$7 = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root'],
+    root: ['root', `anchor${capitalize(anchor)}`],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
     paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
@@ -17579,7 +18339,10 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     addEndListener: handleAddEndListener,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
-    children: (state, childProps) => {
+    children: (state, {
+      ownerState,
+      ...restChildProps
+    }) => {
       return /*#__PURE__*/React.cloneElement(children, {
         style: {
           opacity: 0,
@@ -17590,7 +18353,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
           ...children.props.style
         },
         ref: handleRef,
-        ...childProps
+        ...restChildProps
       });
     }
   });
@@ -17793,6 +18556,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
       }) : /*#__PURE__*/jsxs(React.Fragment, {
         children: [position === 'start' ? (/* notranslate needed while Google Translate will not fix zero-width space issue */_span$1 || (_span$1 = /*#__PURE__*/jsx("span", {
           className: "notranslate",
+          "aria-hidden": true,
           children: "\u200B"
         }))) : null, children]
       })
@@ -17851,7 +18615,7 @@ process.env.NODE_ENV !== "production" ? InputAdornment.propTypes /* remove-propt
 function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }
-generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 
 const TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = keyframes`
@@ -17924,8 +18688,8 @@ const useUtilityClasses$5 = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, variant],
     dashed: ['dashed', `dashedColor${capitalize(color)}`],
-    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
   return composeClasses(slots, getLinearProgressUtilityClass, classes);
 };
@@ -18043,7 +18807,7 @@ const LinearProgressBar1 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })(memoTheme(({
   theme
@@ -18107,7 +18871,7 @@ const LinearProgressBar2 = styled('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(memoTheme(({
   theme
@@ -19312,6 +20076,7 @@ function NotchedOutline(props) {
       }) : // notranslate needed while Google Translate will not fix zero-width space issue
       _span || (_span = /*#__PURE__*/jsx("span", {
         className: "notranslate",
+        "aria-hidden": true,
         children: "\u200B"
       }))
     })
@@ -19545,7 +20310,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
-  return /*#__PURE__*/jsx(InputBase, {
+  return /*#__PURE__*/jsx(InputBase$1, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -19735,9 +20500,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: PropTypes.any
 } : void 0;
-if (OutlinedInput) {
-  OutlinedInput.muiName = 'Input';
-}
+OutlinedInput.muiName = 'Input';
 
 const Stack = createStack({
   createStyledComponent: styled('div', {
@@ -20043,7 +20806,7 @@ var DrawerComponent = function DrawerComponent(_ref) {
     py: 1.5,
     px: 1,
     sx: _objectSpread2({
-      backgroundColor: headerColor || "secondary"
+      backgroundColor: headerColor || "primary.50"
     }, sxHeader)
   }, React__default.createElement(Typography, {
     color: color || "background.paper",
@@ -20066,11 +20829,14 @@ var DrawerComponent = function DrawerComponent(_ref) {
     flex: 1,
     onClick: handleDrawerActions
   }, children), stateActions && React__default.createElement(Stack, {
+    flexDirection: "row",
+    border: "1px solid",
+    borderColor: "divider",
     alignItems: anchorActions,
     gap: 1,
     py: 1.5,
     px: 1,
-    bgcolor: "background.default",
+    bgcolor: "background.paper",
     sx: sxActions
   }, actions)));
 };
@@ -20268,7 +21034,6 @@ var PageHeaderComponent = function PageHeaderComponent(_ref) {
   return React__default.createElement(Stack, {
     id: "main-container",
     height: 48,
-    justifyContent: "center",
     position: fixed ? "fixed" : "relative",
     width: fixed ? "100%" : "inherit",
     bgcolor: "background.paper",
@@ -20279,7 +21044,7 @@ var PageHeaderComponent = function PageHeaderComponent(_ref) {
       zIndex: 10
     }
   }, React__default.createElement(Stack, {
-    id: "actions",
+    id: "acionts",
     height: 40,
     padding: buttonBack ? "4px 24px 4px 6px" : "4px 24px 4px 24px",
     justifyContent: "space-between",
@@ -23562,6 +24327,198 @@ function MultiSelect(_ref) {
   }, "Aplicar"))));
 }
 
+var AdjuntarArchivo = function AdjuntarArchivo(_ref) {
+  var compact = _ref.compact,
+    sx = _ref.sx;
+    _ref.guardarArchivo;
+    var transformarArchivo = _ref.transformarArchivo;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    archivos = _useState2[0],
+    setArchivos = _useState2[1];
+  useEffect(function () {
+    archivos.forEach(function (archivo, indice) {
+      if (archivo.progreso < 100) {
+        var intervalo = setInterval(function () {
+          setArchivos(function (archivosPrevios) {
+            return archivosPrevios.map(function (item, idx) {
+              return idx === indice ? _objectSpread2(_objectSpread2({}, item), {}, {
+                progreso: Math.min(item.progreso + 10, 100),
+                cargaCompleta: Math.min(item.progreso + 10, 100) === 100
+              }) : item;
+            });
+          });
+        }, 1000);
+        return function () {
+          return clearInterval(intervalo);
+        };
+      }
+    });
+  }, [archivos]);
+  var manejarSeleccionDeArchivos = function manejarSeleccionDeArchivos(archivosSeleccionados) {
+    if (archivosSeleccionados) {
+      setArchivos(function (prev) {
+        return [].concat(_toConsumableArray(prev), _toConsumableArray(Array.from(archivosSeleccionados).map(function (archivo) {
+          return {
+            archivo: archivo,
+            transformado: transformarArchivo(archivo),
+            progreso: 0,
+            cargaCompleta: false
+          };
+        })));
+      });
+    }
+  };
+  var eliminarArchivo = useCallback(function (indice) {
+    setArchivos(function (archivosPrevios) {
+      return archivosPrevios.filter(function (_, idx) {
+        return idx !== indice;
+      });
+    });
+  }, [setArchivos]);
+  var manejarSoltarArchivos = function manejarSoltarArchivos(evento) {
+    evento.preventDefault();
+    evento.stopPropagation();
+    manejarSeleccionDeArchivos(evento.dataTransfer.files);
+  };
+  var manejarArrastrarSobreZona = function manejarArrastrarSobreZona(evento) {
+    evento.preventDefault();
+  };
+  return React__default.createElement(Stack, {
+    width: "100%",
+    alignItems: "center",
+    bgcolor: "transparent",
+    height: "100%",
+    gap: 1
+  }, React__default.createElement(Stack, {
+    id: "zona-arrastre",
+    alignItems: "center",
+    flexDirection: compact === true ? "row" : "column",
+    justifyContent: "center",
+    bgcolor: "transparent",
+    width: "100%",
+    boxShadow: 0,
+    gap: 1,
+    borderRadius: 1,
+    py: 3,
+    onDrop: manejarSoltarArchivos,
+    onDragOver: manejarArrastrarSobreZona,
+    sx: _objectSpread2({
+      border: function border(theme) {
+        return "1px dashed ".concat(theme.palette.grey[500]);
+      },
+      cursor: "pointer",
+      ":hover": {
+        backgroundColor: "action.hover"
+      }
+    }, sx)
+  }, React__default.createElement(Cloud, {
+    color: "primary",
+    fontSize: "large"
+  }), React__default.createElement("input", {
+    type: "file",
+    multiple: true,
+    onChange: function onChange(e) {
+      return manejarSeleccionDeArchivos(e.target.files);
+    },
+    style: {
+      display: "none"
+    }
+  }), React__default.createElement(Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    id: "TipoArchivo"
+  }, "Arrastra o adjunta archivos"), React__default.createElement(Typography, {
+    variant: "caption",
+    color: "text.secondary"
+  }, "DOCX, XML, PNG, JPG \xB0 ", " ", React__default.createElement(Typography, {
+    variant: "caption",
+    color: "text.secondary",
+    id: "PesoArchivo"
+  }, "M\xE1x. 00MB")), React__default.createElement(Button, {
+    size: "small",
+    startIcon: React__default.createElement(AttachFile, {
+      fontSize: "small"
+    }),
+    component: "label"
+  }, "Adjuntar", React__default.createElement("input", {
+    type: "file",
+    hidden: true,
+    multiple: true,
+    onChange: function onChange(e) {
+      return manejarSeleccionDeArchivos(e.target.files);
+    }
+  }))), React__default.createElement(Stack, {
+    id: "informacion",
+    width: "100%",
+    height: "auto",
+    gap: 1,
+    sx: {
+      overflowY: "auto"
+    }
+  }, archivos.map(function (_ref2, indice) {
+    var archivo = _ref2.archivo,
+      progreso = _ref2.progreso,
+      cargaCompleta = _ref2.cargaCompleta;
+    return React__default.createElement(Stack, {
+      flexDirection: "row",
+      key: "".concat(archivo.name, "-").concat(indice),
+      width: "100%",
+      gap: 1,
+      borderRadius: 0.5,
+      sx: {
+        ":hover": {
+          backgroundColor: "action.hover"
+        }
+      }
+    }, React__default.createElement(Stack, {
+      width: "100%",
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 2,
+      p: 1
+    }, React__default.createElement(Stack, {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 0.5
+    }, React__default.createElement(UploadFileOutlined, {
+      color: "primary",
+      fontSize: "small"
+    }), React__default.createElement(Stack, {
+      flexDirection: "column",
+      width: "100%"
+    }, React__default.createElement(Typography, {
+      variant: "body2",
+      color: "text.primary"
+    }, archivo.name), React__default.createElement(Typography, {
+      id: "estado-carga-completo",
+      variant: "caption",
+      color: "text.secondary"
+    }, cargaCompleta ? "".concat(new Date().toLocaleDateString(), " \u2022 ").concat(Math.round(archivo.size / 1024), " KB") : "Cargando... \u2022 ".concat(Math.round(archivo.size / 1024), " KB")), !cargaCompleta && React__default.createElement(LinearProgress, {
+      id: "barra-progreso",
+      color: "primary",
+      variant: "determinate",
+      value: progreso,
+      sx: {
+        width: "100%"
+      }
+    })))), React__default.createElement(Box$2, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }, React__default.createElement(IconButton, {
+      size: "medium",
+      onClick: function onClick() {
+        return eliminarArchivo(indice);
+      }
+    }, React__default.createElement(DeleteOutline, {
+      fontSize: "small",
+      color: "action"
+    }))));
+  })));
+};
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -27880,7 +28837,7 @@ function customColor(source, color) {
 }
 
 var DynamicColor = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
     var imageElement, dynamicPalette, extractHctInstance, _dynamicPalette$palet, primary, secondary, _dynamicPalette$schem, dark, light, primaryMain, secondaryMain, primaryLight, primaryDark, secondaryLight, secondaryDark, primaryColor, secondaryColor, backgroundColor;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -27975,4 +28932,4 @@ var useDynamicColor = function useDynamicColor(url) {
   };
 };
 
-export { ADCSincoTheme, AddCalendar, AdproSincoTheme, Ai, BarChart, BarChartHorizontal, BasicCalendar, Books, Box$1 as Box, BoxReceived, Boxes, Brick, Building, BussinesTarget, CalendarUserEvents, Call, CardRadio, Cement, Chat, CheckBill, CheckBillSearch, CheckDocSearch, CheckedCalendar, CircularChart, Click, ClipBoard, ClipBoardUser, Clock, Cloud, Coin, Config, ContactMails, Contacts, Conversation, Coupon, Crane, DaysCalendar, Develop, Diagram, Discount, Doc, DonutChart, DownloadDoc, DrawerComponent as Drawer, DrawerComponent, Drill, DuplicateTemplate, DynamicColor, EmailAddress, EmptyStateComponent as EmptyState, EmptyStateComponent, Engine, ErrorCalendar, ErrorDoc, EventsCalendar, Excavator, ExclamationBox, ExclamationCalendar, Flag, Flow, FooterAction, Gasoline, General, Hammer, Img, Law, Lego, Lift, Location, LockedFolder, Mail, Megaphone, Microphone, ModalSinco, MoneyBill, MoneyBillSearch, MoneyDoc, MoneyDocSearch, MountainFlag, MultiSelect, Notification, OpenBox, OpenFolder, Padlock, PageHeaderComponent as PageHeader, PageHeaderComponent, PaintRoller, Pdf, PintPot, Ppt, ProgressSinco, Puzzle, QuestionBill, QuestionBillSearch, QuestionBox, QuestionDocSearch, Rar, ReceivedMail, ReloadDoc, SealedBox, SearchCountry, SearchHome, SearchMoney, SearchUser, ShippingBox, Sholve, SincoTheme, Speedometer, StackedChart, StarChart, StartPennant, Support, TextDoc, TextFolder, ToastNotification, ToolBox, TrafficCone, TrendChart, Trolly, TrollyBox, Truck, Txt, UnlockedCalendar, Upload, UploadDoc, UserConfig, UserFolder, Users, WhatsApp, Xls, Zip, stateConfig, useDynamicColor };
+export { ADCSincoTheme, AddCalendar, AdjuntarArchivo, AdproSincoTheme, Ai, BarChart, BarChartHorizontal, BasicCalendar, Books, Box$1 as Box, BoxReceived, Boxes, Brick, Building, BussinesTarget, CalendarUserEvents, Call, CardRadio, Cement, Chat, CheckBill, CheckBillSearch, CheckDocSearch, CheckedCalendar, CircularChart, Click, ClipBoard, ClipBoardUser, Clock, Cloud, Coin, Config, ContactMails, Contacts, Conversation, Coupon, Crane, DaysCalendar, Develop, Diagram, Discount, Doc, DonutChart, DownloadDoc, DrawerComponent as Drawer, DrawerComponent, Drill, DuplicateTemplate, DynamicColor, EmailAddress, EmptyStateComponent as EmptyState, EmptyStateComponent, Engine, ErrorCalendar, ErrorDoc, EventsCalendar, Excavator, ExclamationBox, ExclamationCalendar, Flag, Flow, FooterAction, Gasoline, General, Hammer, Img, Law, Lego, Lift, Location, LockedFolder, Mail, Megaphone, Microphone, ModalSinco, MoneyBill, MoneyBillSearch, MoneyDoc, MoneyDocSearch, MountainFlag, MultiSelect, Notification, OpenBox, OpenFolder, Padlock, PageHeaderComponent as PageHeader, PageHeaderComponent, PaintRoller, Pdf, PintPot, Ppt, ProgressSinco, Puzzle, QuestionBill, QuestionBillSearch, QuestionBox, QuestionDocSearch, Rar, ReceivedMail, ReloadDoc, SealedBox, SearchCountry, SearchHome, SearchMoney, SearchUser, ShippingBox, Sholve, SincoTheme, Speedometer, StackedChart, StarChart, StartPennant, Support, TextDoc, TextFolder, ToastNotification, ToolBox, TrafficCone, TrendChart, Trolly, TrollyBox, Truck, Txt, UnlockedCalendar, Upload, UploadDoc, UserConfig, UserFolder, Users, WhatsApp, Xls, Zip, stateConfig, useDynamicColor };