@zesty-io/material 0.6.5 → 0.7.0

package/es/FieldTypeText/index.d.ts

@@ -1,10 +1,10 @@
-import { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { ReactNode } from 'react';
-export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+import { OutlinedTextFieldProps } from "@mui/material/TextField";
+import { ReactNode } from "react";
+export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, "variant"> {
     /**
-    * Max length of the field
-    * @default 150
-    */
+     * Max length of the field
+     * @default 150
+     */
     maxLength?: number;
     value: string;
     endLabel?: ReactNode;

package/es/FieldTypeText/index.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MuiTextField from '@mui/material/TextField';
-import { FormControl, FormLabel, Box, InputAdornment } from '@mui/material';
+import MuiTextField from "@mui/material/TextField";
+import { FormControl, FormLabel, Box, InputAdornment } from "@mui/material";
 const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, endLabel, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsx(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: endLabel })] }), _jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, InputProps: {
-                    endAdornment: (_jsxs(InputAdornment, { position: "end", sx: { fontSize: '14px' }, children: [value?.length, "/", maxLength] })),
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: {
+                    lineHeight: "inherit",
+                    fontSize: "inherit",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    "& .MuiFormLabel-asterisk": { order: 2 },
+                    mb: 0.5,
+                }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsx(Box, { sx: { order: 3, flex: 1, textAlign: "right" }, children: endLabel })] }), _jsx(MuiTextField, { size: "small", variant: "outlined", value: value, error: value?.length > maxLength, helperText: value?.length > maxLength
+                    ? "Your input is over the specified limit"
+                    : helperText, InputProps: {
+                    endAdornment: (_jsxs(InputAdornment, { position: "end", sx: { fontSize: "14px" }, children: [value?.length, "/", maxLength] })),
                 }, ...props })] }));
 };
 export default FieldTypeText;

package/es/LegacyTheme/index.d.ts

@@ -1,3 +1,2 @@
-import { Theme } from '@mui/material/styles';
-declare let theme: Theme;
+declare let theme: import("@mui/material/styles").Theme;
 export default theme;

package/es/LegacyTheme/index.js

@@ -1,8 +1,8 @@
 // No checking legacy theme to not have conflicting module augmentation
 // @ts-nocheck
-import palette from './palette';
-import typography from './typography';
-import { createTheme } from '@mui/material/styles';
+import palette from "./palette";
+import typography from "./typography";
+import { createTheme } from "@mui/material/styles";
 let theme = createTheme({
     palette,
     typography,
@@ -12,14 +12,23 @@ theme = createTheme(theme, {
         MuiAccordionSummary: {
             styleOverrides: {
                 root: {
-                    backgroundColor: '#e4e9f1',
+                    backgroundColor: "#e4e9f1",
                 },
             },
         },
         MuiButton: {
             styleOverrides: {
                 root: {
-                    minWidth: 'auto',
+                    minWidth: "auto",
+                    boxShadow: "none",
+                    textTransform: "none",
+                },
+            },
+        },
+        MuiButtonGroup: {
+            styleOverrides: {
+                root: {
+                    boxShadow: "none",
                 },
             },
         },
@@ -28,8 +37,8 @@ theme = createTheme(theme, {
                 tooltip: {
                     color: theme.palette.primary.contrastText,
                     backgroundColor: theme.palette.primary.main,
-                    fontSize: '14px',
-                    lineHeight: '20px',
+                    fontSize: "14px",
+                    lineHeight: "20px",
                 },
                 arrow: {
                     color: theme.palette.primary.main,
@@ -56,26 +65,80 @@ theme = createTheme(theme, {
         MuiCard: {
             styleOverrides: {
                 root: {
-                    overflow: 'visible',
+                    overflow: "visible",
                 },
             },
         },
         MuiCardHeader: {
             styleOverrides: {
                 root: {
-                    backgroundColor: '#e4e9f1',
+                    backgroundColor: "#e4e9f1",
+                },
+            },
+        },
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    boxSizing: "content-box",
+                    "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
+                        width: "8px",
+                        height: "8px",
+                    },
+                    "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": {
+                        backgroundColor: "#f2f4f7",
+                        borderRadius: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
+                        backgroundColor: "#d0d5dd",
+                        borderRadius: "4px",
+                    },
+                },
+            },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    padding: "0px 8px",
+                    borderRadius: "8px",
+                    backgroundColor: theme.palette.common.white,
+                    "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#F2F4F7",
+                    },
+                    "&:hover .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#F2F4F7",
+                    },
+                    "&.Mui-focused:hover .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "#FF5D0A",
+                    },
+                },
+                input: {
+                    padding: "10px 0px",
+                    ":read-only": {
+                        color: "#475467",
+                    },
+                },
+                sizeSmall: {
+                    input: {
+                        padding: "8px 0px",
+                    },
+                },
+                notchedOutline: {
+                    borderColor: "#F2F4F7",
                 },
             },
         },
-        MuiToggleButton: {
+        MuiLink: {
             styleOverrides: {
-                root: ({ ownerState, theme }) => ({
-                    backgroundColor: `${theme.palette[ownerState.color].contrastText} !important`,
-                    ...(ownerState.selected && {
-                        color: `${theme.palette[ownerState.color].contrastText} !important`,
-                        backgroundColor: `${theme.palette[ownerState.color].main} !important`,
-                    }),
-                }),
+                root: {
+                    color: theme.palette.info.dark,
+                    textDecorationColor: theme.palette.info.main,
+                    "&:hover": {
+                        textDecorationColor: theme.palette.info.dark,
+                    },
+                },
+            },
+            defaultProps: {
+                underline: "hover",
             },
         },
     },

package/es/LegacyTheme/palette.d.ts

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

package/es/LegacyTheme/palette.js

@@ -1,23 +1,23 @@
 const palette = {
     primary: {
-        main: '#404759',
-        contrastText: '#ffffff',
+        main: "#404759",
+        contrastText: "#ffffff",
     },
     secondary: {
-        main: '#497edf',
-        contrastText: '#ffffff',
+        main: "#497edf",
+        contrastText: "#ffffff",
     },
     success: {
-        main: '#75bf25',
-        contrastText: '#ffffff',
+        main: "#75bf25",
+        contrastText: "#ffffff",
     },
     warning: {
-        main: '#f17829',
-        contrastText: '#ffffff',
+        main: "#f17829",
+        contrastText: "#ffffff",
     },
     error: {
-        main: '#e53c05',
-        contrastText: '#ffffff',
+        main: "#e53c05",
+        contrastText: "#ffffff",
     },
 };
 export default palette;

package/es/theme/index.js

@@ -417,6 +417,31 @@ theme = createTheme(theme, {
                 },
             },
         },
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
+                        width: "8px",
+                        height: "8px",
+                    },
+                    "&::-webkit-scrollbar-track-piece, & *::-webkit-scrollbar-track-piece": {
+                        backgroundColor: theme.palette.grey[100],
+                        borderRadius: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
+                        backgroundColor: theme.palette.grey[300],
+                        borderRadius: "4px",
+                    },
+                },
+            },
+        },
+        MuiDivider: {
+            styleOverrides: {
+                root: {
+                    borderColor: theme.palette.border
+                }
+            }
+        }
     },
 });
 export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",