@sinco/react 1.0.2-rc.17 → 1.0.2-rc.19

package/index.js

@@ -1097,8 +1097,8 @@ function chainPropTypes(propType1, propType2) {
   };
 }
 
-function _extends$3() {
-  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -1109,7 +1109,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
 
 function isPlainObject(item) {
@@ -1128,7 +1128,7 @@ function deepClone(source) {
 function deepmerge(target, source, options = {
   clone: true
 }) {
-  const output = options.clone ? _extends$3({}, target) : target;
+  const output = options.clone ? _extends$4({}, target) : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
       // Avoid prototype pollution
@@ -2292,6 +2292,25 @@ function elementTypeAcceptingRef(props, propName, componentName, location, propF
 }
 var elementTypeAcceptingRef$1 = chainPropTypes(PropTypes.elementType, elementTypeAcceptingRef);
 
+// This module is based on https://github.com/airbnb/prop-types-exact repository.
+// However, in order to reduce the number of dependencies and to remove some extra safe checks
+// the module was forked.
+const specialProperty = 'exact-prop: \u200b';
+function exactProp(propTypes) {
+  if (process.env.NODE_ENV === 'production') {
+    return propTypes;
+  }
+  return _extends$4({}, propTypes, {
+    [specialProperty]: props => {
+      const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
+      if (unsupportedProps.length > 0) {
+        return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
+      }
+      return null;
+    }
+  });
+}
+
 /**
  * WARNING: Don't import this directly.
  * Use `MuiError` from `@mui/utils/macros/MuiError.macro` instead.
@@ -2888,10 +2907,10 @@ var integerPropType = process.env.NODE_ENV === 'production' ? validatorNoop : va
  * @returns {object} resolved props
  */
 function resolveProps(defaultProps, props) {
-  const output = _extends$3({}, props);
+  const output = _extends$4({}, props);
   Object.keys(defaultProps).forEach(propName => {
     if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = _extends$3({}, defaultProps[propName], output[propName]);
+      output[propName] = _extends$4({}, defaultProps[propName], output[propName]);
     } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
       const defaultSlotProps = defaultProps[propName] || {};
       const slotProps = props[propName];
@@ -2903,7 +2922,7 @@ function resolveProps(defaultProps, props) {
         // Reduce the iteration if the default slot props is empty
         output[propName] = slotProps;
       } else {
-        output[propName] = _extends$3({}, slotProps);
+        output[propName] = _extends$4({}, slotProps);
         Object.keys(defaultSlotProps).forEach(slotPropName => {
           output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
         });
@@ -2983,8 +3002,8 @@ function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui')
 
 var THEME_ID = '$$material';
 
-function _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2995,7 +3014,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -3011,8 +3030,8 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
   return target;
 }
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (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) {
@@ -3023,7 +3042,7 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 function memoize$1(fn) {
@@ -5209,10 +5228,10 @@ if (!isBrowser$2) {
   };
 }
 
-var ThemeContext = /* #__PURE__ */React.createContext({});
+var ThemeContext$2 = /* #__PURE__ */React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
-  ThemeContext.displayName = 'EmotionThemeContext';
+  ThemeContext$2.displayName = 'EmotionThemeContext';
 }
 
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
@@ -5265,7 +5284,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
+  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext$2));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -5444,7 +5463,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
+  var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext$2));
 
   if (!isBrowser$2) {
     var _ref;
@@ -5690,7 +5709,7 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var content = {
     css: css,
     cx: cx,
-    theme: React.useContext(ThemeContext)
+    theme: React.useContext(ThemeContext$2)
   };
   var ele = props.children(content);
   hasRendered = true;
@@ -5846,7 +5865,7 @@ var createStyled$1 = function createStyled(tag, options) {
           mergedProps[key] = props[key];
         }
 
-        mergedProps.theme = React.useContext(ThemeContext);
+        mergedProps.theme = React.useContext(ThemeContext$2);
       }
 
       if (typeof props.className === 'string') {
@@ -5900,7 +5919,7 @@ var createStyled$1 = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$1({}, options, nextOptions, {
+      return createStyled(nextTag, _extends$2({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -5950,8 +5969,8 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -5962,7 +5981,7 @@ function _extends() {
     }
     return target;
   };
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -5978,7 +5997,7 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   return target;
 }
 
-const _excluded$j = ["values", "unit", "step"];
+const _excluded$k = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5987,7 +6006,7 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return _extends$1({}, acc, {
       [obj.key]: obj.val
     });
   }, {});
@@ -6013,7 +6032,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose$1(breakpoints, _excluded$j);
+    other = _objectWithoutPropertiesLoose$1(breakpoints, _excluded$k);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -6045,7 +6064,7 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends({
+  return _extends$1({
     keys,
     values: sortedValues,
     up,
@@ -7097,7 +7116,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$i = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$j = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -7105,7 +7124,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose$1(options, _excluded$i);
+    other = _objectWithoutPropertiesLoose$1(options, _excluded$j);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -7113,14 +7132,14 @@ function createTheme$1(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends({
+    palette: _extends$1({
       mode: 'light'
     }, paletteInput),
     spacing,
-    shape: _extends({}, shape$1, shapeInput)
+    shape: _extends$1({}, shape$1, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$1({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -7133,17 +7152,17 @@ function createTheme$1(options = {}, ...args) {
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-function useTheme$2(defaultTheme = null) {
-  const contextTheme = React.useContext(ThemeContext);
+function useTheme$3(defaultTheme = null) {
+  const contextTheme = React.useContext(ThemeContext$2);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 
 const systemDefaultTheme$1 = createTheme$1();
-function useTheme$1(defaultTheme = systemDefaultTheme$1) {
-  return useTheme$2(defaultTheme);
+function useTheme$2(defaultTheme = systemDefaultTheme$1) {
+  return useTheme$3(defaultTheme);
 }
 
-const _excluded$h = ["sx"];
+const _excluded$i = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -7164,7 +7183,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose$1(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$i);
   const {
     systemProps,
     otherProps
@@ -7178,19 +7197,19 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return _extends({}, systemProps, result);
+      return _extends$1({}, systemProps, result);
     };
   } else {
-    finalSx = _extends({}, systemProps, inSx);
+    finalSx = _extends$1({}, systemProps, inSx);
   }
-  return _extends({}, otherProps, {
+  return _extends$1({}, otherProps, {
     sx: finalSx
   });
 }
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$g = ["className", "component"];
+const _excluded$h = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -7202,14 +7221,14 @@ function createBox(options = {}) {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
   })(styleFunctionSx$1);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
-    const theme = useTheme$1(defaultTheme);
+    const theme = useTheme$2(defaultTheme);
     const _extendSxProp = extendSxProp(inProps),
       {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose$1(_extendSxProp, _excluded$g);
-    return /*#__PURE__*/jsx(BoxRoot, _extends({
+      other = _objectWithoutPropertiesLoose$1(_extendSxProp, _excluded$h);
+    return /*#__PURE__*/jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
@@ -7219,7 +7238,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$f = ["variant"];
+const _excluded$g = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -7233,7 +7252,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose$1(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$g);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -7245,7 +7264,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$e = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$f = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -7322,8 +7341,8 @@ function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx$1(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
+    return styleFunctionSx$1(_extends$1({}, props, {
+      theme: resolveTheme(_extends$1({}, props, {
         defaultTheme,
         themeId
       }))
@@ -7340,7 +7359,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose$1(inputOptions, _excluded$e);
+      options = _objectWithoutPropertiesLoose$1(inputOptions, _excluded$f);
 
     // 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;
@@ -7361,7 +7380,7 @@ function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styled$3(tag, _extends({
+    const defaultStyledResolver = styled$3(tag, _extends$1({
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
@@ -7371,8 +7390,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({}, props, {
-            theme: resolveTheme(_extends({}, props, {
+          return stylesArg(_extends$1({}, props, {
+            theme: resolveTheme(_extends$1({}, props, {
               defaultTheme,
               themeId
             }))
@@ -7382,7 +7401,7 @@ function createStyled(input = {}) {
       let transformedStyleArg = styleArg;
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
+          const theme = resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7390,7 +7409,7 @@ function createStyled(input = {}) {
           if (styleOverrides) {
             const resolvedStyleOverrides = {};
             Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends$1({}, props, {
                 theme
               })) : slotStyle;
             });
@@ -7401,7 +7420,7 @@ function createStyled(input = {}) {
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
+          const theme = resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
           }));
@@ -7423,8 +7442,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({}, props, {
-          theme: resolveTheme(_extends({}, props, {
+        transformedStyleArg = props => styleArg(_extends$1({}, props, {
+          theme: resolveTheme(_extends$1({}, props, {
             defaultTheme,
             themeId
           }))
@@ -7474,7 +7493,7 @@ function useThemeProps$1({
   defaultTheme,
   themeId
 }) {
-  let theme = useTheme$1(defaultTheme);
+  let theme = useTheme$2(defaultTheme);
   if (themeId) {
     theme = theme[themeId] || theme;
   }
@@ -7720,7 +7739,169 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
-const _excluded$d = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+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';
+}
+var ThemeContext$1 = ThemeContext;
+
+function useTheme$1() {
+  const theme = React.useContext(ThemeContext$1);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue(theme);
+  }
+  return theme;
+}
+
+const hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var nested = hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';
+
+function mergeOuterLocalTheme(outerTheme, localTheme) {
+  if (typeof localTheme === 'function') {
+    const mergedTheme = localTheme(outerTheme);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!mergedTheme) {
+        console.error(['MUI: You should return an object from your theme function, i.e.', '<ThemeProvider theme={() => ({})} />'].join('\n'));
+      }
+    }
+    return mergedTheme;
+  }
+  return _extends({}, outerTheme, localTheme);
+}
+
+/**
+ * This component takes a `theme` prop.
+ * It makes the `theme` available down the React tree thanks to React context.
+ * This component should preferably be used at **the root of your component tree**.
+ */
+function ThemeProvider$2(props) {
+  const {
+    children,
+    theme: localTheme
+  } = props;
+  const outerTheme = useTheme$1();
+  if (process.env.NODE_ENV !== 'production') {
+    if (outerTheme === null && typeof localTheme === 'function') {
+      console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+    }
+  }
+  const theme = React.useMemo(() => {
+    const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
+    if (output != null) {
+      output[nested] = outerTheme !== null;
+    }
+    return output;
+  }, [localTheme, outerTheme]);
+  return /*#__PURE__*/jsx(ThemeContext$1.Provider, {
+    value: theme,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
+}
+
+const EMPTY_THEME = {};
+function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
+  return React.useMemo(() => {
+    const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    if (typeof localTheme === 'function') {
+      const mergedTheme = localTheme(resolvedTheme);
+      const result = themeId ? _extends$1({}, upperTheme, {
+        [themeId]: mergedTheme
+      }) : mergedTheme;
+      // must return a function for the private theme to NOT merge with the upper theme.
+      // see the test case "use provided theme from a callback" in ThemeProvider.test.js
+      if (isPrivate) {
+        return () => result;
+      }
+      return result;
+    }
+    return themeId ? _extends$1({}, upperTheme, {
+      [themeId]: localTheme
+    }) : _extends$1({}, upperTheme, localTheme);
+  }, [themeId, upperTheme, localTheme, isPrivate]);
+}
+
+/**
+ * This component makes the `theme` available down the React tree.
+ * It should preferably be used at **the root of your component tree**.
+ *
+ * <ThemeProvider theme={theme}> // existing use case
+ * <ThemeProvider theme={{ id: theme }}> // theme scoping
+ */
+function ThemeProvider$1(props) {
+  const {
+    children,
+    theme: localTheme,
+    themeId
+  } = props;
+  const upperTheme = useTheme$3(EMPTY_THEME);
+  const upperPrivateTheme = useTheme$1() || EMPTY_THEME;
+  if (process.env.NODE_ENV !== 'production') {
+    if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
+      console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
+    }
+  }
+  const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+  const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  return /*#__PURE__*/jsx(ThemeProvider$2, {
+    theme: privateTheme,
+    children: /*#__PURE__*/jsx(ThemeContext$2.Provider, {
+      value: engineTheme,
+      children: children
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider$1.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId: PropTypes.string
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
+}
+
+const _excluded$e = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 const defaultTheme$3 = createTheme$1();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = systemStyled('div', {
@@ -7767,7 +7948,7 @@ const style = ({
   ownerState,
   theme
 }) => {
-  let styles = _extends({
+  let styles = _extends$1({
     display: 'flex',
     flexDirection: 'column'
   }, handleBreakpoints({
@@ -7849,14 +8030,14 @@ function createStack(options = {}) {
         className,
         useFlexGap = false
       } = props,
-      other = _objectWithoutPropertiesLoose$1(props, _excluded$d);
+      other = _objectWithoutPropertiesLoose$1(props, _excluded$e);
     const ownerState = {
       direction,
       spacing,
       useFlexGap
     };
     const classes = useUtilityClasses();
-    return /*#__PURE__*/jsx(StackRoot, _extends({
+    return /*#__PURE__*/jsx(StackRoot, _extends$1({
       as: component,
       ownerState: ownerState,
       ref: ref,
@@ -7876,7 +8057,7 @@ function createStack(options = {}) {
 }
 
 function createMixins(breakpoints, mixins) {
-  return _extends$2({
+  return _extends$3({
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -8023,7 +8204,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$c = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$d = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -8192,7 +8373,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose$2(palette, _excluded$c);
+    other = _objectWithoutPropertiesLoose$2(palette, _excluded$d);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -8220,7 +8401,7 @@ function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends$2({}, color);
+    color = _extends$3({}, color);
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -8260,9 +8441,9 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = deepmerge(_extends$2({
+  const paletteOutput = deepmerge(_extends$3({
     // A collection of common colors.
-    common: _extends$2({}, common$1),
+    common: _extends$3({}, common$1),
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -8316,7 +8497,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$b = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$c = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -8347,7 +8528,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose$2(_ref, _excluded$b);
+    other = _objectWithoutPropertiesLoose$2(_ref, _excluded$c);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -8358,7 +8539,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$2({
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends$3({
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
@@ -8389,7 +8570,7 @@ function createTypography(palette, typography) {
       letterSpacing: 'inherit'
     }
   };
-  return deepmerge(_extends$2({
+  return deepmerge(_extends$3({
     htmlFontSize,
     pxToRem,
     fontFamily,
@@ -8414,7 +8595,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$a = ["duration", "easing", "delay"];
+const _excluded$b = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -8457,15 +8638,15 @@ function getAutoHeightDuration(height) {
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
 function createTransitions(inputTransitions) {
-  const mergedEasing = _extends$2({}, easing, inputTransitions.easing);
-  const mergedDuration = _extends$2({}, duration, inputTransitions.duration);
+  const mergedEasing = _extends$3({}, easing, inputTransitions.easing);
+  const mergedDuration = _extends$3({}, 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$2(options, _excluded$b);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -8492,7 +8673,7 @@ function createTransitions(inputTransitions) {
     }
     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$2({
+  return _extends$3({
     getAutoHeightDuration,
     create
   }, inputTransitions, {
@@ -8515,7 +8696,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$9 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$a = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -8523,7 +8704,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose$2(options, _excluded$9);
+    other = _objectWithoutPropertiesLoose$2(options, _excluded$a);
   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));
@@ -8537,7 +8718,7 @@ Please use another name.` : formatMuiErrorMessage(18));
     shadows: shadows$1.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
-    zIndex: _extends$2({}, zIndex$1)
+    zIndex: _extends$3({}, zIndex$1)
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
@@ -8571,7 +8752,7 @@ Please use another name.` : formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = _extends$2({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends$3({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx$1({
       sx: props,
@@ -8585,7 +8766,7 @@ const defaultTheme$1 = createTheme();
 var defaultTheme$2 = defaultTheme$1;
 
 function useTheme() {
-  const theme = useTheme$1(defaultTheme$2);
+  const theme = useTheme$2(defaultTheme$2);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
@@ -8613,6 +8794,29 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
+const _excluded$9 = ["theme"];
+function ThemeProvider(_ref) {
+  let {
+      theme: themeInput
+    } = _ref,
+    props = _objectWithoutPropertiesLoose$2(_ref, _excluded$9);
+  const scopedTheme = themeInput[THEME_ID];
+  return /*#__PURE__*/jsx(ThemeProvider$1, _extends$3({}, props, {
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  }));
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+} : void 0;
+
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
 const getOverlayAlpha = elevation => {
   let alphaValue;
@@ -9702,7 +9906,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$8);
   const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     color,
     component,
     fontSize,
@@ -9716,7 +9920,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses$7(ownerState);
-  return /*#__PURE__*/jsxs(SvgIconRoot, _extends$2({
+  return /*#__PURE__*/jsxs(SvgIconRoot, _extends$3({
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
@@ -9808,7 +10012,7 @@ var SvgIcon$1 = SvgIcon;
 
 function createSvgIcon(path, displayName) {
   function Component(props, ref) {
-    return /*#__PURE__*/jsx(SvgIcon$1, _extends$2({
+    return /*#__PURE__*/jsx(SvgIcon$1, _extends$3({
       "data-testid": `${displayName}Icon`,
       ref: ref
     }, props, {
@@ -10084,7 +10288,7 @@ var TransitionGroup = /*#__PURE__*/function (_React$Component) {
 
     if (this.mounted) {
       this.setState(function (state) {
-        var children = _extends$1({}, state.children);
+        var children = _extends$2({}, state.children);
 
         delete children[child.key];
         return {
@@ -10213,7 +10417,7 @@ const PaperRoot = styled$1('div', {
   ownerState
 }) => {
   var _theme$vars$overlays;
-  return _extends$2({
+  return _extends$3({
     backgroundColor: (theme.vars || theme).palette.background.paper,
     color: (theme.vars || theme).palette.text.primary,
     transition: theme.transitions.create('box-shadow')
@@ -10221,7 +10425,7 @@ const PaperRoot = styled$1('div', {
     borderRadius: theme.shape.borderRadius
   }, ownerState.variant === 'outlined' && {
     border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends$2({
+  }, ownerState.variant === 'elevation' && _extends$3({
     boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
   }, !theme.vars && theme.palette.mode === 'dark' && {
     backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha$1(ownerState.elevation))})`
@@ -10242,7 +10446,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       variant = 'elevation'
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$7);
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     component,
     elevation,
     square,
@@ -10256,7 +10460,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
   }
-  return /*#__PURE__*/jsx(PaperRoot, _extends$2({
+  return /*#__PURE__*/jsx(PaperRoot, _extends$3({
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
@@ -10696,7 +10900,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     start,
     stop
   }), [pulsate, start, stop]);
-  return /*#__PURE__*/jsx(TouchRippleRoot, _extends$2({
+  return /*#__PURE__*/jsx(TouchRippleRoot, _extends$3({
     className: clsx(touchRippleClasses$1.root, classes.root, className),
     ref: container
   }, other, {
@@ -10990,7 +11194,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       }
     }, [enableTouchRipple]);
   }
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     centerRipple,
     component,
     disabled,
@@ -11001,7 +11205,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     focusVisible
   });
   const classes = useUtilityClasses$5(ownerState);
-  return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends$2({
+  return /*#__PURE__*/jsxs(ButtonBaseRoot, _extends$3({
     as: ComponentProp,
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -11025,7 +11229,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$2({
+    jsx(TouchRipple$1, _extends$3({
       ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
@@ -11223,7 +11427,7 @@ const IconButtonRoot = styled$1(ButtonBase$1, {
 })(({
   theme,
   ownerState
-}) => _extends$2({
+}) => _extends$3({
   textAlign: 'center',
   flex: '0 0 auto',
   fontSize: theme.typography.pxToRem(24),
@@ -11253,12 +11457,12 @@ const IconButtonRoot = styled$1(ButtonBase$1, {
 }) => {
   var _palette;
   const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-  return _extends$2({}, ownerState.color === 'inherit' && {
+  return _extends$3({}, ownerState.color === 'inherit' && {
     color: 'inherit'
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$2({
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends$3({
     color: palette == null ? void 0 : palette.main
   }, !ownerState.disableRipple && {
-    '&:hover': _extends$2({}, palette && {
+    '&:hover': _extends$3({}, 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
@@ -11299,7 +11503,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
       size = 'medium'
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$4);
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     edge,
     color,
     disabled,
@@ -11307,7 +11511,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     size
   });
   const classes = useUtilityClasses$4(ownerState);
-  return /*#__PURE__*/jsx(IconButtonRoot, _extends$2({
+  return /*#__PURE__*/jsx(IconButtonRoot, _extends$3({
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
@@ -11419,7 +11623,7 @@ const TypographyRoot = styled$1('span', {
 })(({
   theme,
   ownerState
-}) => _extends$2({
+}) => _extends$3({
   margin: 0
 }, ownerState.variant && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
@@ -11463,7 +11667,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     name: 'MuiTypography'
   });
   const color = transformDeprecatedColors(themeProps.color);
-  const props = extendSxProp(_extends$2({}, themeProps, {
+  const props = extendSxProp(_extends$3({}, themeProps, {
     color
   }));
   const {
@@ -11477,7 +11681,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
       variantMapping = defaultVariantMapping
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$3);
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     align,
     color,
     className,
@@ -11490,7 +11694,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$2({
+  return /*#__PURE__*/jsx(TypographyRoot, _extends$3({
     as: Component,
     ref: ref,
     ownerState: ownerState,
@@ -11634,9 +11838,9 @@ const useUtilityClasses$2 = ownerState => {
     endIcon: ['endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return _extends$2({}, classes, composedClasses);
+  return _extends$3({}, classes, composedClasses);
 };
-const commonIconStyles = ownerState => _extends$2({}, ownerState.size === 'small' && {
+const commonIconStyles = ownerState => _extends$3({}, ownerState.size === 'small' && {
   '& > *:nth-of-type(1)': {
     fontSize: 18
   }
@@ -11666,14 +11870,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$2({}, theme.typography.button, {
+  return _extends$3({}, 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$2({
+    '&:hover': _extends$3({
       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
@@ -11708,13 +11912,13 @@ const ButtonRoot = styled$1(ButtonBase$1, {
         backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }),
-    '&:active': _extends$2({}, ownerState.variant === 'contained' && {
+    '&:active': _extends$3({}, ownerState.variant === 'contained' && {
       boxShadow: (theme.vars || theme).shadows[8]
     }),
-    [`&.${buttonClasses$1.focusVisible}`]: _extends$2({}, ownerState.variant === 'contained' && {
+    [`&.${buttonClasses$1.focusVisible}`]: _extends$3({}, ownerState.variant === 'contained' && {
       boxShadow: (theme.vars || theme).shadows[6]
     }),
-    [`&.${buttonClasses$1.disabled}`]: _extends$2({
+    [`&.${buttonClasses$1.disabled}`]: _extends$3({
       color: (theme.vars || theme).palette.action.disabled
     }, ownerState.variant === 'outlined' && {
       border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
@@ -11794,7 +11998,7 @@ const ButtonStartIcon = styled$1('span', {
   }
 })(({
   ownerState
-}) => _extends$2({
+}) => _extends$3({
   display: 'inherit',
   marginRight: 8,
   marginLeft: -4
@@ -11812,7 +12016,7 @@ const ButtonEndIcon = styled$1('span', {
   }
 })(({
   ownerState
-}) => _extends$2({
+}) => _extends$3({
   display: 'inherit',
   marginRight: -4,
   marginLeft: 8
@@ -11844,7 +12048,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       variant = 'text'
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$2);
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     color,
     component,
     disabled,
@@ -11866,7 +12070,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
-  return /*#__PURE__*/jsxs(ButtonRoot, _extends$2({
+  return /*#__PURE__*/jsxs(ButtonRoot, _extends$3({
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className),
     component: component,
@@ -12011,7 +12215,7 @@ const DividerRoot = styled$1('div', {
 })(({
   theme,
   ownerState
-}) => _extends$2({
+}) => _extends$3({
   margin: 0,
   // Reset browser default style.
   flexShrink: 0,
@@ -12043,7 +12247,7 @@ const DividerRoot = styled$1('div', {
   height: 'auto'
 }), ({
   ownerState
-}) => _extends$2({}, ownerState.children && {
+}) => _extends$3({}, ownerState.children && {
   display: 'flex',
   whiteSpace: 'nowrap',
   textAlign: 'center',
@@ -12055,7 +12259,7 @@ const DividerRoot = styled$1('div', {
 }), ({
   theme,
   ownerState
-}) => _extends$2({}, ownerState.children && ownerState.orientation !== 'vertical' && {
+}) => _extends$3({}, ownerState.children && ownerState.orientation !== 'vertical' && {
   '&::before, &::after': {
     width: '100%',
     borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
@@ -12063,7 +12267,7 @@ const DividerRoot = styled$1('div', {
 }), ({
   theme,
   ownerState
-}) => _extends$2({}, ownerState.children && ownerState.orientation === 'vertical' && {
+}) => _extends$3({}, ownerState.children && ownerState.orientation === 'vertical' && {
   flexDirection: 'column',
   '&::before, &::after': {
     height: '100%',
@@ -12071,7 +12275,7 @@ const DividerRoot = styled$1('div', {
   }
 }), ({
   ownerState
-}) => _extends$2({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
+}) => _extends$3({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
   '&::before': {
     width: '90%'
   },
@@ -12098,7 +12302,7 @@ const DividerWrapper = styled$1('span', {
 })(({
   theme,
   ownerState
-}) => _extends$2({
+}) => _extends$3({
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`
@@ -12124,7 +12328,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
       variant = 'fullWidth'
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded$1);
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     absolute,
     component,
     flexItem,
@@ -12135,7 +12339,7 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses$1(ownerState);
-  return /*#__PURE__*/jsx(DividerRoot, _extends$2({
+  return /*#__PURE__*/jsx(DividerRoot, _extends$3({
     as: component,
     className: clsx(classes.root, className),
     role: role,
@@ -12367,7 +12571,7 @@ const LinearProgressRoot = styled$1('span', {
 })(({
   ownerState,
   theme
-}) => _extends$2({
+}) => _extends$3({
   position: 'relative',
   overflow: 'hidden',
   display: 'block',
@@ -12409,7 +12613,7 @@ const LinearProgressDashed = styled$1('span', {
   theme
 }) => {
   const backgroundColor = getColorShade(theme, ownerState.color);
-  return _extends$2({
+  return _extends$3({
     position: 'absolute',
     marginTop: 0,
     height: '100%',
@@ -12436,7 +12640,7 @@ const LinearProgressBar1 = styled$1('span', {
 })(({
   ownerState,
   theme
-}) => _extends$2({
+}) => _extends$3({
   width: '100%',
   position: 'absolute',
   left: 0,
@@ -12468,7 +12672,7 @@ const LinearProgressBar2 = styled$1('span', {
 })(({
   ownerState,
   theme
-}) => _extends$2({
+}) => _extends$3({
   width: '100%',
   position: 'absolute',
   left: 0,
@@ -12510,7 +12714,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       variant = 'indeterminate'
     } = props,
     other = _objectWithoutPropertiesLoose$2(props, _excluded);
-  const ownerState = _extends$2({}, props, {
+  const ownerState = _extends$3({}, props, {
     color,
     variant
   });
@@ -12546,7 +12750,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$2({
+  return /*#__PURE__*/jsxs(LinearProgressRoot, _extends$3({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     role: "progressbar"
@@ -12641,7 +12845,7 @@ var WarningRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
 const ToastNotification = toast => {
   const [openToast, setOpenToast] = useState(true);
   const [showOptions, setShowOptions] = useState(true);
-  const [progress, setProgress] = React__default.useState(0);
+  const [progress, setProgress] = useState(100);
   const [timeProgress] = useState(toast.time || 8000);
   const IconMap = {
     success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
@@ -12679,7 +12883,9 @@ const ToastNotification = toast => {
     };
   }, [timeProgress, toast.time]);
   console.log(progress);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(Paper$1, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, openToast && /*#__PURE__*/React__default.createElement(Paper$1, {
     sx: {
       width: 370
     },
@@ -12752,7 +12958,7 @@ const ToastNotification = toast => {
     color: colors,
     variant: "determinate",
     value: progress
-  }))));
+  })))));
 };
 
 export { SincoTheme, ToastNotification };

package/package.json

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