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

package/esm/textarea/textarea.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import MuiTextField from "@material-ui/core/esm/TextField";
+import MuiTextField from "@mui/material/TextField";
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';

package/esm/time-picker/time-picker.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["input", "isReadOnly", "isDisabled", "placeholder", "isRequired", "label", "helperText", "description", "validateOnMount", "meta", "locale", "MuiPickersUtilsProviderProps", "FormFieldGridProps"];
+var _excluded = ["input", "isReadOnly", "isDisabled", "placeholder", "isRequired", "label", "helperText", "description", "validateOnMount", "meta", "MuiPickersUtilsProviderProps", "FormFieldGridProps"];
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MuiPickersUtilsProvider, TimePicker as MUITimePicker } from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
+import MUITimePicker from "@mui/lab/TimePicker";
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
+import TextField from "@mui/material/TextField";
 
 var TimePicker = function TimePicker(props) {
   var _useFieldApi = useFieldApi(props),
@@ -22,29 +22,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 = _objectWithoutProperties(_useFieldApi, _excluded);
 
   var invalid = validationError(meta, validateOnMount);
-  return /*#__PURE__*/React.createElement(FormFieldGrid, FormFieldGridProps, /*#__PURE__*/React.createElement(MuiPickersUtilsProvider, _extends({
-    locale: locale,
-    utils: MomentUtils
-  }, MuiPickersUtilsProviderProps), /*#__PURE__*/React.createElement(MUITimePicker, _extends({
-    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.createElement(FormFieldGrid, FormFieldGridProps, /*#__PURE__*/React.createElement(MUITimePicker, _extends({
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, 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 = {
@@ -57,13 +56,10 @@ TimePicker.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
-  locale: PropTypes.string,
   description: PropTypes.node,
-  FormFieldGridProps: PropTypes.object,
-  MuiPickersUtilsProviderProps: PropTypes.object
+  FormFieldGridProps: PropTypes.object
 };
 TimePicker.defaultProps = {
-  FormFieldGridProps: {},
-  MuiPickersUtilsProviderProps: {}
+  FormFieldGridProps: {}
 };
 export default TimePicker;

package/esm/wizard/step-buttons.js

@@ -1,24 +1,47 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["buttons"];
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import selectNext from '@data-driven-forms/common/wizard/select-next';
 import FormSpy from "@data-driven-forms/react-form-renderer/form-spy";
-import Button from "@material-ui/core/esm/Button";
-import Grid from "@material-ui/core/esm/Grid";
-import { makeStyles } from '@material-ui/core/styles';
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+var PREFIX = 'WizardStepButtons';
+var classes = {
+  wizardBody: "".concat(PREFIX, "-wizardBody"),
+  buttons: "".concat(PREFIX, "-buttons"),
+  button: "".concat(PREFIX, "-button"),
+  buttonsContainer: "".concat(PREFIX, "-buttonsContainer")
+};
+var StyledGrid = styled(Grid)(function () {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, "& .".concat(classes.wizardBody), {
+    padding: 24,
+    margin: 0
+  }), _defineProperty(_ref, "& .".concat(classes.buttons), {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }), _defineProperty(_ref, "& .".concat(classes.button), {
+    marginRight: 16
+  }), _defineProperty(_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 ? selectNext(nextStep, getState) : nextStep;
   var progressNext = nextResult !== conditionalSubmitFlag && nextStep;
   return /*#__PURE__*/React.createElement(Button, {
@@ -41,30 +64,10 @@ NextButton.propTypes = {
   getState: PropTypes.func.isRequired,
   conditionalSubmitFlag: PropTypes.string.isRequired
 };
-var useStyles = 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 = _objectWithoutProperties(_ref2, _excluded);
 
-  var classes = useStyles();
+var WizardStepButtons = function WizardStepButtons(_ref3) {
+  var Buttons = _ref3.buttons,
+      props = _objectWithoutProperties(_ref3, _excluded);
 
   if (Buttons) {
     return /*#__PURE__*/React.createElement(Buttons, _extends({
@@ -84,10 +87,10 @@ var WizardStepButtons = function WizardStepButtons(_ref2) {
       formOptions = props.formOptions,
       ButtonContainerProps = props.ButtonContainerProps,
       conditionalSubmitFlag = props.conditionalSubmitFlag;
-  return /*#__PURE__*/React.createElement(Grid, _extends({
+  return /*#__PURE__*/React.createElement(StyledGrid, _extends({
     container: true,
     direction: "row",
-    justify: "space-evenly"
+    justifyContent: "space-evenly"
   }, ButtonContainerProps, {
     className: clsx(classes.buttonsContainer, ButtonContainerProps.className)
   }), /*#__PURE__*/React.createElement(FormSpy, {

package/esm/wizard/wizard-nav.js

@@ -1,32 +1,34 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import Stepper from "@material-ui/core/esm/Stepper";
-import Step from "@material-ui/core/esm/Step";
-import StepLabel from "@material-ui/core/esm/StepLabel";
-var useStyles = makeStyles(function () {
-  return {
-    stepper: {
-      width: '100%'
-    }
-  };
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+var PREFIX = 'WizardNav';
+var classes = {
+  stepper: "".concat(PREFIX, "-stepper")
+};
+var StyledStepper = styled(Stepper)(function () {
+  return _defineProperty({}, "&.".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.createElement(Stepper, _extends({}, StepperProps, {
+var WizardNav = function WizardNav(_ref2) {
+  var StepperProps = _ref2.StepperProps,
+      stepsInfo = _ref2.stepsInfo,
+      activeStepIndex = _ref2.activeStepIndex;
+  return /*#__PURE__*/React.createElement(StyledStepper, _extends({}, StepperProps, {
     className: clsx(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.createElement(Step, _extends({}, StepProps, {
       key: idx
     }), /*#__PURE__*/React.createElement(StepLabel, StepLabelProps, title || label));

package/esm/wizard/wizard.js

@@ -6,31 +6,33 @@ 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) { _defineProperty(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; }
 
 import React, { useContext } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import WizardContext from "@data-driven-forms/react-form-renderer/wizard-context";
-import Grid from "@material-ui/core/esm/Grid";
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from "@mui/material/Grid";
 import Wizard from '@data-driven-forms/common/wizard';
 import WizardNav from './wizard-nav';
 import WizardStepButtons from './step-buttons';
-var useStyles = makeStyles(function () {
-  return {
-    wizardBody: {
-      padding: 24,
-      margin: 0
-    }
-  };
+var PREFIX = 'MuiWizard';
+var classes = {
+  wizardBody: "".concat(PREFIX, "-wizardBody")
+};
+var StyledWizard = styled(Grid)(function () {
+  return _defineProperty({}, "& .".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 = useContext(WizardContext),
       formOptions = _useContext.formOptions,
@@ -41,8 +43,6 @@ var WizardInternal = function WizardInternal(_ref) {
       activeStepIndex = _useContext.activeStepIndex,
       prevSteps = _useContext.prevSteps;
 
-  var classes = useStyles();
-
   var buttonLabelsFinal = _objectSpread({
     next: 'Continue',
     submit: 'Submit',
@@ -50,9 +50,8 @@ var WizardInternal = function WizardInternal(_ref) {
     back: 'Back'
   }, buttonLabels);
 
-  return /*#__PURE__*/React.createElement(Grid, _extends({
-    container: true,
-    spacing: 3
+  return /*#__PURE__*/React.createElement(StyledWizard, _extends({
+    container: true
   }, WizardProps, {
     onKeyDown: onKeyDown
   }), stepsInfo && /*#__PURE__*/React.createElement(WizardNav, {

package/field-array/field-array.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { FieldArrayField } from "@data-driven-forms/react-form-renderer";
-import { FormControlProps, GridProps, ButtonProps, FormHelperTextProps, TypographyProps } from "@material-ui/core";
+import { FormControlProps, GridProps, ButtonProps, FormHelperTextProps, TypographyProps } from "@mui/material";
 
 export interface FieldArrayButtonLabels {
   add?: ReactNode;

package/field-array/field-array.js

@@ -21,6 +21,8 @@ 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 _useFormApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-form-api"));
@@ -29,23 +31,21 @@ var _fieldArray = _interopRequireDefault(require("@data-driven-forms/react-form-
 
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _Button = _interopRequireDefault(require("@mui/material/node/Button"));
 
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+var _Typography = _interopRequireDefault(require("@mui/material/node/Typography"));
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _FormControl = _interopRequireDefault(require("@mui/material/node/FormControl"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/node/FormHelperText"));
 
-var _styles = require("@material-ui/core/styles");
+var _IconButton = _interopRequireDefault(require("@mui/material/node/IconButton"));
 
-var _Redo = _interopRequireDefault(require("@material-ui/icons/Redo"));
+var _Redo = _interopRequireDefault(require("@mui/icons-material/Redo"));
 
-var _Undo = _interopRequireDefault(require("@material-ui/icons/Undo"));
+var _Undo = _interopRequireDefault(require("@mui/icons-material/Undo"));
 
 var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
 
@@ -57,6 +57,8 @@ var _excluded = ["remove"],
     _excluded2 = ["remove"],
     _excluded3 = ["arrayValidator", "label", "description", "fields", "defaultItem", "meta", "minItems", "maxItems", "noItemsMessage", "FormFieldGridProps", "FormControlProps", "buttonLabels", "GridContainerProps", "HeaderGridProps", "HeaderProps", "UndoButtonProps", "RedoButtonProps", "AddButtonProps", "DescriptionGridProps", "DescriptionProps", "BodyGridProps", "NoItemsProps", "FormHelperTextGridProps", "FormHelperTextProps", "FieldContainerProps", "FieldGroupGridProps", "RemoveButtonGridProps", "RemoveButtonProps"];
 
+var _styled;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -65,28 +67,30 @@ 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 useFielArrayStyles = (0, _styles.makeStyles)({
-  formControl: {
-    width: '100%'
-  },
-  centerText: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  buttonsToEnd: {
-    display: 'flex',
-    justifyContent: 'flex-end'
-  },
-  header: {
-    display: 'flex'
-  },
-  label: {
-    flexGrow: 1
-  },
-  fieldArrayGroup: {
-    marginBottom: 32
-  }
-});
+var PREFIX = 'DynamicArray';
+var classes = {
+  formControl: "".concat(PREFIX, "-formControl"),
+  centerText: "".concat(PREFIX, "-centerText"),
+  buttonsToEnd: "".concat(PREFIX, "-buttonsToEnd"),
+  header: "".concat(PREFIX, "-header"),
+  label: "".concat(PREFIX, "-label"),
+  fieldArrayGroup: "".concat(PREFIX, "-fieldArrayGroup")
+};
+var StyledFormFieldGrid = (0, _styles.styled)(_formFieldGrid["default"])((_styled = {}, (0, _defineProperty2["default"])(_styled, "& .".concat(classes.formControl), {
+  width: '100%'
+}), (0, _defineProperty2["default"])(_styled, "& .".concat(classes.centerText), {
+  display: 'flex',
+  justifyContent: 'center'
+}), (0, _defineProperty2["default"])(_styled, "& .".concat(classes.buttonsToEnd), {
+  display: 'flex',
+  justifyContent: 'flex-end'
+}), (0, _defineProperty2["default"])(_styled, "& .".concat(classes.header), {
+  display: 'flex'
+}), (0, _defineProperty2["default"])(_styled, "& .".concat(classes.label), {
+  flexGrow: 1
+}), (0, _defineProperty2["default"])(_styled, "&.".concat(classes.fieldArrayGroup), {
+  marginBottom: 32
+}), _styled));
 var ArrayItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var fields = _ref.fields,
       fieldIndex = _ref.fieldIndex,
@@ -103,7 +107,6 @@ var ArrayItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _useFormApi = (0, _useFormApi2["default"])(),
       renderForm = _useFormApi.renderForm;
 
-  var classes = useFielArrayStyles();
   var editedFields = fields.map(function (field, index) {
     var computedName = field.name ? "".concat(name, ".").concat(field.name) : name;
     return _objectSpread(_objectSpread({}, field), {}, {
@@ -240,13 +243,12 @@ var DynamicArray = function DynamicArray(_ref5) {
 
   var combinedButtonLabels = _objectSpread(_objectSpread({}, defaultButtonLabels), buttonLabels);
 
-  var classes = useFielArrayStyles();
   var dirty = meta.dirty,
       submitFailed = meta.submitFailed,
       error = meta.error,
       submitError = meta.submitError;
   var isError = (dirty || submitFailed) && error && typeof error === 'string';
-  return /*#__PURE__*/_react["default"].createElement(_formFieldGrid["default"], (0, _extends2["default"])({}, FormFieldGridProps, {
+  return /*#__PURE__*/_react["default"].createElement(StyledFormFieldGrid, (0, _extends2["default"])({}, FormFieldGridProps, {
     className: (0, _clsx["default"])(classes.fieldArrayGroup, FormFieldGridProps.classname)
   }), /*#__PURE__*/_react["default"].createElement(_FormControl["default"], (0, _extends2["default"])({
     component: "fieldset",
@@ -313,13 +315,17 @@ var DynamicArray = function DynamicArray(_ref5) {
       component: "span",
       disabled: state.index === 0,
       onClick: undo
-    }, UndoButtonProps), /*#__PURE__*/_react["default"].createElement(_Undo["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({
+    }, UndoButtonProps, {
+      size: "large"
+    }), /*#__PURE__*/_react["default"].createElement(_Undo["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({
       color: "primary",
       "aria-label": "redo",
       component: "span",
       disabled: state.index === state.history.length,
       onClick: redo
-    }, RedoButtonProps), /*#__PURE__*/_react["default"].createElement(_Redo["default"], null)), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    }, RedoButtonProps, {
+      size: "large"
+    }), /*#__PURE__*/_react["default"].createElement(_Redo["default"], null)), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
       color: "primary",
       onClick: pushWrapper,
       disabled: value.length >= maxItems

package/form-field-grid/form-field-grid.d.ts

@@ -1,5 +1,5 @@
 import { AnyObject } from '@data-driven-forms/react-form-renderer';
-import { GridProps } from '@material-ui/core';
+import { GridProps } from '@mui/material';
 
 declare const FormFieldGrid: React.ComponentType<GridProps>;
 

package/form-field-grid/form-field-grid.js

@@ -11,29 +11,32 @@ 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 _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _Grid = _interopRequireDefault(require("@mui/material/node/Grid"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _excluded = ["children", "className"];
-var useFinalFormFieldStyles = (0, _styles.makeStyles)({
-  grid: {
-    position: 'relative'
-  }
-});
+var PREFIX = 'FormFieldGrid';
+var classes = {
+  grid: "".concat(PREFIX, "-grid")
+};
+var StyledGrid = (0, _styles.styled)(_Grid["default"])((0, _defineProperty2["default"])({}, "&.".concat(classes.grid), {
+  position: 'relative'
+}));
 
 var FormFieldGrid = function FormFieldGrid(_ref) {
   var children = _ref.children,
       className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useFinalFormFieldStyles();
-  return /*#__PURE__*/_react["default"].createElement(_Grid["default"], (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledGrid, (0, _extends2["default"])({
     xs: 12,
     item: true,
     className: (0, _clsx["default"])(classes.grid, className)