@sinco/react 1.0.4-rc.0 → 1.0.4-rc.10

package/index.js

@@ -2279,26 +2279,6 @@ 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 {
-    ...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.
@@ -5156,10 +5136,10 @@ if (!isBrowser$2) {
   };
 }
 
-var ThemeContext$2 = /* #__PURE__ */React.createContext({});
+var ThemeContext = /* #__PURE__ */React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
-  ThemeContext$2.displayName = 'EmotionThemeContext';
+  ThemeContext.displayName = 'EmotionThemeContext';
 }
 
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
@@ -5212,7 +5192,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext$2));
+  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -5391,7 +5371,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext$2));
+  var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
 
   if (!isBrowser$2) {
     var _ref;
@@ -5637,7 +5617,7 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var content = {
     css: css,
     cx: cx,
-    theme: React.useContext(ThemeContext$2)
+    theme: React.useContext(ThemeContext)
   };
   var ele = props.children(content);
   hasRendered = true;
@@ -5793,7 +5773,7 @@ var createStyled$1 = function createStyled(tag, options) {
           mergedProps[key] = props[key];
         }
 
-        mergedProps.theme = React.useContext(ThemeContext$2);
+        mergedProps.theme = React.useContext(ThemeContext);
       }
 
       if (typeof props.className === 'string') {
@@ -5897,7 +5877,7 @@ const internal_processStyles = (tag, processor) => {
   }
 };
 
-const _excluded$j = ["values", "unit", "step"];
+const _excluded$i = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -5932,7 +5912,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$j);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$i);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -7016,7 +6996,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$i = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$h = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -7024,7 +7004,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$i);
+    other = _objectWithoutPropertiesLoose(options, _excluded$h);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -7052,17 +7032,17 @@ function createTheme$1(options = {}, ...args) {
 function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-function useTheme$3(defaultTheme = null) {
-  const contextTheme = React.useContext(ThemeContext$2);
+function useTheme$2(defaultTheme = null) {
+  const contextTheme = React.useContext(ThemeContext);
   return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
 }
 
 const systemDefaultTheme$1 = createTheme$1();
-function useTheme$2(defaultTheme = systemDefaultTheme$1) {
-  return useTheme$3(defaultTheme);
+function useTheme$1(defaultTheme = systemDefaultTheme$1) {
+  return useTheme$2(defaultTheme);
 }
 
-const _excluded$h = ["sx"];
+const _excluded$g = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -7083,7 +7063,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const {
     systemProps,
     otherProps
@@ -7109,7 +7089,7 @@ function extendSxProp(props) {
 
 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$f = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -7121,13 +7101,13 @@ 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$2(defaultTheme);
+    const theme = useTheme$1(defaultTheme);
     const _extendSxProp = extendSxProp(inProps),
       {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$g);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$f);
     return /*#__PURE__*/jsx(BoxRoot, _extends({
       as: component,
       ref: ref,
@@ -7138,7 +7118,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$f = ["variant"];
+const _excluded$e = ["variant"];
 function isEmpty$1(string) {
   return string.length === 0;
 }
@@ -7152,7 +7132,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$f);
+    other = _objectWithoutPropertiesLoose(props, _excluded$e);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -7164,7 +7144,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$e = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$d = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -7259,7 +7239,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$e);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$d);
 
     // 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;
@@ -7393,7 +7373,7 @@ function useThemeProps$1({
   defaultTheme,
   themeId
 }) {
-  let theme = useTheme$2(defaultTheme);
+  let theme = useTheme$1(defaultTheme);
   if (themeId) {
     theme = theme[themeId] || theme;
   }
@@ -7639,157 +7619,7 @@ function lighten(color, coefficient) {
   return recomposeColor(color);
 }
 
-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 {
-    ...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({}, 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({}, upperTheme, {
-      [themeId]: localTheme
-    }) : _extends({}, 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$d = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
+const _excluded$c = ["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', {
@@ -7918,7 +7748,7 @@ function createStack(options = {}) {
         className,
         useFlexGap = false
       } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$d);
+      other = _objectWithoutPropertiesLoose(props, _excluded$c);
     const ownerState = {
       direction,
       spacing,
@@ -8092,7 +7922,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$c = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$b = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -8261,7 +8091,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$c);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$b);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -8385,7 +8215,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$b = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$a = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -8416,7 +8246,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -8483,7 +8313,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$9 = ["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 = {
@@ -8534,7 +8364,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$a);
+      other = _objectWithoutPropertiesLoose(options, _excluded$9);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -8581,7 +8411,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$9 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$8 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -8589,7 +8419,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$9);
+    other = _objectWithoutPropertiesLoose(options, _excluded$8);
   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));
@@ -8651,7 +8481,7 @@ const defaultTheme$1 = createTheme();
 var defaultTheme$2 = defaultTheme$1;
 
 function useTheme() {
-  const theme = useTheme$2(defaultTheme$2);
+  const theme = useTheme$1(defaultTheme$2);
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
@@ -8679,29 +8509,6 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$8 = ["theme"];
-function ThemeProvider(_ref) {
-  let {
-      theme: themeInput
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsx(ThemeProvider$1, _extends({}, 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;
-
 function getSvgIconUtilityClass(slot) {
   return generateUtilityClass('MuiSvgIcon', slot);
 }
@@ -9059,15 +8866,44 @@ const components = {
     }
   },
   MuiChip: {
-    defaultProps: {
-      size: 'small'
-    },
     styleOverrides: {
+      sizeSmall: {
+        paddingBlock: 4
+      },
+      sizeMedium: {
+        paddingBlock: 7
+      },
       root: {
+        height: "inherit",
         borderRadius: 4
+        // '&.MuiChip-colorPrimary': {
+        //     color: '#101840DE',
+        //     backgroundColor: '#E4ECF4',
+        //     ".MuiChip-deleteIcon": {
+        //         height: 12,
+        //         width: 12,
+        //     },
+        // },
+        // '&.MuiChip-colorPrimary.MuiChip-outlined': {
+        //     border: '1px solid #90B1D0',
+        //     backgroundColor: "#fff",
+        //     ".MuiChip-avatar": {
+        //         marginBlock: 2
+        //     },
+        //     "&.MuiChip-colorPrimary.MuiChip-outlined:hover": {
+        //         backgroundColor: "#E4ECF4"
+        //     },
+        //     ".MuiChip-deleteIcon": {
+        //         color: "#90B1D0",
+        //         "&:hover": {
+        //             color: "#6392BD !important"
+        //         }
+        //     },
+        // },
       }
     }
   },
+
   MuiAlert: {
     defaultProps: {
       iconMapping: {
@@ -12779,19 +12615,25 @@ var Stack$1 = Stack;
 const ToastContent = styled$1(Stack$1)(({
   theme
 }) => ({
+  position: "fixed",
   marginBottom: theme.spacing(2),
-  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)',
-  '&.flex-end': {
-    marginTop: 16,
-    marginRight: 16
-  },
-  '&.center': {
-    marginTop: 16
-  },
-  '&.flex-start': {
-    marginLeft: 16,
-    marginTop: 16
+  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)",
+  "&.end": {
+    top: 16,
+    right: 16,
+    left: "auto"
+  },
+  "&.center": {
+    top: 16,
+    left: "50%",
+    right: "auto",
+    transform: "translateX(-50%)"
+  },
+  "&.start": {
+    top: 16,
+    left: 16,
+    right: "auto"
   }
 }));
 const ContentBox = styled$1(Box$1)(({
@@ -12799,19 +12641,19 @@ const ContentBox = styled$1(Box$1)(({
 }) => ({
   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)(({
@@ -12821,31 +12663,33 @@ 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'
+const ContentIcon = styled$1(Stack$1)(({
+  theme
+}) => ({
+  "&.icon-color.color-info": {
+    color: theme.palette.info.main
   },
-  '&.icon-color.color-error': {
-    color: '#d14343'
+  "&.icon-color.color-error": {
+    color: theme.palette.error.main
   },
-  '&.icon-color.color-warning': {
-    color: '#fb8500'
+  "&.icon-color.color-warning": {
+    color: theme.palette.warning.main
   },
-  '&.icon-color.color-success': {
-    color: '#8fc93a'
+  "&.icon-color.color-success": {
+    color: theme.palette.success.main
   }
 }));
 const ToastNotification = toast => {
@@ -12859,20 +12703,14 @@ 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'
-  };
-  const colors = colorMap[toast.type || 'info'];
-  const toastPosition = {
-    center: 'center',
-    right: 'flex-end',
-    left: 'flex-start'
+    success: "success",
+    error: "error",
+    warning: "warning",
+    info: "info"
   };
-  const position = toastPosition[toast.position || 'right'];
+  const colors = colorMap[toast.type || "info"];
   const close = () => {
     setOpenToast(false);
   };
@@ -12894,20 +12732,12 @@ const ToastNotification = toast => {
       clearInterval(interval || toast.time);
     };
   }, [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",
-    className: `${position}`
-  }, /*#__PURE__*/React__default.createElement(ContentBox, {
-    className: `color-${toast.type || 'info'}`
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openToast && /*#__PURE__*/React__default.createElement(ToastContent, null, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(ContentBox, {
+    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
@@ -12926,7 +12756,8 @@ const ToastNotification = toast => {
     "aria-label": "delete",
     onClick: close
   }, /*#__PURE__*/React__default.createElement(Close, null))), /*#__PURE__*/React__default.createElement(Stack$1, {
-    gap: "4px"
+    gap: "4px",
+    alignItems: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
     color: "text.primary",
     variant: "body2"
@@ -12935,17 +12766,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, {
@@ -12968,11 +12799,22 @@ 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
-  })))));
-};
+  }))));
+};
+
+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",
+  justifyContent: "space-between",
+  minHeight: 39,
+  position: "fixed",
+  width: "100%"
+}));
 
 export { SincoTheme, ToastNotification };

package/package.json

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

package/src/index.d.ts

@@ -1,4 +1,2 @@
 export * from './lib/Theme';
-export { default as ToastNotification } from './lib/toastNotification/ToastNofitication';
-export * from './lib/toastNotification/ToastNofitication';
-export * from './lib/toastNotification/interfaces';
+export * from './lib/Components';

package/src/lib/Components/ToastNotification/ToastNofitication.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface Option {
+}
+interface Toast {
+    type?: string;
+    subtitle?: string;
+    time?: number | any;
+    title?: string;
+    dataOpt?: Option[];
+    actions?: React.ReactNode;
+    seeMore?: boolean;
+}
+export declare const ToastNotification: (toast: Toast) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './ToastNotification/ToastNofitication';
+export * from './pageHeader/PageHeader';

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

@@ -0,0 +1,15 @@
+import React from "react";
+interface BreadcrumbCode {
+    link: string;
+    name: string;
+}
+interface Pageheader {
+    back?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    breadcrumbs?: BreadcrumbCode[];
+    actions?: React.ReactNode;
+    tabs?: React.ReactNode;
+}
+declare const PageHeader: (page: Pageheader) => JSX.Element;
+export default PageHeader;

package/src/lib/toastNotification/ToastNofitication.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { Toast } from './interfaces';
-declare const ToastNotification: (toast: Toast) => JSX.Element;
-export default ToastNotification;

package/src/lib/toastNotification/interfaces.d.ts

@@ -1,22 +0,0 @@
-import { ReactElement } from "react";
-export interface Option {
-}
-export interface Toast {
-    type?: string;
-    subtitle?: string;
-    time?: number | any;
-    title?: string;
-    dataOpt?: Option[];
-    actions?: React.ReactNode;
-    seeMore?: boolean;
-    position?: string;
-}
-export interface IconMap {
-    [key: string]: ReactElement;
-}
-export interface ColorMap {
-    [key: string]: "success" | "error" | "warning" | "info";
-}
-export interface position {
-    [key: string]: "center" | "flex-end" | "flex-start";
-}