@sinco/react 1.0.11-rc.1 → 1.0.11-rc.2

package/index.js

@@ -8782,8 +8782,8 @@ function createShadow(...px) {
 }
 
 // Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
-const shadows$1 = ['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$2 = shadows$1;
+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$k = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
@@ -8902,7 +8902,7 @@ Please use another name.` : formatMuiErrorMessage(18));
     mixins: createMixins(systemTheme.breakpoints, mixinsInput),
     palette,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
-    shadows: shadows$2.slice(),
+    shadows: shadows$1.slice(),
     typography: createTypography(palette, typographyInput),
     transitions: createTransitions(transitionsInput),
     zIndex: _extends({}, zIndex$1)
@@ -10959,142 +10959,6 @@ const components = {
   }
 };
 
-const breakpoints = createBreakpoints({
-  values: {
-    xs: 0,
-    sm: 600,
-    md: 960,
-    lg: 1280,
-    xl: 1920
-  }
-});
-
-const typography = {
-  fontSize: 13,
-  body3: {
-    fontFamily: 'Roboto',
-    fontWeight: 310,
-    fontSize: 12,
-    letterSpacing: 0.17,
-    lineHeight: 1.2,
-    [breakpoints.down('md')]: {
-      fontSize: 11
-    }
-  },
-  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
-  },
-  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 = {
   primary: {
     50: "#E4ECF4",
@@ -11238,6 +11102,16 @@ const palette = {
   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,
@@ -11247,7 +11121,131 @@ const mixins = {
   }
 };
 
-const shadows = ["none", "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)", "0px 1px 5px rgba(24, 39, 75, 0.12), 0px 2px 2px rgba(24, 39, 75, 0.14), 0px 3px 1px -2px rgba(24, 39, 75, 0.2)", "0px 1px 8px rgba(24, 39, 75, 0.12), 0px 3px 4px rgba(24, 39, 75, 0.14), 0px 3px 3px -2px rgba(24, 39, 75, 0.2)", "0px 2px 4px -1px rgba(24, 39, 75, 0.2), 0px 4px 5px rgba(24, 39, 75, 0.14), 0px 1px 10px rgba(24, 39, 75, 0.12)", "0px 3px 5px -1px rgba(24, 39, 75, 0.2), 0px 5px 8px rgba(24, 39, 75, 0.14), 0px 1px 14px rgba(24, 39, 75, 0.12)", "0px 3px 5px -1px rgba(24, 39, 75, 0.2), 0px 6px 10px rgba(24, 39, 75, 0.14), 0px 1px 18px rgba(24, 39, 75, 0.12)", "0px 4px 5px -2px rgba(24, 39, 75, 0.2), 0px 7px 10px 1px rgba(24, 39, 75, 0.14), 0px 2px 16px 1px rgba(24, 39, 75, 0.12)", "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)", "0px 5px 6px -3px rgba(24, 39, 75, 0.2), 0px 9px 12px 1px rgba(24, 39, 75, 0.14), 0px 3px 16px 2px rgba(24, 39, 75, 0.12)", "0px 6px 6px -3px rgba(24, 39, 75, 0.2), 0px 10px 14px 1px rgba(24, 39, 75, 0.14), 0px 4px 18px 3px rgba(24, 39, 75, 0.12)", "0px 6px 7px -4px rgba(24, 39, 75, 0.2), 0px 11px 15px 1px rgba(24, 39, 75, 0.14), 0px 4px 20px 3px rgba(24, 39, 75, 0.12)", "0px 7px 8px -4px rgba(24, 39, 75, 0.2), 0px 12px 17px 2px rgba(24, 39, 75, 0.14), 0px 5px 22px 4px rgba(24, 39, 75, 0.12)", "0px 7px 8px -4px rgba(24, 39, 75, 0.2), 0px 13px 19px 2px rgba(24, 39, 75, 0.14), 0px 5px 24px 4px rgba(24, 39, 75, 0.12)", "0px 7px 9px -4px rgba(24, 39, 75, 0.2), 0px 14px 21px 2px rgba(24, 39, 75, 0.14), 0px 5px 26px 4px rgba(24, 39, 75, 0.12)", "0px 8px 9px -5px rgba(24, 39, 75, 0.2), 0px 15px 22px 2px rgba(24, 39, 75, 0.14), 0px 6px 28px 5px rgba(24, 39, 75, 0.12)", "0px 8px 10px -5px rgba(24, 39, 75, 0.2), 0px 16px 24px 2px rgba(24, 39, 75, 0.14), 0px 6px 30px 5px rgba(24, 39, 75, 0.12)", "0px 8px 11px -5px rgba(24, 39, 75, 0.2), 0px 17px 26px 2px rgba(24, 39, 75, 0.14), 0px 6px 32px 5px rgba(24, 39, 75, 0.12)", "0px 9px 11px -5px rgba(24, 39, 75, 0.2), 0px 18px 28px 2px rgba(24, 39, 75, 0.14), 0px 7px 34px 6px rgba(24, 39, 75, 0.12)", "0px 9px 12px -6px rgba(24, 39, 75, 0.2), 0px 19px 29px 2px rgba(24, 39, 75, 0.14), 0px 7px 36px 6px rgba(24, 39, 75, 0.12)", "0px 10px 13px -6px rgba(24, 39, 75, 0.2), 0px 20px 31px 3px rgba(24, 39, 75, 0.14), 0px 8px 38px 7px rgba(24, 39, 75, 0.12)", "0px 10px 13px -6px rgba(24, 39, 75, 0.2), 0px 21px 33px 3px rgba(24, 39, 75, 0.14), 0px 8px 40px 7px rgba(24, 39, 75, 0.12)", "0px 10px 14px -6px rgba(24, 39, 75, 0.2), 0px 22px 35px 3px rgba(24, 39, 75, 0.14), 0px 8px 42px 7px rgba(24, 39, 75, 0.12)", "0px 11px 14px -7px rgba(24, 39, 75, 0.2), 0px 23px 36px 3px rgba(24, 39, 75, 0.14), 0px 9px 44px 8px rgba(24, 39, 75, 0.12)", "0px 11px 15px -7px rgba(24, 39, 75, 0.2), 0px 24px 38px 3px rgba(24, 39, 75, 0.14), 0px 9px 46px 8px rgba(24, 39, 75, 0.12)"];
+const typography = {
+  fontSize: 13,
+  body3: {
+    fontFamily: 'Roboto',
+    fontWeight: 310,
+    fontSize: 12,
+    letterSpacing: 0.17,
+    lineHeight: 1.2,
+    [breakpoints.down('md')]: {
+      fontSize: 11
+    }
+  },
+  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
+  },
+  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 themeOptions = {
   components,
@@ -11255,8 +11253,7 @@ const themeOptions = {
   palette,
   spacing: 8,
   mixins,
-  breakpoints,
-  shadows
+  breakpoints
 };
 
 const SincoTheme = createTheme(Object.assign({}, themeOptions));
@@ -16646,7 +16643,7 @@ var EmptyStateImageUrls;
 (function (EmptyStateImageUrls) {
   EmptyStateImageUrls["error"] = "error";
   EmptyStateImageUrls["search"] = "search";
-  EmptyStateImageUrls["noResult"] = "noResult";
+  EmptyStateImageUrls["noresult"] = "noresult";
   EmptyStateImageUrls["create"] = "create";
 })(EmptyStateImageUrls || (EmptyStateImageUrls = {}));
 const EmptyStateComponent = ({
@@ -17159,6 +17156,15 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
 }), 'Close');
 default_1 = Close.default = _default;
 
+const stylesDrawer = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignContent: 'flex-start',
+  justifyContent: 'space-between',
+  width: '530px',
+  height: '100%',
+  overflow: 'hidden'
+};
 const stylesDrawerHeader = {
   display: 'flex',
   alignContent: 'center',
@@ -17187,31 +17193,22 @@ const stylesDrawerActions = {
   py: '12px',
   px: '8px'
 };
-const stylesDrawer = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignContent: 'flex-start',
-  justifyContent: 'space-between',
-  width: '530px',
-  height: '100%',
-  overflow: 'hidden'
-};
 const DrawerComponent = ({
-  open,
-  onClose,
-  anchor,
   title,
   content,
-  actions
+  actions,
+  position,
+  open,
+  onClose
 }) => {
-  const [stateActions, setStateActions] = useState(false);
-  const handleStateActions = () => {
-    setStateActions(true);
+  const [stateActions, setActionsState] = useState(false);
+  const handleDrawerAcciones = () => {
+    setActionsState(true);
   };
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: SincoTheme
   }, /*#__PURE__*/React__default.createElement(Drawer$1, {
-    anchor: anchor,
+    anchor: position,
     open: open,
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(Box$2, {
@@ -17226,21 +17223,21 @@ const DrawerComponent = ({
   }, /*#__PURE__*/React__default.createElement(default_1, {
     fontSize: "small"
   })))), /*#__PURE__*/React__default.createElement(Box$2, {
-    onClick: handleStateActions,
+    onClick: handleDrawerAcciones,
     sx: stylesDrawerContent
   }, content), stateActions && /*#__PURE__*/React__default.createElement(Box$2, {
     sx: stylesDrawerActions
   }, actions))));
 };
 
-const ToastContent = styled$1(Stack$1)(() => ({
+const ToastContainer = styled$1(Stack$1)(() => ({
   position: 'fixed',
   zIndex: 1400,
   boxShadow: '0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)',
   right: 16,
   marginTop: 16
 }));
-const ContentBox = styled$1(Box$2)(({
+const ToastContent = styled$1(Box$2)(({
   theme
 }) => ({
   padding: theme.spacing(1.5),
@@ -17280,7 +17277,7 @@ const RippleIcon = styled$1(Stack$1)(({
     backgroundColor: '#8FC93A1F'
   }
 }));
-const ContentIcon = styled$1(Stack$1)(({
+const ToastIconContainer = styled$1(Stack$1)(({
   theme
 }) => ({
   '&.icon-color.color-info': {
@@ -17301,13 +17298,13 @@ const ToastNotification = toast => {
   const [stateOptions, setStateOptions] = useState(true);
   const [progress, setProgress] = useState(100);
   const timeProgress = toast.time || 8000;
-  const IconMap = {
+  const toastIconOption = {
     success: /*#__PURE__*/React__default.createElement(CheckCircleRounded, null),
     error: /*#__PURE__*/React__default.createElement(ErrorRounded, null),
     warning: /*#__PURE__*/React__default.createElement(WarningRounded, null),
     info: /*#__PURE__*/React__default.createElement(InfoRounded, null)
   };
-  const ToastIcon = IconMap[toast.type || 'info'];
+  const ToastIconConfig = toastIconOption[toast.type || 'info'];
   const toastColorOption = {
     success: 'success',
     error: 'error',
@@ -17318,10 +17315,9 @@ const ToastNotification = toast => {
   const closeToast = () => {
     setStateToast(false);
   };
-  const toggleOptions = () => {
+  const toggleToastOptions = () => {
     setStateOptions(prevShowOptions => !prevShowOptions);
   };
-  const seeOptions = toast.seeMore;
   useEffect(() => {
     let seconds = 0;
     const interval = setInterval(() => {
@@ -17346,15 +17342,15 @@ const ToastNotification = toast => {
     right: 16,
     position: "absolute",
     zIndex: 1400
-  }, /*#__PURE__*/React__default.createElement(ToastContent, {
+  }, /*#__PURE__*/React__default.createElement(ToastContainer, {
     position: 'fixed'
-  }, /*#__PURE__*/React__default.createElement(ContentBox, {
+  }, /*#__PURE__*/React__default.createElement(ToastContent, {
     className: `color-${toast.type || 'info'}`
   }, toast && /*#__PURE__*/React__default.createElement(RippleIcon, {
     className: `ripple-${toast.type || 'info'}`
-  }, /*#__PURE__*/React__default.createElement(ContentIcon, {
+  }, /*#__PURE__*/React__default.createElement(ToastIconContainer, {
     className: `icon-color color-${toast.type || 'info'}`
-  }, ToastIcon)), /*#__PURE__*/React__default.createElement(Divider$1, {
+  }, ToastIconConfig)), /*#__PURE__*/React__default.createElement(Divider$1, {
     orientation: "vertical",
     flexItem: true
   }), /*#__PURE__*/React__default.createElement(Stack$1, {
@@ -17404,8 +17400,8 @@ const ToastNotification = toast => {
   }, toast.actions && /*#__PURE__*/React__default.createElement(Stack$1, {
     flexDirection: "row",
     gap: 1
-  }, toast.actions), seeOptions && /*#__PURE__*/React__default.createElement(Button$1, {
-    onClick: toggleOptions,
+  }, toast.actions), toast.seeMore && /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: toggleToastOptions,
     size: "small",
     variant: "text",
     color: toastColorConfig,
@@ -17421,31 +17417,26 @@ const ToastNotification = toast => {
   })))));
 };
 
-const PageHeaderContent = styled$1(Stack$1)(({
+const PageContent = styled$1(Stack$1)(({
   theme
 }) => ({
-  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)',
+  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',
+  padding: "8px 24px",
+  justifyContent: "space-between",
   minHeight: 39,
-  position: 'fixed',
-  width: '100%'
+  position: "fixed",
+  width: "100%"
 }));
-const PageHeaderComponent = ({
-  title,
-  subtitle,
-  actions,
-  buttonBack
-}) => {
+const PageHeader = page => {
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: SincoTheme
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       minHeight: 56
     }
-  }, /*#__PURE__*/React__default.createElement(PageHeaderContent, null, /*#__PURE__*/React__default.createElement(Stack$1, {
+  }, /*#__PURE__*/React__default.createElement(PageContent, null, /*#__PURE__*/React__default.createElement(Stack$1, {
     width: "90%",
     justifyContent: "space-between",
     flexDirection: "row",
@@ -17454,42 +17445,17 @@ const PageHeaderComponent = ({
     gap: 1.5,
     flexDirection: "row",
     alignItems: "center"
-  }, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+  }, page.buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "h6",
     color: "text.primary"
-  }, title), /*#__PURE__*/React__default.createElement(Typography$1, {
+  }, page.title), /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "caption",
     color: "text.secondary"
-  }, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
+  }, page.subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
     gap: 1,
     alignItems: "center",
     flexDirection: "row"
-  }, actions)))));
-};
-
-const UseDynamicColor = url => {
-  const [primary, setPrimary] = useState(SincoTheme.palette.primary);
-  const [secondary, setSecondary] = useState(SincoTheme.palette.secondary);
-  const [background, setBackground] = useState(SincoTheme.palette.background);
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    DynamicColor(url).then(({
-      primaryColor,
-      secondaryColor,
-      backgroundColor
-    }) => {
-      setPrimary(primaryColor);
-      setSecondary(secondaryColor);
-      setBackground(backgroundColor);
-      setLoading(true);
-    });
-  }, [url]);
-  SincoTheme.palette.primary = primary;
-  SincoTheme.palette.secondary = secondary;
-  SincoTheme.palette.background = background;
-  return {
-    loading
-  };
+  }, page.actions)))));
 };
 
 var classof$2 = classofRaw$2;
@@ -22877,7 +22843,7 @@ const DynamicColor = async src => {
   const imageElement = document.createElement("img");
   imageElement.src = src;
   const dynamicPalette = await themeFromImage(imageElement);
-  const getTonalPalette = color => {
+  const extractHctInstance = color => {
     const {
       hue,
       chroma,
@@ -22893,8 +22859,8 @@ const DynamicColor = async src => {
     dark,
     light
   } = dynamicPalette.schemes;
-  const primaryMain = getTonalPalette(primary);
-  const secondaryMain = getTonalPalette(secondary);
+  const primaryMain = extractHctInstance(primary);
+  const secondaryMain = extractHctInstance(secondary);
   const primaryLight = hexFromArgb(dark.primary);
   const primaryDark = hexFromArgb(light.primary);
   const secondaryLight = hexFromArgb(dark.secondary);
@@ -22922,4 +22888,29 @@ const DynamicColor = async src => {
   };
 };
 
-export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, PageHeaderComponent, PageHeaderContent, SincoTheme, ToastNotification, UseDynamicColor };
+const useDynamicColor = url => {
+  const [primary, setPrimary] = useState(SincoTheme.palette.primary);
+  const [secondary, setSecondary] = useState(SincoTheme.palette.secondary);
+  const [background, setBackground] = useState(SincoTheme.palette.background);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    DynamicColor(url).then(({
+      primaryColor,
+      secondaryColor,
+      backgroundColor
+    }) => {
+      setPrimary(primaryColor);
+      setSecondary(secondaryColor);
+      setBackground(backgroundColor);
+      setLoading(true);
+    });
+  }, [url]);
+  SincoTheme.palette.primary = primary;
+  SincoTheme.palette.secondary = secondary;
+  SincoTheme.palette.background = background;
+  return {
+    loading
+  };
+};
+
+export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, PageContent, PageHeader, SincoTheme, ToastNotification, useDynamicColor };

package/package.json

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

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-export type Anchor = 'left' | 'right';
+export type handleDrawerPosition = 'left' | 'right';
 export interface DrawerComponentProperties {
-    open: boolean;
-    onClose: () => void;
-    anchor?: Anchor;
     title: string;
     content: ReactNode;
     actions: ReactNode;
+    position?: handleDrawerPosition;
+    open: boolean;
+    onClose: () => void;
 }
-export declare const DrawerComponent: ({ open, onClose, anchor, title, content, actions, }: DrawerComponentProperties) => JSX.Element;
+export declare const DrawerComponent: ({ title, content, actions, position, open, onClose, }: DrawerComponentProperties) => JSX.Element;

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

@@ -1,15 +1,15 @@
 import { ReactNode } from 'react';
+export type EmptyStateStates = 'create' | 'error' | 'noresult' | 'search';
+export declare enum EmptyStateImageUrls {
+    error = "error",
+    search = "search",
+    noresult = "noresult",
+    create = "create"
+}
 export interface EmptyStateProperties {
     state?: EmptyStateStates;
     title?: string;
     content?: string;
     actions?: ReactNode;
 }
-export type EmptyStateStates = 'create' | 'error' | 'noResult' | 'search';
-export declare enum EmptyStateImageUrls {
-    error = "error",
-    search = "search",
-    noResult = "noResult",
-    create = "create"
-}
 export declare const EmptyStateComponent: ({ state, title, content, actions, }: EmptyStateProperties) => JSX.Element;

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

@@ -1,5 +1,11 @@
-import React from 'react';
-export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+import React from "react";
+interface Pageheader {
+    title: string;
+    subtitle?: string;
+    actions?: React.ReactNode;
+    buttonBack?: React.ReactNode;
+}
+export declare const PageContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: React.ReactNode;
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
@@ -9,11 +15,5 @@ export declare const PageHeaderContent: import("@emotion/styled").StyledComponen
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "direction" | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "spacing" | "divider" | "useFlexGap" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-interface PageheaderProperties {
-    title?: string;
-    subtitle?: string;
-    actions?: React.ReactNode;
-    buttonBack?: React.ReactNode;
-}
-export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, }: PageheaderProperties) => JSX.Element;
+export declare const PageHeader: (page: Pageheader) => JSX.Element;
 export {};

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

@@ -1,11 +1,12 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
+import React from 'react';
 export interface Option {
 }
 export interface ToastNotificationProperties {
     type?: string;
+    subtitle?: string;
     time?: number | any;
     title?: string;
-    subtitle?: string;
     dataOpt?: Option[];
     actions?: React.ReactNode;
     seeMore?: boolean;

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

@@ -1,3 +1,3 @@
-export declare const UseDynamicColor: (url: string) => {
+export declare const useDynamicColor: (url: string) => {
     loading: boolean;
 };