@sinco/react 1.0.14-rc.29 → 1.0.14-rc.30

package/index.js

@@ -9585,25 +9585,18 @@ const components = {
   },
   MuiCheckbox: {
     variants: [{
-      props: {
-        size: "xsmall"
-      },
-      style: {
-        padding: 2
-      }
-    }, {
       props: {
         size: "small"
       },
       style: {
-        padding: 4
+        padding: 2
       }
     }, {
       props: {
         size: "medium"
       },
       style: {
-        padding: 11
+        padding: 4
       }
     }],
     defaultProps: {
@@ -9611,20 +9604,12 @@ const components = {
     }
   },
   MuiChip: {
-    variants: [{
-      props: {
-        size: "xsmall"
-      },
-      style: {
-        height: 16
-      }
-    }],
     styleOverrides: {
       sizeSmall: {
-        height: 24
+        height: 16
       },
       sizeMedium: {
-        height: 30
+        height: 24
       },
       root: {
         height: "inherit",
@@ -9664,34 +9649,45 @@ const components = {
   },
   MuiButton: {
     styleOverrides: {
-      endIcon: {
-        marginLeft: 2
-      },
-      iconSizeSmall: {
-        height: 14,
-        width: 14
-      },
-      iconSizeMedium: {
-        height: 18,
-        width: 18
-      },
-      iconSizeLarge: {
-        height: 18,
-        width: 22
-      },
       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: 18,
+          width: 18
+        },
         ".MuiSvgIcon-fontSizeMedium": {
           height: 18,
           width: 18
+        },
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
         }
       },
       sizeLarge: {
-        height: 38,
-        fontSize: 14,
+        ".MuiSvgIcon-fontSizeSmall": {
+          height: 16,
+          width: 16
+        },
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        },
         ".MuiSvgIcon-fontSizeLarge": {
           height: 20,
           width: 20
@@ -17660,6 +17656,49 @@ const FooterActionComponent = ({
   }), /*#__PURE__*/React__default.createElement(Box$2, null, labelChangeCounter), renderRightContent));
 };
 
+const PageHeaderContent = styled$1(Stack$1)(() => ({
+  backgroundColor: "#fff",
+  boxShadow: "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
+  zIndex: 100,
+  padding: "8px 24px",
+  minHeight: 39
+}));
+const PageHeaderComponent = ({
+  title,
+  subtitle,
+  actions,
+  buttonBack,
+  fixed
+}) => {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: SincoTheme
+  }, /*#__PURE__*/React__default.createElement(PageHeaderContent, {
+    position: fixed === true ? "fixed" : "relative",
+    sx: {
+      width: fixed === true ? "-webkit-fill-available" : "inherit"
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 1.5,
+    flexDirection: "row",
+    alignItems: "center"
+  }, 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, {
+    variant: "caption",
+    color: "text.secondary"
+  }, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
+    gap: 1,
+    alignItems: "center",
+    flexDirection: "row"
+  }, actions))));
+};
+
 const useProgress = timeProgress => {
   const [progress, setProgress] = useState(100);
   useEffect(() => {
@@ -23299,4 +23338,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, SincoTheme, ToastNotificationComponent, useDynamicColor };
+export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderContent, SincoTheme, ToastNotificationComponent, useDynamicColor };

package/package.json

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

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

@@ -0,0 +1 @@
+export declare const main: () => JSX.Element;

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface PageheaderProperties {
+    title?: string;
+    subtitle?: string;
+    actions?: React.ReactNode;
+    buttonBack?: React.ReactNode;
+    fixed?: boolean;
+}
+export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & 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 | keyof import("@mui/material").StackOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;
+export {};

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

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

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

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