@sinco/react 1.0.15-rc.22 → 1.0.15-rc.28

package/index.css

@@ -0,0 +1,3 @@
+.color-error {
+    background-color: #feebee;
+}

package/index.js

@@ -1,10 +1,8 @@
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import React, { useState, useEffect } from 'react';
-import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded } from '@mui/icons-material';
-import { Stack, Typography, Box as Box$1, IconButton, AppBar, Toolbar, alpha } from '@mui/material';
-import Typography$1 from '@mui/material/Typography';
+import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
+import { Stack, Typography, Drawer, IconButton, AppBar, Toolbar, Box as Box$1, Divider, Button, LinearProgress, alpha } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import Drawer from '@mui/material/Drawer';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1097,31 +1095,31 @@ const components = {
     defaultProps: {
       columnHeaderHeight: 35,
       rowHeight: 32,
-      density: 'compact'
+      density: "compact"
     },
     styleOverrides: {
       iconButtonContainer: {
         fontSize: 16
       },
       columnHeaderTitle: {
-        fontFamily: 'Roboto',
+        fontFamily: "Roboto",
         fontWeight: 500,
         fontSize: 13,
         lineHeight: 1.5,
-        letterSpacing: .17
+        letterSpacing: 0.17
       },
       cell: {
-        fontFamily: 'Roboto',
+        fontFamily: "Roboto",
         fontWeight: 300,
         fontSize: 12,
         lineHeight: 1.5,
-        letterSpacing: .17,
+        letterSpacing: 0.17,
         // COMPONENTES DENTRO DE CELDAS
         ".MuiButtonBase-root": {
           lineHeight: 0,
           textTransform: "capitalize"
         },
-        // CELDA ENFOCADA  
+        // CELDA ENFOCADA
         ".MuiDataGrid-cell": {
           "&:focus": {
             outline: "transparent",
@@ -1131,17 +1129,17 @@ const components = {
       },
       // BOTOM MENU EN LAS CABECERA DE CADA COLUMNA
       menuIconButton: {
-        "svg": {
-          fontSize: '16px'
+        svg: {
+          fontSize: "16px"
         }
       },
       menu: {
-        "svg": {
-          fontSize: '16px !important'
+        svg: {
+          fontSize: "16px !important"
         },
         ".MuiMenuItem-root": {
-          minHeight: '28px',
-          height: '28px'
+          minHeight: "28px",
+          height: "28px"
         }
       },
       pinnedRows: {
@@ -1150,10 +1148,10 @@ const components = {
       root: {
         // FONT-SIZE DE CELDA EN MODO EDICION
         ".MuiInputBase-root": {
-          fontFamily: 'Roboto',
+          fontFamily: "Roboto",
           fontWeight: 300,
           fontSize: 12,
-          letterSpacing: .17,
+          letterSpacing: 0.17,
           borderRadius: "0px"
         },
         // CELDA FOCUS
@@ -1176,7 +1174,7 @@ const components = {
   },
   MuiRating: {
     defaultProps: {
-      size: 'small'
+      size: "small"
     },
     styleOverrides: {
       sizeSmall: {
@@ -1200,18 +1198,18 @@ const components = {
   MuiDrawer: {
     styleOverrides: {
       root: {
-        boxShadow: "0px 3px 1px -2px rgba(24, 39, 75, 0.20), 0px 2px 2px 0px rgba(24, 39, 75, 0.14), 0px 1px 5px 0px rgba(24, 39, 75, 0.12)",
-        '-webkit-backdrop-filter': '#f0f0f099 !important',
-        '.MuiBackdrop-root': {
-          backgroundColor: '#F0f0f099 !important'
-        }
+        boxShadow: "0px 3px 1px -2px rgba(24, 39, 75, 0.20), 0px 2px 2px 0px rgba(24, 39, 75, 0.14), 0px 1px 5px 0px rgba(24, 39, 75, 0.12)"
       }
     }
   },
   MuiDialog: {
     styleOverrides: {
       root: {
-        boxShadow: " 0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)"
+        boxShadow: " 0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)",
+        ".MuiBackdrop-root": {
+          backgroundColor: "#f0f0f099",
+          backdropFilter: "blur(2px) !important"
+        }
       }
     }
   },
@@ -1225,11 +1223,23 @@ const components = {
   },
   MuiCheckbox: {
     variants: [{
+      props: {
+        size: "large"
+      },
+      style: {
+        padding: 9,
+        "& .MuiSvgIcon-fontSizeLarge": {
+          height: 24,
+          width: 24,
+          fontSize: 24
+        }
+      }
+    }, {
       props: {
         size: "small"
       },
       style: {
-        padding: 2
+        padding: 3
       }
     }, {
       props: {
@@ -1246,13 +1256,6 @@ const components = {
   MuiChip: {
     styleOverrides: {
       sizeSmall: {
-        fontFamily: "Roboto",
-        fontSize: "10px",
-        fontStyle: "normal",
-        fontWeight: 400,
-        lineHeight: "10px",
-        letterSpacing: " 0.15px",
-        color: "text.primary",
         height: 16
       },
       sizeMedium: {
@@ -1261,13 +1264,17 @@ const components = {
       root: {
         height: "inherit",
         borderRadius: 4,
-        ".MuiChip-deleteIconSmall": {
+        ".MuiChip-deleteIconXsmall": {
           height: 12,
           width: 12
         },
-        ".MuiChip-deleteIconMedium": {
+        ".MuiChip-deleteIconSmall": {
           height: 16,
           widht: 16
+        },
+        ".MuiChip-deleteIconMedium": {
+          height: 20,
+          widht: 20
         }
       }
     }
@@ -1283,7 +1290,7 @@ const components = {
     },
     styleOverrides: {
       root: {
-        paddingY: .5,
+        paddingY: 0.5,
         paddingX: 2,
         alignItems: "center",
         border: "none"
@@ -1292,37 +1299,51 @@ const components = {
   },
   MuiButton: {
     styleOverrides: {
-      endIcon: {
+      startIcon: {
         marginLeft: 2
       },
-      iconSizeSmall: {
-        height: 14,
-        width: 14
-      },
-      iconSizeMedium: {
-        height: 18,
-        width: 18
-      },
-      iconSizeLarge: {
-        height: 18,
-        width: 22
+      endIcon: {
+        marginRight: 2
       },
       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: 16,
+          width: 16
+        },
         ".MuiSvgIcon-fontSizeMedium": {
           height: 18,
           width: 18
+        },
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
         }
       },
       sizeLarge: {
         height: 38,
-        fontSize: 14,
-        ".MuiSvgIcon-fontSizeLarge": {
-          height: 20,
-          width: 20
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        "&.MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
         }
       }
     }
@@ -1426,15 +1447,12 @@ const components = {
   MuiIconButton: {
     styleOverrides: {
       sizeSmall: {
-        fontSize: 14,
-        padding: 4
+        padding: 3
       },
       sizeMedium: {
-        fontSize: 20,
-        padding: 13
+        padding: 12
       },
       sizeLarge: {
-        fontSize: 33,
         padding: 17
       }
     }
@@ -1508,12 +1526,12 @@ const components = {
   MuiInputLabel: {
     styleOverrides: {
       asterisk: {
-        color: '#D14343'
+        color: "#D14343"
       },
       root: {
-        display: 'flex',
-        gap: '.2rem',
-        flexDirection: 'row-reverse'
+        display: "flex",
+        gap: ".2rem",
+        flexDirection: "row-reverse"
       },
       outlined: {
         "&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
@@ -1544,14 +1562,26 @@ const components = {
         size: "small"
       },
       style: {
-        padding: 2
+        padding: 3
       }
     }, {
       props: {
         size: "medium"
       },
       style: {
-        padding: 9
+        padding: 4
+      }
+    }, {
+      props: {
+        size: "large"
+      },
+      style: {
+        padding: 9,
+        "& .MuiSvgIcon-fontSizeLarge": {
+          width: 24,
+          height: 24,
+          fontSize: 24
+        }
       }
     }],
     defaultProps: {
@@ -1559,6 +1589,17 @@ const components = {
     }
   },
   MuiSwitch: {
+    variants: [{
+      props: {
+        size: "small"
+      },
+      style: {
+        height: 22,
+        ".MuiSwitch-switchBase": {
+          padding: 3
+        }
+      }
+    }],
     defaultProps: {
       size: "small"
     }
@@ -1588,286 +1629,145 @@ const components = {
 
 const palette = {
   primary: {
-    50: "#E4ECF4",
-    100: "#BCD0E3",
-    200: "#8FB1D0",
-    300: "#6392BD",
-    light: "#417AAE",
-    main: "#2063A0",
-    600: "#1C5B98",
-    700: "#18518E",
-    800: "#134784",
-    dark: "#0B3573",
-    A100: "#A5C5FF",
-    A200: "#72A4FF",
-    A400: "#3F83FF",
-    A700: "#2572FF",
-    contrastText: "#ffffff"
-  },
-  secondary: {
-    50: "#E0F7FA",
-    100: "#B3EBF2",
-    200: "#80DEEA",
-    300: "#4DD0E1",
-    light: "#26C6DA",
-    main: "#00BCD4",
-    600: "#00B6CF",
-    700: "#00ADC9",
-    800: "#00A5C3",
-    dark: "#0097B9",
-    A100: "#E2F9FF",
-    A200: "#AFEEFF",
-    A400: "#7CE3FF",
-    A700: "#63DDFF",
-    contrastText: "#ffffff"
-  },
-  error: {
-    50: "#F9E8E8",
-    100: "#F1C7C7",
-    200: "#E8A1A1",
-    300: "#DF7B7B",
-    light: "#D85F5F",
-    main: "#D14343",
-    600: "#CC3D3D",
-    700: "#C63434",
-    800: "#C02C2C",
-    dark: "#B51E1E",
-    A100: "#FFECEC",
-    A200: "#FFB9B9",
-    A400: "#FF8686",
-    A700: "#FF6D6D",
-    contrastText: "#ffffff"
-  },
-  warning: {
-    50: "#FFF0E0",
-    100: "#FEDAB3",
-    200: "#FDC280",
-    300: "#FCAA4D",
-    light: "#FC9726",
-    main: "#FB8500",
-    600: "#FA7D00",
-    700: "#FA7200",
-    800: "#F96800",
-    dark: "#F85500",
-    A100: "#FFFFFF",
-    A200: "#FFF1EB",
-    A400: "#FFCCB8",
-    A700: "#FFBA9F",
-    contrastText: "#ffffff"
-  },
-  info: {
-    50: "#E6F3F8",
-    100: "#C0E2EE",
-    200: "#96CFE2",
-    300: "#6CBCD6",
-    light: "#4DADCE",
-    main: "#2D9FC5",
-    600: "#2897BF",
-    700: "#228DB8",
-    800: "#1C83B0",
-    dark: "#1172A3",
-    A100: "#D4EFFF",
-    A200: "#A1DCFF",
-    A400: "#6ECAFF",
-    A700: "#54C1FF",
-    contrastText: "#ffffff"
-  },
-  success: {
-    50: "#F2F9E7",
-    100: "#DDEFC4",
-    200: "#C7E49D",
-    300: "#B1D975",
-    light: "#A0D158",
-    main: "#8FC93A",
-    600: "#87C334",
-    700: "#7CBC2C",
-    800: "#72B525",
-    dark: "#60A918",
-    A100: "#EDFFDE",
-    A200: "#D2FFAB",
-    A400: "#B6FF78",
-    A700: "#A9FF5E",
-    contrastText: "#ffffff"
-  },
-  grey: {
-    50: "#F7F7F8",
-    100: "#EAEBEC",
-    200: "#DCDEE0",
-    300: "#CED1D4",
-    400: "#C4C7CA",
-    500: "#B9BDC1",
-    600: "#B2B7BB",
-    700: "#AAAEB3",
-    800: "#A2A6AB",
-    900: "#93989E",
-    A100: "#FFFFFF",
-    A200: "#FFFFFF",
-    A400: "#D4EAFF",
-    A700: "#BBDDFF"
-  },
-  text: {
-    primary: "#101840de",
-    secondary: "#10184099",
-    disabled: "#10184061"
-  },
-  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"
-  },
-  common: {
-    black: '#000',
-    white: '#fff'
-  },
-  divider: "rgba(16,24,64,0.12)"
-};
-const paletteADPRO = {
-  primary: {
-    50: "#F8FAFB",
-    100: "#E6EFF0",
-    200: "#D2E3E4",
-    300: "#82C6CB",
-    400: "#2B9DA7",
-    500: "#058C97",
-    600: "#04848F",
-    700: "#047984",
-    800: "#036F7A",
-    900: "#015C69",
-    A100: "#98F0FF",
-    A200: "#65E9FF",
-    A400: "#32E1FF",
-    A700: "#32E1FF"
+    50: '#E4ECF4',
+    100: '#BCD0E3',
+    200: '#8FB1D0',
+    300: '#6392BD',
+    light: '#417AAE',
+    main: '#2063A0',
+    600: '#1C5B98',
+    700: '#18518E',
+    800: '#134784',
+    dark: '#0B3573',
+    A100: '#A5C5FF',
+    A200: '#72A4FF',
+    A400: '#3F83FF',
+    A700: '#2572FF',
+    contrastText: '#ffffff'
   },
   secondary: {
-    50: "#E0F7FA",
-    100: "#B3EBF2",
-    200: "#80DEEA",
-    300: "#4DD0E1",
-    light: "#26C6DA",
-    main: "#00BCD4",
-    600: "#00B6CF",
-    700: "#00ADC9",
-    800: "#00A5C3",
-    dark: "#0097B9",
-    A100: "#E2F9FF",
-    A200: "#AFEEFF",
-    A400: "#7CE3FF",
-    A700: "#63DDFF",
-    contrastText: "#ffffff"
+    50: '#E0F7FA',
+    100: '#B3EBF2',
+    200: '#80DEEA',
+    300: '#4DD0E1',
+    light: '#26C6DA',
+    main: '#00BCD4',
+    600: '#00B6CF',
+    700: '#00ADC9',
+    800: '#00A5C3',
+    dark: '#0097B9',
+    A100: '#E2F9FF',
+    A200: '#AFEEFF',
+    A400: '#7CE3FF',
+    A700: '#63DDFF',
+    contrastText: '#ffffff'
   },
   error: {
-    50: "#F9E8E8",
-    100: "#F1C7C7",
-    200: "#E8A1A1",
-    300: "#DF7B7B",
-    light: "#D85F5F",
-    main: "#D14343",
-    600: "#CC3D3D",
-    700: "#C63434",
-    800: "#C02C2C",
-    dark: "#B51E1E",
-    A100: "#FFECEC",
-    A200: "#FFB9B9",
-    A400: "#FF8686",
-    A700: "#FF6D6D",
-    contrastText: "#ffffff"
+    50: '#F9E8E8',
+    100: '#F1C7C7',
+    200: '#E8A1A1',
+    300: '#DF7B7B',
+    light: '#D85F5F',
+    main: '#D14343',
+    600: '#CC3D3D',
+    700: '#C63434',
+    800: '#C02C2C',
+    dark: '#B51E1E',
+    A100: '#FFECEC',
+    A200: '#FFB9B9',
+    A400: '#FF8686',
+    A700: '#FF6D6D',
+    contrastText: '#ffffff'
   },
   warning: {
-    50: "#FFF0E0",
-    100: "#FEDAB3",
-    200: "#FDC280",
-    300: "#FCAA4D",
-    light: "#FC9726",
-    main: "#FB8500",
-    600: "#FA7D00",
-    700: "#FA7200",
-    800: "#F96800",
-    dark: "#F85500",
-    A100: "#FFFFFF",
-    A200: "#FFF1EB",
-    A400: "#FFCCB8",
-    A700: "#FFBA9F",
-    contrastText: "#ffffff"
+    50: '#FFF0E0',
+    100: '#FEDAB3',
+    200: '#FDC280',
+    300: '#FCAA4D',
+    light: '#FC9726',
+    main: '#FB8500',
+    600: '#FA7D00',
+    700: '#FA7200',
+    800: '#F96800',
+    dark: '#F85500',
+    A100: '#FFFFFF',
+    A200: '#FFF1EB',
+    A400: '#FFCCB8',
+    A700: '#FFBA9F',
+    contrastText: '#ffffff'
   },
   info: {
-    50: "#E6F3F8",
-    100: "#C0E2EE",
-    200: "#96CFE2",
-    300: "#6CBCD6",
-    light: "#4DADCE",
-    main: "#2D9FC5",
-    600: "#2897BF",
-    700: "#228DB8",
-    800: "#1C83B0",
-    dark: "#1172A3",
-    A100: "#D4EFFF",
-    A200: "#A1DCFF",
-    A400: "#6ECAFF",
-    A700: "#54C1FF",
-    contrastText: "#ffffff"
+    50: '#E6F3F8',
+    100: '#C0E2EE',
+    200: '#96CFE2',
+    300: '#6CBCD6',
+    light: '#4DADCE',
+    main: '#2D9FC5',
+    600: '#2897BF',
+    700: '#228DB8',
+    800: '#1C83B0',
+    dark: '#1172A3',
+    A100: '#D4EFFF',
+    A200: '#A1DCFF',
+    A400: '#6ECAFF',
+    A700: '#54C1FF',
+    contrastText: '#ffffff'
   },
   success: {
-    50: "#F2F9E7",
-    100: "#DDEFC4",
-    200: "#C7E49D",
-    300: "#B1D975",
-    light: "#A0D158",
-    main: "#8FC93A",
-    600: "#87C334",
-    700: "#7CBC2C",
-    800: "#72B525",
-    dark: "#60A918",
-    A100: "#EDFFDE",
-    A200: "#D2FFAB",
-    A400: "#B6FF78",
-    A700: "#A9FF5E",
-    contrastText: "#ffffff"
+    50: '#F2F9E7',
+    100: '#DDEFC4',
+    200: '#C7E49D',
+    300: '#B1D975',
+    light: '#A0D158',
+    main: '#8FC93A',
+    600: '#87C334',
+    700: '#7CBC2C',
+    800: '#72B525',
+    dark: '#60A918',
+    A100: '#EDFFDE',
+    A200: '#D2FFAB',
+    A400: '#B6FF78',
+    A700: '#A9FF5E',
+    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"
+    50: '#F7F7F8',
+    100: '#EAEBEC',
+    200: '#DCDEE0',
+    300: '#CED1D4',
+    400: '#C4C7CA',
+    500: '#B9BDC1',
+    600: '#B2B7BB',
+    700: '#AAAEB3',
+    800: '#A2A6AB',
+    900: '#93989E',
+    A100: '#FFFFFF',
+    A200: '#FFFFFF',
+    A400: '#D4EAFF',
+    A700: '#BBDDFF'
   },
   text: {
-    primary: "#101840de",
-    secondary: "#10184099",
-    disabled: "#10184061"
+    primary: '#101840de',
+    secondary: '#10184099',
+    disabled: '#10184061'
   },
   action: {
-    active: "#0a12288a",
-    hover: "#0a122866",
-    selected: "#0a1228cc",
-    disabled: "#10184042",
-    disabledBackground: "#1018401f",
-    focus: "#1018401f"
+    active: '#0a12288a',
+    hover: '#0a122866',
+    selected: '#0a1228cc',
+    disabled: '#10184042',
+    disabledBackground: '#1018401f',
+    focus: '#1018401f'
   },
   background: {
     default: '#f5f5f5',
-    paper: "#fff"
+    paper: '#fff'
   },
   common: {
     black: '#000',
     white: '#fff'
   },
-  divider: "#0000001f"
+  divider: '#0000001f'
 };
 
 function _extends() {
@@ -2020,7 +1920,7 @@ const typography = {
   },
   body3: {
     fontFamily: 'Roboto',
-    fontWeight: 310,
+    fontWeight: 300,
     fontSize: 12,
     letterSpacing: 0.17,
     lineHeight: 1.2,
@@ -2136,7 +2036,24 @@ const themeAdproOptions = {
   spacing: 8,
   mixins,
   breakpoints,
-  palette: paletteADPRO
+  palette: Object.assign({
+    primary: {
+      50: '#F8FAFB',
+      100: '#E6EFF0',
+      200: '#D2E3E4',
+      300: '#82C6CB',
+      400: '#2B9DA7',
+      500: '#058C97',
+      600: '#04848F',
+      700: '#047984',
+      800: '#036F7A',
+      900: '#015C69',
+      A100: '#98F0FF',
+      A200: '#65E9FF',
+      A400: '#32E1FF',
+      A700: '#32E1FF'
+    }
+  }, palette)
 };
 
 const SincoTheme = createTheme(Object.assign({}, themeOptions));
@@ -2739,80 +2656,73 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const DrawerContainer = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignContent: 'flex-start',
-  justifyContent: 'space-between',
-  height: '100%',
-  overflow: 'hidden'
-};
-const DrawerHeader = {
-  display: 'flex',
-  alignContent: 'center',
-  justifyContent: 'space-between',
-  backgroundColor: 'secondary.main',
-  py: '12px',
-  px: '8px'
-};
-const DrawerContent = {
-  display: 'flex',
-  overflow: 'auto',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  height: '-webkit-fill-available',
-  py: '12px',
-  px: '8px'
-};
-const DrawerActions = {
-  display: 'flex',
-  alignContent: 'center',
-  justifyContent: 'flex-end',
-  borderTop: '1px solid rgba(16, 24, 64, 0.23)',
-  backgroundColor: '#F1F0EE',
-  gap: '8px',
-  mt: '4px',
-  py: '12px',
-  px: '8px'
+const borderStyles = {
+  left: {
+    borderTopRightRadius: '4px'
+  },
+  right: {
+    borderTopLeftRadius: '4px'
+  }
 };
 const DrawerComponent = ({
   title,
   children,
-  renderActions,
+  actions,
   showActions,
-  position,
+  anchor: _anchor = 'left',
   width,
   open,
-  onClose
+  onClose,
+  sx
 }) => {
   const [stateActions, setActionsState] = useState(showActions);
   const handleDrawerActions = () => {
     setActionsState(true);
   };
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: SincoTheme
-  }, /*#__PURE__*/React.createElement(Drawer, {
-    anchor: position,
+  const paperSx = borderStyles[_anchor];
+  return /*#__PURE__*/React.createElement(Drawer, {
+    anchor: _anchor,
     open: open,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Box$1, {
-    sx: DrawerContainer,
-    width: width
-  }, /*#__PURE__*/React.createElement(Box$1, {
-    sx: DrawerHeader
-  }, /*#__PURE__*/React.createElement(Typography$1, {
+    onClose: onClose,
+    sx: {
+      '& .MuiBackdrop-root': {
+        backgroundColor: '#F0f0f099 !important',
+        backdropFilter: 'blur(4px)'
+      },
+      '& .MuiDrawer-paper': Object.assign({
+        width: width
+      }, paperSx)
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    direction: "row",
+    py: 1.5,
+    px: 1,
+    bgcolor: "secondary.main"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    sx: Object.assign({}, sx),
     variant: "h6"
-  }, title), /*#__PURE__*/React.createElement(Box$1, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, title), /*#__PURE__*/React.createElement(IconButton, {
     onClick: onClose,
     size: "small"
   }, /*#__PURE__*/React.createElement(CloseIcon, {
     fontSize: "small"
-  })))), /*#__PURE__*/React.createElement(Box$1, {
-    sx: DrawerContent,
+  }))), /*#__PURE__*/React.createElement(Stack, {
+    py: 1.5,
+    px: 1,
+    overflow: "auto",
+    height: "-webkit-fill-available",
     onClick: handleDrawerActions
-  }, children), stateActions && /*#__PURE__*/React.createElement(Box$1, {
-    sx: DrawerActions
-  }, renderActions))));
+  }, children), stateActions && /*#__PURE__*/React.createElement(Stack, {
+    gap: 1,
+    mt: 0.5,
+    py: 1.5,
+    px: 1,
+    bgcolor: "#F1F0EE"
+  }, actions)));
 };
 
 const FooterActionComponent = ({
@@ -2829,22 +2739,20 @@ const FooterActionComponent = ({
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
     sx: {
-      gap: 1.5
+      gap: 1.5,
+      minHeight: "50px !important"
     }
   }, renderLeftContent, /*#__PURE__*/React.createElement(Box$1, {
     flexGrow: 1
   }), /*#__PURE__*/React.createElement(Box$1, null, labelChangeCounter), renderRightContent));
 };
 
-function PageHeaderWraps({
+function PageHeaderWrapper({
   item,
-  Color,
+  color,
   variant
 }) {
-  return /*#__PURE__*/React.createElement(Typography, {
-    variant: variant,
-    color: Color
-  }, item);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, item);
 }
 const PageHeaderComponent = ({
   title,
@@ -2871,16 +2779,16 @@ const PageHeaderComponent = ({
     gap: 1.5,
     flexDirection: "row",
     alignItems: "center"
-  }, buttonBack, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(PageHeaderWraps, {
-    Color: "text.primary",
+  }, buttonBack, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(PageHeaderWrapper, {
+    color: "text.primary",
     item: title,
     variant: "h6"
   })), subtitle && /*#__PURE__*/React.createElement(Stack, {
     alignItems: "center",
     flexDirection: "row",
     gap: 2
-  }, /*#__PURE__*/React.createElement(PageHeaderWraps, {
-    Color: "text.secondary",
+  }, /*#__PURE__*/React.createElement(PageHeaderWrapper, {
+    color: "text.secondary",
     item: subtitle,
     variant: "caption"
   })))), actions && /*#__PURE__*/React.createElement(Stack, {
@@ -2890,6 +2798,158 @@ const PageHeaderComponent = ({
   }, actions)));
 };
 
+const useProgress = timeProgress => {
+  const [progress, setProgress] = useState(100);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress(prev => {
+        if (prev <= 0) {
+          clearInterval(interval);
+        }
+        return prev - 1;
+      });
+    }, timeProgress * 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeProgress]);
+  return {
+    progressToast: progress
+  };
+};
+
+const ToastNotificationComponent = toast => {
+  const [stateOptions, setStateOptions] = useState(true);
+  const [stateToast, setStateToast] = useState(true);
+  const timeProgress = toast.time || 10;
+  const {
+    progressToast
+  } = useProgress(timeProgress);
+  const toastColorConfig = toast.type || "info";
+  const toastIconOption = {
+    success: /*#__PURE__*/React.createElement(CheckCircleRounded, null),
+    error: /*#__PURE__*/React.createElement(ErrorRounded, null),
+    warning: /*#__PURE__*/React.createElement(WarningRounded, null),
+    info: /*#__PURE__*/React.createElement(InfoRounded, null)
+  };
+  const ToastIconConfig = toastIconOption[toast.type || "info"];
+  const closeToast = () => {
+    setStateToast(false);
+  };
+  const toggleToastOptions = () => {
+    setStateOptions(prevShowOptions => !prevShowOptions);
+  };
+  useEffect(() => {
+    progressToast <= 0 && setStateToast(false);
+  }, [progressToast]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, stateToast && /*#__PURE__*/React.createElement(Stack, {
+    position: "fixed",
+    zIndex: 1400,
+    right: 16,
+    top: 16,
+    width: 370,
+    sx: {
+      boxShadow: theme => theme.shadows[8]
+    }
+  }, /*#__PURE__*/React.createElement(Box$1, {
+    padding: 1.5,
+    gap: 1.5,
+    display: "flex",
+    alignItems: "center",
+    sx: {
+      // "&.color-error": {
+      //   backgroundColor: "#FEEBEE",
+      // },
+      // "&.color-info": {
+      //   backgroundColor: "#E1F5FE",
+      // },
+      // "&.color-warning": {
+      //   backgroundColor: "#FFF3E0",
+      // },
+      // "&.color-success": {
+      //   backgroundColor: "#E8F5E9",
+      // },
+    },
+    className: `color-${toastColorConfig}`
+  }, /*#__PURE__*/React.createElement(Stack, {
+    p: 1,
+    gap: 1,
+    height: 20,
+    borderRadius: 50,
+    sx: {
+      "&.ripple-error": {
+        backgroundColor: "#D143431F"
+      },
+      "&.ripple-info": {
+        backgroundColor: "#2D9FC51F"
+      },
+      "&.ripple-warning": {
+        backgroundColor: "#FB85001F"
+      },
+      "&.ripple-success": {
+        backgroundColor: "#8FC93A1F"
+      }
+    },
+    className: `ripple-${toast.type || "info"}`
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      "&.icon-color.color-info": {
+        color: theme => theme.palette.info.main
+      },
+      "&.icon-color.color-error": {
+        color: theme => theme.palette.error.main
+      },
+      "&.icon-color.color-warning": {
+        color: theme => theme.palette.warning.main
+      },
+      "&.icon-color.color-success": {
+        color: theme => theme.palette.success.main
+      }
+    },
+    className: `icon-color color-${toast.type || "info"}`
+  }, ToastIconConfig)), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true
+  }), /*#__PURE__*/React.createElement(Stack, {
+    width: 285
+  }, /*#__PURE__*/React.createElement(Stack, {
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle2",
+    color: "text.primary"
+  }, toast.title), /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    onClick: closeToast
+  }, /*#__PURE__*/React.createElement(Close, {
+    fontSize: "small"
+  }))), /*#__PURE__*/React.createElement(Stack, {
+    gap: 0.5
+  }, /*#__PURE__*/React.createElement(Typography, {
+    color: "text.primary",
+    variant: "body2"
+  }, toast.subtitle), !stateOptions && toast.dataOpt && toast.dataOpt.length > 0 && /*#__PURE__*/React.createElement(Stack, null, toast.dataOpt.map((element, i) => /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    key: i
+  }, "\u2022 ", element)))), /*#__PURE__*/React.createElement(Stack, {
+    justifyContent: "flex-end",
+    flexDirection: "row"
+  }, toast.actions && /*#__PURE__*/React.createElement(Stack, {
+    flexDirection: "row",
+    gap: 1
+  }, toast.actions), toast.seeMore && /*#__PURE__*/React.createElement(Button, {
+    onClick: toggleToastOptions,
+    size: "small",
+    variant: "text",
+    color: toastColorConfig
+  }, stateOptions ? "Ver más" : "Ver menos", stateOptions ? /*#__PURE__*/React.createElement(KeyboardArrowDown, null) : /*#__PURE__*/React.createElement(KeyboardArrowUp, null))))), /*#__PURE__*/React.createElement(LinearProgress, {
+    color: toastColorConfig,
+    variant: "determinate",
+    value: progressToast
+  })));
+};
+
 var classof$3 = classofRaw$2;
 
 var engineIsNode = typeof process != 'undefined' && classof$3(process) == 'process';
@@ -8394,4 +8454,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWraps, SincoTheme, useDynamicColor };
+export { AdproSincoTheme, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderWrapper, SincoTheme, ToastNotificationComponent, useDynamicColor };

package/package.json

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

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

@@ -1,13 +1,15 @@
 import { ReactNode } from 'react';
-export type handleDrawerPosition = 'left' | 'right';
+import { SxProps } from '@mui/material';
+export type DrawerPosition = 'left' | 'right';
 export interface DrawerComponentProperties {
     title: string;
     children: ReactNode;
-    renderActions: ReactNode;
+    actions: ReactNode;
     showActions?: boolean;
-    position?: handleDrawerPosition;
+    anchor?: DrawerPosition;
     width: string;
     open: boolean;
     onClose: () => void;
+    sx?: SxProps;
 }
-export declare const DrawerComponent: ({ title, children, renderActions, showActions, position, width, open, onClose, }: DrawerComponentProperties) => JSX.Element;
+export declare const DrawerComponent: ({ title, children, actions, showActions, anchor, width, open, onClose, sx, }: DrawerComponentProperties) => JSX.Element;

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

@@ -7,9 +7,9 @@ export interface PageheaderProperties {
     buttonBack?: React.ReactNode;
     fixed?: boolean;
 }
-export declare function PageHeaderWraps({ item, Color, variant, }: {
+export declare function PageHeaderWrapper({ item, color, variant, }: {
     item: string | React.ReactNode;
-    Color: string;
+    color: string;
     variant: Variant;
 }): JSX.Element;
 export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "../styles/toast.css";
+export type toastType = "success" | "error" | "warning" | "info";
+export interface ToastBaseProperties {
+    type?: toastType;
+    subtitle?: string;
+    title: string;
+    time?: number | any;
+    dataOpt?: string[];
+    actions?: React.ReactNode;
+    seeMore?: boolean;
+}
+export declare const ToastNotificationComponent: (toast: ToastBaseProperties) => JSX.Element;

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

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

package/src/lib/Hooks/useProgress.d.ts

@@ -0,0 +1,3 @@
+export declare const useProgress: (timeProgress: number) => {
+    progressToast: number;
+};

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

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

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

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