@sinco/react 1.0.1-rc.0 → 1.0.1-rc.2

package/index.js

@@ -7485,29 +7485,45 @@ 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 Componentes = {
-  MuiToolbar: {
+const components = {
+  MuiBackdrop: {
     styleOverrides: {
       root: {
-        minHeight: "48px !important"
+        "&.MuiBackdrop-root": {
+          backgroundColor: "#f0f0f099",
+          backdropFilter: "blur(2px) !important"
+        }
       }
     }
   },
-  MuiDataGrid: {
+  MuiRating: {
     defaultProps: {
-      density: "compact"
+      size: 'small'
+    },
+    styleOverrides: {
+      sizeSmall: {
+        fontSize: 18
+      },
+      sizeMedium: {
+        fontSize: 24
+      },
+      sizeLarge: {
+        fontSize: 30
+      }
     }
   },
-  MuiDialog: {
+  MuiToolbar: {
     styleOverrides: {
       root: {
-        ".MuiBackdrop-root": {
-          backgroundColor: "#f0f0f099",
-          backdropFilter: "blur(2px) !important"
-        }
+        height: "48px"
       }
     }
   },
+  MuiDataGrid: {
+    defaultProps: {
+      density: "compact"
+    }
+  },
   MuiDialogContent: {
     styleOverrides: {
       root: {
@@ -7545,26 +7561,18 @@ const Componentes = {
     }
   },
   MuiButton: {
-    defaultProps: {
-      size: "small"
-    },
     styleOverrides: {
       fullWidth: {
-        width: '100% '
+        width: '100%'
       },
       sizeSmall: {
-        height: 26,
-        fontSize: 12,
-        '@media(max-width: 600px)': {
-          fontSize: 14
-        }
+        padding: '6px 10px'
       },
       sizeMedium: {
-        height: 32,
-        fontSize: 13
+        padding: '7.5px 15px'
       },
       sizeLarge: {
-        height: 38,
+        padding: '10.5px 22px',
         fontSize: 14
       },
       root: {
@@ -7743,6 +7751,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)"
@@ -7798,9 +7814,100 @@ const Componentes = {
     }
   }
 };
-const components = Componentes;
 
-const Typography = {
+const palette = {
+  primary: {
+    main: "#1e62a1",
+    light: "#5a8fd3",
+    dark: "#003972",
+    contrastText: "#ffffff"
+  },
+  secondary: {
+    main: "#0CBBE2",
+    light: "#67eeff",
+    dark: "#008bb0",
+    contrastText: "#ffffff"
+  },
+  text: {
+    primary: "rgba(16,24,64,0.87)",
+    secondary: "rgba(16,24,64,0.6)",
+    disabled: "rgba(16,24,64,0.38)"
+  },
+  error: {
+    main: "#D14343",
+    light: "#d85f5f",
+    dark: "#b51e1e",
+    contrastText: "#ffffff"
+  },
+  warning: {
+    main: "#fb8500",
+    light: "#fc9726",
+    dark: "#f85500",
+    contrastText: "#ffffff"
+  },
+  info: {
+    main: "#2d9fc5",
+    light: "#4dadce",
+    dark: "#1172a3",
+    contrastText: "#ffffff"
+  },
+  success: {
+    main: "#8fc93a",
+    dark: "#60a918",
+    light: "#a0d158",
+    contrastText: "#ffffff"
+  },
+  grey: {
+    50: "#FAFBFF",
+    100: "#F4F6FA",
+    200: "#EDEFF5",
+    300: "#E6E8F0",
+    400: "#D8DAE5",
+    500: "#C1C4D6",
+    600: "#8F95B2",
+    700: "#696F8C",
+    800: "#474D66",
+    900: "#101840",
+    A100: "#D8DAE5",
+    A200: "#C1C4D6",
+    A400: "#696F8C",
+    A700: "#101840"
+  },
+  action: {
+    active: "rgba(16, 24, 64, 0.54)",
+    hover: "rgba(16, 24, 64, 0.04)",
+    selected: "rgba(16, 24, 64, 0.08)",
+    disabled: "rgba(16, 24, 64, 0.26)",
+    disabledBackground: "rgba(16, 24, 64, 0.12)",
+    focus: "rgba(16, 24, 64, 0.12)"
+  },
+  background: {
+    default: '#f5f5f5',
+    paper: "#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('sm')]: {
+      minHeight: 48
+    }
+  }
+};
+
+const typography = {
   fontSize: 13,
   body1: {
     fontFamily: 'Roboto',
@@ -7808,7 +7915,7 @@ const Typography = {
     fontWeight: 400,
     letterSpacing: 0.15,
     lineHeight: 1.4,
-    '@media(max-width: 600px)': {
+    '@media(max-width: 885px)': {
       fontSize: 15
     }
   },
@@ -7818,7 +7925,7 @@ const Typography = {
     fontWeight: 400,
     letterSpacing: 0.17,
     lineHeight: 1.2,
-    '@media(max-width: 600px)': {
+    '@media(max-width: 885px)': {
       fontSize: 14
     }
   },
@@ -7828,7 +7935,7 @@ const Typography = {
     fontWeight: 500,
     letterSpacing: 0.15,
     lineHeight: 1.4,
-    '@media(max-width: 600px)': {
+    '@media(max-width: 885px)': {
       fontSize: 15
     }
   },
@@ -7838,7 +7945,7 @@ const Typography = {
     fontWeight: 500,
     letterSpacing: 0.1,
     lineHeight: 1.4,
-    '@media(max-width: 600px)': {
+    '@media(max-width: 885px)': {
       fontSize: 14
     }
   },
@@ -7848,7 +7955,7 @@ const Typography = {
     fontWeight: 400,
     letterSpacing: 0.4,
     lineHeight: 1.4,
-    '@media(max-width: 600px)': {
+    '@media(max-width: 885px)': {
       fontSize: 12
     }
   },
@@ -7858,7 +7965,7 @@ const Typography = {
     fontWeight: 400,
     letterSpacing: 1,
     lineHeight: 2.66,
-    '@media(max-width: 600px)': {
+    '@media(max-width: 885px)': {
       fontSize: 12
     }
   },
@@ -7867,7 +7974,7 @@ const Typography = {
     fontSize: 16,
     fontWeight: 600,
     lineHeight: 1.6,
-    '@media(max-width: 600px)': {
+    '@media(max-width: px)': {
       fontSize: 17
     }
   },
@@ -7909,90 +8016,20 @@ const Typography = {
     textTransform: 'unset',
     fontWeightLight: 300,
     fontSize: 13,
-    lineHeight: 'normal'
+    lineHeight: 'normal',
+    '@media(max-width: 885px)': {
+      fontSize: 14
+    }
   }
 };
-const typography = Typography;
-
-const Palettes = {
-  primary: {
-    main: "#1e62a1",
-    light: "#5a8fd3",
-    dark: "#003972",
-    contrastText: "#ffffff"
-  },
-  secondary: {
-    main: "#0CBBE2",
-    light: "#67eeff",
-    dark: "#008bb0",
-    contrastText: "#ffffff"
-  },
-  text: {
-    primary: "rgba(16,24,64,0.87)",
-    secondary: "rgba(16,24,64,0.6)",
-    disabled: "rgba(16,24,64,0.38)"
-  },
-  error: {
-    main: "#D14343",
-    light: "#d85f5f",
-    dark: "#b51e1e",
-    contrastText: "#ffffff"
-  },
-  warning: {
-    main: "#fb8500",
-    light: "#fc9726",
-    dark: "#f85500",
-    contrastText: "#ffffff"
-  },
-  info: {
-    main: "#2d9fc5",
-    light: "#4dadce",
-    dark: "#1172a3",
-    contrastText: "#ffffff"
-  },
-  success: {
-    main: "#8fc93a",
-    dark: "#60a918",
-    light: "#a0d158",
-    contrastText: "#ffffff"
-  },
-  grey: {
-    50: "#FAFBFF",
-    100: "#F4F6FA",
-    200: "#EDEFF5",
-    300: "#E6E8F0",
-    400: "#D8DAE5",
-    500: "#C1C4D6",
-    600: "#8F95B2",
-    700: "#696F8C",
-    800: "#474D66",
-    900: "#101840",
-    A100: "#D8DAE5",
-    A200: "#C1C4D6",
-    A400: "#696F8C",
-    A700: "#101840"
-  },
-  action: {
-    active: "rgba(16, 24, 64, 0.54)",
-    hover: "rgba(16, 24, 64, 0.04)",
-    selected: "rgba(16, 24, 64, 0.08)",
-    disabled: "rgba(16, 24, 64, 0.26)",
-    disabledBackground: "rgba(16, 24, 64, 0.12)",
-    focus: "rgba(16, 24, 64, 0.12)"
-  },
-  background: {
-    default: "#f5f5f5",
-    paper: "#fff"
-  },
-  divider: "rgba(16,24,64,0.12)"
-};
-const palette = Palettes;
 
 const themeOptions = {
   palette,
   typography,
   components,
-  spacing: 8
+  spacing: 8,
+  mixins,
+  breakpoints
 };
 
 const SincoTheme = createTheme(Object.assign({}, themeOptions));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.0.1-rc.0",
+  "version": "1.0.1-rc.2",
   "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>;
+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;