@vendorflow/components 1.1.26 → 2.0.0

package/lib/components/material-ui/Button/Button.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { ButtonProps } from '@material-ui/core';
-declare type Props = ButtonProps & {
+import { ButtonProps } from '@mui/material';
+declare type Props = {
     loading?: boolean;
     progressClasses?: any;
-};
+} & ButtonProps;
 export default function Button(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/Button/Button.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,21 +25,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var core_1 = require("@material-ui/core");
-var styles_1 = require("@material-ui/core/styles");
-var useStyles = (0, styles_1.makeStyles)({
-    root: {
-        color: 'white',
-    },
-});
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
 function Button(props) {
-    var classes = useStyles();
-    var children = props.children, disabled = props.disabled, loading = props.loading, progressClasses = props.progressClasses, _a = props.variant, variant = _a === void 0 ? 'contained' : _a, restOfProps = __rest(props, ["children", "disabled", "loading", "progressClasses", "variant"]);
-    return (react_1.default.createElement(core_1.Button, __assign({ disabled: disabled || loading, variant: variant }, restOfProps), loading ? react_1.default.createElement(core_1.CircularProgress, { size: "1.6rem", classes: progressClasses || classes }) : children));
+    var children = props.children, disabled = props.disabled, loading = props.loading, _a = props.variant, variant = _a === void 0 ? 'contained' : _a, restOfProps = __rest(props, ["children", "disabled", "loading", "variant"]);
+    return ((0, react_1.jsx)(material_1.Button, __assign({ disabled: disabled || loading, variant: variant }, restOfProps), loading ? ((0, react_1.jsx)(material_1.CircularProgress, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            && {\n              color: white;\n            }\n          "], ["\n            && {\n              color: white;\n            }\n          "]))), size: "1.6rem" })) : (children)));
 }
 exports.default = Button;
+var templateObject_1;

package/lib/components/material-ui/Button/Button.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Button: () => JSX.Element;

package/lib/components/material-ui/ButtonMenu/ButtonMenu.d.ts

@@ -1,17 +1,17 @@
 import { ReactNode } from 'react';
-import { MenuProps } from '@material-ui/core';
-import { Color, MenuItem as MenuItemType } from 'types/Component.types';
+import { ButtonProps, MenuProps } from '@mui/material';
+import { MenuItem as MenuItemType } from 'types/Component.types';
 declare type Variant = 'text' | 'contained' | 'outlined' | undefined;
-interface Props extends Omit<MenuProps, 'open'> {
+declare type Props = {
     buttonRenderer?: ReactNode | (() => ReactNode);
     button?: {
         text: string;
         variant?: Variant;
-        color?: Color;
+        color?: ButtonProps['color'];
         classes?: any;
     };
     id: string;
     menuItems: MenuItemType[];
-}
+} & Omit<MenuProps, 'open'>;
 export default function ButtonMenu(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/ButtonMenu/ButtonMenu.js

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var lodash_1 = require("lodash");
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 function ButtonMenu(props) {
     var buttonRenderer = props.buttonRenderer, button = props.button, id = props.id, menuItems = props.menuItems, _a = props.anchorOrigin, anchorOrigin = _a === void 0 ? { vertical: 'bottom', horizontal: 'left' } : _a, _b = props.transformOrigin, transformOrigin = _b === void 0 ? { vertical: 'top', horizontal: 'left' } : _b, restOfProps = __rest(props, ["buttonRenderer", "button", "id", "menuItems", "anchorOrigin", "transformOrigin"]);
     var _c = (0, react_1.useState)(null), anchorEl = _c[0], setAnchorEl = _c[1];
@@ -54,7 +54,7 @@ function ButtonMenu(props) {
     function renderDefaultButton() {
         if (!!button) {
             var _a = button.text, text = _a === void 0 ? '' : _a, _b = button.variant, variant = _b === void 0 ? 'contained' : _b, _c = button.color, color = _c === void 0 ? 'primary' : _c, classes = button.classes;
-            return (react_1.default.createElement(core_1.Button, { "aria-controls": id, "aria-haspopup": "true", classes: classes, color: color, variant: variant, onClick: onHandleOpen }, text));
+            return (react_1.default.createElement(material_1.Button, { "aria-controls": id, "aria-haspopup": "true", classes: classes, color: color, variant: variant, onClick: onHandleOpen }, text));
         }
         return null;
     }
@@ -91,11 +91,11 @@ function ButtonMenu(props) {
                 item.onClick();
                 setAnchorEl(null);
             }
-            return (react_1.default.createElement(core_1.MenuItem, { key: id + "-menu-item-" + index, onClick: handleItemClick }, item.content));
+            return (react_1.default.createElement(material_1.MenuItem, { key: id + "-menu-item-" + index, onClick: handleItemClick }, item.content));
         });
     }
     function renderMenu() {
-        return (react_1.default.createElement(core_1.Menu, __assign({}, restOfProps, { id: id, anchorEl: anchorEl, elevation: 4, keepMounted: true, open: open, getContentAnchorEl: null, onClose: function () { return setAnchorEl(null); }, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }), renderMenuItems()));
+        return (react_1.default.createElement(material_1.Menu, __assign({}, restOfProps, { id: id, anchorEl: anchorEl, elevation: 4, keepMounted: true, open: open, onClose: function () { return setAnchorEl(null); }, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }), renderMenuItems()));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderButton(),

package/lib/components/material-ui/ButtonMenu/ButtonMenu.story.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const ButtonMenuUsingDefault: () => JSX.Element;
 export declare const ButtonMenuUsingCustom: () => JSX.Element;

package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Message {
     id: string;
     userId: string;

package/lib/components/material-ui/ChatInterface/ChatInterface.js

@@ -43,6 +43,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var react_2 = require("react");

package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function ChatInterface(): JSX.Element;

package/lib/components/material-ui/ChatInterface/ChatInterface.story.js

@@ -17,6 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatInterface = void 0;
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var react_2 = require("react");

package/lib/components/material-ui/ChatInterface/MessageInput.js

@@ -7,11 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
-var core_1 = require("@material-ui/core");
-var icons_1 = require("@material-ui/icons");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
 function MessageInput(_a) {
     var measureRef = _a.measureRef, handleClickSend = _a.handleClickSend, message = _a.message, setMessage = _a.setMessage, submitting = _a.submitting;
     function handleOnChange(_a) {
@@ -37,8 +38,8 @@ function MessageInput(_a) {
     }
     return ((0, react_1.jsx)("div", { ref: measureRef, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n        background-color: white;\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n      "], ["\n        width: 100%;\n        background-color: white;\n        bottom: 0;\n        left: 0;\n        position: absolute;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-start;\n        align-items: center;\n      "]))) },
         (0, react_1.jsx)(react_textarea_autosize_1.default, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n            'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n          border: none;\n          resize: none;\n          width: calc(100% - 2.5rem);\n          outline: 0 none transparent;\n          font-size: 16px;\n\n          &:focus {\n            border: none;\n          }\n          &:focus-visible {\n            border: none;\n          }\n        "], ["\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n            'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n          border: none;\n          resize: none;\n          width: calc(100% - 2.5rem);\n          outline: 0 none transparent;\n          font-size: 16px;\n\n          &:focus {\n            border: none;\n          }\n          &:focus-visible {\n            border: none;\n          }\n        "]))), placeholder: "Type your message here...", value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
-        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          height: 2rem;\n          width: 2rem;\n          padding-right: ", ";\n        "], ["\n          height: 2rem;\n          width: 2rem;\n          padding-right: ", ";\n        "])), submitting ? '0.5rem' : '0.25rem') }, submitting ? ((0, react_1.jsx)(core_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(core_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              height: 100%;\n              width: 100%;\n            "], ["\n              height: 100%;\n              width: 100%;\n            "]))), onClick: handleOnClickSend, disabled: submitting },
-            (0, react_1.jsx)(icons_1.Send, null))))));
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          height: 2rem;\n          width: 2rem;\n          padding-right: ", ";\n        "], ["\n          height: 2rem;\n          width: 2rem;\n          padding-right: ", ";\n        "])), submitting ? '0.5rem' : '0.25rem') }, submitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              height: 100%;\n              width: 100%;\n            "], ["\n              height: 100%;\n              width: 100%;\n            "]))), onClick: handleOnClickSend, disabled: submitting },
+            (0, react_1.jsx)(icons_material_1.Send, null))))));
 }
 exports.default = MessageInput;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/ChatInterface/MessageItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Message } from './ChatInterface';
 interface Props {
     userId: string;

package/lib/components/material-ui/ChatInterface/MessageItem.js

@@ -4,6 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var date_fns_1 = require("date-fns");

package/lib/components/material-ui/ChatInterface/MessageThread.js

@@ -7,6 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var MessageItem_1 = __importDefault(require("./MessageItem"));

package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicOption, Color, SimpleEventHandler } from 'types';
 interface Props {
     className?: string;

package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js

@@ -25,7 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var immer_1 = __importDefault(require("immer"));
 var lodash_1 = require("lodash");
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 function InputCheckboxGroup(props) {
     var className = props.className, style = props.style, _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.multi, multi = _b === void 0 ? true : _b;
     var _c = (0, react_1.useState)({}), values = _c[0], setValues = _c[1];
@@ -72,12 +72,12 @@ function InputCheckboxGroup(props) {
     function renderOptions() {
         return options.map(function (_a) {
             var label = _a.label, value = _a.value;
-            return (react_1.default.createElement(core_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(core_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label }) }));
+            return (react_1.default.createElement(material_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(material_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label }) }));
         });
     }
-    return (react_1.default.createElement(core_1.FormControl, { className: className, style: style, component: "fieldset", error: error },
-        react_1.default.createElement(core_1.FormLabel, { component: "legend" }, label),
-        react_1.default.createElement(core_1.FormGroup, null, !(0, lodash_1.isEmpty)(options) ? renderOptions() : react_1.default.createElement("div", null)),
-        react_1.default.createElement(core_1.FormHelperText, null, helperText)));
+    return (react_1.default.createElement(material_1.FormControl, { className: className, style: style, component: "fieldset", error: error },
+        react_1.default.createElement(material_1.FormLabel, { component: "legend" }, label),
+        react_1.default.createElement(material_1.FormGroup, null, !(0, lodash_1.isEmpty)(options) ? renderOptions() : react_1.default.createElement("div", null)),
+        react_1.default.createElement(material_1.FormHelperText, null, helperText)));
 }
 exports.default = InputCheckboxGroup;

package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputCheckboxGroup: () => JSX.Element;

package/lib/components/material-ui/InputDate/InputDate.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
-import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import React from 'react';
+import { DatePickerProps } from '@mui/lab';
 import { SimpleEventHandler } from 'types';
-declare type Props<T> = Omit<KeyboardDatePickerProps, 'onChange'> & {
-    onChange: SimpleEventHandler<T>;
-};
-export default function InputDate(props: Props<string>): JSX.Element;
+declare type Props = {
+    name?: string;
+    onChange: SimpleEventHandler<string>;
+} & Omit<DatePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker'> & React.RefAttributes<HTMLDivElement>;
+export default function InputDate(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/InputDate/InputDate.js

@@ -43,21 +43,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
-var pickers_1 = require("@material-ui/pickers");
+var lab_1 = require("@mui/lab");
+var material_1 = require("@mui/material");
 function InputDate(props) {
-    var _a = props.autoOk, autoOk = _a === void 0 ? true : _a, _b = props.clearable, clearable = _b === void 0 ? true : _b, _c = props.format, format = _c === void 0 ? 'MM/dd/yyyy' : _c, _d = props.inputVariant, inputVariant = _d === void 0 ? 'outlined' : _d, label = props.label, name = props.name, onChange = props.onChange, _e = props.variant, variant = _e === void 0 ? 'inline' : _e, restOfProps = __rest(props, ["autoOk", "clearable", "format", "inputVariant", "label", "name", "onChange", "variant"]);
-    var _f = (0, react_1.useState)(null), value = _f[0], setValue = _f[1];
+    var _a = props.clearable, clearable = _a === void 0 ? true : _a, label = props.label, name = props.name, onChange = props.onChange, _b = props.inputFormat, inputFormat = _b === void 0 ? 'MM/dd/yyyy' : _b, restOfProps = __rest(props, ["clearable", "label", "name", "onChange", "inputFormat"]);
+    var _c = (0, react_1.useState)(null), value = _c[0], setValue = _c[1];
     (0, react_1.useEffect)(function () {
         if (props.value !== value) {
             setValue(props.value);
         }
-    }, [props.value]); // eslint-disable-line
+    }, [props.value]);
     function handleOnChange(date) {
         setValue(date);
         if (date === null || (0, date_fns_1.isValid)(date)) {
             onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
         }
     }
-    return (react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({}, restOfProps, { autoOk: autoOk, clearable: clearable, format: format, inputVariant: inputVariant, label: label, name: name, onChange: handleOnChange, value: value, variant: variant })));
+    return (react_1.default.createElement(lab_1.DatePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params)); }, label: label, onChange: handleOnChange, value: value })));
 }
 exports.default = InputDate;

package/lib/components/material-ui/InputDate/InputDate.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputDate: () => JSX.Element;

package/lib/components/material-ui/InputDate/InputDate.story.js

@@ -24,12 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputDate = void 0;
 var react_1 = __importStar(require("react"));
-var pickers_1 = require("@material-ui/pickers");
-var date_fns_1 = __importDefault(require("@date-io/date-fns"));
+var lab_1 = require("@mui/lab");
+var AdapterDateFns_1 = __importDefault(require("@mui/lab/AdapterDateFns"));
 var InputDate_1 = __importDefault(require("components/material-ui/InputDate"));
 var InputDate = function () {
     var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
-    return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default },
+    return (react_1.default.createElement(lab_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.default },
         react_1.default.createElement(InputDate_1.default, { label: "Bedtime", value: value, onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);

package/lib/components/material-ui/InputDateTime/InputDateTime.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
-import { KeyboardDateTimePickerProps } from '@material-ui/pickers';
+import React from 'react';
+import { DateTimePickerProps } from '@mui/lab';
 import { SimpleEventHandler } from 'types';
-declare type Props<T> = Omit<KeyboardDateTimePickerProps, 'onChange'> & {
-    onChange: SimpleEventHandler<T>;
-};
-export default function InputDateTime(props: Props<string>): JSX.Element;
+declare type Props = {
+    name?: string;
+    onChange: SimpleEventHandler<string>;
+} & Omit<DateTimePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker'> & React.RefAttributes<HTMLDivElement>;
+export default function InputDateTime(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/InputDateTime/InputDateTime.js

@@ -43,21 +43,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
-var pickers_1 = require("@material-ui/pickers");
+var lab_1 = require("@mui/lab");
+var material_1 = require("@mui/material");
 function InputDateTime(props) {
-    var _a = props.autoOk, autoOk = _a === void 0 ? true : _a, _b = props.clearable, clearable = _b === void 0 ? true : _b, _c = props.format, format = _c === void 0 ? 'MM/dd/yyyy HH:mm' : _c, _d = props.inputVariant, inputVariant = _d === void 0 ? 'outlined' : _d, label = props.label, name = props.name, onChange = props.onChange, _e = props.variant, variant = _e === void 0 ? 'inline' : _e, restOfProps = __rest(props, ["autoOk", "clearable", "format", "inputVariant", "label", "name", "onChange", "variant"]);
-    var _f = (0, react_1.useState)(null), value = _f[0], setValue = _f[1];
+    var _a = props.clearable, clearable = _a === void 0 ? true : _a, _b = props.inputFormat, inputFormat = _b === void 0 ? 'MM/dd/yyyy HH:mm' : _b, label = props.label, name = props.name, onChange = props.onChange, restOfProps = __rest(props, ["clearable", "inputFormat", "label", "name", "onChange"]);
+    var _c = (0, react_1.useState)(null), value = _c[0], setValue = _c[1];
     (0, react_1.useEffect)(function () {
         if (props.value !== value) {
             setValue(props.value);
         }
-    }, [props.value]); // eslint-disable-line
+    }, [props.value]);
     function handleOnChange(date) {
         setValue(date);
         if (date === null || (0, date_fns_1.isValid)(date)) {
             onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
         }
     }
-    return (react_1.default.createElement(pickers_1.KeyboardDateTimePicker, __assign({}, restOfProps, { autoOk: autoOk, clearable: clearable, format: format, inputVariant: inputVariant, label: label, name: name, onChange: handleOnChange, value: value, variant: variant })));
+    return (react_1.default.createElement(lab_1.DateTimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params)); }, value: value })));
 }
 exports.default = InputDateTime;

package/lib/components/material-ui/InputDateTime/InputDateTime.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputDateTime: () => JSX.Element;

package/lib/components/material-ui/InputDateTime/InputDateTime.story.js

@@ -24,12 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputDateTime = void 0;
 var react_1 = __importStar(require("react"));
-var pickers_1 = require("@material-ui/pickers");
-var date_fns_1 = __importDefault(require("@date-io/date-fns"));
+var lab_1 = require("@mui/lab");
 var InputDateTime_1 = __importDefault(require("components/material-ui/InputDateTime"));
+var AdapterDateFns_1 = __importDefault(require("@mui/lab/AdapterDateFns"));
 var InputDateTime = function () {
     var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
-    return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default },
+    return (react_1.default.createElement(lab_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.default },
         react_1.default.createElement(InputDateTime_1.default, { label: "Appointment", value: value, onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);

package/lib/components/material-ui/InputGroup/InputGroup.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { TextFieldProps } from '@material-ui/core';
-declare type Props = TextFieldProps & {
+import { TextFieldProps } from '@mui/material';
+declare type Props = {
     value: string | null;
     charLimit?: number;
     hideCharCounter?: boolean;
     enableDebouncedOnChange?: boolean;
     changeValidator?: (value: string) => boolean;
-};
+} & TextFieldProps;
 export default function InputGroup(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/InputGroup/InputGroup.js

@@ -26,11 +26,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var react_2 = require("react");
 var lodash_1 = require("lodash");
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 function InputGroup(props) {
     var changeValidator = props.changeValidator, charLimit = props.charLimit, className = props.className, hideCharCounter = props.hideCharCounter, _a = props.enableDebouncedOnChange, enableDebouncedOnChange = _a === void 0 ? true : _a, multiline = props.multiline, error = props.error, label = props.label, name = props.name, onChange = props.onChange, placeholder = props.placeholder, helperText = props.helperText, _b = props.variant, variant = _b === void 0 ? 'outlined' : _b, style = props.style, propsValue = props.value, restOfProps = __rest(props, ["changeValidator", "charLimit", "className", "hideCharCounter", "enableDebouncedOnChange", "multiline", "error", "label", "name", "onChange", "placeholder", "helperText", "variant", "style", "value"]);
     var _c = (0, react_2.useState)(''), value = _c[0], setValue = _c[1];
@@ -38,7 +39,7 @@ function InputGroup(props) {
         if (propsValue !== value) {
             setValue(propsValue || '');
         }
-    }, [propsValue]); // eslint-disable-line
+    }, [propsValue]);
     var debouncedOnChangeHandler = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
         if (onChange) {
             onChange(evt);
@@ -60,10 +61,10 @@ function InputGroup(props) {
         }
     }
     return ((0, react_1.jsx)("div", { className: className, style: style },
-        (0, react_1.jsx)(core_1.TextField, __assign({ error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline }, restOfProps)),
+        (0, react_1.jsx)(material_1.TextField, __assign({ error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline }, restOfProps)),
         (0, react_1.jsx)("div", null,
-            helperText && ((0, react_1.jsx)(core_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
-            charLimit !== undefined && !hideCharCounter && ((0, react_1.jsx)(core_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
+            helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
+            charLimit !== undefined && !hideCharCounter && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
                 value.length,
                 "/",
                 charLimit)))));

package/lib/components/material-ui/InputGroup/InputGroup.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputGroup: () => JSX.Element;

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color, BasicOption, SimpleEventHandler } from 'types/Component.types';
 interface Props {
     className?: string;

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js

@@ -42,7 +42,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 function InputRadioGroup(props) {
     var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.row, row = _b === void 0 ? false : _b, restOfProps = __rest(props, ["color", "disabled", "error", "helperText", "label", "name", "onChange", "options", "row"]);
     var _c = (0, react_1.useState)(null), value = _c[0], setValue = _c[1];
@@ -50,17 +50,17 @@ function InputRadioGroup(props) {
         if (props.value !== value) {
             setValue(props.value);
         }
-    }, [props.value]); // eslint-disable-line
+    }, [props.value]);
     function handleOnChange(_, value) {
         setValue(value);
         onChange({ target: { name: name, value: value } });
     }
     function renderOptions() {
-        return options.map(function (option) { return (react_1.default.createElement(core_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(core_1.Radio, { color: color, disabled: disabled }) })); });
+        return options.map(function (option) { return (react_1.default.createElement(material_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(material_1.Radio, { color: color, disabled: disabled }) })); });
     }
-    return (react_1.default.createElement(core_1.FormControl, __assign({ component: "fieldset", error: error }, restOfProps),
-        react_1.default.createElement(core_1.FormLabel, { component: "legend" }, label),
-        react_1.default.createElement(core_1.RadioGroup, { name: name, value: value, onChange: handleOnChange, row: row }, renderOptions()),
-        react_1.default.createElement(core_1.FormHelperText, null, helperText)));
+    return (react_1.default.createElement(material_1.FormControl, __assign({ component: "fieldset", error: error }, restOfProps),
+        react_1.default.createElement(material_1.FormLabel, { component: "legend" }, label),
+        react_1.default.createElement(material_1.RadioGroup, { name: name, value: value, onChange: handleOnChange, row: row }, renderOptions()),
+        react_1.default.createElement(material_1.FormHelperText, null, helperText)));
 }
 exports.default = InputRadioGroup;

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputRadioGroup: () => JSX.Element;

package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts

@@ -1,20 +1,20 @@
-import { ReactNode } from 'react';
-import { AutocompleteProps, RenderInputParams, UseAutocompleteProps } from '@material-ui/lab';
-import { Variant, DropdownEvent } from 'types/Component.types';
-declare type Props<T> = Omit<UseAutocompleteProps<T>, 'onChange'> & Omit<AutocompleteProps<T>, 'renderInput'> & {
+import { ChangeEvent, ReactNode } from 'react';
+import { AutocompleteProps, AutocompleteChangeReason, AutocompleteRenderInputParams } from '@mui/material';
+import { Variant } from 'types/Component.types';
+declare type MaybeBoolean = boolean | undefined;
+declare type Props<T> = {
     error?: boolean;
     errors?: boolean[];
     label?: string;
     helperText?: string;
     name?: string;
     value: any;
-    onChange: (evt: DropdownEvent) => void;
-    onBlur?: (evt: DropdownEvent) => void;
-    renderInput?: ((params: RenderInputParams) => ReactNode) | null | undefined;
+    renderInput?: ((params: AutocompleteRenderInputParams) => ReactNode) | null | undefined;
     variant?: Variant;
     disableFilter?: boolean;
     max?: number;
     count?: number;
-};
+    onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
+} & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput'>;
 export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
 export {};

package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js

@@ -26,20 +26,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
 var react_2 = require("react");
-var styles_1 = require("@material-ui/core/styles");
-var Autocomplete_1 = require("@material-ui/lab/Autocomplete");
-var core_1 = require("@material-ui/core");
-var lab_1 = require("@material-ui/lab");
+var styles_1 = require("@mui/styles");
+var material_1 = require("@mui/material");
 var useStyles = (0, styles_1.makeStyles)({
     option: {
         '&[data-focus="true"]': { backgroundColor: '#5789ff', color: 'white' },
     },
 });
 function InputSearchDropdown(props) {
-    var _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, label = props.label, helperText = props.helperText, name = props.name, onBlur = props.onBlur, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "label", "helperText", "name", "onBlur", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max"]);
+    var _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max"]);
     var _h = (0, react_2.useState)(null), value = _h[0], setValue = _h[1];
     var mainStyles = useStyles();
     (0, react_2.useEffect)(function () {
@@ -76,26 +75,27 @@ function InputSearchDropdown(props) {
             }
         }
         setValue(newValue);
-        onChange({ target: { name: name, value: newValue, reason: reason } });
-        if (onBlur) {
-            onBlur({ target: { name: name, value: newValue, reason: reason } });
-        }
+        onChange({ target: { name: name, value: newValue } }, newValue, reason);
     }
     function handleOptionFilter() {
-        return (0, Autocomplete_1.createFilterOptions)({
+        return (0, material_1.createFilterOptions)({
             matchFrom: 'any',
             stringify: props.getOptionLabel,
         });
     }
     function renderDefaultInput(params) {
-        return (0, react_1.jsx)(core_1.TextField, __assign({}, params, { error: error || !!(errors === null || errors === void 0 ? void 0 : errors.length), label: label, variant: variant }));
+        return (0, react_1.jsx)(material_1.TextField, __assign({}, params, { error: error || !!(errors === null || errors === void 0 ? void 0 : errors.length), label: label, variant: variant }));
     }
     function renderDefaultTags(values, getTagProps) {
-        return values.map(function (value, index) { return ((0, react_1.jsx)(core_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
-                ? value
-                : props.getOptionLabel !== undefined
-                    ? props.getOptionLabel(value)
-                    : JSON.stringify(value)), css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-color: ", ";\n        "], ["\n          border-color: ", ";\n        "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: props.getOptionLabel ? props.getOptionLabel(value) : value, size: "small" }, getTagProps({ index: index })))); });
+        return values.map(function (value, index) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _a = getTagProps({ index: index }), key = _a.key, tagProps = __rest(_a, ["key"]);
+            return ((0, react_1.jsx)(material_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
+                    ? value
+                    : props.getOptionLabel !== undefined
+                        ? props.getOptionLabel(value)
+                        : JSON.stringify(value)), css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            border-color: ", ";\n          "], ["\n            border-color: ", ";\n          "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: props.getOptionLabel ? props.getOptionLabel(value) : value, size: "small" }, tagProps)));
+        });
     }
     function getCount() {
         var _a;
@@ -105,10 +105,10 @@ function InputSearchDropdown(props) {
         return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
     }
     return ((0, react_1.jsx)("div", null,
-        (0, react_1.jsx)(lab_1.Autocomplete, __assign({ autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles }, restOfProps, { value: getValue() })),
+        (0, react_1.jsx)(material_1.Autocomplete, __assign({ autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles }, restOfProps, { value: getValue() })),
         (0, react_1.jsx)("div", null,
-            helperText && ((0, react_1.jsx)(core_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
-            multiple && max && ((0, react_1.jsx)(core_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
+            helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
+            multiple && max && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
                 getCount(),
                 "/",
                 max)))));

package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const InputSearchDropdownSingle: () => JSX.Element;
 export declare const InputSearchDropdownMulti: () => JSX.Element;

package/lib/components/material-ui/InputTime/InputTime.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { KeyboardTimePickerProps } from '@material-ui/pickers';
-import { SimpleEventHandler } from 'types';
-declare type Props<T> = Omit<KeyboardTimePickerProps, 'onChange'> & {
-    onChange: SimpleEventHandler<T>;
-};
-export default function InputTime(props: Props<string>): JSX.Element;
+import { TimePickerProps } from '@mui/lab';
+import { SimpleEventHandler, ParsableDate } from 'types';
+declare type Props = {
+    name?: string;
+    onChange: SimpleEventHandler<ParsableDate>;
+} & Omit<TimePickerProps, 'onChange' | 'renderInput' | 'openPicker' | 'rawValue'>;
+export default function InputTime(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/InputTime/InputTime.js

@@ -43,21 +43,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
-var pickers_1 = require("@material-ui/pickers");
+var lab_1 = require("@mui/lab");
+var material_1 = require("@mui/material");
 function InputTime(props) {
-    var _a = props.autoOk, autoOk = _a === void 0 ? true : _a, _b = props.clearable, clearable = _b === void 0 ? true : _b, _c = props.format, format = _c === void 0 ? 'HH:mm' : _c, _d = props.inputVariant, inputVariant = _d === void 0 ? 'outlined' : _d, label = props.label, name = props.name, onChange = props.onChange, _e = props.variant, variant = _e === void 0 ? 'inline' : _e, restOfProps = __rest(props, ["autoOk", "clearable", "format", "inputVariant", "label", "name", "onChange", "variant"]);
-    var _f = (0, react_1.useState)(null), value = _f[0], setValue = _f[1];
+    var _a = props.clearable, clearable = _a === void 0 ? true : _a, _b = props.inputFormat, inputFormat = _b === void 0 ? 'HH:mm' : _b, label = props.label, name = props.name, onChange = props.onChange, restOfProps = __rest(props, ["clearable", "inputFormat", "label", "name", "onChange"]);
+    var _c = (0, react_1.useState)(null), value = _c[0], setValue = _c[1];
     (0, react_1.useEffect)(function () {
         if (props.value) {
             setValue(props.value);
         }
-    }, []); // eslint-disable-line
+    }, []);
     function handleOnChange(date) {
         setValue(date);
         if (date === null || (0, date_fns_1.isValid)(date)) {
             onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
         }
     }
-    return (react_1.default.createElement(pickers_1.KeyboardTimePicker, __assign({}, restOfProps, { autoOk: autoOk, clearable: clearable, format: format, inputVariant: inputVariant, label: label, name: name, onChange: handleOnChange, value: value, variant: variant })));
+    return (react_1.default.createElement(lab_1.TimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params)); }, value: value })));
 }
 exports.default = InputTime;

package/lib/components/material-ui/InputTime/InputTime.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputTime: () => JSX.Element;

package/lib/components/material-ui/InputTime/InputTime.story.js

@@ -24,12 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputTime = void 0;
 var react_1 = __importStar(require("react"));
-var pickers_1 = require("@material-ui/pickers");
-var date_fns_1 = __importDefault(require("@date-io/date-fns"));
+var lab_1 = require("@mui/lab");
 var InputTime_1 = __importDefault(require("components/material-ui/InputTime"));
+var AdapterDateFns_1 = __importDefault(require("@mui/lab/AdapterDateFns"));
 var InputTime = function () {
     var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
-    return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default },
+    return (react_1.default.createElement(lab_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.default },
         react_1.default.createElement(InputTime_1.default, { label: "Bedtime", value: value, onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);

package/lib/components/material-ui/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DialogProps } from '@material-ui/core';
+import { DialogProps } from '@mui/material';
 declare type Props = DialogProps & {
     children: ReactNode;
     classes?: any;

package/lib/components/material-ui/Modal/Modal.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -25,22 +29,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var core_1 = require("@material-ui/core");
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
 var Button_1 = __importDefault(require("../Button"));
-var useSubmitBtnStyles = (0, core_1.makeStyles)({
-    root: {
-        color: '#3f51b5',
-    },
-});
 function Modal(props) {
     var children = props.children, classes = props.classes, cancelButton = props.cancelButton, okayButton = props.okayButton, onClose = props.onClose, submitting = props.submitting, open = props.open, title = props.title, restOfProps = __rest(props, ["children", "classes", "cancelButton", "okayButton", "onClose", "submitting", "open", "title"]);
-    var submitBtnStyles = useSubmitBtnStyles();
-    return (react_1.default.createElement(core_1.Dialog, __assign({}, restOfProps, { classes: classes, open: open, onClose: onClose }),
-        react_1.default.createElement(core_1.DialogTitle, null, title),
-        react_1.default.createElement(core_1.DialogContent, null, typeof children === 'string' ? react_1.default.createElement(core_1.DialogContentText, null, children) : children),
-        react_1.default.createElement(core_1.DialogActions, null,
-            cancelButton && (react_1.default.createElement(Button_1.default, { color: "default", variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
-            okayButton && (react_1.default.createElement(Button_1.default, { color: "primary", progressClasses: submitting ? submitBtnStyles : undefined, variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text)))));
+    return ((0, react_1.jsx)(material_1.Dialog, __assign({}, restOfProps, { classes: classes, open: open, onClose: onClose }),
+        (0, react_1.jsx)(material_1.DialogTitle, null, title),
+        (0, react_1.jsx)(material_1.DialogContent, null, typeof children === 'string' ? (0, react_1.jsx)(material_1.DialogContentText, null, children) : children),
+        (0, react_1.jsx)(material_1.DialogActions, null,
+            cancelButton && ((0, react_1.jsx)(Button_1.default, { variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
+            okayButton && ((0, react_1.jsx)(Button_1.default, { css: function (theme) {
+                    var _a, _b;
+                    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              &&.MuiButton-root .MuiCircularProgress-root {\n                color: ", ";\n              }\n            "], ["\n              &&.MuiButton-root .MuiCircularProgress-root {\n                color: ", ";\n              }\n            "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
+                }, color: "primary", variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text)))));
 }
 exports.default = Modal;
+var templateObject_1;

package/lib/components/material-ui/Modal/Modal.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Modal: () => JSX.Element;

package/lib/types/Component.types.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteChangeReason } from '@material-ui/lab';
+import { AutocompleteChangeReason } from '@mui/material';
 import { ReactNode } from 'react';
 export declare type Variant = 'standard' | 'outlined' | 'filled' | undefined;
 export declare type Color = 'default' | 'primary' | 'secondary' | undefined;
@@ -27,3 +27,4 @@ export declare type MenuItem = {
     content: ReactNode;
     onClick: () => void;
 };
+export declare type ParsableDate = string | number | Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "1.1.26",
+  "version": "2.0.0",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -41,36 +41,33 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "7.9.0",
-    "@blueprintjs/core": "^3.26.0",
-    "@blueprintjs/datetime": "^3.16.1",
-    "@blueprintjs/icons": "^3.15.1",
-    "@blueprintjs/select": "^3.12.2",
-    "@blueprintjs/table": "^3.8.4",
-    "@blueprintjs/timezone": "^3.6.2",
+    "@babel/core": "^7.15.8",
     "@date-io/date-fns": "1.x",
     "@emotion/babel-plugin": "^11.3.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@material-ui/core": "^4.9.12",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.51",
-    "@material-ui/pickers": "^3.2.10",
+    "@mui/icons-material": "^5.0.3",
+    "@mui/lab": "^5.0.0-alpha.50",
+    "@mui/material": "^5.0.3",
+    "@mui/styles": "^5.0.1",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^17.0.27",
+    "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.9.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-named-asset-import": "^0.3.6",
-    "babel-preset-react-app": "^9.1.2",
+    "babel-plugin-polyfill-corejs2": "^0.2.2",
+    "babel-plugin-polyfill-corejs3": "^0.2.5",
+    "babel-plugin-polyfill-regenerator": "^0.2.2",
+    "babel-preset-react-app": "^10.0.0",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "classnames": "^2.2.6",
@@ -78,14 +75,14 @@
     "date-fns": "^2.12.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
-    "eslint": "^6.6.0",
-    "eslint-config-react-app": "^5.2.1",
+    "eslint": "^7.32.0",
+    "eslint-config-react-app": "^6.0.0",
     "eslint-loader": "3.0.3",
     "eslint-plugin-flowtype": "4.6.0",
-    "eslint-plugin-import": "2.20.1",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "^1.6.1",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "4.3.0",
     "fs-extra": "^8.1.0",
     "html-webpack-plugin": "4.0.0-beta.11",
@@ -103,12 +100,12 @@
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-measure": "^2.5.2",
-    "react-scripts": "^3.4.1",
+    "react-scripts": "^4.0.3",
     "react-text-mask": "^5.4.3",
     "react-textarea-autosize": "^8.3.3",
     "resolve": "1.15.0",
@@ -126,14 +123,14 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
+    "@babel/cli": "^7.15.7",
     "@babel/preset-react": "^7.9.4",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addons": "^5.3.18",
+    "@storybook/addon-actions": "^6.3.10",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-links": "^6.3.10",
+    "@storybook/addons": "^6.3.10",
     "@storybook/preset-create-react-app": "^2.1.1",
-    "@storybook/react": "^5.3.18",
+    "@storybook/react": "^6.3.10",
     "@types/lodash": "^4.14.150",
     "@types/react-measure": "^2.0.7",
     "@types/react-text-mask": "^5.4.6",