@data-driven-forms/mui-component-mapper 3.15.6 → 3.16.0

package/sub-form/sub-form.js

@@ -11,45 +11,48 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _Typography = _interopRequireDefault(require("@mui/material/node/Typography"));
 
-var _styles = require("@material-ui/core/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
 var _useFormApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-form-api"));
 
 var _excluded = ["fields", "title", "description", "component", "TitleGridProps", "TitleProps", "DescriptionProps", "DescriptionGridProps", "ItemsGridProps"];
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    grid: {
-      paddingRight: 0,
-      paddingLeft: 0
-    }
-  };
+var PREFIX = 'SubForm';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledGrid = (0, _styles.styled)(_Grid["default"])(function () {
+  return (0, _defineProperty2["default"])({}, "&.".concat(classes.grid), {
+    paddingRight: 0,
+    paddingLeft: 0
+  });
 });
 
-var SubForm = function SubForm(_ref) {
-  var fields = _ref.fields,
-      title = _ref.title,
-      description = _ref.description,
-      component = _ref.component,
-      TitleGridProps = _ref.TitleGridProps,
-      TitleProps = _ref.TitleProps,
-      DescriptionProps = _ref.DescriptionProps,
-      DescriptionGridProps = _ref.DescriptionGridProps,
-      ItemsGridProps = _ref.ItemsGridProps,
-      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var SubForm = function SubForm(_ref2) {
+  var fields = _ref2.fields,
+      title = _ref2.title,
+      description = _ref2.description,
+      component = _ref2.component,
+      TitleGridProps = _ref2.TitleGridProps,
+      TitleProps = _ref2.TitleProps,
+      DescriptionProps = _ref2.DescriptionProps,
+      DescriptionGridProps = _ref2.DescriptionGridProps,
+      ItemsGridProps = _ref2.ItemsGridProps,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
 
   var _useFormApi = (0, _useFormApi2["default"])(),
       renderForm = _useFormApi.renderForm;
 
-  var classes = useStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledGrid, (0, _extends2["default"])({
     item: true,
     xs: 12,
     container: true,
@@ -67,7 +70,8 @@ var SubForm = function SubForm(_ref) {
   }, DescriptionProps), description)), /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
     item: true,
     xs: 12,
-    container: true
+    container: true,
+    rowSpacing: 2
   }, ItemsGridProps), renderForm(fields)));
 };
 

package/switch/switch.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { SwitchProps as MuiSwitchProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
+import { SwitchProps as MuiSwitchProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@mui/material';
 import { ReactNode } from "react";
 
 interface InternalSwitchProps extends MuiSwitchProps {

package/switch/switch.js

@@ -17,17 +17,17 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/node/FormControlLabel"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/node/FormHelperText"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/node/FormGroup"));
 
-var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/node/FormLabel"));
 
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _Switch = _interopRequireDefault(require("@mui/material/node/Switch"));
 
 var _propTypesTemplates = require("@data-driven-forms/common/prop-types-templates");
 

package/tabs/tabs.d.ts

@@ -1,11 +1,13 @@
 import { Field } from "@data-driven-forms/react-form-renderer";
-import { AppBarProps, TabProps } from "@material-ui/core";
+import { AppBarProps, GridProps, TabProps } from "@mui/material";
 
 export interface TabsProps {
   fields: Field[];
   AppBarProps?: AppBarProps;
   TabsProps?: TabsProps;
   TabProps?: TabProps;
+  FormFieldGridProps?: GridProps,
+  GridItemProps?: GridProps,
 }
 
 declare const Tabs: React.ComponentType<TabsProps>;

package/tabs/tabs.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -17,11 +19,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+var _AppBar = _interopRequireDefault(require("@mui/material/node/AppBar"));
+
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
+
+var _Tab = _interopRequireDefault(require("@mui/material/node/Tab"));
 
-var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+var _Tabs = _interopRequireDefault(require("@mui/material/node/Tabs"));
 
-var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+var _formFieldGrid = _interopRequireDefault(require("../form-field-grid"));
 
 var _useFormApi = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-form-api"));
 
@@ -29,28 +35,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TabContent = function TabContent(_ref) {
-  var name = _ref.name,
-      fields = _ref.fields,
-      formOptions = _ref.formOptions;
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
-    key: name
-  }, formOptions.renderForm(fields, formOptions));
-};
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-TabContent.propTypes = {
-  name: _propTypes["default"].string.isRequired,
-  fields: _propTypes["default"].array.isRequired,
-  formOptions: _propTypes["default"].shape({
-    renderForm: _propTypes["default"].func.isRequired
-  }).isRequired
-};
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var FormTabs = function FormTabs(_ref2) {
-  var fields = _ref2.fields,
-      AppBarProps = _ref2.AppBarProps,
-      TabsProps = _ref2.TabsProps,
-      TabProps = _ref2.TabProps;
+var FormTabs = function FormTabs(_ref) {
+  var fields = _ref.fields,
+      AppBarProps = _ref.AppBarProps,
+      TabsProps = _ref.TabsProps,
+      TabProps = _ref.TabProps,
+      FormFieldGridProps = _ref.FormFieldGridProps,
+      GridItemProps = _ref.GridItemProps;
   var formOptions = (0, _useFormApi["default"])();
 
   var _useState = (0, _react.useState)(0),
@@ -58,28 +53,38 @@ var FormTabs = function FormTabs(_ref2) {
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_AppBar["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], (0, _extends2["default"])({
+    container: true
+  }, FormFieldGridProps), /*#__PURE__*/_react["default"].createElement(_AppBar["default"], (0, _extends2["default"])({
     position: "static"
   }, AppBarProps), /*#__PURE__*/_react["default"].createElement(_Tabs["default"], (0, _extends2["default"])({
+    textColor: "inherit",
     value: activeTab,
     onChange: function onChange(_e, tabIndex) {
       return setActiveTab(tabIndex);
     }
-  }, TabsProps), fields.map(function (_ref3) {
-    var title = _ref3.title,
-        name = _ref3.name;
+  }, TabsProps), fields.map(function (_ref2) {
+    var title = _ref2.title,
+        name = _ref2.name;
     return /*#__PURE__*/_react["default"].createElement(_Tab["default"], (0, _extends2["default"])({
       key: name,
       label: title
     }, TabProps));
-  }))), fields.map(function (field, index) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: field.name,
-      hidden: index !== activeTab
-    }, /*#__PURE__*/_react["default"].createElement(TabContent, (0, _extends2["default"])({}, field, {
-      name: field.name,
-      formOptions: formOptions
-    })));
+  }))), fields.map(function (_ref3, index) {
+    var fields = _ref3.fields,
+        name = _ref3.name;
+    return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
+      key: name || index,
+      container: true,
+      item: true,
+      xs: 12,
+      rowSpacing: 2,
+      sx: _objectSpread({
+        mt: 1
+      }, index !== activeTab && {
+        display: 'none'
+      })
+    }, GridItemProps), formOptions.renderForm(fields));
   }));
 };
 
@@ -87,12 +92,28 @@ FormTabs.propTypes = {
   fields: _propTypes["default"].array.isRequired,
   AppBarProps: _propTypes["default"].object,
   TabsProps: _propTypes["default"].object,
-  TabProps: _propTypes["default"].object
+  TabProps: _propTypes["default"].object,
+  FormFieldGridProps: _propTypes["default"].object,
+  GridItemProps: _propTypes["default"].object
 };
 FormTabs.defaultProps = {
   AppBarProps: {},
   TabsProps: {},
-  TabProps: {}
+  TabProps: {},
+  FormFieldGridProps: {},
+  GridItemProps: {}
 };
 var _default = FormTabs;
+/*
+        {fields.map(({ fields }, index) =>
+          index === activeTab ? (
+            formOptions.renderForm(fields)
+          ) : (
+            <Grid container item xs={12} sx={{ display: 'none' }}>
+              {formOptions.renderForm(fields)}
+            </Grid>
+          )
+        )}
+        */
+
 exports["default"] = _default;

package/text-field/text-field.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { TextFieldProps as MuiTextFieldProps, GridProps } from '@material-ui/core';
+import { TextFieldProps as MuiTextFieldProps, GridProps } from '@mui/material';
 import { ReactNode } from "react";
 
 interface InternalTextFieldProps {

package/text-field/text-field.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _TextField = _interopRequireDefault(require("@mui/material/node/TextField"));
 
 var _formFieldGrid = _interopRequireDefault(require("../form-field-grid/form-field-grid"));
 

package/textarea/textarea.d.ts

@@ -1,5 +1,5 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { TextFieldProps, GridProps, InputProps } from "@material-ui/core";
+import { TextFieldProps, GridProps, InputProps } from "@mui/material";
 import { ReactNode } from "react";
 
 interface InternalTextareaProps {

package/textarea/textarea.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _TextField = _interopRequireDefault(require("@mui/material/node/TextField"));
 
 var _formFieldGrid = _interopRequireDefault(require("../form-field-grid/form-field-grid"));
 

package/time-picker/time-picker.d.ts

@@ -1,16 +1,13 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { TimePickerProps as MuiTimePickerProps } from '@material-ui/pickers';
+import { TimePickerProps as MuiTimePickerProps } from '@mui/lab';
 import { ReactNode } from "react";
-import { MuiPickersUtilsProviderProps } from "@material-ui/pickers/MuiPickersUtilsProvider";
-import { GridProps } from "@material-ui/core";
+import { GridProps } from "@mui/material";
 interface InternalTimePickerProps extends MuiTimePickerProps {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   isRequired?: boolean;
   description?: ReactNode;
   validateOnMount?: boolean;
-  locale?: string;
-  MuiPickersUtilsProviderProps?: MuiPickersUtilsProviderProps;
   FormFieldGridProps?: GridProps;
 }
 

package/time-picker/time-picker.js

@@ -15,9 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _pickers = require("@material-ui/pickers");
-
-var _moment = _interopRequireDefault(require("@date-io/moment"));
+var _TimePicker = _interopRequireDefault(require("@mui/lab/node/TimePicker"));
 
 var _formFieldGrid = _interopRequireDefault(require("../form-field-grid/form-field-grid"));
 
@@ -27,7 +25,9 @@ var _propTypesTemplates = require("@data-driven-forms/common/prop-types-template
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
-var _excluded = ["input", "isReadOnly", "isDisabled", "placeholder", "isRequired", "label", "helperText", "description", "validateOnMount", "meta", "locale", "MuiPickersUtilsProviderProps", "FormFieldGridProps"];
+var _TextField = _interopRequireDefault(require("@mui/material/node/TextField"));
+
+var _excluded = ["input", "isReadOnly", "isDisabled", "placeholder", "isRequired", "label", "helperText", "description", "validateOnMount", "meta", "MuiPickersUtilsProviderProps", "FormFieldGridProps"];
 
 var TimePicker = function TimePicker(props) {
   var _useFieldApi = (0, _useFieldApi2["default"])(props),
@@ -41,29 +41,28 @@ var TimePicker = function TimePicker(props) {
       description = _useFieldApi.description,
       validateOnMount = _useFieldApi.validateOnMount,
       meta = _useFieldApi.meta,
-      _useFieldApi$locale = _useFieldApi.locale,
-      locale = _useFieldApi$locale === void 0 ? 'en' : _useFieldApi$locale,
       MuiPickersUtilsProviderProps = _useFieldApi.MuiPickersUtilsProviderProps,
       FormFieldGridProps = _useFieldApi.FormFieldGridProps,
       rest = (0, _objectWithoutProperties2["default"])(_useFieldApi, _excluded);
 
   var invalid = (0, _validationError.validationError)(meta, validateOnMount);
-  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], FormFieldGridProps, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, (0, _extends2["default"])({
-    locale: locale,
-    utils: _moment["default"]
-  }, MuiPickersUtilsProviderProps), /*#__PURE__*/_react["default"].createElement(_pickers.TimePicker, (0, _extends2["default"])({
-    fullWidth: true,
-    margin: "normal",
-    label: label,
-    helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
-    disabled: isDisabled || isReadOnly,
-    placeholder: placeholder,
-    required: isRequired,
-    error: !!invalid,
-    readOnly: isReadOnly
+  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], FormFieldGridProps, /*#__PURE__*/_react["default"].createElement(_TimePicker["default"], (0, _extends2["default"])({
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({}, props, {
+        fullWidth: true,
+        margin: "normal",
+        label: label,
+        helperText: invalid || (meta.touched || validateOnMount) && meta.warning || helperText || description,
+        placeholder: placeholder,
+        required: isRequired,
+        error: !!invalid
+      }));
+    },
+    readOnly: isReadOnly,
+    disabled: isDisabled || isReadOnly
   }, input, {
     value: input.value || null
-  }, rest))));
+  }, rest)));
 };
 
 TimePicker.propTypes = {
@@ -76,14 +75,11 @@ TimePicker.propTypes = {
   label: _propTypes["default"].node,
   helperText: _propTypes["default"].node,
   validateOnMount: _propTypes["default"].bool,
-  locale: _propTypes["default"].string,
   description: _propTypes["default"].node,
-  FormFieldGridProps: _propTypes["default"].object,
-  MuiPickersUtilsProviderProps: _propTypes["default"].object
+  FormFieldGridProps: _propTypes["default"].object
 };
 TimePicker.defaultProps = {
-  FormFieldGridProps: {},
-  MuiPickersUtilsProviderProps: {}
+  FormFieldGridProps: {}
 };
 var _default = TimePicker;
 exports["default"] = _default;

package/validation-error/validation-error.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.validationError = void 0;
+exports.validationError = exports["default"] = void 0;
 
 var validationError = function validationError(meta, validateOnMount) {
   if (validateOnMount) {

package/wizard/step-buttons.js

@@ -11,8 +11,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _styles = require("@mui/material/styles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -21,23 +25,43 @@ var _selectNext = _interopRequireDefault(require("@data-driven-forms/common/wiza
 
 var _formSpy = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/form-spy"));
 
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Button = _interopRequireDefault(require("@mui/material/node/Button"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
-var _styles = require("@material-ui/core/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
 var _excluded = ["buttons"];
+var PREFIX = 'WizardStepButtons';
+var classes = {
+  wizardBody: "".concat(PREFIX, "-wizardBody"),
+  buttons: "".concat(PREFIX, "-buttons"),
+  button: "".concat(PREFIX, "-button"),
+  buttonsContainer: "".concat(PREFIX, "-buttonsContainer")
+};
+var StyledGrid = (0, _styles.styled)(_Grid["default"])(function () {
+  var _ref;
+
+  return _ref = {}, (0, _defineProperty2["default"])(_ref, "& .".concat(classes.wizardBody), {
+    padding: 24,
+    margin: 0
+  }), (0, _defineProperty2["default"])(_ref, "& .".concat(classes.buttons), {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }), (0, _defineProperty2["default"])(_ref, "& .".concat(classes.button), {
+    marginRight: 16
+  }), (0, _defineProperty2["default"])(_ref, "&.".concat(classes.buttonsContainer), {
+    marginTop: 36
+  }), _ref;
+});
 
-var NextButton = function NextButton(_ref) {
-  var nextStep = _ref.nextStep,
-      valid = _ref.valid,
-      handleNext = _ref.handleNext,
-      nextLabel = _ref.nextLabel,
-      getState = _ref.getState,
-      handleSubmit = _ref.handleSubmit,
-      submitLabel = _ref.submitLabel,
-      conditionalSubmitFlag = _ref.conditionalSubmitFlag;
+var NextButton = function NextButton(_ref2) {
+  var nextStep = _ref2.nextStep,
+      valid = _ref2.valid,
+      handleNext = _ref2.handleNext,
+      nextLabel = _ref2.nextLabel,
+      getState = _ref2.getState,
+      handleSubmit = _ref2.handleSubmit,
+      submitLabel = _ref2.submitLabel,
+      conditionalSubmitFlag = _ref2.conditionalSubmitFlag;
   var nextResult = nextStep ? (0, _selectNext["default"])(nextStep, getState) : nextStep;
   var progressNext = nextResult !== conditionalSubmitFlag && nextStep;
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -60,29 +84,10 @@ NextButton.propTypes = {
   getState: _propTypes["default"].func.isRequired,
   conditionalSubmitFlag: _propTypes["default"].string.isRequired
 };
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    wizardBody: {
-      padding: 24,
-      margin: 0
-    },
-    buttons: {
-      display: 'flex',
-      justifyContent: 'flex-end'
-    },
-    button: {
-      marginRight: 16
-    },
-    buttonsContainer: {
-      marginTop: 36
-    }
-  };
-});
 
-var WizardStepButtons = function WizardStepButtons(_ref2) {
-  var Buttons = _ref2.buttons,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  var classes = useStyles();
+var WizardStepButtons = function WizardStepButtons(_ref3) {
+  var Buttons = _ref3.buttons,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
 
   if (Buttons) {
     return /*#__PURE__*/_react["default"].createElement(Buttons, (0, _extends2["default"])({
@@ -102,10 +107,10 @@ var WizardStepButtons = function WizardStepButtons(_ref2) {
       formOptions = props.formOptions,
       ButtonContainerProps = props.ButtonContainerProps,
       conditionalSubmitFlag = props.conditionalSubmitFlag;
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledGrid, (0, _extends2["default"])({
     container: true,
     direction: "row",
-    justify: "space-evenly"
+    justifyContent: "space-evenly"
   }, ButtonContainerProps, {
     className: (0, _clsx["default"])(classes.buttonsContainer, ButtonContainerProps.className)
   }), /*#__PURE__*/_react["default"].createElement(_formSpy["default"], {

package/wizard/wizard-nav.js

@@ -9,41 +9,44 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _styles = require("@mui/material/styles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _styles = require("@material-ui/core/styles");
+var _Stepper = _interopRequireDefault(require("@mui/material/node/Stepper"));
 
-var _Stepper = _interopRequireDefault(require("@material-ui/core/Stepper"));
+var _Step = _interopRequireDefault(require("@mui/material/node/Step"));
 
-var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
+var _StepLabel = _interopRequireDefault(require("@mui/material/node/StepLabel"));
 
-var _StepLabel = _interopRequireDefault(require("@material-ui/core/StepLabel"));
-
-var useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    stepper: {
-      width: '100%'
-    }
-  };
+var PREFIX = 'WizardNav';
+var classes = {
+  stepper: "".concat(PREFIX, "-stepper")
+};
+var StyledStepper = (0, _styles.styled)(_Stepper["default"])(function () {
+  return (0, _defineProperty2["default"])({}, "&.".concat(classes.stepper), {
+    width: '100%'
+  });
 });
 
-var WizardNav = function WizardNav(_ref) {
-  var StepperProps = _ref.StepperProps,
-      stepsInfo = _ref.stepsInfo,
-      activeStepIndex = _ref.activeStepIndex;
-  var classes = useStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], (0, _extends2["default"])({}, StepperProps, {
+var WizardNav = function WizardNav(_ref2) {
+  var StepperProps = _ref2.StepperProps,
+      stepsInfo = _ref2.stepsInfo,
+      activeStepIndex = _ref2.activeStepIndex;
+  return /*#__PURE__*/_react["default"].createElement(StyledStepper, (0, _extends2["default"])({}, StepperProps, {
     className: (0, _clsx["default"])(classes.stepper, StepperProps.className),
     activeStep: activeStepIndex
-  }), stepsInfo.map(function (_ref2, idx) {
-    var title = _ref2.title,
-        label = _ref2.label,
-        StepLabelProps = _ref2.StepLabelProps,
-        StepProps = _ref2.StepProps;
+  }), stepsInfo.map(function (_ref3, idx) {
+    var title = _ref3.title,
+        label = _ref3.label,
+        StepLabelProps = _ref3.StepLabelProps,
+        StepProps = _ref3.StepProps;
     return /*#__PURE__*/_react["default"].createElement(_Step["default"], (0, _extends2["default"])({}, StepProps, {
       key: idx
     }), /*#__PURE__*/_react["default"].createElement(_StepLabel["default"], StepLabelProps, title || label));

package/wizard/wizard.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { StepLabelProps, StepProps, GridProps, StepperProps } from "@material-ui/core";
+import { StepLabelProps, StepProps, GridProps, StepperProps } from "@mui/material";
 
 export interface WizardButtonLabels {
   next?: ReactNode;