@zesty-io/material 0.2.4 → 0.3.0

package/cjs/FieldTypeSort/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const Add_1 = require("@mui/icons-material/Add");
+const Remove_1 = require("@mui/icons-material/Remove");
+const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, InputProps: {
+                    startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", onClick: (e) => {
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
+                                const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[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: (0, jsx_runtime_1.jsx)(Remove_1.default, { fontSize: 'small' }) }) })),
+                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", onClick: (e) => {
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
+                                const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[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: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: 'small' }) }) })),
+                    // Spread props at the end to allow Input prop overrides
+                    ...InputProps,
+                }, ...props })] }));
+};
+exports.default = FieldTypeSort;

package/cjs/FieldTypeText/FieldTypeText.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeTextProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeTextProps>;
+export declare const TextArea: Story<FieldTypeTextProps>;

package/cjs/FieldTypeText/FieldTypeText.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeText',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }) }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Text label',
+    helperText: 'Text helper text',
+};
+exports.TextArea = Template.bind({});
+exports.TextArea.args = {
+    multiline: true,
+    rows: 4,
+    placeholder: 'Placeholder Text...',
+    label: 'Text Label',
+    helperText: 'Text helper text',
+};

package/cjs/FieldTypeText/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    /**
+    * Max length of the field
+    * @default 150
+    */
+    maxLength?: number;
+    value: string;
+}
+declare const FieldTypeText: ({ label, maxLength, value, helperText, required, ...props }: FieldTypeTextProps) => JSX.Element;
+export default FieldTypeText;

package/cjs/FieldTypeText/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsxs)(material_1.FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { order: 1 }, children: label }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props })] }));
+};
+exports.default = FieldTypeText;

package/cjs/FieldTypeUrl/FieldTypeUrl.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeUrlProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeUrlProps>;

package/cjs/FieldTypeUrl/FieldTypeUrl.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'FieldTypeUrl',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Some label',
+    fullWidth: true,
+};

package/cjs/FieldTypeUrl/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    /**
+    * Max length of the field
+    * @default 2000
+    */
+    maxLength?: number;
+    value: string;
+}
+declare const FieldTypeUrl: ({ label, maxLength, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
+export default FieldTypeUrl;

package/cjs/FieldTypeUrl/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextField_1 = require("@mui/material/TextField");
+const material_1 = require("@mui/material");
+const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
+    // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
+    const [inputRef, setInputRef] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, required: required, children: [(0, jsx_runtime_1.jsxs)(material_1.FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { order: 1 }, children: label }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), (0, jsx_runtime_1.jsx)(TextField_1.default, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
+                    ref: (inputRef) => setInputRef(inputRef),
+                    // Spread props at the end to allow inputProps prop overrides
+                    ...inputProps,
+                }, 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 })] }));
+};
+exports.default = FieldTypeUrl;

package/cjs/LegacyTheme/index.d.ts

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

package/cjs/LegacyTheme/index.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette_1 = require("./palette");
+const typography_1 = require("./typography");
+const styles_1 = require("@mui/material/styles");
+let theme = (0, styles_1.createTheme)({
+    palette: palette_1.default,
+    typography: typography_1.default,
+});
+theme = (0, styles_1.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`,
+                    }),
+                }),
+            },
+        },
+    },
+});
+exports.default = theme;

package/cjs/LegacyTheme/palette.d.ts

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

package/cjs/LegacyTheme/palette.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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',
+    },
+};
+exports.default = palette;

package/{src/LegacyTheme/typography.ts → cjs/LegacyTheme/typography.d.ts}

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

package/cjs/LegacyTheme/typography.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const typography = {
+    fontFamily: "'Mulish'",
+};
+exports.default = typography;

package/cjs/VitualizedAutocomplete/VirtualizedAutocomplete.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { VirtualizedAutocompleteProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<VirtualizedAutocompleteProps>;

package/cjs/VitualizedAutocomplete/VirtualizedAutocomplete.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'VirtualizedAutocomplete',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)({ component: '- None -', value: '0', inputLabel: '- None -' });
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: (0, jsx_runtime_1.jsx)("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, option) => {
+        setValue(option);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    helperText: 'OneToOne helperText',
+    placeholder: 'OneToOne placeholder'
+};

package/cjs/VitualizedAutocomplete/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { AutocompleteProps } from '@mui/material';
+export interface VirtualizedAutocompleteProps extends Omit<AutocompleteProps<any, false, false, false>, 'renderInput'> {
+    helperText?: string;
+    placeholder?: string;
+    error?: boolean;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    /**
+     * Structure for option
+     */
+    options: {
+        /**
+         * Component to be rendered in the dropdown
+         */
+        component: ReactNode | string;
+        /**
+         * Value of option
+         */
+        value: string;
+        /**
+         * Label that should display in the input when selected
+         */
+        inputLabel: string;
+    }[];
+}
+declare const VirtualizedAutocomplete: ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }: VirtualizedAutocompleteProps) => JSX.Element;
+export default VirtualizedAutocomplete;

package/cjs/VitualizedAutocomplete/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Autocomplete_1 = require("@mui/material/Autocomplete");
+const virtualization_1 = require("../utils/virtualization");
+const VirtualizedAutocomplete = ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { fullWidth: true, disableListWrap: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: virtualization_1.ListboxComponent, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
+                ...params.InputProps,
+                startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: 'end', children: startAdornment }),
+                endAdornment: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [params.InputProps.endAdornment, (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
+            } })), getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props }));
+};
+exports.default = VirtualizedAutocomplete;
+const StyledPopper = (0, material_1.styled)(material_1.Popper)({
+    [`& .${Autocomplete_1.autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/{src/index.ts → cjs/index.d.ts}

@@ -7,8 +7,8 @@ export { default as FieldTypeDate } from './FieldTypeDate';
 export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeOneToOne} from './FieldTypeOneToOne';
-export { default as FieldTypeOneToMany} from './FieldTypeOneToMany';
+export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
+export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmDialog } from './ConfirmDialog';
-export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';
+export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/cjs/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedAutocomplete = exports.ConfirmDialog = exports.CopyButton = exports.FieldTypeOneToMany = exports.FieldTypeOneToOne = exports.FieldTypeNumber = exports.FieldTypeColor = exports.FieldTypeDateTime = exports.FieldTypeDate = exports.FieldTypeUrl = exports.FieldTypeSort = exports.FieldTypeText = exports.theme = exports.legacyTheme = void 0;
+var LegacyTheme_1 = require("./LegacyTheme");
+Object.defineProperty(exports, "legacyTheme", { enumerable: true, get: function () { return LegacyTheme_1.default; } });
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.default; } });
+var FieldTypeText_1 = require("./FieldTypeText");
+Object.defineProperty(exports, "FieldTypeText", { enumerable: true, get: function () { return FieldTypeText_1.default; } });
+var FieldTypeSort_1 = require("./FieldTypeSort");
+Object.defineProperty(exports, "FieldTypeSort", { enumerable: true, get: function () { return FieldTypeSort_1.default; } });
+var FieldTypeUrl_1 = require("./FieldTypeUrl");
+Object.defineProperty(exports, "FieldTypeUrl", { enumerable: true, get: function () { return FieldTypeUrl_1.default; } });
+var FieldTypeDate_1 = require("./FieldTypeDate");
+Object.defineProperty(exports, "FieldTypeDate", { enumerable: true, get: function () { return FieldTypeDate_1.default; } });
+var FieldTypeDateTime_1 = require("./FieldTypeDateTime");
+Object.defineProperty(exports, "FieldTypeDateTime", { enumerable: true, get: function () { return FieldTypeDateTime_1.default; } });
+var FieldTypeColor_1 = require("./FieldTypeColor");
+Object.defineProperty(exports, "FieldTypeColor", { enumerable: true, get: function () { return FieldTypeColor_1.default; } });
+var FieldTypeNumber_1 = require("./FieldTypeNumber");
+Object.defineProperty(exports, "FieldTypeNumber", { enumerable: true, get: function () { return FieldTypeNumber_1.default; } });
+var FieldTypeOneToOne_1 = require("./FieldTypeOneToOne");
+Object.defineProperty(exports, "FieldTypeOneToOne", { enumerable: true, get: function () { return FieldTypeOneToOne_1.default; } });
+var FieldTypeOneToMany_1 = require("./FieldTypeOneToMany");
+Object.defineProperty(exports, "FieldTypeOneToMany", { enumerable: true, get: function () { return FieldTypeOneToMany_1.default; } });
+var CopyButton_1 = require("./CopyButton");
+Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return CopyButton_1.default; } });
+var ConfirmDialog_1 = require("./ConfirmDialog");
+Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return ConfirmDialog_1.default; } });
+var VitualizedAutocomplete_1 = require("./VitualizedAutocomplete");
+Object.defineProperty(exports, "VirtualizedAutocomplete", { enumerable: true, get: function () { return VitualizedAutocomplete_1.default; } });

package/cjs/theme/Theme.stories.d.ts

@@ -0,0 +1,4 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<import("@storybook/react/types-6-0").Args>;

package/cjs/theme/Theme.stories.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_json_view_1 = require("react-json-view");
+const _1 = require(".");
+exports.default = {
+    title: 'Theme',
+};
+const Template = (args) => {
+    return ((0, jsx_runtime_1.jsx)(react_json_view_1.default, { src: _1.default }));
+};
+exports.Default = Template.bind({});

package/cjs/theme/index.d.ts

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

package/cjs/theme/index.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette_1 = require("./palette");
+const typography_1 = require("./typography");
+const styles_1 = require("@mui/material/styles");
+let theme = (0, styles_1.createTheme)({
+    palette: palette_1.default,
+    typography: typography_1.default,
+});
+theme = (0, styles_1.createTheme)(theme, {
+    components: {
+        MuiFormLabel: {
+            styleOverrides: {
+                root: {
+                    ...theme.typography.body2,
+                },
+            },
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    borderBottom: 2,
+                    borderColor: theme.palette.grey[100],
+                    borderStyle: "solid",
+                },
+            },
+        },
+        MuiCardHeader: {
+            styleOverrides: {
+                root: {
+                    padding: "16px 16px 0px",
+                },
+            },
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    padding: "8px 16px 16px",
+                    ":last-child": {
+                        paddingBottom: "16px",
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true,
+            },
+        },
+    },
+});
+exports.default = theme;

package/cjs/theme/palette.d.ts

@@ -0,0 +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;