@zesty-io/material 0.2.0 → 0.2.3

package/es/FieldTypeDate/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
-export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+import { DesktopDatePickerProps } from '@mui/x-date-pickers';
+export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
     helperText?: string;
     error?: boolean;
     required?: boolean;

package/es/FieldTypeDate/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker } from '@mui/x-date-pickers';
 import { FormControl, FormLabel, TextField } from '@mui/material';
 ;
 const FieldTypeDate = ({ label, helperText, error, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error }), ...props }) })] }));
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DesktopDatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
 };
 export default FieldTypeDate;

package/es/FieldTypeDateTime/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
-export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+import { DesktopDateTimePickerProps } from '@mui/x-date-pickers';
+export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<Date, Date>, 'renderInput'> {
     helperText?: string;
     error?: boolean;
     required?: boolean;

package/es/FieldTypeDateTime/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { DesktopDateTimePicker } from '@mui/x-date-pickers';
 import { TextField, FormControl, FormLabel } from '@mui/material';
 ;
 const FieldTypeDateTime = ({ label, helperText, error, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DateTimePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error }), ...props }) })] }));
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DesktopDateTimePicker, { "data-testid": "zds-date-time-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
 };
 export default FieldTypeDateTime;

package/es/FieldTypeSort/index.d.ts

@@ -3,5 +3,5 @@ import { OutlinedTextFieldProps } from '@mui/material/TextField';
 export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     value: string;
 }
-declare const FieldTypeSort: ({ label, value, InputProps, required, ...props }: FieldTypeSortProps) => JSX.Element;
+declare const FieldTypeSort: ({ label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => JSX.Element;
 export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -3,17 +3,29 @@ import MuiTextField from '@mui/material/TextField';
 import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-const FieldTypeSort = ({ label, value, InputProps, required, ...props }) => {
-    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, InputProps: {
+const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, InputProps: {
                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                                // References input via event in order to modify its value
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                                input.value = String(+input.value - 1);
+                                const newValue = String(+input.value - 1);
+                                // Updates internal input value in case component is not controlled
+                                input.value = newValue;
+                                // Mocks an event change
+                                const event = { target: { value: newValue } };
+                                onChange && onChange(event);
                             }, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
                     endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                                // References input via event in order to modify its value
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                                input.value = String(+input.value + 1);
+                                const newValue = String(+input.value + 1);
+                                // Updates internal input value in case component is not controlled
+                                input.value = newValue;
+                                // Mocks an event change
+                                const event = { target: { value: newValue } };
+                                onChange && onChange(event);
                             }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
                     // Spread props at the end to allow Input prop overrides
                     ...InputProps,

package/es/FieldTypeUrl/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useState } from 'react';
 import MuiTextField from '@mui/material/TextField';
 import { FormControl, FormLabel, Box } from '@mui/material';
 const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
-    const inputRef = useRef(null);
+    // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
+    const [inputRef, setInputRef] = useState();
     return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
-                    ref: inputRef,
+                    ref: (inputRef) => setInputRef(inputRef),
                     // Spread props at the end to allow inputProps prop overrides
                     ...inputProps,
-                }, error: (value && !inputRef.current?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
+                }, error: (value && !inputRef?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
 };
 export default FieldTypeUrl;

package/es/LegacyTheme/index.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@mui/material/styles';
+declare let theme: Theme;
+export default theme;

package/es/LegacyTheme/index.js

@@ -0,0 +1,81 @@
+import palette from './palette';
+import typography from './typography';
+import { createTheme } from '@mui/material/styles';
+let theme = createTheme({
+    palette,
+    typography,
+});
+theme = createTheme(theme, {
+    components: {
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#e4e9f1',
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    minWidth: 'auto',
+                },
+            },
+        },
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: {
+                    color: theme.palette.primary.contrastText,
+                    backgroundColor: theme.palette.primary.main,
+                    fontSize: '14px',
+                    lineHeight: '20px',
+                },
+                arrow: {
+                    color: theme.palette.primary.main,
+                },
+            },
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: theme.palette.primary.contrastText,
+                },
+            },
+        },
+        MuiFormLabel: {
+            styleOverrides: {
+                root: {
+                    color: theme.palette.primary.dark,
+                },
+                asterisk: {
+                    color: theme.palette.error.main,
+                },
+            },
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    overflow: 'visible',
+                },
+            },
+        },
+        MuiCardHeader: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#e4e9f1',
+                },
+            },
+        },
+        MuiToggleButton: {
+            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`,
+                    }),
+                }),
+            },
+        },
+    },
+});
+export default theme;

package/es/LegacyTheme/palette.d.ts

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

package/es/LegacyTheme/palette.js

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

package/es/LegacyTheme/typography.d.ts

@@ -0,0 +1,3 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+declare const typography: TypographyVariantsOptions;
+export default typography;

package/es/LegacyTheme/typography.js

@@ -0,0 +1,4 @@
+const typography = {
+    fontFamily: "'Mulish'",
+};
+export default typography;

package/es/index.d.ts

@@ -1,3 +1,4 @@
+export { default as legacyTheme } from './LegacyTheme';
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
 export { default as FieldTypeSort } from './FieldTypeSort';

package/es/index.js

@@ -1,3 +1,4 @@
+export { default as legacyTheme } from './LegacyTheme';
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
 export { default as FieldTypeSort } from './FieldTypeSort';

package/es/theme/index.js

@@ -7,66 +7,42 @@ let theme = createTheme({
 });
 theme = createTheme(theme, {
     components: {
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    minWidth: 'auto',
-                },
-            },
-        },
-        MuiTooltip: {
-            styleOverrides: {
-                tooltip: {
-                    color: theme.palette.primary.contrastText,
-                    backgroundColor: theme.palette.primary.main,
-                    fontSize: '14px',
-                    lineHeight: '20px',
-                },
-                arrow: {
-                    color: theme.palette.primary.main,
-                },
-            },
-        },
-        MuiInputBase: {
+        MuiFormLabel: {
             styleOverrides: {
                 root: {
-                    backgroundColor: theme.palette.primary.contrastText,
+                    ...theme.typography.body2,
                 },
             },
         },
-        MuiFormLabel: {
+        MuiTab: {
             styleOverrides: {
                 root: {
-                    color: theme.palette.primary.dark,
-                },
-                asterisk: {
-                    color: theme.palette.error.main,
+                    borderBottom: 2,
+                    borderColor: theme.palette.grey[100],
+                    borderStyle: "solid",
                 },
             },
         },
-        MuiCard: {
+        MuiCardHeader: {
             styleOverrides: {
                 root: {
-                    overflow: 'visible',
+                    padding: "16px 16px 0px",
                 },
             },
         },
-        MuiCardHeader: {
+        MuiCardContent: {
             styleOverrides: {
                 root: {
-                    backgroundColor: '#e4e9f1',
+                    padding: "8px 16px 16px",
+                    ":last-child": {
+                        paddingBottom: "16px",
+                    },
                 },
             },
         },
-        MuiToggleButton: {
-            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`,
-                    }),
-                }),
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true,
             },
         },
     },

package/es/theme/palette.d.ts

@@ -1,3 +1,15 @@
+import { Color } from '@mui/material';
 import { PaletteOptions } from '@mui/material/styles';
+declare module '@mui/material/styles' {
+    interface PaletteOptions {
+        red?: Partial<Color>;
+        deepPurple?: Partial<Color>;
+        deepOrange?: Partial<Color>;
+        pink?: Partial<Color>;
+        blue?: Partial<Color>;
+        green?: Partial<Color>;
+        purple?: Partial<Color>;
+    }
+}
 declare const palette: PaletteOptions;
 export default palette;

package/es/theme/palette.js

@@ -1,36 +1,136 @@
 const palette = {
     primary: {
-        main: '#404759',
-        contrastText: '#ffffff',
-    },
-    secondary: {
-        main: '#497edf',
-        contrastText: '#ffffff',
+        main: "#FF5D03",
+        dark: "#EC4A0A",
+        light: "#FD853A",
     },
     success: {
-        main: '#75bf25',
-        contrastText: '#ffffff',
+        main: "#12B76A",
+        dark: "#027A48",
+        light: "#D1FADF",
     },
     warning: {
-        main: '#f17829',
-        contrastText: '#ffffff',
+        main: "#F79009",
+        dark: "B54708",
+        light: "#FEF0C7",
     },
     error: {
-        main: '#e53c05',
-        contrastText: '#ffffff',
-    },
-    // action: {
-    //   active: 'rgba(0,0,0,54)',
-    //   hover: 'rgba(0,0,0,0.04)',
-    //   hoverOpacity: 0.04,
-    //   selected: 'rgba(0,0,0,0.08)',
-    //   selectedOpacity: 0.08,
-    //   disabled: 'rgba(26, 32, 44, 0.4)',
-    //   disabledBackground: 'rgba(26, 32, 44, 0.12)',
-    //   disabledOpacity: 0.4,
-    //   focus: 'rgba(0,0,0,0.12)',
-    //   focusOpacity: 0.12,
-    //   activatedOpacity: 0.12,
-    // },
+        main: "#F04438",
+        dark: "#B42318",
+        light: "#FECDCA",
+    },
+    info: {
+        main: "#0BA5EC",
+        dark: "#026AA2",
+        light: "#7CD4FD",
+    },
+    text: {
+        primary: "#101828",
+        secondary: "#475467",
+    },
+    grey: {
+        50: "#F9FAFB",
+        100: "#F2F4F7",
+        200: "#E4E7EC",
+        300: "#D0D5DD",
+        400: "#98A2B3",
+        500: "#667085",
+        600: "#475467",
+        700: "#344054",
+        800: "#1D2939",
+        900: "#101828",
+    },
+    deepPurple: {
+        50: '#F8F9FC',
+        100: '#EAECF5',
+        200: '#C8CCE5',
+        300: '#9EA5D1',
+        400: "#4E5BA6",
+        500: '#4E5BA6',
+        600: '#3E4784',
+        700: '#363F72',
+        800: '#293056',
+        900: '#101323'
+    },
+    deepOrange: {
+        50: "#FFF6ED",
+        100: "#FFEAD5",
+        200: "#FDDCAB",
+        300: "#FEB273",
+        400: "#FD853A",
+        500: "#FF5C08",
+        600: "#EC4A0A",
+        700: "#C4320A",
+        800: "#9C2A10",
+        900: "#7E2410",
+    },
+    red: {
+        50: '#FEF3F2',
+        100: '#FEE4E2',
+        200: '#FECDCA',
+        300: '#FDA29B',
+        400: '#F97066',
+        500: '#F04438',
+        600: '#D92D20',
+        700: '#B42318',
+        800: '#912018',
+        900: '#7A271A',
+    },
+    pink: {
+        50: '#FDF2FA',
+        100: '#FCE7F6',
+        200: '#FCCEEE',
+        300: '#FAA7E0',
+        400: "#F670C7",
+        500: '#EE46BC',
+        600: '#DD2590',
+        700: '#C11574',
+        800: '#9E165F',
+        900: '#851651',
+    },
+    blue: {
+        50: '#F0F9FF',
+        100: "#E0F2FE",
+        200: '#B9E6FE',
+        300: '#7CD4FD',
+        400: "#36BFFA",
+        500: '#0BA5EC',
+        600: '#0086C9',
+        700: '#026AA2',
+        800: '#065986',
+        900: '#0B4A6F',
+    },
+    green: {
+        50: '#ECFDF3',
+        100: "#D1FADF",
+        200: '#A6F4C5',
+        300: '#6CE9A6',
+        400: "#32D583",
+        500: '#12B76A',
+        600: '#039855',
+        700: '#027A48',
+        800: '#05603A',
+        900: '#054F31',
+    },
+    purple: {
+        50: '#F3E5F5',
+        100: '#E1BEE7',
+        200: '#CE93D8',
+        300: '#BA68C8',
+        400: '#AB47BC',
+        500: '#9C27B0',
+        600: '#8E24AA',
+        700: '#7B1FA2',
+        800: '#6A1B9A',
+        900: '#4A148C',
+    },
+    action: {
+        active: "rgba(16, 24, 40, 0.40)",
+        hover: "rgba(16, 24, 40, 0.04)",
+        selected: "rgba(16, 24, 40, 0.08)",
+        disabled: "rgba(16, 24, 40, 0.26)",
+        disabledBackground: "rgba(16, 24, 40, 0.12)",
+        focus: "rgba(16, 24, 40, 0.12)",
+    }
 };
 export default palette;

package/es/theme/typography.d.ts

@@ -1,3 +1,9 @@
 import { TypographyVariantsOptions } from '@mui/material/styles';
+import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
+declare module '@mui/material/styles' {
+    interface TypographyVariantsOptions {
+        body3?: TypographyStyleOptions;
+    }
+}
 declare const typography: TypographyVariantsOptions;
 export default typography;

package/es/theme/typography.js

@@ -1,4 +1,57 @@
 const typography = {
     fontFamily: "'Mulish'",
+    h1: {
+        fontSize: "36px",
+        lineHeight: "44px",
+    },
+    h2: {
+        fontSize: "32px",
+        lineHeight: "40px",
+    },
+    h3: {
+        fontSize: "28px",
+        lineHeight: "36px",
+    },
+    h4: {
+        fontSize: "24px",
+        lineHeight: "32px",
+    },
+    h5: {
+        fontSize: "20px",
+        lineHeight: "28px",
+    },
+    h6: {
+        fontSize: "16px",
+        lineHeight: "22px",
+    },
+    body1: {
+        fontSize: '16px',
+        lineHeight: '24px',
+    },
+    body2: {
+        fontSize: '14px',
+        lineHeight: '20px',
+    },
+    body3: {
+        fontSize: '12px',
+        lineHeight: '18px',
+        letterSpacing: '0.15px',
+    },
+    subtitle1: {
+        fontSize: '16px',
+        lineHeight: "28px",
+    },
+    subtitle2: {
+        fontSize: '14px',
+        lineHeight: "22px",
+    },
+    caption: {
+        fontSize: '20px',
+        lineHeight: "20px",
+    },
+    overline: {
+        fontSize: "12px",
+        letterSpacing: "1px",
+    },
 };
 export default typography;

package/package.json

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

package/src/FieldTypeDate/index.tsx

@@ -1,9 +1,9 @@
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker, DatePickerProps} from '@mui/x-date-pickers/DatePicker';
+import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers';
 import { FormControl, FormLabel, TextField } from '@mui/material';
 
-export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
   helperText?: string;
   error?: boolean;
   required?: boolean;
@@ -14,13 +14,14 @@ const FieldTypeDate = ({label, helperText, error, required, ...props}: FieldType
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <DatePicker
+        <DesktopDatePicker
           data-testid="zds-date-picker"
           renderInput={(params) => 
             <TextField
               {...params}
               helperText={helperText}
               error={error}
+              size="small"
             />
           }
           // Spread props at the end to allow prop overrides

package/src/FieldTypeDateTime/index.tsx

@@ -1,9 +1,9 @@
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DateTimePicker, DateTimePickerProps} from '@mui/x-date-pickers/DateTimePicker';
+import { DesktopDateTimePicker, DesktopDateTimePickerProps } from '@mui/x-date-pickers';
 import { TextField, FormControl, FormLabel } from '@mui/material';
 
-export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<Date, Date>, 'renderInput'> {
   helperText?: string;
   error?: boolean;
   required?: boolean;
@@ -14,14 +14,15 @@ const FieldTypeDateTime = ({label, helperText, error, required, ...props}: Field
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <DateTimePicker
-          data-testid="zds-date-picker"
+        <DesktopDateTimePicker
+          data-testid="zds-date-time-picker"
           renderInput={(params) => 
             <TextField
               
               {...params}
               helperText={helperText}
               error={error}
+              size="small"
             />
           }
           // Spread props at the end to allow prop overrides

package/src/FieldTypeSort/index.tsx

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
@@ -7,7 +8,7 @@ export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTypeSortProps) => {
+const FieldTypeSort = ({label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => {
   return (
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
@@ -16,6 +17,7 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
         variant='outlined'
         type='number'
         value={value}
+        onChange={onChange}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
@@ -23,9 +25,15 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
                 size="small"
                 variant="contained"
                 onClick={(e) => {
-                  // References input via event in order to modify its value
+                  e.stopPropagation();
+                  // References input via click event in order to obtain its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  input.value = String(+input.value - 1)
+                  const newValue = String(+input.value - 1)
+                  // Updates internal input value in case component is not controlled
+                  input.value = newValue
+                  // Mocks an event change
+                  const event = {target: {value: newValue}}
+                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
                 }}><RemoveIcon fontSize='small' />
               </Button>
             </InputAdornment>
@@ -36,9 +44,15 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
                 size="small"
                 variant="contained"
                 onClick={(e) => {
-                  // References input via event in order to modify its value
+                  e.stopPropagation();
+                  // References input via click event in order to obtain its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  input.value = String(+input.value + 1)
+                  const newValue = String(+input.value + 1)
+                  // Updates internal input value in case component is not controlled
+                  input.value = newValue
+                  // Mocks an event change
+                  const event = {target: {value: newValue}}
+                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
                 }}><AddIcon fontSize='small' />
               </Button>
             </InputAdornment>

package/src/FieldTypeUrl/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useState } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { FormControl, FormLabel, Box } from '@mui/material';
 
@@ -12,7 +12,8 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
 }
 
 const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+  // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
+  const [inputRef, setInputRef] = useState<HTMLInputElement>();
 
   return (
     <FormControl fullWidth required={required}>
@@ -27,12 +28,12 @@ const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inp
         variant='outlined'
         value={value}
         inputProps={{
-          ref: inputRef,
+          ref: (inputRef: HTMLInputElement) => setInputRef(inputRef),
           // Spread props at the end to allow inputProps prop overrides
           ...inputProps,
         }}
-        error={(value && !inputRef.current?.validity.valid) || value?.length > maxLength}
-        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText}
+        error={(value && !inputRef?.validity.valid) || value?.length > maxLength}
+        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText}
         // Spread props at the end to allow prop overrides
         {...props}
       />

package/src/LegacyTheme/index.ts

@@ -0,0 +1,88 @@
+import palette from './palette';
+import typography from './typography';
+import { createTheme, Theme } from '@mui/material/styles';
+
+let theme: Theme = createTheme({
+  palette,
+  typography,
+});
+
+theme = createTheme(theme, {
+  components: {
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#e4e9f1',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          minWidth: 'auto',
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.palette.primary.contrastText,
+          backgroundColor: theme.palette.primary.main,
+          fontSize: '14px',
+          lineHeight: '20px',
+        },
+        arrow: {
+          color: theme.palette.primary.main,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.primary.contrastText,
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.primary.dark,
+        },
+        asterisk: {
+          color: theme.palette.error.main,
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          overflow: 'visible',
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#e4e9f1',
+        },
+      },
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }: any) => ({
+          backgroundColor: `${
+            theme.palette[ownerState.color].contrastText
+          } !important`,
+          ...(ownerState.selected && {
+            color: `${theme.palette[ownerState.color].contrastText} !important`,
+            backgroundColor: `${
+              theme.palette[ownerState.color].main
+            } !important`,
+          }),
+        }),
+      },
+    },
+  },
+});
+
+export default theme;

package/src/LegacyTheme/palette.ts

@@ -0,0 +1,25 @@
+import { PaletteOptions } from '@mui/material/styles';
+const palette: PaletteOptions = {
+  primary: {
+    main: '#404759',
+    contrastText: '#ffffff',
+  },
+  secondary: {
+    main: '#497edf',
+    contrastText: '#ffffff',
+  },
+  success: {
+    main: '#75bf25',
+    contrastText: '#ffffff',
+  },
+  warning: {
+    main: '#f17829',
+    contrastText: '#ffffff',
+  },
+  error: {
+    main: '#e53c05',
+    contrastText: '#ffffff',
+  },
+};
+
+export default palette;

package/src/LegacyTheme/typography.ts

@@ -0,0 +1,7 @@
+import { TypographyVariantsOptions } from '@mui/material/styles';
+
+const typography: TypographyVariantsOptions = {
+  fontFamily: "'Mulish'",
+};
+
+export default typography;

package/src/index.ts

@@ -1,3 +1,4 @@
+export { default as legacyTheme } from './LegacyTheme';
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
 export { default as FieldTypeSort } from './FieldTypeSort';

package/src/theme/index.ts

@@ -9,70 +9,42 @@ let theme: Theme = createTheme({
 
 theme = createTheme(theme, {
   components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          minWidth: 'auto',
-        },
-      },
-    },
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          color: theme.palette.primary.contrastText,
-          backgroundColor: theme.palette.primary.main,
-          fontSize: '14px',
-          lineHeight: '20px',
-        },
-        arrow: {
-          color: theme.palette.primary.main,
-        },
-      },
-    },
-    MuiInputBase: {
+    MuiFormLabel: {
       styleOverrides: {
         root: {
-          backgroundColor: theme.palette.primary.contrastText,
+          ...theme.typography.body2,
         },
       },
     },
-    MuiFormLabel: {
+    MuiTab: {
       styleOverrides: {
         root: {
-          color: theme.palette.primary.dark,
-        },
-        asterisk: {
-          color: theme.palette.error.main,
+          borderBottom: 2,
+          borderColor: theme.palette.grey[100],
+          borderStyle: "solid",
         },
       },
     },
-    MuiCard: {
+    MuiCardHeader: {
       styleOverrides: {
         root: {
-          overflow: 'visible',
+          padding: "16px 16px 0px",
         },
       },
     },
-    MuiCardHeader: {
+    MuiCardContent: {
       styleOverrides: {
         root: {
-          backgroundColor: '#e4e9f1',
+          padding: "8px 16px 16px",
+          ":last-child": {
+            paddingBottom: "16px",
+          },
         },
       },
     },
-    MuiToggleButton: {
-      styleOverrides: {
-        root: ({ ownerState, theme }: any) => ({
-          backgroundColor: `${
-            theme.palette[ownerState.color].contrastText
-          } !important`,
-          ...(ownerState.selected && {
-            color: `${theme.palette[ownerState.color].contrastText} !important`,
-            backgroundColor: `${
-              theme.palette[ownerState.color].main
-            } !important`,
-          }),
-        }),
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
       },
     },
   },

package/src/theme/palette.ts

@@ -1,38 +1,153 @@
+import { Color } from '@mui/material';
 import { PaletteOptions } from '@mui/material/styles';
+
+// Module augmentation
+declare module '@mui/material/styles' {
+  export interface PaletteOptions {
+    red?: Partial<Color>;
+    deepPurple?: Partial<Color>;
+    deepOrange?: Partial<Color>;
+    pink?: Partial<Color>;
+    blue?: Partial<Color>;
+    green?: Partial<Color>;
+    purple?: Partial<Color>;
+  }
+}
+
 const palette: PaletteOptions = {
   primary: {
-    main: '#404759',
-    contrastText: '#ffffff',
-  },
-  secondary: {
-    main: '#497edf',
-    contrastText: '#ffffff',
+    main: "#FF5D03",
+    dark: "#EC4A0A",
+    light: "#FD853A",
   },
   success: {
-    main: '#75bf25',
-    contrastText: '#ffffff',
+    main: "#12B76A",
+    dark: "#027A48",
+    light: "#D1FADF",
   },
   warning: {
-    main: '#f17829',
-    contrastText: '#ffffff',
+    main: "#F79009",
+    dark: "B54708",
+    light: "#FEF0C7",
   },
   error: {
-    main: '#e53c05',
-    contrastText: '#ffffff',
-  },
-  // action: {
-  //   active: 'rgba(0,0,0,54)',
-  //   hover: 'rgba(0,0,0,0.04)',
-  //   hoverOpacity: 0.04,
-  //   selected: 'rgba(0,0,0,0.08)',
-  //   selectedOpacity: 0.08,
-  //   disabled: 'rgba(26, 32, 44, 0.4)',
-  //   disabledBackground: 'rgba(26, 32, 44, 0.12)',
-  //   disabledOpacity: 0.4,
-  //   focus: 'rgba(0,0,0,0.12)',
-  //   focusOpacity: 0.12,
-  //   activatedOpacity: 0.12,
-  // },
+    main: "#F04438",
+    dark: "#B42318",
+    light: "#FECDCA",
+  },
+  info: {
+    main: "#0BA5EC",
+    dark: "#026AA2",
+    light: "#7CD4FD",
+  },
+  text: {
+    primary: "#101828",
+    secondary: "#475467",
+  },
+  grey: {
+    50: "#F9FAFB",
+    100: "#F2F4F7",
+    200: "#E4E7EC",
+    300: "#D0D5DD",
+    400: "#98A2B3",
+    500: "#667085",
+    600: "#475467",
+    700: "#344054",
+    800: "#1D2939",
+    900: "#101828",
+  },
+  deepPurple: {
+    50: '#F8F9FC',
+    100: '#EAECF5',
+    200: '#C8CCE5',
+    300: '#9EA5D1',
+    400: "#4E5BA6",
+    500: '#4E5BA6',
+    600: '#3E4784',
+    700: '#363F72',
+    800: '#293056',
+    900: '#101323'
+  },
+  deepOrange: {
+    50: "#FFF6ED",
+    100: "#FFEAD5",
+    200: "#FDDCAB",
+    300: "#FEB273",
+    400: "#FD853A",
+    500: "#FF5C08",
+    600: "#EC4A0A",
+    700: "#C4320A",
+    800: "#9C2A10",
+    900: "#7E2410",
+  },
+  red: {
+    50: '#FEF3F2',
+    100: '#FEE4E2',
+    200: '#FECDCA',
+    300: '#FDA29B',
+    400: '#F97066',
+    500: '#F04438',
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+  },
+  pink: {
+    50: '#FDF2FA',
+    100: '#FCE7F6',
+    200: '#FCCEEE',
+    300: '#FAA7E0',
+    400: "#F670C7",
+    500: '#EE46BC',
+    600: '#DD2590',
+    700: '#C11574',
+    800: '#9E165F',
+    900: '#851651',
+  },
+  blue: {
+    50: '#F0F9FF',
+    100: "#E0F2FE",
+    200: '#B9E6FE',
+    300: '#7CD4FD',
+    400: "#36BFFA",
+    500: '#0BA5EC',
+    600: '#0086C9',
+    700: '#026AA2',
+    800: '#065986',
+    900: '#0B4A6F',
+  },
+  green: {
+    50: '#ECFDF3',
+    100: "#D1FADF",
+    200: '#A6F4C5',
+    300: '#6CE9A6',
+    400: "#32D583",
+    500: '#12B76A',
+    600: '#039855',
+    700: '#027A48',
+    800: '#05603A',
+    900: '#054F31',
+  },
+  purple: {
+    50: '#F3E5F5',
+    100: '#E1BEE7',
+    200: '#CE93D8',
+    300: '#BA68C8',
+    400: '#AB47BC',
+    500: '#9C27B0',
+    600: '#8E24AA',
+    700: '#7B1FA2',
+    800: '#6A1B9A',
+    900: '#4A148C',
+  },
+  action: {
+    active: "rgba(16, 24, 40, 0.40)",
+    hover: "rgba(16, 24, 40, 0.04)",
+    selected: "rgba(16, 24, 40, 0.08)",
+    disabled: "rgba(16, 24, 40, 0.26)",
+    disabledBackground: "rgba(16, 24, 40, 0.12)",
+    focus: "rgba(16, 24, 40, 0.12)",
+  }
 };
 
 export default palette;

package/src/theme/typography.ts

@@ -1,7 +1,69 @@
 import { TypographyVariantsOptions } from '@mui/material/styles';
+import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
+
+// Module augmentation
+declare module '@mui/material/styles' {
+  export interface TypographyVariantsOptions {
+    body3?: TypographyStyleOptions;
+  }
+}
 
 const typography: TypographyVariantsOptions = {
   fontFamily: "'Mulish'",
+  h1: {
+    fontSize: "36px",
+    lineHeight: "44px",
+  },
+  h2: {
+    fontSize: "32px",
+    lineHeight: "40px",
+  },
+  h3: {
+    fontSize: "28px",
+    lineHeight: "36px",
+  },
+  h4: {
+    fontSize: "24px",
+    lineHeight: "32px",
+  },
+  h5: {
+    fontSize: "20px",
+    lineHeight: "28px",
+  },
+  h6: {
+    fontSize: "16px",
+    lineHeight: "22px",
+  },
+  body1: {
+    fontSize: '16px',
+    lineHeight : '24px',
+  },
+  body2: {
+    fontSize: '14px',
+    lineHeight : '20px',
+  },
+  body3: {
+    fontSize: '12px',
+    lineHeight: '18px',
+    letterSpacing: '0.15px',
+  },
+  subtitle1: {
+    fontSize: '16px',
+    lineHeight: "28px",
+  },
+  subtitle2: {
+    fontSize: '14px',
+    lineHeight: "22px",
+  },
+  caption: {
+    fontSize: '20px',
+    lineHeight: "20px",
+  },
+  overline: {
+    fontSize: "12px",
+    letterSpacing: "1px",
+  },
+  
 };
 
 export default typography;