@sinco/react 1.2.5-rc.4 → 1.2.5-rc.6

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.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2361,6 +2368,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
 }) {
@@ -2388,7 +2414,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 +2430,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 +2449,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 +3625,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 +3648,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 +3712,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,
@@ -3884,262 +3914,287 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
 
 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 = {};
+var reactIs_production = {};
 
 /**
  * @license React
- * react-is.development.js
+ * react-is.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-var 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;
-	}
-
+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 (typeof object === 'object' && object !== null) {
+	  if ("object" === typeof object && null !== object) {
 	    var $$typeof = object.$$typeof;
-
 	    switch ($$typeof) {
 	      case REACT_ELEMENT_TYPE:
-	        var type = object.type;
-
-	        switch (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 type;
-
+	            return object;
 	          default:
-	            var $$typeofType = type && type.$$typeof;
-
-	            switch ($$typeofType) {
-	              case REACT_SERVER_CONTEXT_TYPE:
+	            switch (((object = object && object.$$typeof), object)) {
 	              case REACT_CONTEXT_TYPE:
 	              case REACT_FORWARD_REF_TYPE:
 	              case REACT_LAZY_TYPE:
 	              case REACT_MEMO_TYPE:
-	              case REACT_PROVIDER_TYPE:
-	                return $$typeofType;
-
+	                return object;
+	              case REACT_CONSUMER_TYPE:
+	                return object;
 	              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) {
+	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;
-	}
-	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) {
+	};
+	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;
-	}
-	function isFragment(object) {
+	};
+	reactIs_production.isFragment = function (object) {
 	  return typeOf(object) === REACT_FRAGMENT_TYPE;
-	}
-	function isLazy(object) {
+	};
+	reactIs_production.isLazy = function (object) {
 	  return typeOf(object) === REACT_LAZY_TYPE;
-	}
-	function isMemo(object) {
+	};
+	reactIs_production.isMemo = function (object) {
 	  return typeOf(object) === REACT_MEMO_TYPE;
-	}
-	function isPortal(object) {
+	};
+	reactIs_production.isPortal = function (object) {
 	  return typeOf(object) === REACT_PORTAL_TYPE;
-	}
-	function isProfiler(object) {
+	};
+	reactIs_production.isProfiler = function (object) {
 	  return typeOf(object) === REACT_PROFILER_TYPE;
-	}
-	function isStrictMode(object) {
+	};
+	reactIs_production.isStrictMode = function (object) {
 	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	}
-	function isSuspense(object) {
+	};
+	reactIs_production.isSuspense = function (object) {
 	  return typeOf(object) === REACT_SUSPENSE_TYPE;
-	}
-	function isSuspenseList(object) {
+	};
+	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 = {};
 
-	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;
+/**
+ * @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_min();
+  reactIs.exports = requireReactIs_production();
 } else {
   reactIs.exports = requireReactIs_development();
 }
@@ -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(', ')})` : '';
@@ -5271,6 +5331,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) {
@@ -9078,6 +9166,94 @@ var paletteADC = _objectSpread2({
   }
 }, 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: {
     xs: 0,
@@ -9550,16 +9726,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;
@@ -14424,6 +14590,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);
@@ -19545,7 +19712,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
@@ -20043,7 +20210,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 +20233,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)));
 };
@@ -20278,7 +20448,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",
@@ -23561,6 +23731,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
@@ -27879,7 +28241,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) {
@@ -27974,4 +28336,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.2.5-rc.4",
+  "version": "1.2.5-rc.6",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/index.d.ts

@@ -9,3 +9,4 @@ export * from "./Modal";
 export * from "./Icons";
 export * from "./MultiSelect";
 export * from "./Modal";
+export * from './AdjuntarArchivos';