@data-driven-forms/mui-component-mapper 3.15.2 → 3.16.0-v5-beta

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/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;

package/wizard/wizard.js

@@ -15,15 +15,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styles = require("@mui/material/styles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _wizardContext = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/wizard-context"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
-var _styles = require("@material-ui/core/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
 var _wizard = _interopRequireDefault(require("@data-driven-forms/common/wizard"));
 
@@ -39,23 +39,25 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 useStyles = (0, _styles.makeStyles)(function () {
-  return {
-    wizardBody: {
-      padding: 24,
-      margin: 0
-    }
-  };
+var PREFIX = 'MuiWizard';
+var classes = {
+  wizardBody: "".concat(PREFIX, "-wizardBody")
+};
+var StyledWizard = (0, _styles.styled)(_Grid["default"])(function () {
+  return (0, _defineProperty2["default"])({}, "& .".concat(classes.wizardBody), {
+    padding: 24,
+    margin: 0
+  });
 });
 
-var WizardInternal = function WizardInternal(_ref) {
-  var buttonLabels = _ref.buttonLabels,
-      stepsInfo = _ref.stepsInfo,
-      ButtonContainerProps = _ref.ButtonContainerProps,
-      StepperProps = _ref.StepperProps,
-      WizardBodyProps = _ref.WizardBodyProps,
-      WizardProps = _ref.WizardProps,
-      conditionalSubmitFlag = _ref.conditionalSubmitFlag;
+var WizardInternal = function WizardInternal(_ref2) {
+  var buttonLabels = _ref2.buttonLabels,
+      stepsInfo = _ref2.stepsInfo,
+      ButtonContainerProps = _ref2.ButtonContainerProps,
+      StepperProps = _ref2.StepperProps,
+      WizardBodyProps = _ref2.WizardBodyProps,
+      WizardProps = _ref2.WizardProps,
+      conditionalSubmitFlag = _ref2.conditionalSubmitFlag;
 
   var _useContext = (0, _react.useContext)(_wizardContext["default"]),
       formOptions = _useContext.formOptions,
@@ -66,8 +68,6 @@ var WizardInternal = function WizardInternal(_ref) {
       activeStepIndex = _useContext.activeStepIndex,
       prevSteps = _useContext.prevSteps;
 
-  var classes = useStyles();
-
   var buttonLabelsFinal = _objectSpread({
     next: 'Continue',
     submit: 'Submit',
@@ -75,9 +75,8 @@ var WizardInternal = function WizardInternal(_ref) {
     back: 'Back'
   }, buttonLabels);
 
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
-    container: true,
-    spacing: 3
+  return /*#__PURE__*/_react["default"].createElement(StyledWizard, (0, _extends2["default"])({
+    container: true
   }, WizardProps, {
     onKeyDown: onKeyDown
   }), stepsInfo && /*#__PURE__*/_react["default"].createElement(_wizardNav["default"], {