@sinco/react 1.0.14-rc.3 → 1.0.14-rc.30

package/index.js

@@ -146,7 +146,7 @@ var $TypeError$d = TypeError;
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
 var requireObjectCoercible$3 = function (it) {
-  if (isNullOrUndefined$4(it)) throw $TypeError$d("Can't call method on " + it);
+  if (isNullOrUndefined$4(it)) throw new $TypeError$d("Can't call method on " + it);
   return it;
 };
 
@@ -295,7 +295,7 @@ var $TypeError$c = TypeError;
 // `Assert: IsCallable(argument) is true`
 var aCallable$8 = function (argument) {
   if (isCallable$h(argument)) return argument;
-  throw $TypeError$c(tryToString$3(argument) + ' is not a function');
+  throw new $TypeError$c(tryToString$3(argument) + ' is not a function');
 };
 
 var aCallable$7 = aCallable$8;
@@ -321,7 +321,7 @@ var ordinaryToPrimitive$1 = function (input, pref) {
   if (pref === 'string' && isCallable$g(fn = input.toString) && !isObject$7(val = call$f(fn, input))) return val;
   if (isCallable$g(fn = input.valueOf) && !isObject$7(val = call$f(fn, input))) return val;
   if (pref !== 'string' && isCallable$g(fn = input.toString) && !isObject$7(val = call$f(fn, input))) return val;
-  throw $TypeError$b("Can't convert object to primitive value");
+  throw new $TypeError$b("Can't convert object to primitive value");
 };
 
 var shared$4 = {exports: {}};
@@ -352,10 +352,10 @@ var store$2 = sharedStore;
 (shared$4.exports = function (key, value) {
   return store$2[key] || (store$2[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.32.2',
+  version: '3.33.0',
   mode: 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.32.2/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.33.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -430,7 +430,7 @@ var toPrimitive$1 = function (input, pref) {
     if (pref === undefined) pref = 'default';
     result = call$e(exoticToPrim, input, pref);
     if (!isObject$6(result) || isSymbol$1(result)) return result;
-    throw $TypeError$a("Can't convert object to primitive value");
+    throw new $TypeError$a("Can't convert object to primitive value");
   }
   if (pref === undefined) pref = 'number';
   return ordinaryToPrimitive(input, pref);
@@ -515,7 +515,7 @@ var $TypeError$9 = TypeError;
 // `Assert: Type(argument) is Object`
 var anObject$d = function (argument) {
   if (isObject$4(argument)) return argument;
-  throw $TypeError$9($String$3(argument) + ' is not an object');
+  throw new $TypeError$9($String$3(argument) + ' is not an object');
 };
 
 var DESCRIPTORS$7 = descriptors;
@@ -557,7 +557,7 @@ objectDefineProperty.f = DESCRIPTORS$7 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
   if (IE8_DOM_DEFINE) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
-  if ('get' in Attributes || 'set' in Attributes) throw $TypeError$8('Accessors not supported');
+  if ('get' in Attributes || 'set' in Attributes) throw new $TypeError$8('Accessors not supported');
   if ('value' in Attributes) O[P] = Attributes.value;
   return O;
 };
@@ -648,7 +648,7 @@ var getterFor = function (TYPE) {
   return function (it) {
     var state;
     if (!isObject$3(it) || (state = get(it)).type !== TYPE) {
-      throw TypeError$2('Incompatible receiver, ' + TYPE + ' required');
+      throw new TypeError$2('Incompatible receiver, ' + TYPE + ' required');
     } return state;
   };
 };
@@ -661,7 +661,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
   store.set = store.set;
   /* eslint-enable no-self-assign -- prototype methods protection */
   set$1 = function (it, metadata) {
-    if (store.has(it)) throw TypeError$2(OBJECT_ALREADY_INITIALIZED);
+    if (store.has(it)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
     store.set(it, metadata);
     return metadata;
@@ -676,7 +676,7 @@ if (NATIVE_WEAK_MAP || shared$1.state) {
   var STATE = sharedKey$2('state');
   hiddenKeys$3[STATE] = true;
   set$1 = function (it, metadata) {
-    if (hasOwn$6(it, STATE)) throw TypeError$2(OBJECT_ALREADY_INITIALIZED);
+    if (hasOwn$6(it, STATE)) throw new TypeError$2(OBJECT_ALREADY_INITIALIZED);
     metadata.facade = it;
     createNonEnumerableProperty$4(it, STATE, metadata);
     return metadata;
@@ -2759,7 +2759,11 @@ function deprecatedPropType(validator, reason) {
 }
 
 function isMuiElement(element, muiNames) {
-  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+  var _muiName, _element$type;
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+  // eslint-disable-next-line no-underscore-dangle
+  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
 }
 
 function ownerDocument(node) {
@@ -2816,6 +2820,13 @@ function setRef(ref, value) {
   }
 }
 
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
 const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var useEnhancedEffect$1 = useEnhancedEffect;
 
@@ -6188,7 +6199,7 @@ tags.forEach(function (tagName) {
 });
 
 /**
- * @mui/styled-engine v5.14.10
+ * @mui/styled-engine v5.14.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -7545,40 +7556,48 @@ const getStyleOverrides = (name, theme) => {
   }
   return null;
 };
+const transformVariants = variants => {
+  const variantsStyles = {};
+  if (variants) {
+    variants.forEach(definition => {
+      const key = propsToClassKey(definition.props);
+      variantsStyles[key] = definition.style;
+    });
+  }
+  return variantsStyles;
+};
 const getVariantStyles = (name, theme) => {
   let variants = [];
   if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
     variants = theme.components[name].variants;
   }
-  const variantsStyles = {};
-  variants.forEach(definition => {
-    const key = propsToClassKey(definition.props);
-    variantsStyles[key] = definition.style;
-  });
-  return variantsStyles;
+  return transformVariants(variants);
 };
-const variantsResolver = (props, styles, theme, name) => {
-  var _theme$components;
+const variantsResolver = (props, styles, variants) => {
   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;
-  if (themeVariants) {
-    themeVariants.forEach(themeVariant => {
+  if (variants) {
+    variants.forEach(variant => {
       let isMatch = true;
-      Object.keys(themeVariant.props).forEach(key => {
-        if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
+      Object.keys(variant.props).forEach(key => {
+        if (ownerState[key] !== variant.props[key] && props[key] !== variant.props[key]) {
           isMatch = false;
         }
       });
       if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+        variantsStyles.push(styles[propsToClassKey(variant.props)]);
       }
     });
   }
   return variantsStyles;
 };
+const themeVariantsResolver = (props, styles, theme, name) => {
+  var _theme$components;
+  const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
+  return variantsResolver(props, styles, themeVariants);
+};
 
 // Update /system/styled/#api in case if this changes
 function shouldForwardProp(prop) {
@@ -7604,6 +7623,29 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
+const muiStyledFunctionResolver = ({
+  styledArg,
+  props,
+  defaultTheme,
+  themeId
+}) => {
+  const resolvedStyles = styledArg(_extends$2({}, props, {
+    theme: resolveTheme(_extends$2({}, props, {
+      defaultTheme,
+      themeId
+    }))
+  }));
+  let optionalVariants;
+  if (resolvedStyles && resolvedStyles.variants) {
+    optionalVariants = resolvedStyles.variants;
+    delete resolvedStyles.variants;
+  }
+  if (optionalVariants) {
+    const variantsStyles = variantsResolver(props, transformVariants(optionalVariants), optionalVariants);
+    return [resolvedStyles, ...variantsStyles];
+  }
+  return resolvedStyles;
+};
 function createStyled(input = {}) {
   const {
     themeId,
@@ -7670,16 +7712,61 @@ function createStyled(input = {}) {
         // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // 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$2({}, props, {
-            theme: resolveTheme(_extends$2({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
-        } : stylesArg;
+        if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg) {
+          return props => muiStyledFunctionResolver({
+            styledArg: stylesArg,
+            props,
+            defaultTheme,
+            themeId
+          });
+        }
+        if (isPlainObject(stylesArg)) {
+          let transformedStylesArg = stylesArg;
+          let styledArgVariants;
+          if (stylesArg && stylesArg.variants) {
+            styledArgVariants = stylesArg.variants;
+            delete transformedStylesArg.variants;
+            transformedStylesArg = props => {
+              let result = stylesArg;
+              const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+              variantStyles.forEach(variantStyle => {
+                result = deepmerge(result, variantStyle);
+              });
+              return result;
+            };
+          }
+          return transformedStylesArg;
+        }
+        return stylesArg;
       }) : [];
       let transformedStyleArg = styleArg;
+      if (isPlainObject(styleArg)) {
+        let styledArgVariants;
+        if (styleArg && styleArg.variants) {
+          styledArgVariants = styleArg.variants;
+          delete transformedStyleArg.variants;
+          transformedStyleArg = props => {
+            let result = styleArg;
+            const variantStyles = variantsResolver(props, transformVariants(styledArgVariants), styledArgVariants);
+            variantStyles.forEach(variantStyle => {
+              result = deepmerge(result, variantStyle);
+            });
+            return result;
+          };
+        }
+      } else if (typeof styleArg === 'function' &&
+      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // 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 => muiStyledFunctionResolver({
+          styledArg: styleArg,
+          props,
+          defaultTheme,
+          themeId
+        });
+      }
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
           const theme = resolveTheme(_extends$2({}, props, {
@@ -7705,7 +7792,7 @@ function createStyled(input = {}) {
             defaultTheme,
             themeId
           }));
-          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          return themeVariantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
         });
       }
       if (!skipSx) {
@@ -7717,18 +7804,6 @@ function createStyled(input = {}) {
         // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function' &&
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // 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$2({}, props, {
-          theme: resolveTheme(_extends$2({}, props, {
-            defaultTheme,
-            themeId
-          }))
-        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== 'production') {
@@ -9510,25 +9585,18 @@ const components = {
   },
   MuiCheckbox: {
     variants: [{
-      props: {
-        size: "xsmall"
-      },
-      style: {
-        padding: 2
-      }
-    }, {
       props: {
         size: "small"
       },
       style: {
-        padding: 4
+        padding: 2
       }
     }, {
       props: {
         size: "medium"
       },
       style: {
-        padding: 11
+        padding: 4
       }
     }],
     defaultProps: {
@@ -9536,20 +9604,12 @@ const components = {
     }
   },
   MuiChip: {
-    variants: [{
-      props: {
-        size: "xsmall"
-      },
-      style: {
-        height: 16
-      }
-    }],
     styleOverrides: {
       sizeSmall: {
-        height: 24
+        height: 16
       },
       sizeMedium: {
-        height: 30
+        height: 24
       },
       root: {
         height: "inherit",
@@ -9589,34 +9649,45 @@ const components = {
   },
   MuiButton: {
     styleOverrides: {
-      endIcon: {
-        marginLeft: 2
-      },
-      iconSizeSmall: {
-        height: 14,
-        width: 14
-      },
-      iconSizeMedium: {
-        height: 18,
-        width: 18
-      },
-      iconSizeLarge: {
-        height: 18,
-        width: 22
-      },
       sizeSmall: {
-        height: 26
+        height: 26,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        },
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
       },
       sizeMedium: {
         height: 32,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 18,
+          width: 18
+        },
         ".MuiSvgIcon-fontSizeMedium": {
           height: 18,
           width: 18
+        },
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
         }
       },
       sizeLarge: {
-        height: 38,
-        fontSize: 14,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        },
         ".MuiSvgIcon-fontSizeLarge": {
           height: 20,
           width: 20
@@ -10226,7 +10297,7 @@ var classof$4 = classof$5;
 var $String$1 = String;
 
 var toString$2 = function (argument) {
-  if (classof$4(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  if (classof$4(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
   return $String$1(argument);
 };
 
@@ -10398,7 +10469,7 @@ var $RegExp$1 = global$9.RegExp;
 
 var regexpUnsupportedDotAll = fails$6(function () {
   var re = $RegExp$1('.', 's');
-  return !(re.dotAll && re.exec('\n') && re.flags === 's');
+  return !(re.dotAll && re.test('\n') && re.flags === 's');
 });
 
 var fails$5 = fails$h;
@@ -10652,7 +10723,7 @@ var regexpExecAbstract = function (R, S) {
     return result;
   }
   if (classof$3(R) === 'RegExp') return call$a(regexpExec, R, S);
-  throw $TypeError$7('RegExp#exec called on incompatible receiver');
+  throw new $TypeError$7('RegExp#exec called on incompatible receiver');
 };
 
 var call$9 = functionCall;
@@ -17163,7 +17234,7 @@ var $TypeError$6 = TypeError;
 
 var aPossiblePrototype$1 = function (argument) {
   if (typeof argument == 'object' || isCallable$6(argument)) return argument;
-  throw $TypeError$6("Can't set " + $String(argument) + ' as a prototype');
+  throw new $TypeError$6("Can't set " + $String(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
@@ -17585,6 +17656,49 @@ const FooterActionComponent = ({
   }), /*#__PURE__*/React__default.createElement(Box$2, null, labelChangeCounter), renderRightContent));
 };
 
+const PageHeaderContent = styled$1(Stack$1)(() => ({
+  backgroundColor: "#fff",
+  boxShadow: "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
+  zIndex: 100,
+  padding: "8px 24px",
+  minHeight: 39
+}));
+const PageHeaderComponent = ({
+  title,
+  subtitle,
+  actions,
+  buttonBack,
+  fixed
+}) => {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement(PageHeaderContent, {
+    position: fixed === true ? "fixed" : "relative",
+    sx: {
+      width: fixed === true ? "-webkit-fill-available" : "inherit"
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 1.5,
+    flexDirection: "row",
+    alignItems: "center"
+  }, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "h6",
+    color: "text.primary"
+  }, title), /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "caption",
+    color: "text.secondary"
+  }, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 1,
+    alignItems: "center",
+    flexDirection: "row"
+  }, actions))));
+};
+
 const useProgress = timeProgress => {
   const [progress, setProgress] = useState(100);
   useEffect(() => {
@@ -17606,69 +17720,9 @@ const useProgress = timeProgress => {
   };
 };
 
-const ToastContainer = styled$1(Stack$1)(() => ({
-  position: "fixed",
-  zIndex: 1400,
-  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)",
-  right: 16,
-  marginTop: 16
-}));
-const ToastContent = styled$1(Box$2)(({
-  theme
-}) => ({
-  padding: theme.spacing(1.5),
-  gap: theme.spacing(1.5),
-  display: "flex",
-  alignItems: "center",
-  "&.color-error": {
-    backgroundColor: "#FEEBEE"
-  },
-  "&.color-info": {
-    backgroundColor: "#E1F5FE"
-  },
-  "&.color-warning": {
-    backgroundColor: "#FFF3E0"
-  },
-  "&.color-success": {
-    backgroundColor: "#E8F5E9"
-  }
-}));
-const RippleIcon = styled$1(Stack$1)(({
-  theme
-}) => ({
-  padding: theme.spacing(1),
-  gap: theme.spacing(1),
-  height: 20,
-  borderRadius: 50,
-  "&.ripple-error": {
-    backgroundColor: "#D143431F"
-  },
-  "&.ripple-info": {
-    backgroundColor: "#2D9FC51F"
-  },
-  "&.ripple-warning": {
-    backgroundColor: "#FB85001F"
-  },
-  "&.ripple-success": {
-    backgroundColor: "#8FC93A1F"
-  }
-}));
-const ToastIconContainer = styled$1(Stack$1)(({
-  theme
-}) => ({
-  "&.icon-color.color-info": {
-    color: theme.palette.info.main
-  },
-  "&.icon-color.color-error": {
-    color: theme.palette.error.main
-  },
-  "&.icon-color.color-warning": {
-    color: theme.palette.warning.main
-  },
-  "&.icon-color.color-success": {
-    color: theme.palette.success.main
-  }
-}));
+function concatenateObjectValues(obj) {
+  return Object.values(obj).join("");
+}
 const ToastNotificationComponent = toast => {
   const [stateOptions, setStateOptions] = useState(true);
   const [stateToast, setStateToast] = useState(true);
@@ -17697,19 +17751,75 @@ const ToastNotificationComponent = toast => {
     setStateOptions(prevShowOptions => !prevShowOptions);
   };
   useEffect(() => {
-    if (progressToast <= 0) setStateToast(false);
+    progressToast <= 0 && setStateToast(false);
   }, [progressToast]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, stateToast && /*#__PURE__*/React__default.createElement(Stack$1, {
-    height: 105,
     position: "absolute",
     zIndex: 1400
-  }, /*#__PURE__*/React__default.createElement(ToastContainer, {
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    sx: {
+      position: "fixed",
+      zIndex: 1400,
+      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)",
+      right: 16,
+      marginTop: 2
+    },
     position: "fixed"
-  }, /*#__PURE__*/React__default.createElement(ToastContent, {
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
+    sx: {
+      padding: SincoTheme.spacing(1.5),
+      gap: SincoTheme.spacing(1.5),
+      display: "flex",
+      alignItems: "center",
+      "&.color-error": {
+        backgroundColor: "#FEEBEE"
+      },
+      "&.color-info": {
+        backgroundColor: "#E1F5FE"
+      },
+      "&.color-warning": {
+        backgroundColor: "#FFF3E0"
+      },
+      "&.color-success": {
+        backgroundColor: "#E8F5E9"
+      }
+    },
     className: `color-${toastColorConfig}`
-  }, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
+  }, toast && /*#__PURE__*/React__default.createElement(Stack$1, {
+    sx: {
+      padding: SincoTheme.spacing(1),
+      gap: SincoTheme.spacing(1),
+      height: 20,
+      borderRadius: 50,
+      "&.ripple-error": {
+        backgroundColor: "#D143431F"
+      },
+      "&.ripple-info": {
+        backgroundColor: "#2D9FC51F"
+      },
+      "&.ripple-warning": {
+        backgroundColor: "#FB85001F"
+      },
+      "&.ripple-success": {
+        backgroundColor: "#8FC93A1F"
+      }
+    },
     className: `ripple-${toast.type || "info"}`
-  }, /*#__PURE__*/React__default.createElement(ToastIconContainer, {
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    sx: {
+      "&.icon-color.color-info": {
+        color: SincoTheme.palette.info.main
+      },
+      "&.icon-color.color-error": {
+        color: SincoTheme.palette.error.main
+      },
+      "&.icon-color.color-warning": {
+        color: SincoTheme.palette.warning.main
+      },
+      "&.icon-color.color-success": {
+        color: SincoTheme.palette.success.main
+      }
+    },
     className: `icon-color color-${toast.type || "info"}`
   }, ToastIconConfig)), /*#__PURE__*/React__default.createElement(Divider$1, {
     orientation: "vertical",
@@ -17740,21 +17850,14 @@ const ToastNotificationComponent = toast => {
       fontSize: 11,
       color: "#101840de"
     }
-  }, toast.dataOpt.map((element, i) => {
-    const keyElement = Object.keys(element);
-    let options = "";
-    for (let _i = 0; _i < keyElement.length; _i++) {
-      options += element[keyElement[_i]];
-    }
-    return /*#__PURE__*/React__default.createElement("li", {
-      style: {
-        width: "fit-content"
-      },
-      key: i
-    }, /*#__PURE__*/React__default.createElement(Typography$1, {
-      variant: "caption"
-    }, options));
-  }))), /*#__PURE__*/React__default.createElement(Stack$1, {
+  }, toast.dataOpt.map((element, i) => /*#__PURE__*/React__default.createElement("li", {
+    style: {
+      width: "fit-content"
+    },
+    key: i
+  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+    variant: "caption"
+  }, concatenateObjectValues(element)))))), /*#__PURE__*/React__default.createElement(Stack$1, {
     justifyContent: "flex-end",
     flexDirection: "row",
     alignItems: "flex-end"
@@ -17778,13 +17881,6 @@ const ToastNotificationComponent = toast => {
   }))));
 };
 
-// app.tsx
-const App = () => {
-  return /*#__PURE__*/React__default.createElement(React__default.StrictMode, null, /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: SincoTheme
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ToastNotificationComponent, null))));
-};
-
 var global$6 = global$l;
 var classof$2 = classofRaw$2;
 
@@ -17823,7 +17919,7 @@ var $TypeError$5 = TypeError;
 
 var anInstance$1 = function (it, Prototype) {
   if (isPrototypeOf$1(Prototype, it)) return it;
-  throw $TypeError$5('Incorrect invocation');
+  throw new $TypeError$5('Incorrect invocation');
 };
 
 var uncurryThis$2 = functionUncurryThis;
@@ -17838,7 +17934,7 @@ var empty = [];
 var construct = getBuiltIn$2('Reflect', 'construct');
 var constructorRegExp = /^\s*(?:class|function)\b/;
 var exec = uncurryThis$2(constructorRegExp.exec);
-var INCORRECT_TO_STRING = !constructorRegExp.exec(noop);
+var INCORRECT_TO_STRING = !constructorRegExp.test(noop);
 
 var isConstructorModern = function isConstructor(argument) {
   if (!isCallable$4(argument)) return false;
@@ -17887,7 +17983,7 @@ var $TypeError$4 = TypeError;
 // `Assert: IsConstructor(argument) is true`
 var aConstructor$1 = function (argument) {
   if (isConstructor(argument)) return argument;
-  throw $TypeError$4(tryToString$2(argument) + ' is not a constructor');
+  throw new $TypeError$4(tryToString$2(argument) + ' is not a constructor');
 };
 
 var anObject$4 = anObject$d;
@@ -17937,7 +18033,7 @@ var arraySlice$1 = uncurryThis([].slice);
 var $TypeError$3 = TypeError;
 
 var validateArgumentsLength$1 = function (passed, required) {
-  if (passed < required) throw $TypeError$3('Not enough arguments');
+  if (passed < required) throw new $TypeError$3('Not enough arguments');
   return passed;
 };
 
@@ -18260,7 +18356,7 @@ var $TypeError$2 = TypeError;
 var PromiseCapability = function (C) {
   var resolve, reject;
   this.promise = new C(function ($$resolve, $$reject) {
-    if (resolve !== undefined || reject !== undefined) throw $TypeError$2('Bad Promise constructor');
+    if (resolve !== undefined || reject !== undefined) throw new $TypeError$2('Bad Promise constructor');
     resolve = $$resolve;
     reject = $$reject;
   });
@@ -18353,7 +18449,7 @@ var callReaction = function (reaction, state) {
         }
       }
       if (result === reaction.promise) {
-        reject(TypeError$1('Promise-chain cycle'));
+        reject(new TypeError$1('Promise-chain cycle'));
       } else if (then = isThenable(result)) {
         call$6(then, result, resolve, reject);
       } else resolve(result);
@@ -18443,7 +18539,7 @@ var internalResolve = function (state, value, unwrap) {
   state.done = true;
   if (unwrap) state = unwrap;
   try {
-    if (state.facade === value) throw TypeError$1("Promise can't be resolved itself");
+    if (state.facade === value) throw new TypeError$1("Promise can't be resolved itself");
     var then = isThenable(value);
     if (then) {
       microtask(function () {
@@ -18597,7 +18693,7 @@ var $TypeError$1 = TypeError;
 var getIterator$1 = function (argument, usingIterator) {
   var iteratorMethod = arguments.length < 2 ? getIteratorMethod$1(argument) : usingIterator;
   if (aCallable$2(iteratorMethod)) return anObject$3(call$5(iteratorMethod, argument));
-  throw $TypeError$1(tryToString$1(argument) + ' is not iterable');
+  throw new $TypeError$1(tryToString$1(argument) + ' is not iterable');
 };
 
 var call$4 = functionCall;
@@ -18671,7 +18767,7 @@ var iterate$2 = function (iterable, unboundFunction, options) {
     iterator = iterable;
   } else {
     iterFn = getIteratorMethod(iterable);
-    if (!iterFn) throw $TypeError(tryToString(iterable) + ' is not iterable');
+    if (!iterFn) throw new $TypeError(tryToString(iterable) + ' is not iterable');
     // optimisation for array iterators
     if (isArrayIteratorMethod(iterFn)) {
       for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) {
@@ -23242,4 +23338,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { App, DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, SincoTheme, ToastNotificationComponent, useDynamicColor };
+export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderContent, SincoTheme, ToastNotificationComponent, useDynamicColor };

package/package.json

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

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

@@ -0,0 +1 @@
+export declare const main: () => JSX.Element;

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface PageheaderProperties {
+    title?: string;
+    subtitle?: string;
+    actions?: React.ReactNode;
+    buttonBack?: React.ReactNode;
+    fixed?: boolean;
+}
+export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;
+export {};

package/src/lib/Components/{ToastNotification.d.ts → ToastNofitication.d.ts}

@@ -1,12 +1,10 @@
 import React from "react";
-interface Option {
-}
 interface ToastNotificationProperties {
     type?: string;
     subtitle?: string;
     time?: number | any;
     title?: string;
-    dataOpt?: Option[];
+    dataOpt?: Array<object>;
     actions?: React.ReactNode;
     seeMore?: boolean;
 }

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

@@ -1,5 +1,5 @@
 export * from './EmptyState';
 export * from './Drawer';
 export * from './FooterAction';
-export * from './ToastNotification';
-export * from './App';
+export * from './PageHeader';
+export * from './ToastNofitication';

package/src/lib/Theme/components.d.ts

@@ -1,12 +1,2 @@
 import { Components } from '@mui/material';
-declare module '@mui/material/Chip' {
-    interface ChipPropsSizeOverrides {
-        xsmall: true;
-    }
-}
-declare module "@mui/material/Checkbox" {
-    interface CheckboxPropsSizeOverrides {
-        xsmall: true;
-    }
-}
 export declare const components: Components;

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const App: () => JSX.Element;