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

package/index.js

@@ -8829,12 +8829,270 @@ const getOverlayAlpha = elevation => {
 };
 var getOverlayAlpha$1 = getOverlayAlpha;
 
-const Componentes = {
+function getSvgIconUtilityClass(slot) {
+  return generateUtilityClass('MuiSvgIcon', slot);
+}
+generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+
+const _excluded$8 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const useUtilityClasses$7 = ownerState => {
+  const {
+    color,
+    fontSize,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]
+  };
+  return composeClasses(slots, getSvgIconUtilityClass, classes);
+};
+const SvgIconRoot = styled$1('svg', {
+  name: 'MuiSvgIcon',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => {
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
+  return {
+    userSelect: 'none',
+    width: '1em',
+    height: '1em',
+    display: 'inline-block',
+    // the <svg> will define the property that has `currentColor`
+    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
+    flexShrink: 0,
+    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
+    }),
+    fontSize: {
+      inherit: 'inherit',
+      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
+    }[ownerState.fontSize],
+    // TODO v5 deprecate, v6 remove for sx
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
+      inherit: undefined
+    }[ownerState.color]
+  };
+});
+const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiSvgIcon'
+  });
+  const {
+      children,
+      className,
+      color = 'inherit',
+      component = 'svg',
+      fontSize = 'medium',
+      htmlColor,
+      inheritViewBox = false,
+      titleAccess,
+      viewBox = '0 0 24 24'
+    } = props,
+    other = _objectWithoutPropertiesLoose$2(props, _excluded$8);
+  const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
+  const ownerState = _extends$3({}, props, {
+    color,
+    component,
+    fontSize,
+    instanceFontSize: inProps.fontSize,
+    inheritViewBox,
+    viewBox,
+    hasSvgAsChild
+  });
+  const more = {};
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+  const classes = useUtilityClasses$7(ownerState);
+  return /*#__PURE__*/jsxs(SvgIconRoot, _extends$3({
+    as: component,
+    className: clsx(classes.root, className),
+    focusable: "false",
+    color: htmlColor,
+    "aria-hidden": titleAccess ? undefined : true,
+    role: titleAccess ? 'img' : undefined,
+    ref: ref
+  }, more, other, hasSvgAsChild && children.props, {
+    ownerState: ownerState,
+    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/jsx("title", {
+      children: titleAccess
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" ? SvgIcon.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Node passed into the SVG element.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: PropTypes.string,
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: PropTypes.bool,
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: PropTypes.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox: PropTypes.string
+} : void 0;
+SvgIcon.muiName = 'SvgIcon';
+var SvgIcon$1 = SvgIcon;
+
+function createSvgIcon(path, displayName) {
+  function Component(props, ref) {
+    return /*#__PURE__*/jsx(SvgIcon$1, _extends$3({
+      "data-testid": `${displayName}Icon`,
+      ref: ref
+    }, props, {
+      children: path
+    }));
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // Need to set `displayName` on the inner component for React.memo.
+    // React prior to 16.14 ignores `displayName` on the wrapper.
+    Component.displayName = `${displayName}Icon`;
+  }
+  Component.muiName = SvgIcon$1.muiName;
+  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
+}
+
+var ArrowDownward = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+}), 'ArrowDownward');
+
+var ArrowUpward = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+}), 'ArrowUpward');
+
+var CheckCircleRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29 5.7 12.7a.9959.9959 0 0 1 0-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"
+}), 'CheckCircleRounded');
+
+var Close = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+
+var ErrorRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
+}), 'ErrorRounded');
+
+var InfoRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"
+}), 'InfoRounded');
+
+var WarningRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
+  d: "M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
+}), 'WarningRounded');
+
+const components = {
+  MuiRating: {
+    defaultProps: {
+      size: 'small'
+    },
+    styleOverrides: {
+      sizeSmall: {
+        fontSize: 18
+      },
+      sizeMedium: {
+        fontSize: 24
+      },
+      sizeLarge: {
+        fontSize: 30
+      }
+    }
+  },
+  MuiToolbar: {
+    styleOverrides: {
+      root: {
+        height: "48px"
+      }
+    }
+  },
   MuiDataGrid: {
     defaultProps: {
       density: "compact"
     }
   },
+  MuiDrawer: {
+    styleOverrides: {
+      root: {
+        "&.MuiBackdrop-root": {
+          backgroundColor: "#f0f0f099",
+          backdropFilter: "blur(2px) !important"
+        }
+      }
+    }
+  },
   MuiDialog: {
     styleOverrides: {
       root: {
@@ -8855,13 +9113,25 @@ const Componentes = {
   },
   MuiChip: {
     defaultProps: {
-      size: "small"
+      size: 'small'
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: 4
+      }
     }
   },
   MuiAlert: {
+    defaultProps: {
+      iconMapping: {
+        success: /*#__PURE__*/React__default.createElement(CheckCircleRounded),
+        error: /*#__PURE__*/React__default.createElement(ErrorRounded),
+        warning: /*#__PURE__*/React__default.createElement(WarningRounded),
+        info: /*#__PURE__*/React__default.createElement(InfoRounded)
+      }
+    },
     styleOverrides: {
       root: {
-        boxShadow: "0px 0px 1px rgba(0,0,0,.7)",
         paddingY: .5,
         paddingX: 2,
         alignItems: "center",
@@ -8871,19 +9141,20 @@ const Componentes = {
   },
   MuiButton: {
     defaultProps: {
-      size: "small"
+      size: 'medium'
     },
     styleOverrides: {
+      fullWidth: {
+        width: '100%'
+      },
       sizeSmall: {
-        height: 26,
-        fontSize: 12
+        padding: '4px 10px'
       },
       sizeMedium: {
-        height: 32,
-        fontSize: 13
+        padding: '7.5px 15px'
       },
       sizeLarge: {
-        height: 38,
+        padding: '10.5px 22px',
         fontSize: 14
       },
       root: {
@@ -8973,9 +9244,20 @@ const Componentes = {
   },
   MuiSvgIcon: {
     styleOverrides: {
+      fontSizeLarge: {
+        width: 35,
+        height: 35,
+        fontSize: 35
+      },
+      fontSizeMedium: {
+        width: 20,
+        height: 20,
+        fontSize: 20
+      },
       fontSizeSmall: {
-        width: "1rem",
-        height: "1rem"
+        width: 16,
+        height: 16,
+        fontSize: 26
       }
     }
   },
@@ -8983,7 +9265,7 @@ const Componentes = {
     styleOverrides: {
       sizeSmall: {
         fontSize: 14,
-        padding: 4
+        padding: 2
       },
       sizeMedium: {
         fontSize: 20,
@@ -9062,6 +9344,14 @@ const Componentes = {
   },
   MuiInputLabel: {
     styleOverrides: {
+      asterisk: {
+        color: '#D14343'
+      },
+      root: {
+        display: 'flex',
+        gap: '.2rem',
+        flexDirection: 'row-reverse'
+      },
       outlined: {
         "&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
           transform: "translate(14px,7px) scale(1)"
@@ -9117,102 +9407,8 @@ const Componentes = {
     }
   }
 };
-const components = Componentes;
 
-const Typography$2 = {
-  fontSize: 13,
-  body1: {
-    fontFamily: "Roboto",
-    fontSize: 14,
-    fontWeight: 400,
-    letterSpacing: 0.15,
-    lineHeight: 1.4
-  },
-  body2: {
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontWeight: 400,
-    letterSpacing: 0.17,
-    lineHeight: 1.2
-  },
-  subtitle1: {
-    fontFamily: "Roboto",
-    fontSize: 14,
-    fontWeight: 500,
-    letterSpacing: 0.15,
-    lineHeight: 1.4
-  },
-  subtitle2: {
-    fontFamily: "Roboto",
-    fontSize: 13,
-    fontWeight: 500,
-    letterSpacing: 0.1,
-    lineHeight: 1.4
-  },
-  caption: {
-    fontFamily: "Roboto",
-    fontSize: 11,
-    fontWeight: 400,
-    letterSpacing: 0.4,
-    lineHeight: 1.4
-  },
-  overline: {
-    fontFamily: "Roboto",
-    fontSize: 11,
-    fontWeight: 400,
-    letterSpacing: 1,
-    lineHeight: 2.66
-  },
-  h6: {
-    fontFamily: "Nunito",
-    fontSize: 16,
-    fontWeight: 600,
-    lineHeight: 1.6
-  },
-  h5: {
-    fontFamily: "Nunito",
-    fontSize: 18,
-    fontWeight: 600,
-    lineHeight: 1.8
-  },
-  h4: {
-    fontFamily: "Nunito",
-    fontSize: 20,
-    fontWeight: 600,
-    letterSpacing: 0.25,
-    lineHeight: 1
-  },
-  h3: {
-    fontFamily: "Nunito",
-    fontSize: 28,
-    fontWeight: 500,
-    lineHeight: 1.2
-  },
-  h2: {
-    fontFamily: "Nunito",
-    fontSize: 32,
-    fontWeight: 400,
-    letterSpacing: -0.5,
-    lineHeight: 1.2
-  },
-  h1: {
-    fontFamily: "Nunito",
-    fontSize: 40,
-    fontWeight: 300,
-    letterSpacing: -1.5,
-    lineHeight: 1.4
-  },
-  button: {
-    fontFamily: "Roboto",
-    textTransform: "unset",
-    fontWeightLight: 300,
-    fontSize: 13,
-    lineHeight: "normal"
-  }
-};
-const typography = Typography$2;
-
-const Palettes = {
+const palette = {
   primary: {
     main: "#1e62a1",
     light: "#5a8fd3",
@@ -9226,9 +9422,9 @@ const Palettes = {
     contrastText: "#ffffff"
   },
   text: {
-    primary: "rgba(16,24,64,0.87)",
-    secondary: "rgba(16,24,64,0.6)",
-    disabled: "rgba(16,24,64,0.38)"
+    primary: "#101840de",
+    secondary: "#10184099",
+    disabled: "#10184061"
   },
   error: {
     main: "#D14343",
@@ -9278,19 +9474,159 @@ const Palettes = {
     disabledBackground: "rgba(16, 24, 64, 0.12)",
     focus: "rgba(16, 24, 64, 0.12)"
   },
-  background: {
-    default: "#f5f5f5",
-    paper: "#fff"
+  background: {
+    default: '#f5f5f5',
+    paper: "#fff"
+  },
+  common: {
+    black: '#000',
+    white: '#fff'
+  },
+  divider: "rgba(16,24,64,0.12)"
+};
+
+const breakpoints = createBreakpoints({
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920
+  }
+});
+
+const mixins = {
+  toolbar: {
+    minHeight: 48,
+    [breakpoints.down('md')]: {
+      minHeight: 52
+    }
+  }
+};
+
+const typography = {
+  fontSize: 13,
+  body1: {
+    fontFamily: "Roboto",
+    fontSize: 14,
+    fontWeight: 400,
+    letterSpacing: 0.15,
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 15
+    }
+  },
+  body2: {
+    fontFamily: "Roboto",
+    fontSize: 13,
+    fontWeight: 400,
+    letterSpacing: 0.17,
+    lineHeight: 1.2,
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
+  },
+  subtitle1: {
+    fontFamily: "Roboto",
+    fontSize: 14,
+    fontWeight: 500,
+    letterSpacing: 0.15,
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 15
+    }
+  },
+  subtitle2: {
+    fontFamily: "Roboto",
+    fontSize: 13,
+    fontWeight: 500,
+    letterSpacing: 0.1,
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
+  },
+  caption: {
+    fontFamily: "Roboto",
+    fontSize: 11,
+    fontWeight: 400,
+    letterSpacing: 0.4,
+    lineHeight: 1.4,
+    '@media(max-width: 885px)': {
+      fontSize: 12
+    }
+  },
+  overline: {
+    fontFamily: "Roboto",
+    fontSize: 11,
+    fontWeight: 400,
+    letterSpacing: 1,
+    lineHeight: 2.66,
+    '@media(max-width: 885px)': {
+      fontSize: 12
+    }
+  },
+  h6: {
+    fontFamily: "Nunito",
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: 1.6,
+    '@media(max-width: 885px)': {
+      fontSize: 17
+    }
+  },
+  h5: {
+    fontFamily: "Nunito",
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: 1.8
+  },
+  h4: {
+    fontFamily: "Nunito",
+    fontSize: 20,
+    fontWeight: 600,
+    letterSpacing: 0.25,
+    lineHeight: 1
+  },
+  h3: {
+    fontFamily: "Nunito",
+    fontSize: 28,
+    fontWeight: 500,
+    lineHeight: 1.2
+  },
+  h2: {
+    fontFamily: "Nunito",
+    fontSize: 32,
+    fontWeight: 400,
+    letterSpacing: -0.5,
+    lineHeight: 1.2
   },
-  divider: "rgba(16,24,64,0.12)"
+  h1: {
+    fontFamily: "Nunito",
+    fontSize: 40,
+    fontWeight: 300,
+    letterSpacing: -1.5,
+    lineHeight: 1.4
+  },
+  button: {
+    fontFamily: "Roboto",
+    textTransform: "unset",
+    fontWeightLight: 300,
+    fontSize: 13,
+    lineHeight: "normal",
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
+  }
 };
-const palette = Palettes;
 
 const themeOptions = {
-  palette,
-  typography,
   components,
-  spacing: 8
+  typography,
+  palette,
+  spacing: 8,
+  mixins,
+  breakpoints
 };
 
 const SincoTheme = createTheme(Object.assign({}, themeOptions));
@@ -9831,203 +10167,6 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-function getSvgIconUtilityClass(slot) {
-  return generateUtilityClass('MuiSvgIcon', slot);
-}
-generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
-
-const _excluded$8 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$7 = ownerState => {
-  const {
-    color,
-    fontSize,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]
-  };
-  return composeClasses(slots, getSvgIconUtilityClass, classes);
-};
-const SvgIconRoot = styled$1('svg', {
-  name: 'MuiSvgIcon',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
-  }
-})(({
-  theme,
-  ownerState
-}) => {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette2, _palette3;
-  return {
-    userSelect: 'none',
-    width: '1em',
-    height: '1em',
-    display: 'inline-block',
-    // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
-    fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
-    flexShrink: 0,
-    transition: (_theme$transitions = theme.transitions) == null || (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
-      duration: (_theme$transitions2 = theme.transitions) == null || (_theme$transitions2 = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2.shorter
-    }),
-    fontSize: {
-      inherit: 'inherit',
-      small: ((_theme$typography = theme.typography) == null || (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
-      medium: ((_theme$typography2 = theme.typography) == null || (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null || (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
-    }[ownerState.fontSize],
-    // TODO v5 deprecate, v6 remove for sx
-    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null || (_palette = _palette[ownerState.color]) == null ? void 0 : _palette.main) != null ? _palette$ownerState$c : {
-      action: (_palette2 = (theme.vars || theme).palette) == null || (_palette2 = _palette2.action) == null ? void 0 : _palette2.active,
-      disabled: (_palette3 = (theme.vars || theme).palette) == null || (_palette3 = _palette3.action) == null ? void 0 : _palette3.disabled,
-      inherit: undefined
-    }[ownerState.color]
-  };
-});
-const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiSvgIcon'
-  });
-  const {
-      children,
-      className,
-      color = 'inherit',
-      component = 'svg',
-      fontSize = 'medium',
-      htmlColor,
-      inheritViewBox = false,
-      titleAccess,
-      viewBox = '0 0 24 24'
-    } = props,
-    other = _objectWithoutPropertiesLoose$2(props, _excluded$8);
-  const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends$3({}, props, {
-    color,
-    component,
-    fontSize,
-    instanceFontSize: inProps.fontSize,
-    inheritViewBox,
-    viewBox,
-    hasSvgAsChild
-  });
-  const more = {};
-  if (!inheritViewBox) {
-    more.viewBox = viewBox;
-  }
-  const classes = useUtilityClasses$7(ownerState);
-  return /*#__PURE__*/jsxs(SvgIconRoot, _extends$3({
-    as: component,
-    className: clsx(classes.root, className),
-    focusable: "false",
-    color: htmlColor,
-    "aria-hidden": titleAccess ? undefined : true,
-    role: titleAccess ? 'img' : undefined,
-    ref: ref
-  }, more, other, hasSvgAsChild && children.props, {
-    ownerState: ownerState,
-    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/jsx("title", {
-      children: titleAccess
-    }) : null]
-  }));
-});
-process.env.NODE_ENV !== "production" ? SvgIcon.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * Node passed into the SVG element.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
-   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
-   * @default 'inherit'
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   * @default 'medium'
-   */
-  fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),
-  /**
-   * Applies a color attribute to the SVG element.
-   */
-  htmlColor: PropTypes.string,
-  /**
-   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
-   * prop will be ignored.
-   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-   * `component`'s viewBox to the root node.
-   * @default false
-   */
-  inheritViewBox: PropTypes.bool,
-  /**
-   * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
-   * If you are having issues with blurry icons you should investigate this prop.
-   */
-  shapeRendering: PropTypes.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Provides a human-readable title for the element that contains it.
-   * https://www.w3.org/TR/SVG-access/#Equivalent
-   */
-  titleAccess: PropTypes.string,
-  /**
-   * Allows you to redefine what the coordinates without units mean inside an SVG element.
-   * For example, if the SVG element is 500 (width) by 200 (height),
-   * and you pass viewBox="0 0 50 20",
-   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
-   * to bottom right (50,20) and each unit will be worth 10px.
-   * @default '0 0 24 24'
-   */
-  viewBox: PropTypes.string
-} : void 0;
-SvgIcon.muiName = 'SvgIcon';
-var SvgIcon$1 = SvgIcon;
-
-function createSvgIcon(path, displayName) {
-  function Component(props, ref) {
-    return /*#__PURE__*/jsx(SvgIcon$1, _extends$3({
-      "data-testid": `${displayName}Icon`,
-      ref: ref
-    }, props, {
-      children: path
-    }));
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    // Need to set `displayName` on the inner component for React.memo.
-    // React prior to 16.14 ignores `displayName` on the wrapper.
-    Component.displayName = `${displayName}Icon`;
-  }
-  Component.muiName = SvgIcon$1.muiName;
-  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -12814,34 +12953,6 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-propt
 } : void 0;
 var LinearProgress$1 = LinearProgress;
 
-var ArrowDownward = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-}), 'ArrowDownward');
-
-var ArrowUpward = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
-}), 'ArrowUpward');
-
-var CheckCircleRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29 5.7 12.7a.9959.9959 0 0 1 0-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z"
-}), 'CheckCircleRounded');
-
-var Close = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), 'Close');
-
-var ErrorRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
-}), 'ErrorRounded');
-
-var InfoRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"
-}), 'InfoRounded');
-
-var WarningRounded = createSvgIcon( /*#__PURE__*/jsx("path", {
-  d: "M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z"
-}), 'WarningRounded');
-
 const ToastNotification = toast => {
   const [openToast, setOpenToast] = useState(true);
   const [showOptions, setShowOptions] = useState(true);

package/package.json

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

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

@@ -0,0 +1,2 @@
+declare const breakpoints: import("@mui/system").Breakpoints;
+export default breakpoints;

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

@@ -1,2 +1,3 @@
-import { Components } from "@mui/material";
-export declare const components: Components<unknown>;
+import { Components } from '@mui/material';
+declare const components: Components;
+export default components;

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

@@ -0,0 +1,3 @@
+import { Mixins } from '@mui/material';
+declare const mixins: Mixins;
+export default mixins;

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

@@ -1,2 +1,3 @@
 import { PaletteOptions } from '@mui/material';
-export declare const palette: PaletteOptions;
+declare const palette: PaletteOptions;
+export default palette;

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

@@ -1,2 +1,3 @@
 import { Shadows } from '@mui/material/styles/shadows';
-export declare const shadows: Shadows;
+declare const shadows: Shadows;
+export default shadows;

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

@@ -1,2 +1,3 @@
 import { TypographyOptions } from '@mui/material/styles/createTypography';
-export declare const typography: TypographyOptions;
+declare const typography: TypographyOptions;
+export default typography;