@sinco/react 1.0.3 → 1.0.4-rc.0

package/index.js

@@ -337,10 +337,10 @@ var store$2 = sharedStore;
 (shared$3.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.31.1',
+  version: '3.30.2',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.31.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -1097,21 +1097,6 @@ function chainPropTypes(propType1, propType2) {
   };
 }
 
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$4.apply(this, arguments);
-}
-
 function isPlainObject(item) {
   return item !== null && typeof item === 'object' && item.constructor === Object;
 }
@@ -1128,7 +1113,9 @@ function deepClone(source) {
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends$4({}, target) : target;
+  const output = options.clone ? {
+    ...target
+  } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
       // Avoid prototype pollution
@@ -2300,7 +2287,8 @@ function exactProp(propTypes) {
   if (process.env.NODE_ENV === 'production') {
     return propTypes;
   }
-  return _extends$4({}, propTypes, {
+  return {
+    ...propTypes,
     [specialProperty]: props => {
       const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
       if (unsupportedProps.length > 0) {
@@ -2308,7 +2296,7 @@ function exactProp(propTypes) {
       }
       return null;
     }
-  });
+  };
 }
 
 /**
@@ -2664,7 +2652,6 @@ var useEnhancedEffect$1 = useEnhancedEffect;
 /**
  * https://github.com/facebook/react/issues/14099#issuecomment-440013892
  */
-
 function useEventCallback(fn) {
   const ref = React.useRef(fn);
   useEnhancedEffect$1(() => {
@@ -2695,6 +2682,7 @@ function useForkRef(...refs) {
   }, refs);
 }
 
+// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
 let hadKeyboardEvent = true;
 let hadFocusVisibleRecently = false;
 let hadFocusVisibleRecentlyTimeout;
@@ -2855,10 +2843,15 @@ function useIsFocusVisible() {
  * @returns {object} resolved props
  */
 function resolveProps(defaultProps, props) {
-  const output = _extends$4({}, props);
+  const output = {
+    ...props
+  };
   Object.keys(defaultProps).forEach(propName => {
     if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends$4({}, defaultProps[propName], output[propName]);
+      output[propName] = {
+        ...defaultProps[propName],
+        ...output[propName]
+      };
     } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
       const defaultSlotProps = defaultProps[propName] || {};
       const slotProps = props[propName];
@@ -2870,7 +2863,9 @@ function resolveProps(defaultProps, props) {
         // Reduce the iteration if the default slot props is empty
         output[propName] = slotProps;
       } else {
-        output[propName] = _extends$4({}, slotProps);
+        output[propName] = {
+          ...slotProps
+        };
         Object.keys(defaultSlotProps).forEach(slotPropName => {
           output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
         });
@@ -2950,8 +2945,8 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
 
 var THEME_ID = '$$material';
 
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2962,10 +2957,10 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$2(source, excluded) {
+function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -2978,21 +2973,6 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
   return target;
 }
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
 function memoize$1(fn) {
   var cache = Object.create(null);
   return function (arg) {
@@ -5867,7 +5847,7 @@ var createStyled$1 = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$2({}, options, nextOptions, {
+      return createStyled(nextTag, _extends({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -5917,34 +5897,6 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
 const _excluded$j = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -5954,7 +5906,7 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends$1({}, acc, {
+    return _extends({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
@@ -5980,7 +5932,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose$1(breakpoints, _excluded$j);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$j);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6012,7 +5964,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends$1({
+  return _extends({
     keys,
     values: sortedValues,
     up,
@@ -6620,8 +6572,8 @@ const width = style$2({
 const maxWidth = props => {
   if (props.maxWidth !== undefined && props.maxWidth !== null) {
     const styleFromPropValue = propValue => {
-      var _props$theme;
-      const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values$2[propValue];
+      var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
+      const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || values$2[propValue];
       return {
         maxWidth: breakpoint || sizingTransform(propValue)
       };
@@ -7072,7 +7024,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose$1(options, _excluded$i);
+    other = _objectWithoutPropertiesLoose(options, _excluded$i);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -7080,14 +7032,14 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends$1({
+    palette: _extends({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: _extends$1({}, shape$1, shapeInput)
+    shape: _extends({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends$1({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -7117,7 +7069,7 @@ const splitProps = props => {
     systemProps: {},
     otherProps: {}
   };
-  const config = (_props$theme$unstable = props == null || (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig$1;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -7131,7 +7083,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose$1(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const {
     systemProps,
     otherProps
@@ -7145,12 +7097,12 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _extends$1({}, systemProps, result);
+      return _extends({}, systemProps, result);
     };
   } else {
-    finalSx = _extends$1({}, systemProps, inSx);
+    finalSx = _extends({}, systemProps, inSx);
   }
-  return _extends$1({}, otherProps, {
+  return _extends({}, otherProps, {
     sx: finalSx
   });
 }
@@ -7175,8 +7127,8 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose$1(_extendSxProp, _excluded$g);
-    return /*#__PURE__*/jsx(BoxRoot, _extends$1({
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$g);
+    return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
@@ -7200,7 +7152,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose$1(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -7244,12 +7196,12 @@ const getVariantStyles = (name, theme) => {
   return variantsStyles;
 };
 const variantsResolver = (props, styles, theme, name) => {
-  var _theme$components;
+  var _theme$components, _theme$components$nam;
   const {
     ownerState = {}
   } = props;
   const variantsStyles = [];
-  const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
+  const themeVariants = theme == null ? void 0 : (_theme$components = theme.components) == null ? void 0 : (_theme$components$nam = _theme$components[name]) == null ? void 0 : _theme$components$nam.variants;
   if (themeVariants) {
     themeVariants.forEach(themeVariant => {
       let isMatch = true;
@@ -7289,8 +7241,8 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1(_extends$1({}, props, {
-      theme: resolveTheme(_extends$1({}, props, {
+    return styleFunctionSx$1(_extends({}, props, {
+      theme: resolveTheme(_extends({}, props, {
         defaultTheme,
         themeId
       }))
@@ -7307,7 +7259,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose$1(inputOptions, _excluded$e);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$e);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -7328,7 +7280,7 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$3(tag, _extends$1({
+    const defaultStyledResolver = styled$3(tag, _extends({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -7338,8 +7290,8 @@ function createStyled(input = {}) {
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? props => {
-          return stylesArg(_extends$1({}, props, {
-            theme: resolveTheme(_extends$1({}, props, {
+          return stylesArg(_extends({}, props, {
+            theme: resolveTheme(_extends({}, props, {
               defaultTheme,
               themeId
             }))
@@ -7349,7 +7301,7 @@ function createStyled(input = {}) {
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$1({}, props, {
+          const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7357,7 +7309,7 @@ function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$1({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
                 theme
               })) : slotStyle;
             });
@@ -7368,7 +7320,7 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends$1({}, props, {
+          const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7390,8 +7342,8 @@ function createStyled(input = {}) {
       // which are basically components used as a selectors.
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = props => styleArg(_extends$1({}, props, {
-          theme: resolveTheme(_extends$1({}, props, {
+        transformedStyleArg = props => styleArg(_extends({}, props, {
+          theme: resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }))
@@ -7687,21 +7639,6 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const ThemeContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'ThemeContext';
@@ -7730,7 +7667,10 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
     }
     return mergedTheme;
   }
-  return _extends({}, outerTheme, localTheme);
+  return {
+    ...outerTheme,
+    ...localTheme
+  };
 }
 
 /**
@@ -7781,7 +7721,7 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends$1({}, upperTheme, {
+      const result = themeId ? _extends({}, upperTheme, {
         [themeId]: mergedTheme
       }) : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
@@ -7791,9 +7731,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends$1({}, upperTheme, {
+    return themeId ? _extends({}, upperTheme, {
       [themeId]: localTheme
-    }) : _extends$1({}, upperTheme, localTheme);
+    }) : _extends({}, upperTheme, localTheme);
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -7896,7 +7836,7 @@ const style = ({
   ownerState,
   theme
 }) => {
-  let styles = _extends$1({
+  let styles = _extends({
     display: 'flex',
     flexDirection: 'column'
   }, handleBreakpoints({
@@ -7939,7 +7879,7 @@ const style = ({
         };
       }
       return {
-        '& > :not(style) ~ :not(style)': {
+        '& > :not(style) + :not(style)': {
           margin: 0,
           [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
         }
@@ -7978,14 +7918,14 @@ function createStack(options = {}) {
         className,
         useFlexGap = false
       } = props,
-      other = _objectWithoutPropertiesLoose$1(props, _excluded$d);
+      other = _objectWithoutPropertiesLoose(props, _excluded$d);
     const ownerState = {
       direction,
       spacing,
       useFlexGap
     };
     const classes = useUtilityClasses();
-    return /*#__PURE__*/jsx(StackRoot, _extends$1({
+    return /*#__PURE__*/jsx(StackRoot, _extends({
       as: component,
       ownerState: ownerState,
       ref: ref,
@@ -8005,7 +7945,7 @@ function createStack(options = {}) {
 }
 
 function createMixins(breakpoints, mixins) {
-  return _extends$3({
+  return _extends({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -8321,7 +8261,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose$2(palette, _excluded$c);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$c);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -8349,7 +8289,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$3({}, color);
+    color = _extends({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -8389,9 +8329,9 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = deepmerge(_extends$3({
+  const paletteOutput = deepmerge(_extends({
     // A collection of common colors.
-    common: _extends$3({}, common$1),
+    common: _extends({}, common$1),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -8476,7 +8416,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose$2(_ref, _excluded$b);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -8487,7 +8427,7 @@ function createTypography(palette, typography) {
   }
   const coef = fontSize / 14;
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -8518,7 +8458,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$3({
+  return deepmerge(_extends({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -8586,15 +8526,15 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends$3({}, duration, inputTransitions.duration);
+  const mergedEasing = _extends({}, easing, inputTransitions.easing);
+  const mergedDuration = _extends({}, duration, inputTransitions.duration);
   const create = (props = ['all'], options = {}) => {
     const {
         duration: durationOption = mergedDuration.standard,
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose$2(options, _excluded$a);
+      other = _objectWithoutPropertiesLoose(options, _excluded$a);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -8612,16 +8552,13 @@ function createTransitions(inputTransitions) {
       if (!isNumber(delay) && !isString(delay)) {
         console.error('MUI: Argument "delay" must be a number or a string.');
       }
-      if (typeof options !== 'object') {
-        console.error(['MUI: Secong argument of transition.create must be an object.', "Arguments should be either `create('prop1', options)` or `create(['prop1', 'prop2'], options)`"].join('\n'));
-      }
       if (Object.keys(other).length !== 0) {
         console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
       }
     }
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-  return _extends$3({
+  return _extends({
     getAutoHeightDuration,
     create
   }, inputTransitions, {
@@ -8652,7 +8589,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose$2(options, _excluded$9);
+    other = _objectWithoutPropertiesLoose(options, _excluded$9);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -8666,7 +8603,7 @@ Please use another name.` : formatMuiErrorMessage(18));
     shadows: shadows$1.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends$3({}, zIndex$1)
+    zIndex: _extends({}, zIndex$1)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -8700,7 +8637,7 @@ Please use another name.` : formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -8747,9 +8684,9 @@ function ThemeProvider(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose$2(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsx(ThemeProvider$1, _extends$3({}, props, {
+  return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
   }));
@@ -8795,29 +8732,27 @@ const SvgIconRoot = styled$1('svg', {
   theme,
   ownerState
 }) => {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
   return {
     userSelect: 'none',
     width: '1em',
     height: '1em',
     display: 'inline-block',
-    // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
-    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
+    fill: 'currentColor',
     flexShrink: 0,
-    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
+    transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
     }),
     fontSize: {
       inherit: 'inherit',
-      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+      small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
       inherit: undefined
     }[ownerState.color]
   };
@@ -8838,23 +8773,21 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$7);
-  const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends$3({}, props, {
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+  const ownerState = _extends({}, props, {
     color,
     component,
     fontSize,
     instanceFontSize: inProps.fontSize,
     inheritViewBox,
-    viewBox,
-    hasSvgAsChild
+    viewBox
   });
   const more = {};
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses$6(ownerState);
-  return /*#__PURE__*/jsxs(SvgIconRoot, _extends$3({
+  return /*#__PURE__*/jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
@@ -8862,9 +8795,9 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
-  }, more, other, hasSvgAsChild && children.props, {
+  }, more, other, {
     ownerState: ownerState,
-    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/jsx("title", {
+    children: [children, titleAccess ? /*#__PURE__*/jsx("title", {
       children: titleAccess
     }) : null]
   }));
@@ -8946,7 +8879,7 @@ var SvgIcon$1 = SvgIcon;
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/jsx(SvgIcon$1, _extends$3({
+    return /*#__PURE__*/jsx(SvgIcon$1, _extends({
       "data-testid": `${displayName}Icon`,
       ref: ref
     }, props, {
@@ -9154,25 +9087,39 @@ const components = {
     }
   },
   MuiButton: {
-    defaultProps: {
-      size: 'medium'
-    },
     styleOverrides: {
-      fullWidth: {
-        width: '100%'
+      endIcon: {
+        marginLeft: 2
+      },
+      iconSizeSmall: {
+        height: 14,
+        width: 14
+      },
+      iconSizeMedium: {
+        height: 15,
+        width: 18
+      },
+      iconSizeLarge: {
+        height: 17,
+        width: 22
       },
       sizeSmall: {
-        padding: '4px 10px'
+        padding: '6px 5px'
       },
       sizeMedium: {
-        padding: '7.5px 15px'
+        padding: '8.5px 8px',
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        }
       },
       sizeLarge: {
-        padding: '10.5px 22px',
-        fontSize: 14
-      },
-      root: {
-        width: "fit-content"
+        padding: '10.5px 11px',
+        fontSize: 14,
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
       }
     }
   },
@@ -9281,7 +9228,7 @@ const components = {
     styleOverrides: {
       sizeSmall: {
         fontSize: 14,
-        padding: 2
+        padding: 4
       },
       sizeMedium: {
         fontSize: 20,
@@ -9538,48 +9485,69 @@ const typography = {
     fontSize: 14,
     fontWeight: 400,
     letterSpacing: 0.15,
-    lineHeight: 1.4
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 15
+    }
   },
   body2: {
     fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 400,
     letterSpacing: 0.17,
-    lineHeight: 1.2
+    lineHeight: 1.2,
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
   },
   subtitle1: {
     fontFamily: 'Roboto',
     fontSize: 14,
     fontWeight: 500,
     letterSpacing: 0.15,
-    lineHeight: 1.4
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 15
+    }
   },
   subtitle2: {
     fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 500,
     letterSpacing: 0.1,
-    lineHeight: 1.4
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
   },
   caption: {
     fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 0.4,
-    lineHeight: 1.4
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 12
+    }
   },
   overline: {
     fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 1,
-    lineHeight: 2.66
+    lineHeight: 2.66,
+    '@media(max-width: 885px)': {
+      fontSize: 12
+    }
   },
   h6: {
     fontFamily: 'Nunito',
     fontSize: 16,
     fontWeight: 600,
-    lineHeight: 1.6
+    lineHeight: 1.6,
+    '@media(max-width: 885px)': {
+      fontSize: 17
+    }
   },
   h5: {
     fontFamily: 'Nunito',
@@ -9619,7 +9587,10 @@ const typography = {
     textTransform: 'unset',
     fontWeightLight: 300,
     fontSize: 13,
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
   }
 };
 
@@ -10170,19 +10141,6 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -10430,7 +10388,7 @@ var TransitionGroup = /*#__PURE__*/function (_React$Component) {
 
     if (this.mounted) {
       this.setState(function (state) {
-        var children = _extends$2({}, state.children);
+        var children = _extends({}, state.children);
 
         delete children[child.key];
         return {
@@ -10738,7 +10696,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -10753,16 +10711,14 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
   const ignoringMouseDown = React.useRef(false);
   // We use a timer in order to only show the ripples for touch "click" like events.
   // We don't want to display the ripple for touch scroll events.
-  const startTimer = React.useRef(0);
+  const startTimer = React.useRef(null);
 
   // This is the hook called once the previous timeout is ready.
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
   React.useEffect(() => {
     return () => {
-      if (startTimer.current) {
-        clearTimeout(startTimer.current);
-      }
+      clearTimeout(startTimer.current);
     };
   }, []);
   const startCommit = React.useCallback(params => {
@@ -10906,7 +10862,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     start,
     stop
   }), [pulsate, start, stop]);
-  return /*#__PURE__*/jsx(TouchRippleRoot, _extends$3({
+  return /*#__PURE__*/jsx(TouchRippleRoot, _extends({
     className: clsx(touchRippleClasses$1.root, classes.root, className),
     ref: container
   }, other, {
@@ -11043,7 +10999,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -11200,7 +11156,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       }
     }, [enableTouchRipple]);
   }
-  const ownerState = _extends$3({}, props, {
+  const ownerState = _extends({}, props, {
     centerRipple,
     component,
     disabled,
@@ -11211,7 +11167,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     focusVisible
   });
   const classes = useUtilityClasses$5(ownerState);
-  return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends$3({
+  return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -11235,7 +11191,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     children: [children, enableTouchRipple ?
     /*#__PURE__*/
     /* TouchRipple is only needed client-side, x2 boost on the server. */
-    jsx(TouchRipple$1, _extends$3({
+    jsx(TouchRipple$1, _extends({
       ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
@@ -11433,7 +11389,7 @@ const IconButtonRoot = styled$1(ButtonBase$1, {
 })(({
   theme,
   ownerState
-}) => _extends$3({
+}) => _extends({
   textAlign: 'center',
   flex: '0 0 auto',
   fontSize: theme.typography.pxToRem(24),
@@ -11463,12 +11419,12 @@ const IconButtonRoot = styled$1(ButtonBase$1, {
 }) => {
   var _palette;
   const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-  return _extends$3({}, ownerState.color === 'inherit' && {
+  return _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$3({
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
     color: palette == null ? void 0 : palette.main
   }, !ownerState.disableRipple && {
-    '&:hover': _extends$3({}, palette && {
+    '&:hover': _extends({}, palette && {
       backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
     }, {
       // Reset on touch devices, it doesn't add specificity
@@ -11508,8 +11464,8 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$4);
-  const ownerState = _extends$3({}, props, {
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const ownerState = _extends({}, props, {
     edge,
     color,
     disabled,
@@ -11517,7 +11473,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     size
   });
   const classes = useUtilityClasses$4(ownerState);
-  return /*#__PURE__*/jsx(IconButtonRoot, _extends$3({
+  return /*#__PURE__*/jsx(IconButtonRoot, _extends({
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
@@ -11629,7 +11585,7 @@ const TypographyRoot = styled$1('span', {
 })(({
   theme,
   ownerState
-}) => _extends$3({
+}) => _extends({
   margin: 0
 }, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
@@ -11673,7 +11629,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     name: 'MuiTypography'
   });
   const color = transformDeprecatedColors(themeProps.color);
-  const props = extendSxProp(_extends$3({}, themeProps, {
+  const props = extendSxProp(_extends({}, themeProps, {
     color
   }));
   const {
@@ -11686,8 +11642,8 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$3);
-  const ownerState = _extends$3({}, props, {
+    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const ownerState = _extends({}, props, {
     align,
     color,
     className,
@@ -11700,7 +11656,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   });
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
   const classes = useUtilityClasses$3(ownerState);
-  return /*#__PURE__*/jsx(TypographyRoot, _extends$3({
+  return /*#__PURE__*/jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
     ownerState: ownerState,
@@ -11844,9 +11800,9 @@ const useUtilityClasses$2 = ownerState => {
     endIcon: ['endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return _extends$3({}, classes, composedClasses);
+  return _extends({}, classes, composedClasses);
 };
-const commonIconStyles = ownerState => _extends$3({}, ownerState.size === 'small' && {
+const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
   '& > *:nth-of-type(1)': {
     fontSize: 18
   }
@@ -11876,14 +11832,14 @@ const ButtonRoot = styled$1(ButtonBase$1, {
   var _theme$palette$getCon, _theme$palette;
   const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-  return _extends$3({}, theme.typography.button, {
+  return _extends({}, theme.typography.button, {
     minWidth: 64,
     padding: '6px 16px',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
-    '&:hover': _extends$3({
+    '&:hover': _extends({
       textDecoration: 'none',
       backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
@@ -11918,13 +11874,13 @@ const ButtonRoot = styled$1(ButtonBase$1, {
         backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }),
-    '&:active': _extends$3({}, ownerState.variant === 'contained' && {
+    '&:active': _extends({}, ownerState.variant === 'contained' && {
       boxShadow: (theme.vars || theme).shadows[8]
     }),
-    [`&.${buttonClasses$1.focusVisible}`]: _extends$3({}, ownerState.variant === 'contained' && {
+    [`&.${buttonClasses$1.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
       boxShadow: (theme.vars || theme).shadows[6]
     }),
-    [`&.${buttonClasses$1.disabled}`]: _extends$3({
+    [`&.${buttonClasses$1.disabled}`]: _extends({
       color: (theme.vars || theme).palette.action.disabled
     }, ownerState.variant === 'outlined' && {
       border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
@@ -12004,7 +11960,7 @@ const ButtonStartIcon = styled$1('span', {
   }
 })(({
   ownerState
-}) => _extends$3({
+}) => _extends({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4
@@ -12022,7 +11978,7 @@ const ButtonEndIcon = styled$1('span', {
   }
 })(({
   ownerState
-}) => _extends$3({
+}) => _extends({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8
@@ -12053,8 +12009,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       type,
       variant = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$2);
-  const ownerState = _extends$3({}, props, {
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const ownerState = _extends({}, props, {
     color,
     component,
     disabled,
@@ -12076,7 +12032,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
-  return /*#__PURE__*/jsxs(ButtonRoot, _extends$3({
+  return /*#__PURE__*/jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className),
     component: component,
@@ -12118,7 +12074,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -12221,7 +12177,7 @@ const DividerRoot = styled$1('div', {
 })(({
   theme,
   ownerState
-}) => _extends$3({
+}) => _extends({
   margin: 0,
   // Reset browser default style.
   flexShrink: 0,
@@ -12253,7 +12209,7 @@ const DividerRoot = styled$1('div', {
   height: 'auto'
 }), ({
   ownerState
-}) => _extends$3({}, ownerState.children && {
+}) => _extends({}, ownerState.children && {
   display: 'flex',
   whiteSpace: 'nowrap',
   textAlign: 'center',
@@ -12265,7 +12221,7 @@ const DividerRoot = styled$1('div', {
 }), ({
   theme,
   ownerState
-}) => _extends$3({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
   '&::before, &::after': {
     width: '100%',
     borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
@@ -12273,7 +12229,7 @@ const DividerRoot = styled$1('div', {
 }), ({
   theme,
   ownerState
-}) => _extends$3({}, ownerState.children && ownerState.orientation === 'vertical' && {
+}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
   flexDirection: 'column',
   '&::before, &::after': {
     height: '100%',
@@ -12281,7 +12237,7 @@ const DividerRoot = styled$1('div', {
   }
 }), ({
   ownerState
-}) => _extends$3({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
+}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
   '&::before': {
     width: '90%'
   },
@@ -12308,7 +12264,7 @@ const DividerWrapper = styled$1('span', {
 })(({
   theme,
   ownerState
-}) => _extends$3({
+}) => _extends({
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`
@@ -12333,8 +12289,8 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
       textAlign = 'center',
       variant = 'fullWidth'
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$1);
-  const ownerState = _extends$3({}, props, {
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends({}, props, {
     absolute,
     component,
     flexItem,
@@ -12345,7 +12301,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses$1(ownerState);
-  return /*#__PURE__*/jsx(DividerRoot, _extends$3({
+  return /*#__PURE__*/jsx(DividerRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
     role: role,
@@ -12423,63 +12379,6 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
 } : void 0;
 var Divider$1 = Divider;
 
-const Stack = createStack({
-  createStyledComponent: styled$1('div', {
-    name: 'MuiStack',
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-  }),
-  useThemeProps: inProps => useThemeProps({
-    props: inProps,
-    name: 'MuiStack'
-  })
-});
-process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * Defines the `flex-direction` style property.
-   * It is applied for all screen sizes.
-   * @default 'column'
-   */
-  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-  /**
-   * Add an element between each child.
-   */
-  divider: PropTypes.node,
-  /**
-   * Defines the space between immediate children.
-   * @default 0
-   */
-  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-  /**
-   * The system prop, which 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]),
-  /**
-   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-   *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-   *
-   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
-   * @default false
-   */
-  useFlexGap: PropTypes.bool
-} : void 0;
-var Stack$1 = Stack;
-
 function getLinearProgressUtilityClass(slot) {
   return generateUtilityClass('MuiLinearProgress', slot);
 }
@@ -12577,7 +12476,7 @@ const LinearProgressRoot = styled$1('span', {
 })(({
   ownerState,
   theme
-}) => _extends$3({
+}) => _extends({
   position: 'relative',
   overflow: 'hidden',
   display: 'block',
@@ -12619,7 +12518,7 @@ const LinearProgressDashed = styled$1('span', {
   theme
 }) => {
   const backgroundColor = getColorShade(theme, ownerState.color);
-  return _extends$3({
+  return _extends({
     position: 'absolute',
     marginTop: 0,
     height: '100%',
@@ -12646,7 +12545,7 @@ const LinearProgressBar1 = styled$1('span', {
 })(({
   ownerState,
   theme
-}) => _extends$3({
+}) => _extends({
   width: '100%',
   position: 'absolute',
   left: 0,
@@ -12678,7 +12577,7 @@ const LinearProgressBar2 = styled$1('span', {
 })(({
   ownerState,
   theme
-}) => _extends$3({
+}) => _extends({
   width: '100%',
   position: 'absolute',
   left: 0,
@@ -12719,8 +12618,8 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       valueBuffer,
       variant = 'indeterminate'
     } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded);
-  const ownerState = _extends$3({}, props, {
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     color,
     variant
   });
@@ -12756,7 +12655,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
   }
-  return /*#__PURE__*/jsxs(LinearProgressRoot, _extends$3({
+  return /*#__PURE__*/jsxs(LinearProgressRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     role: "progressbar"
@@ -12820,34 +12719,99 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-propt
 } : void 0;
 var LinearProgress$1 = LinearProgress;
 
+const Stack = createStack({
+  createStyledComponent: styled$1('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  useThemeProps: inProps => useThemeProps({
+    props: inProps,
+    name: 'MuiStack'
+  })
+});
+process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * The system prop, which 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]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
+} : void 0;
+var Stack$1 = Stack;
+
 const ToastContent = styled$1(Stack$1)(({
   theme
 }) => ({
   marginBottom: theme.spacing(2),
-  position: "relative",
-  top: 16,
-  left: "979px",
   zIndex: 9999,
-  boxShadow: "0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)"
+  boxShadow: '0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)',
+  '&.flex-end': {
+    marginTop: 16,
+    marginRight: 16
+  },
+  '&.center': {
+    marginTop: 16
+  },
+  '&.flex-start': {
+    marginLeft: 16,
+    marginTop: 16
+  }
 }));
 const ContentBox = styled$1(Box$1)(({
   theme
 }) => ({
   padding: theme.spacing(1.5),
   gap: theme.spacing(1.5),
-  display: "flex",
-  alignItems: "center",
-  "&.color-error": {
-    backgroundColor: "#feebee"
+  display: 'flex',
+  alignItems: 'center',
+  '&.color-error': {
+    backgroundColor: '#feebee'
   },
-  "&.color-info": {
-    backgroundColor: "#e1f5fe"
+  '&.color-info': {
+    backgroundColor: '#e1f5fe'
   },
-  "&.color-warning": {
-    backgroundColor: "#fff3e0"
+  '&.color-warning': {
+    backgroundColor: '#fff3e0'
   },
-  "&.color-success": {
-    backgroundColor: "#E8F5E9"
+  '&.color-success': {
+    backgroundColor: '#E8F5E9'
   }
 }));
 const RippleIcon = styled$1(Stack$1)(({
@@ -12857,31 +12821,31 @@ const RippleIcon = styled$1(Stack$1)(({
   gap: theme.spacing(1),
   height: 20,
   borderRadius: 50,
-  "&.ripple-error": {
-    backgroundColor: "#D143431F"
+  '&.ripple-error': {
+    backgroundColor: '#D143431F'
   },
-  "&.ripple-info": {
-    backgroundColor: "#2D9FC51F"
+  '&.ripple-info': {
+    backgroundColor: '#2D9FC51F'
   },
-  "&.ripple-warning": {
-    backgroundColor: "#FB85001F"
+  '&.ripple-warning': {
+    backgroundColor: '#FB85001F'
   },
-  "&.ripple-success": {
-    backgroundColor: "#8FC93A1F"
+  '&.ripple-success': {
+    backgroundColor: '#8FC93A1F'
   }
 }));
 const ContentIcon = styled$1(Stack$1)(() => ({
-  "&.icon-color.color-info": {
-    color: "#0097b9"
+  '&.icon-color.color-info': {
+    color: '#0097b9'
   },
-  "&.icon-color.color-error": {
-    color: "#d14343"
+  '&.icon-color.color-error': {
+    color: '#d14343'
   },
-  "&.icon-color.color-warning": {
-    color: "#fb8500"
+  '&.icon-color.color-warning': {
+    color: '#fb8500'
   },
-  "&.icon-color.color-success": {
-    color: "#8fc93a"
+  '&.icon-color.color-success': {
+    color: '#8fc93a'
   }
 }));
 const ToastNotification = toast => {
@@ -12895,14 +12859,20 @@ const ToastNotification = toast => {
     warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
     info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
   };
-  const ToastIcon = IconMap[toast.type || "info"];
+  const ToastIcon = IconMap[toast.type || 'info'];
   const colorMap = {
-    success: "success",
-    error: "error",
-    warning: "warning",
-    info: "info"
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'info'
+  };
+  const colors = colorMap[toast.type || 'info'];
+  const toastPosition = {
+    center: 'center',
+    right: 'flex-end',
+    left: 'flex-start'
   };
-  const colors = colorMap[toast.type || "info"];
+  const position = toastPosition[toast.position || 'right'];
   const close = () => {
     setOpenToast(false);
   };
@@ -12926,15 +12896,18 @@ const ToastNotification = toast => {
   }, [timeProgress, toast.time]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    alignItems: position || 'right'
   }, /*#__PURE__*/React__default.createElement(ToastContent, {
     width: 370,
-    role: "toast"
+    role: "toast",
+    className: `${position}`
   }, /*#__PURE__*/React__default.createElement(ContentBox, {
-    className: `color-${toast.type || "info"}`
+    className: `color-${toast.type || 'info'}`
   }, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
-    className: `ripple-${toast.type || "info"}`
+    className: `ripple-${toast.type || 'info'}`
   }, /*#__PURE__*/React__default.createElement(ContentIcon, {
-    className: `icon-color color-${toast.type || "info"}`
+    className: `icon-color color-${toast.type || 'info'}`
   }, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
     orientation: "vertical",
     flexItem: true
@@ -12962,17 +12935,17 @@ const ToastNotification = toast => {
       paddingLeft: 15,
       marginBlock: 0,
       fontSize: 11,
-      color: "#101840de"
+      color: '#101840de'
     }
   }, toast.dataOpt.map((element, i) => {
     const keyElement = Object.keys(element);
-    let options = "";
+    let options = '';
     for (let _i = 0; _i < keyElement.length; _i++) {
       options += element[keyElement[_i]];
     }
     return /*#__PURE__*/React__default.createElement("li", {
       style: {
-        width: "fit-content"
+        width: 'fit-content'
       },
       key: i
     }, /*#__PURE__*/React__default.createElement(Typography$1, {
@@ -12995,11 +12968,11 @@ const ToastNotification = toast => {
     }) : /*#__PURE__*/React__default.createElement(ArrowUpward, {
       fontSize: "small"
     })
-  }, showOptions ? "Ver más" : "Ver menos")))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
+  }, showOptions ? 'Ver más' : 'Ver menos')))), /*#__PURE__*/React__default.createElement(LinearProgress$1, {
     color: colors,
     variant: "determinate",
     value: progress
-  }))));
+  })))));
 };
 
 export { SincoTheme, ToastNotification };