@danderson00/react-forms-material 0.0.25 → 0.1.0

package/dist/index.js

@@ -1,214 +1,135 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Text = exports.Submit = exports.Select = exports.RadioButton = exports.Radio = exports.Input = exports.Form = exports.ErrorMessage = exports.Checkbox = exports.Button = void 0;
-Object.defineProperty(exports, "useFormValues", {
-  enumerable: true,
-  get: function get() {
-    return _reactForms.useFormValues;
-  }
+import { createElement } from 'react';
+import { FormProvider, context, createRawConsumer, wrapInput, wrapSubmit, useFormValues } from '@danderson00/react-forms';
+import { extractErrorMessage } from '@danderson00/react-forms/dist/ErrorMessage';
+import MuiButton from '@mui/material/Button';
+import MuiCheckbox from '@mui/material/Checkbox';
+import MuiFormControl from '@mui/material/FormControl';
+import MuiFormHelperText from '@mui/material/FormHelperText';
+import MuiInput from '@mui/material/Input';
+import MuiInputLabel from '@mui/material/InputLabel';
+import MuiMenuItem from '@mui/material/MenuItem';
+import MuiRadio from '@mui/material/Radio';
+import MuiRadioGroup from '@mui/material/RadioGroup';
+import MuiSelect from '@mui/material/Select';
+import './styles';
+export const ErrorMessage = ({
+  error
+}) => createElement(MuiFormHelperText, {
+  children: extractErrorMessage(error),
+  error: true
 });
-exports.wrapField = void 0;
-
-var _react = require("react");
-
-var _reactForms = require("@danderson00/react-forms");
-
-var _ErrorMessage = require("@danderson00/react-forms/dist/ErrorMessage");
-
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
-
-var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
-
-var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-require("./styles");
-
-var _excluded = ["className", "error", "hiddenLabel", "variant", "margin", "label", "helperText", "shrinkLabel", "valid"],
-    _excluded2 = ["name", "values", "labels", "numeric", "required", "getFieldValue", "getFieldValues"],
-    _excluded3 = ["values", "labels"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var ErrorMessage = function ErrorMessage(_ref) {
-  var error = _ref.error;
-  return /*#__PURE__*/(0, _react.createElement)(_FormHelperText["default"], {
-    children: (0, _ErrorMessage.extractErrorMessage)(error),
-    error: true
-  });
-};
-
-exports.ErrorMessage = ErrorMessage;
-var Form = (0, _reactForms.FormProvider)(_reactForms.context.Provider, {
+export const Form = FormProvider(context.Provider, {
   margin: 'dense'
 }, ErrorMessage);
-exports.Form = Form;
-var Submit = (0, _reactForms.wrapSubmit)(_Button["default"]);
-exports.Submit = Submit;
-var Button = _Button["default"];
-exports.Button = Button;
-
-var wrapped = function wrapped(component, options, baseOptions) {
-  return (0, _reactForms.wrapInput)(base(component, options, baseOptions), _objectSpread({
-    passErrorProp: true
-  }, options));
-};
+export const Submit = wrapSubmit(MuiButton);
+export const Button = MuiButton;
+export { useFormValues };
 
-var base = function base(component) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      alwaysShrinkLabel = _ref2.alwaysShrinkLabel,
-      _ref2$shrinkLabel = _ref2.shrinkLabel,
-      shrinkLabelOption = _ref2$shrinkLabel === void 0 ? true : _ref2$shrinkLabel,
-      passError = _ref2.passError;
-
-  return function (_ref3) {
-    var className = _ref3.className,
-        error = _ref3.error,
-        hiddenLabel = _ref3.hiddenLabel,
-        variant = _ref3.variant,
-        margin = _ref3.margin,
-        label = _ref3.label,
-        helperText = _ref3.helperText,
-        shrinkLabel = _ref3.shrinkLabel,
-        valid = _ref3.valid,
-        inputProps = _objectWithoutProperties(_ref3, _excluded);
+const wrapped = (component, options, baseOptions) => wrapInput(base(component, options, baseOptions), {
+  passErrorProp: true,
+  ...options
+});
 
-    return /*#__PURE__*/(0, _react.createElement)(_FormControl["default"], {
-      className: "react-forms-material-field".concat(options.type ? " react-forms-material-".concat(options.type) : '').concat(className ? " ".concat(className) : ''),
-      error: error,
-      fullWidth: inputProps.fullWidth,
-      hiddenLabel: hiddenLabel,
-      required: inputProps.required,
-      variant: variant,
-      margin: margin,
-      children: [].concat(_toConsumableArray(label ? [/*#__PURE__*/(0, _react.createElement)(_InputLabel["default"], _objectSpread(_objectSpread({
-        key: 'label',
-        htmlFor: inputProps.id,
-        children: label
-      }, shrinkLabelOption === false && {
-        shrink: false
-      }), (alwaysShrinkLabel || shrinkLabel) && {
-        className: 'MuiInputLabel-shrink'
-      }))] : []), [/*#__PURE__*/(0, _react.createElement)(component, _objectSpread(_objectSpread({
-        key: 'input',
-        variant: variant
-      }, passError && {
-        error: error
-      }), inputProps))], _toConsumableArray(helperText ? [/*#__PURE__*/(0, _react.createElement)(_FormHelperText["default"], {
-        key: 'helperText',
-        children: helperText
-      })] : []))
-    });
-  };
-};
+const base = (component, options = {}, {
+  alwaysShrinkLabel,
+  shrinkLabel: shrinkLabelOption = true,
+  passError
+} = {}) => ({
+  className,
+  error,
+  hiddenLabel,
+  variant,
+  margin,
+  label,
+  helperText,
+  shrinkLabel,
+  valid,
+  ...inputProps
+}) => createElement(MuiFormControl, {
+  className: `react-forms-material-field${options.type ? ` react-forms-material-${options.type}` : ''}${className ? ` ${className}` : ''}`,
+  error,
+  fullWidth: inputProps.fullWidth,
+  hiddenLabel,
+  required: inputProps.required,
+  variant,
+  margin,
+  children: [...(label ? [createElement(MuiInputLabel, {
+    key: 'label',
+    htmlFor: inputProps.id,
+    children: label,
+    ...(shrinkLabelOption === false && {
+      shrink: false
+    }),
+    ...((alwaysShrinkLabel || shrinkLabel) && {
+      className: 'MuiInputLabel-shrink'
+    })
+  })] : []), createElement(component, {
+    key: 'input',
+    variant,
+    ...(passError && {
+      error
+    }),
+    ...inputProps
+  }), ...(helperText ? [createElement(MuiFormHelperText, {
+    key: 'helperText',
+    children: helperText
+  })] : [])]
+});
 
-var Input = (0, _reactForms.wrapInput)(_Input["default"]);
-exports.Input = Input;
-var Text = wrapped(_Input["default"]);
-exports.Text = Text;
-var Checkbox = wrapped(_Checkbox["default"], {
+export const Input = wrapInput(MuiInput);
+export const Text = wrapped(MuiInput);
+export const Checkbox = wrapped(MuiCheckbox, {
   type: 'checkbox'
 }, {
   alwaysShrinkLabel: true
 });
-exports.Checkbox = Checkbox;
-var RadioButton = wrapped(_Radio["default"], {
+export const RadioButton = wrapped(MuiRadio, {
   type: 'radio'
 }, {
   shrinkLabel: false
 });
-exports.RadioButton = RadioButton;
-var Radio = (0, _reactForms.createRawConsumer)(base(function (_ref4) {
-  var name = _ref4.name,
-      values = _ref4.values,
-      labels = _ref4.labels,
-      numeric = _ref4.numeric,
-      required = _ref4.required,
-      getFieldValue = _ref4.getFieldValue,
-      getFieldValues = _ref4.getFieldValues,
-      props = _objectWithoutProperties(_ref4, _excluded2);
-
-  return /*#__PURE__*/(0, _react.createElement)(_RadioGroup["default"], _objectSpread(_objectSpread({}, props), {}, {
-    children: [values.map(function (value, index) {
-      return /*#__PURE__*/(0, _react.createElement)(RadioButton, _objectSpread({
-        name: name,
-        value: value,
-        numeric: numeric,
-        key: value,
-        label: labels && labels[index] || value,
-        margin: props.margin
-      }, required && {
-        required: required
-      }));
-    })]
-  }));
-}, {
+export const Radio = createRawConsumer(base(({
+  name,
+  values,
+  labels,
+  numeric,
+  required,
+  getFieldValue,
+  getFieldValues,
+  ...props
+}) => createElement(MuiRadioGroup, { ...props,
+  children: [values.map((value, index) => createElement(RadioButton, {
+    name,
+    value,
+    numeric,
+    key: value,
+    label: labels && labels[index] || value,
+    margin: props.margin,
+    ...(required && {
+      required
+    })
+  }))]
+}), {
   type: 'radiogroup'
 }, {
   alwaysShrinkLabel: true
 }));
-exports.Radio = Radio;
-var Select = wrapped(function (_ref5) {
-  var values = _ref5.values,
-      labels = _ref5.labels,
-      props = _objectWithoutProperties(_ref5, _excluded3);
-
-  return /*#__PURE__*/(0, _react.createElement)(_Select["default"], _objectSpread(_objectSpread({}, props), {}, {
-    children: values.map(function (value, index) {
-      return /*#__PURE__*/(0, _react.createElement)(_MenuItem["default"], _objectSpread({
-        value: value,
-        key: value,
-        children: labels && labels[index] || value
-      }, props.required && {
-        required: props.required
-      }));
+export const Select = wrapped(({
+  values,
+  labels,
+  ...props
+}) => createElement(MuiSelect, { ...props,
+  children: values.map((value, index) => createElement(MuiMenuItem, {
+    value,
+    key: value,
+    children: labels && labels[index] || value,
+    ...(props.required && {
+      required: props.required
     })
-  }));
-}, {
+  }))
+}), {
   type: 'select'
 }, {
   alwaysShrinkLabel: true
 });
-exports.Select = Select;
-var wrapField = wrapped;
-exports.wrapField = wrapField;
+export const wrapField = wrapped;

package/dist/styles.js

@@ -1,7 +1,48 @@
-"use strict";
+import injectCss from '@danderson00/react-forms/dist/injectCss';
+injectCss('react-forms-material-styles', `
+  .react-forms-material-radiogroup.MuiFormControl-root {
+    overflow: hidden;
+  }
 
-var _injectCss = _interopRequireDefault(require("@danderson00/react-forms/dist/injectCss"));
+  .react-forms-material-radio.MuiFormControl-root {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+  
+  .react-forms-material-radio .MuiInputLabel-formControl {
+    position: static;
+  }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+  .react-forms-material-radio .MuiRadio-root {
+    transform: translate(0, 9px) scale(1);
+  }  
+  
+  .react-forms-material-checkbox .MuiCheckbox-root {
+    transform: translate(0, 9px) scale(1);
+  }
+  
+  /* allow forms to be embedded in dialogs - essentially replicate a few styles */
+  .MuiDialog-container form {
+    display: flex;
+  }
+  
+  .MuiDialog-container form .MuiDialogContent-root {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+  }
 
-(0, _injectCss["default"])('react-forms-material-styles', "\n  .react-forms-material-radiogroup.MuiFormControl-root {\n    overflow: hidden;\n  }\n\n  .react-forms-material-radio.MuiFormControl-root {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n  \n  .react-forms-material-radio .MuiInputLabel-formControl {\n    position: static;\n  }\n\n  .react-forms-material-radio .MuiRadio-root {\n    transform: translate(0, 9px) scale(1);\n  }  \n  \n  .react-forms-material-checkbox .MuiCheckbox-root {\n    transform: translate(0, 9px) scale(1);\n  }\n  \n  /* allow forms to be embedded in dialogs - essentially replicate a few styles */\n  .MuiDialog-container form {\n    display: flex;\n  }\n  \n  .MuiDialog-container form .MuiDialogContent-root {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  .MuiDialog-container form .MuiDialogActions-root {\n    align-self: flex-end;\n  }\n");
+  .MuiDialog-container form .MuiDialogActions-root {
+    align-self: flex-end;
+  }
+  
+  .react-forms input::-webkit-outer-spin-button,
+  .react-forms input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .react-forms input[type=number] {
+    -moz-appearance: textfield;
+  }
+`);

package/package.json

@@ -1,32 +1,23 @@
 {
   "name": "@danderson00/react-forms-material",
-  "version": "0.0.25",
+  "version": "0.1.0",
   "description": "Beautiful, ultra simple, stateless, validated forms for use in React function components",
-  "main": "dist/index.js",
   "module": "src/index.js",
   "scripts": {
-    "test": "jest",
-    "build": "babel src --out-dir dist",
-    "prepare": "babel src --source-maps false --out-dir dist"
+    "test": "jest"
   },
   "dependencies": {
-    "@danderson00/react-forms": "0.0.25",
-    "@material-ui/core": "^4.11.3"
   },
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "@babel/preset-react": "^7.0.0",
-    "babel-jest": "26.6.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "jest": "26.6.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@danderson00/react-forms": "0.0.27",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.8.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "jest": {
     "moduleNameMapper": {
@@ -36,12 +27,6 @@
       "<rootDir>test/setup/beforeAll.js"
     ]
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
-  },
   "keywords": [
     "react",
     "stateless",
@@ -60,4 +45,4 @@
     "type": "git",
     "url": "git+https://gitlab.com/danderson00/react-forms.git"
   }
-}
+}

package/src/index.js

@@ -1,16 +1,16 @@
 import { createElement } from 'react'
 import { FormProvider, context, createRawConsumer, wrapInput, wrapSubmit, useFormValues } from '@danderson00/react-forms'
 import { extractErrorMessage } from '@danderson00/react-forms/dist/ErrorMessage'
-import MuiButton from '@material-ui/core/Button'
-import MuiCheckbox from '@material-ui/core/Checkbox'
-import MuiFormControl from '@material-ui/core/FormControl'
-import MuiFormHelperText from '@material-ui/core/FormHelperText'
-import MuiInput from '@material-ui/core/Input'
-import MuiInputLabel from '@material-ui/core/InputLabel'
-import MuiMenuItem from '@material-ui/core/MenuItem'
-import MuiRadio from '@material-ui/core/Radio'
-import MuiRadioGroup from '@material-ui/core/RadioGroup'
-import MuiSelect from '@material-ui/core/Select'
+import MuiButton from '@mui/material/Button'
+import MuiCheckbox from '@mui/material/Checkbox'
+import MuiFormControl from '@mui/material/FormControl'
+import MuiFormHelperText from '@mui/material/FormHelperText'
+import MuiInput from '@mui/material/Input'
+import MuiInputLabel from '@mui/material/InputLabel'
+import MuiMenuItem from '@mui/material/MenuItem'
+import MuiRadio from '@mui/material/Radio'
+import MuiRadioGroup from '@mui/material/RadioGroup'
+import MuiSelect from '@mui/material/Select'
 import './styles'
 
 export const ErrorMessage = ({ error }) => createElement(MuiFormHelperText, { children: extractErrorMessage(error), error: true })
@@ -25,38 +25,40 @@ const wrapped = (component, options, baseOptions) => wrapInput(
 )
 
 const base = (component, options = {}, { alwaysShrinkLabel, shrinkLabel: shrinkLabelOption = true, passError } = {}) => (
-  ({ className, error, hiddenLabel, variant, margin, label, helperText, shrinkLabel, valid, ...inputProps }) => (
-    createElement(MuiFormControl, {
-      className: `react-forms-material-field${options.type ? ` react-forms-material-${options.type}` : ''}${className ? ` ${className}` : ''}`,
-      error,
-      fullWidth: inputProps.fullWidth,
-      hiddenLabel,
-      required: inputProps.required,
-      variant,
-      margin,
-      children: [
-        ...(label ? [createElement(MuiInputLabel, {
-          key: 'label',
-          htmlFor: inputProps.id,
-          children: label,
-          ...(shrinkLabelOption === false && { shrink: false }),
-          ...((alwaysShrinkLabel || shrinkLabel) && { className: 'MuiInputLabel-shrink' }),
-        })] : []),
+  ({ className, error, hiddenLabel, variant, margin, label, helperText, shrinkLabel, valid, ...inputProps }) => {
+    return (
+      createElement(MuiFormControl, {
+        className: `react-forms-material-field${options.type ? ` react-forms-material-${options.type}` : ''}${className ? ` ${className}` : ''}`,
+        error,
+        fullWidth: inputProps.fullWidth,
+        hiddenLabel,
+        required: inputProps.required,
+        variant,
+        margin,
+        children: [
+          ...(label ? [createElement(MuiInputLabel, {
+            key: 'label',
+            htmlFor: inputProps.id,
+            children: label,
+            ...(shrinkLabelOption === false && { shrink: false }),
+            ...((alwaysShrinkLabel || shrinkLabel) && { className: 'MuiInputLabel-shrink' }),
+          })] : []),
 
-        createElement(component, {
-          key: 'input',
-          variant,
-          ...(passError && { error }),
-          ...inputProps
-        }),
+          createElement(component, {
+            key: 'input',
+            variant,
+            ...(passError && { error }),
+            ...inputProps
+          }),
 
-        ...(helperText ? [createElement(MuiFormHelperText, {
-          key: 'helperText',
-          children: helperText
-        })] : [])
-      ]
-    })
-  )
+          ...(helperText ? [createElement(MuiFormHelperText, {
+            key: 'helperText',
+            children: helperText
+          })] : [])
+        ]
+      })
+    )
+  }
 )
 
 export const Input = wrapInput(MuiInput)

package/src/styles.js

@@ -5,24 +5,39 @@ injectCss('react-forms-material-styles', `
     overflow: hidden;
   }
 
+  .react-forms-material-radio, 
+  .react-forms-material-checkbox {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+    align-items: center;
+  }
+
   .react-forms-material-radio.MuiFormControl-root {
     flex-direction: row-reverse;
     justify-content: flex-end;
   }
   
-  .react-forms-material-radio .MuiInputLabel-formControl {
+  .react-forms-material-radio .MuiInputLabel-formControl, 
+  .react-forms-material-radiogroup .MuiInputLabel-formControl,
+  .react-forms-material-checkbox .MuiInputLabel-formControl {
     position: static;
+    transform: none;
+    line-height: 1;
+    transform: translateY(2px) scale(1);
   }
-
-  .react-forms-material-radio .MuiRadio-root {
-    transform: translate(0, 9px) scale(1);
-  }  
   
-  .react-forms-material-checkbox .MuiCheckbox-root {
-    transform: translate(0, 9px) scale(1);
+  
+  .react-forms input::-webkit-outer-spin-button,
+  .react-forms input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .react-forms input[type=number] {
+    -moz-appearance: textfield;
   }
   
-  /* allow forms to be embedded in dialogs - essentially replicate a few styles */
+  ${''/* allow forms to be embedded in dialogs - essentially replicate a few styles */}
   .MuiDialog-container form {
     display: flex;
   }