@maif/react-forms 1.0.56 → 1.0.59

package/lib/esm/index.js

@@ -1,16 +1,17 @@
+import 'fs';
 import * as yup from 'yup';
-import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
+import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import classNames from 'classnames';
+import deepEqual from 'fast-deep-equal';
 import { Eye, EyeOff, PlusCircle, MinusCircle, Trash2, ChevronDown, ChevronUp, HelpCircle, Loader, Upload } from 'react-feather';
 import { useFormContext, useController, useForm, FormProvider, Controller, useFieldArray, useWatch } from 'react-hook-form';
 import { DatePicker } from 'react-rainbow-components';
 import ReactToolTip from 'react-tooltip';
 import { v4 } from 'uuid';
-import { createUseStyles } from 'react-jss';
 import CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
-import deepEqual from 'fast-deep-equal';
+import hash$1 from 'object-hash';
 import showdown from 'showdown';
 import '@fortawesome/fontawesome-free/css/all.css';
 import 'highlight.js/styles/monokai.css';
@@ -75,7 +76,7 @@ var _matches = function matches() {
   return function (r) {
     return r.matches(regexp, {
       message: message,
-      excludeEmptyString: false
+      excludeEmptyString: true
     });
   };
 }; //string & number
@@ -532,279 +533,12 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var _switch_button_on, _style;
-
-var buttonOutline = function buttonOutline(color, darker) {
-  return {
-    color: color,
-    borderColor: color,
-    "&:hover": {
-      color: '#fff',
-      backgroundColor: color,
-      borderColor: darker
-    },
-    "&.active": {
-      color: '#fff',
-      backgroundColor: color,
-      borderColor: darker
-    }
-  };
-};
-
-var style = (_style = {
-  input: {
-    display: "block",
-    width: "100%",
-    padding: "8px 12px",
-    fontSize: "1rem",
-    color: "#495057",
-    border: "1px solid #ced4da",
-    borderRadius: 4,
-    "&[readonly]": {
-      backgroundColor: "#e9ecef",
-      opacity: 1
-    }
-  },
-  btn: {
-    borderRadius: 5,
-    padding: 10,
-    fontSize: "1rem",
-    cursor: "pointer",
-    borderWidth: '1px',
-    backgroundColor: '#fff',
-    '&:disabled': {
-      opacity: .6,
-      cursor: 'not-allowed'
-    }
-  },
-  btn_sm: {
-    fontSize: "0.875rem",
-    padding: ".25rem .5rem",
-    lineHeight: "1.5",
-    borderRadius: ".2rem"
-  },
-  btn_group: {
-    "& > button:not(:last-child)": {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    },
-    "& > button:not(:first-child)": {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }
-  },
-  btn_red: buttonOutline("#dc3545", "#bd2130"),
-  btn_green: buttonOutline("#28a745", "#1e7e34"),
-  btn_blue: buttonOutline("#007bff", "#0069d9"),
-  btn_grey: buttonOutline("#6c757d", "#5c636a"),
-  txt_red: {
-    color: "#dc3545"
-  },
-  ml_5: {
-    marginLeft: 5
-  },
-  ml_10: {
-    marginLeft: 10
-  },
-  mr_5: {
-    marginRight: 5
-  },
-  mr_10: {
-    marginRight: 10
-  },
-  mt_5: {
-    marginTop: 5
-  },
-  mt_10: {
-    marginTop: 10
-  },
-  mt_20: {
-    marginTop: 20
-  },
-  mb_5: {
-    marginBottom: 5
-  },
-  mb_10: {
-    marginBottom: 10
-  },
-  mb_20: {
-    marginBottom: 20
-  },
-  pt_15: {
-    paddingTop: 15
-  },
-  p_15: {
-    padding: 15
-  },
-  pr_15: {
-    paddingRight: 15
-  },
-  w_100: {
-    width: '100%'
-  },
-  w_50: {
-    width: '50%'
-  },
-  d_none: {
-    display: "none"
-  },
-  flexWrap: {
-    flexWrap: 'wrap'
-  },
-  flex: {
-    display: "flex"
-  },
-  flexColumn: {
-    flexDirection: "column"
-  },
-  flex_grow_1: {
-    flexGrow: 1
-  },
-  jc_between: {
-    justifyContent: "space-between"
-  },
-  jc_end: {
-    justifyContent: "end"
-  },
-  jc_flex_end: {
-    justifyContent: "flex-end"
-  },
-  jc_flex_start: {
-    justifyContent: "flex-start"
-  },
-  ac_center: {
-    alignContent: "center"
-  },
-  ai_center: {
-    alignItems: "center"
-  },
-  cursor_pointer: {
-    cursor: "pointer"
-  },
-  cursor_not_allowed: {
-    cursor: "not-allowed"
-  },
-  collapse: {
-    display: "flex",
-    justifyContent: "space-between",
-    cursor: "pointer"
-  },
-  collapse_label: {
-    fontWeight: "bold",
-    marginTop: 7
-  }
-}, _defineProperty$1(_style, "collapse_label", {
-  fontWeight: "bold",
-  marginTop: 7
-}), _defineProperty$1(_style, "collapse_error", {
-  color: '#dc3545'
-}), _defineProperty$1(_style, "datepicker", {
-  "& input": {
-    borderRadius: "4px"
-  }
-}), _defineProperty$1(_style, "code", {}), _defineProperty$1(_style, "input__boolean__on", {
-  color: "MediumSeaGreen"
-}), _defineProperty$1(_style, "input__boolean__off", {
-  color: "tomato"
-}), _defineProperty$1(_style, "input__invalid", {
-  borderColor: '#dc3545 !important'
-}), _defineProperty$1(_style, "feedback", {
-  width: "100%",
-  marginTop: ".25rem",
-  fontSize: "80%"
-}), _defineProperty$1(_style, "display__none", {
-  display: "none"
-}), _defineProperty$1(_style, "collapse__inline", {
-  "& .form-group+.form-group": {
-    marginLeft: '20px'
-  }
-}), _defineProperty$1(_style, "nestedform__border", {
-  borderLeft: '2px solid lightGray',
-  paddingLeft: '0.5rem',
-  marginLeft: '0.5rem',
-  marginBottom: '.5rem',
-  paddingBottom: '1rem',
-  marginRight: '.5rem',
-  paddingRight: '2.5rem'
-}), _defineProperty$1(_style, "border__error", {
-  borderColor: "#dc3545"
-}), _defineProperty$1(_style, "btn_for_descriptionToolbar", {
-  textAlign: "left",
-  cursor: "pointer",
-  height: "22px",
-  padding: "4px",
-  border: "none",
-  background: "none",
-  color: "#242729",
-  marginRight: "5px",
-  marginLeft: "5px"
-}), _defineProperty$1(_style, "content_switch_button_on", {
-  width: "35px",
-  height: "22px",
-  borderRadius: "20px",
-  display: "flex",
-  marginTop: "10px",
-  backgroundColor: "green",
-  border: "1px solid green",
-  justifyContent: "flex-end"
-}), _defineProperty$1(_style, "content_switch_button_off", {
-  width: "35px",
-  height: "22px",
-  borderRadius: "20px",
-  display: "flex",
-  marginTop: "10px",
-  backgroundColor: "#dc3545",
-  border: "1px solid #dc3545",
-  justifyContent: "flex-start"
-}), _defineProperty$1(_style, "content_switch_button_null", {
-  width: "35px",
-  height: "22px",
-  borderRadius: "20px",
-  display: "flex",
-  marginTop: "10px",
-  backgroundColor: "#fff",
-  border: "1px solid #dfdfdf",
-  justifyContent: "flex-start"
-}), _defineProperty$1(_style, "switch_button_on", (_switch_button_on = {
-  backgroundColor: "#fff",
-  borderRadius: "20px",
-  cursor: "pointer",
-  width: "20px",
-  height: "20px"
-}, _defineProperty$1(_switch_button_on, "backgroundColor", "#fff"), _defineProperty$1(_switch_button_on, "borderRadius", "20px"), _switch_button_on)), _defineProperty$1(_style, "switch_button_off", {
-  backgroundColor: "#fff",
-  borderRadius: "20px",
-  cursor: "pointer",
-  width: "20px",
-  height: "20px",
-  border: "1px solid #dfdfdf",
-  boxShadow: "1px 0px 5px 0px rgba(0, 0, 0, 0.3)"
-}), _defineProperty$1(_style, "switch_button_null", {
-  backgroundColor: "#fff",
-  borderRadius: "20px",
-  cursor: "pointer",
-  width: "22px",
-  height: "22px",
-  marginTop: "-1px",
-  marginLeft: "-1px",
-  border: "1px solid #dfdfdf",
-  boxShadow: "1px 0px 5px 0px rgba(0, 0, 0, 0.3)"
-}), _style);
-
-var useCustomStyle = function useCustomStyle() {
-  var overrideStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var useStyle = createUseStyles(_objectSpread2$1(_objectSpread2$1({}, style), overrideStyle));
-  var classes = useStyle();
-  return classes;
-};
-
 var BooleanInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
 
   var onChange = _ref.onChange,
       value = _ref.value,
       readOnly = _ref.readOnly;
-  var classes = useCustomStyle();
 
   var handleClick = function handleClick(value) {
     if (!readOnly) {
@@ -813,28 +547,28 @@ var BooleanInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames = {}, _defineProperty$1(_classNames, classes.cursor_pointer, !readOnly), _defineProperty$1(_classNames, classes.cursor_not_allowed, readOnly), _classNames))
+    className: classNames((_classNames = {}, _defineProperty$1(_classNames, 'mrf-cursor_pointer', !readOnly), _defineProperty$1(_classNames, 'mrf-cursor_not_allowed', readOnly), _classNames))
   }, !!value && /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.content_switch_button_on),
+    className: classNames('mrf-content_switch_button_on'),
     onClick: function onClick() {
       return handleClick(false);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.switch_button_on)
+    className: classNames('mrf-switch_button_on')
   })), !value && value !== null && /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.content_switch_button_off),
+    className: classNames('mrf-content_switch_button_off'),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.switch_button_off)
+    className: classNames('mrf-switch_button_off')
   })), value === null && /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.content_switch_button_null),
+    className: classNames('mrf-content_switch_button_null'),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.switch_button_null)
+    className: classNames('mrf-switch_button_null')
   })));
 });
 
@@ -846,30 +580,28 @@ var Collapse = function Collapse(props) {
       collapsed = _useState2[0],
       setCollapsed = _useState2[1];
 
-  var classes = useCustomStyle();
-
   var toggle = function toggle(e) {
     if (e && e.preventDefault) e.stopPropagation();
     setCollapsed(!collapsed);
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("hr", {
-    className: classNames(_defineProperty$1({}, classes.collapse_error, props.errored))
+    className: classNames(_defineProperty$1({}, 'mrf-collapse_error', props.errored))
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classes.cursor_pointer, " ").concat(classes.flex, " ").concat(classes.jc_between),
+    className: "mrf-cursor_pointer mrf-flex mrf-jc_between",
     onClick: toggle
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames(classes.collapse_label, _defineProperty$1({}, classes.collapse_error, props.errored))
+    className: classNames('mrf-collapse_label', _defineProperty$1({}, 'mrf-collapse_error', props.errored))
   }, props.label), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames(classes.btn, classes.btn_sm, classes.ml_5, _defineProperty$1({}, classes.collapse_error, props.errored)),
+    className: classNames('mrf-btn', 'mrf-btn_sm', 'mrf-ml_5', _defineProperty$1({}, 'mrf-collapse_error', props.errored)),
     onClick: toggle
   }, !!collapsed && /*#__PURE__*/React.createElement(Eye, {
     size: 16
   }), !collapsed && /*#__PURE__*/React.createElement(EyeOff, {
     size: 16
   }))), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(classes.ml_10), (_classNames4 = {}, _defineProperty$1(_classNames4, classes.display__none, !!collapsed), _defineProperty$1(_classNames4, classes.flex, !!props.inline), _defineProperty$1(_classNames4, classes.collapse__inline, !!props.inline), _classNames4))
+    className: classNames('mrf-ml_10', (_classNames4 = {}, _defineProperty$1(_classNames4, 'mrf-display__none', !!collapsed), _defineProperty$1(_classNames4, 'mrf-flex', !!props.inline), _defineProperty$1(_classNames4, 'mrf-collapse__inline', !!props.inline), _classNames4))
   }, props.children), props.lineEnd && /*#__PURE__*/React.createElement("hr", null));
 };
 
@@ -940,6 +672,25 @@ var arrayFlatten = function arrayFlatten(array) {
 var isDefined = function isDefined(value) {
   return value !== null && value !== undefined;
 };
+var useHashEffect = function useHashEffect(func, deps) {
+  var isFirst = useRef(true);
+  var prevDeps = useRef(deps);
+  useEffect(function () {
+    if (isFirst.current) {
+      func();
+      isFirst.current = false;
+      return;
+    }
+
+    var depsHash = hash$1(deps);
+    var prevDepsHash = hash$1(prevDeps.current);
+
+    if (depsHash !== prevDepsHash) {
+      prevDeps.current = deps;
+      func();
+    }
+  }, [deps]);
+};
 
 var valueToSelectOption = function valueToSelectOption(value) {
   var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -977,7 +728,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
   var _useFormContext = useFormContext(),
       getValues = _useFormContext.getValues;
 
-  var classes = useCustomStyle();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
       label: v[props.transformer.label],
@@ -1103,7 +853,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
         key: idx,
         type: "button",
         disabled: props.disabled,
-        className: classNames(props.className, classes.btn, classes.btn_grey, classes.ml_5, {
+        className: classNames(props.className, 'mrf-btn mrf-btn_grey mrf-ml_5', {
           active: active
         }),
         onClick: function onClick() {
@@ -1250,13 +1000,12 @@ var ObjectInput = function ObjectInput(props) {
     onChange(newState);
   };
 
-  var classes = useCustomStyle();
   return /*#__PURE__*/React.createElement("div", {
     className: props.className
   }, Object.keys(internalState || {}).length === 0 && /*#__PURE__*/React.createElement("button", {
     disabled: props.disabled,
     type: "button",
-    className: classNames(classes.flex, classes.btn, classes.btn_blue, classes.btn_sm),
+    className: "mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm",
     onClick: addFirst
   }, /*#__PURE__*/React.createElement(PlusCircle, null)), Object.entries(internalState || {}).map(function (_ref9, idx) {
     var _ref10 = _slicedToArray(_ref9, 2),
@@ -1266,12 +1015,12 @@ var ObjectInput = function ObjectInput(props) {
         value = _ref10$.value;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(classes.flex, classes.mt_5),
+      className: "mrf-flex mrf-mt_5",
       key: idx
     }, /*#__PURE__*/React.createElement("input", {
       disabled: props.disabled,
       type: "text",
-      className: classNames(classes.w_50, classes.input),
+      className: "mrf-w_50 mrf-input",
       placeholder: props.placeholderKey,
       value: key,
       onChange: function onChange(e) {
@@ -1280,7 +1029,7 @@ var ObjectInput = function ObjectInput(props) {
     }), /*#__PURE__*/React.createElement("input", {
       disabled: props.disabled,
       type: "text",
-      className: classNames(classes.w_50, classes.input),
+      className: "mrf-w_50 mrf-input",
       placeholder: props.placeholderValue,
       value: value,
       onChange: function onChange(e) {
@@ -1289,14 +1038,14 @@ var ObjectInput = function ObjectInput(props) {
     }), /*#__PURE__*/React.createElement("button", {
       disabled: props.disabled,
       type: "button",
-      className: classNames(classes.flex, classes.btn, classes.btn_red, classes.btn_sm, classes.ml_10),
+      className: "mrf-flex mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_10",
       onClick: function onClick() {
         return remove(id);
       }
     }, /*#__PURE__*/React.createElement(MinusCircle, null)), idx === Object.keys(internalState).length - 1 && /*#__PURE__*/React.createElement("button", {
       disabled: props.disabled,
       type: "button",
-      className: classNames(classes.flex, classes.btn, classes.btn_blue, classes.btn_sm, classes.ml_5),
+      className: "mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm mrf-ml_5",
       onClick: addNext
     }, /*#__PURE__*/React.createElement(PlusCircle, null)));
   }));
@@ -28693,7 +28442,7 @@ var MarkdownInput = function MarkdownInput(props) {
   }];
 
   var showPreview = function showPreview() {
-    var parent = _toConsumableArray$1(document.getElementsByClassName('preview'));
+    var parent = _toConsumableArray$1(document.getElementsByClassName('mrf-preview'));
 
     if (parent.length > 0) _toConsumableArray$1(parent[0].querySelectorAll('pre code')).forEach(function (block) {
       return hljs.highlightElement(block);
@@ -28701,7 +28450,6 @@ var MarkdownInput = function MarkdownInput(props) {
   };
 
   var injectButtons = function injectButtons() {
-    var classes = useCustomStyle();
     return commands.map(function (command, idx) {
       if (command.component) {
         return command.component(idx);
@@ -28709,7 +28457,7 @@ var MarkdownInput = function MarkdownInput(props) {
 
       return /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: classNames(classes.btn_for_descriptionToolbar),
+        className: classNames('mrf-btn_for_descriptionToolbar'),
         "aria-label": command.name,
         title: command.name,
         key: "toolbar-btn-".concat(idx),
@@ -28737,7 +28485,6 @@ var MarkdownInput = function MarkdownInput(props) {
     });
   };
 
-  var classes = useCustomStyle();
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(props.className)
   }, !props.readOnly && /*#__PURE__*/React.createElement("div", {
@@ -28746,7 +28493,7 @@ var MarkdownInput = function MarkdownInput(props) {
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames(classes.btn, classes.btn_sm),
+    className: "mrf-btn mrf-btn_sm",
     style: {
       color: !preview ? '#7f96af' : 'white',
       backgroundColor: preview ? '#7f96af' : 'white'
@@ -28756,7 +28503,7 @@ var MarkdownInput = function MarkdownInput(props) {
     }
   }, "Write"), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames(classes.btn, classes.btn_sm, classes.ml_5),
+    className: "mrf-btn mrf-btn_sm mrf-ml_5",
     style: {
       color: preview ? '#7f96af' : 'white',
       backgroundColor: preview ? 'white' : '#7f96af'
@@ -28765,13 +28512,13 @@ var MarkdownInput = function MarkdownInput(props) {
       return setPreview(true);
     }
   }, "Preview"))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.flex, classes.flexWrap)
+    className: "mrf-flex mrf-flexWrap"
   }, injectButtons())), !preview && /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
     setRef: function setRef(e) {
       return ref.current = e;
     }
   })), preview && /*#__PURE__*/React.createElement("div", {
-    className: "preview",
+    className: "mrf-preview",
     dangerouslySetInnerHTML: {
       __html: converter.makeHtml(props.value)
     }
@@ -29055,9 +28802,9 @@ var usePrevious = function usePrevious(value) {
 };
 
 var BasicWrapper = function BasicWrapper(_ref) {
-  var entry = _ref.entry,
-      className = _ref.className,
-      label = _ref.label,
+  var entry = _ref.entry;
+      _ref.className;
+      var label = _ref.label,
       help = _ref.help,
       children = _ref.children,
       render = _ref.render;
@@ -29066,7 +28813,6 @@ var BasicWrapper = function BasicWrapper(_ref) {
     return children;
   }
 
-  var classes = useCustomStyle();
   var id = v4();
 
   var _useFormContext = useFormContext(),
@@ -29094,19 +28840,19 @@ var BasicWrapper = function BasicWrapper(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classes.mt_10, " ").concat(className),
+    className: "mrf-mt_10",
     style: {
       position: 'relative'
     }
   }, label && /*#__PURE__*/React.createElement("label", {
-    className: "".concat(classes.flex, " ").concat(classes.ai_center, " ").concat(classes.mb_5),
+    className: "mrf-flex mrf-ai_center mrf-mb_5",
     htmlFor: entry
   }, /*#__PURE__*/React.createElement("span", null, label), help && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactToolTip, {
     html: true,
     place: 'bottom',
     id: id
   }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(classes.flex, " ").concat(classes.ai_center),
+    className: "mrf-flex mrf-ai_center",
     "data-html": true,
     "data-tip": help,
     "data-for": id
@@ -29118,7 +28864,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
       cursor: 'help'
     }
   })))), children, error && /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.feedback, _defineProperty$1({}, classes.txt_red, errorDisplayed))
+    className: classNames('mrf-feedback', _defineProperty$1({}, 'mrf-txt_red', errorDisplayed))
   }, error.message));
 };
 
@@ -29262,15 +29008,12 @@ var Watcher = function Watcher(_ref6) {
       schema = _ref6.schema,
       onSubmit = _ref6.onSubmit,
       handleSubmit = _ref6.handleSubmit;
-      _ref6.getValues;
-      _ref6.watch;
   var data = useWatch({
     control: control
   });
-  var prev = usePrevious(data);
-  useEffect(function () {
+  useHashEffect(function () {
     if (!!options.autosubmit) {
-      if (!deepEqual(data, prev)) handleSubmit(function () {
+      handleSubmit(function () {
         onSubmit(cleanOutputArray(data, schema));
       })();
     }
@@ -29297,13 +29040,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
       onSubmit = _ref7.onSubmit,
       _ref7$onError = _ref7.onError,
       onError = _ref7$onError === void 0 ? function () {} : _ref7$onError,
-      footer = _ref7.footer,
-      _ref7$style = _ref7.style,
-      style = _ref7$style === void 0 ? {} : _ref7$style,
-      className = _ref7.className,
+      footer = _ref7.footer;
+      _ref7.style;
+      var className = _ref7.className,
       _ref7$options = _ref7.options,
       options = _ref7$options === void 0 ? {} : _ref7$options;
-  var classes = useCustomStyle(style);
+      _ref7.nostyle;
   var formFlow = flow || Object.keys(schema);
 
   var maybeCustomHttpClient = function maybeCustomHttpClient(url, method) {
@@ -29360,12 +29102,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
       trigger = methods.trigger,
       getValues = methods.getValues,
       watch = methods.watch;
-  var prev = usePrevious(value);
-  var prevSchema = usePrevious(schema);
-  useEffect(function () {
-    if (prev && prevSchema && !deepEqual(value, prev) || !deepEqual(schema, prevSchema)) {
-      _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
-    }
+  useHashEffect(function () {
+    _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
   }, [value, schema]);
 
   var functionalProperty = function functionalProperty(entry, prop) {
@@ -29403,7 +29141,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     handleSubmit: _handleSubmit,
     watch: methods.watch
   }), /*#__PURE__*/React.createElement("form", {
-    className: className || "".concat(classes.pr_15, " ").concat(classes.w_100),
+    className: className || "mrf-pr_15 mrf-w_100",
     onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data, schema);
       onSubmit(clean);
@@ -29470,8 +29208,6 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
 var Footer = function Footer(props) {
   var _props$actions, _props$actions$submit, _props$actions2, _props$actions2$submi, _props$actions3, _props$actions3$cance, _props$actions5, _props$actions5$cance, _props$actions6, _props$actions6$reset, _props$actions7, _props$actions7$reset, _props$actions8, _props$actions8$submi;
 
-  var classes = useCustomStyle();
-
   if (props.render) {
     return props.render({
       reset: props.reset,
@@ -29481,9 +29217,9 @@ var Footer = function Footer(props) {
 
   var isSubmitDisplayed = ((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : (_props$actions$submit = _props$actions.submit) === null || _props$actions$submit === void 0 ? void 0 : _props$actions$submit.display) === undefined ? true : !!((_props$actions2 = props.actions) !== null && _props$actions2 !== void 0 && (_props$actions2$submi = _props$actions2.submit) !== null && _props$actions2$submi !== void 0 && _props$actions2$submi.display);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classes.flex, " ").concat(classes.jc_end, " ").concat(classes.mt_5)
+    className: "mrf-flex mrf-jc_end mrf-mt_5"
   }, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$cance = _props$actions3.cancel) === null || _props$actions3$cance === void 0 ? void 0 : _props$actions3$cance.display) && /*#__PURE__*/React.createElement("button", {
-    className: "".concat(classes.btn, " ").concat(classes.btn_red),
+    className: "mrf-btn mrf-btn_red",
     type: "button",
     onClick: function onClick() {
       var _props$actions4;
@@ -29491,11 +29227,11 @@ var Footer = function Footer(props) {
       return (_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : _props$actions4.cancel.action();
     }
   }, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$cance = _props$actions5.cancel) === null || _props$actions5$cance === void 0 ? void 0 : _props$actions5$cance.label) || 'Cancel'), ((_props$actions6 = props.actions) === null || _props$actions6 === void 0 ? void 0 : (_props$actions6$reset = _props$actions6.reset) === null || _props$actions6$reset === void 0 ? void 0 : _props$actions6$reset.display) && /*#__PURE__*/React.createElement("button", {
-    className: "".concat(classes.btn, " ").concat(classes.btn_red),
+    className: "mrf-btn mrf-btn_red",
     type: "button",
     onClick: props.reset
   }, ((_props$actions7 = props.actions) === null || _props$actions7 === void 0 ? void 0 : (_props$actions7$reset = _props$actions7.reset) === null || _props$actions7$reset === void 0 ? void 0 : _props$actions7$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/React.createElement("button", {
-    className: "".concat(classes.btn, " ").concat(classes.btn_green, " ").concat(classes.ml_10),
+    className: "mrf-btn mrf-btn_green mrf-ml_10",
     type: "submit"
   }, ((_props$actions8 = props.actions) === null || _props$actions8 === void 0 ? void 0 : (_props$actions8$submi = _props$actions8.submit) === null || _props$actions8$submi === void 0 ? void 0 : _props$actions8$submi.label) || 'Save'));
 };
@@ -29512,7 +29248,6 @@ var Step = function Step(_ref8) {
       functionalProperty = _ref8.functionalProperty,
       parent = _ref8.parent,
       onAfterChange = _ref8.onAfterChange;
-  var classes = useCustomStyle();
 
   var _useFormContext2 = useFormContext(),
       _useFormContext2$form = _useFormContext2.formState,
@@ -29670,7 +29405,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement("textarea", {
             type: "text",
-            className: classNames(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames('mrf-input', step.className, _defineProperty$1({}, 'mrf-mrf-input__invalid', errorDisplayed))
           }));
 
         case format.code:
@@ -29682,7 +29417,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(Component, {
-            className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
 
         case format.markdown:
@@ -29692,7 +29427,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(MarkdownInput, {
-            className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
 
         case format.buttonsSelect:
@@ -29704,7 +29439,7 @@ var Step = function Step(_ref8) {
               entry: entry,
               errorDisplayed: errorDisplayed
             }, /*#__PURE__*/React.createElement(SelectInput, _extends({
-              className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+              className: classNames('mrf-flex_grow_1', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
               disabled: functionalProperty(entry, step.disabled)
             }, step.props, {
               possibleValues: step.options,
@@ -29725,7 +29460,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement("input", {
             type: step.format || 'text',
-            className: classNames(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames('mrf-input', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29739,7 +29474,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(SelectInput, _extends({
-            className: classNames(classes.content, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames('mrf-content', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
@@ -29759,7 +29494,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement("input", {
             type: step.format || 'number',
-            className: classNames(classes.input, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames('mrf-input', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29769,7 +29504,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         errorDisplayed: errorDisplayed
       }, /*#__PURE__*/React.createElement(BooleanInput, {
-        className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+        className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
       }));
 
     case type.object:
@@ -29782,7 +29517,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(SelectInput, _extends({
-            className: classNames(classes.flex_grow_1, _defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames('mrf-flex_grow_1', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
@@ -29835,7 +29570,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed,
             component: function component(field, props) {
               return /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
-                className: classNames(_defineProperty$1({}, classes.input__invalid, error)),
+                className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', error)),
                 onChange: function onChange(e) {
                   _readOnlyError("errorDisplayed");
                   var v;
@@ -29867,7 +29602,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(ObjectInput, {
-            className: classNames(_defineProperty$1({}, classes.input__invalid, errorDisplayed))
+            className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29878,7 +29613,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         errorDisplayed: errorDisplayed
       }, /*#__PURE__*/React.createElement(DatePicker, {
-        className: classNames(classes.datepicker, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+        className: classNames('mrf-datepicker', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
         formatStyle: "large"
       }));
 
@@ -29915,24 +29650,24 @@ var Step = function Step(_ref8) {
 
             var files = field.value || [];
             return /*#__PURE__*/React.createElement("div", {
-              className: classNames(classes.flex, classes.ai_center, _defineProperty$1({}, classes.input__invalid, error))
+              className: classNames('mrf-flex', 'mrf-ai_center', step.className, _defineProperty$1({}, 'mrf-input__invalid', error))
             }, /*#__PURE__*/React.createElement("input", {
               ref: function ref(r) {
                 return setInput(r);
               },
               type: "file",
               multiple: true,
-              className: classes.d_none,
+              className: "mrf-d_none",
               onChange: setFiles
             }), /*#__PURE__*/React.createElement("button", {
               type: "button",
-              className: "".concat(classes.btn, " ").concat(classes.btn_sm, " ").concat(classes.flex, " ").concat(classes.ai_center),
+              className: "mrf-btn mrf-btn_sm mrf-flex mrf-ai_center",
               disabled: uploading || functionalProperty(entry, step.disabled),
               onClick: trigger
             }, uploading && /*#__PURE__*/React.createElement(Loader, null), !uploading && /*#__PURE__*/React.createElement(Upload, null), /*#__PURE__*/React.createElement("span", {
-              className: "".concat(classes.ml_5)
+              className: "mrf-ml_5"
             }, "Select file(s)")), /*#__PURE__*/React.createElement("span", {
-              className: "".concat(classes.ml_5)
+              className: "mrf-ml_5"
             }, files.length <= 0 ? 'No files selected' : files.map(function (r) {
               return r.name;
             }).join(" , ")));
@@ -29954,7 +29689,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         component: function component(field, props) {
           return /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
-            className: classNames(_defineProperty$1({}, classes.input__invalid, error)),
+            className: classNames(_defineProperty$1({}, 'mrf-input__invalid', error)),
             onChange: function onChange(v) {
               field.onChange(v);
               option(step.onChange).map(function (onChange) {
@@ -29980,7 +29715,6 @@ var ArrayStep = function ArrayStep(_ref11) {
       step = _ref11.step,
       component = _ref11.component,
       disabled = _ref11.disabled;
-  var classes = useCustomStyle();
 
   var _useFormContext3 = useFormContext(),
       getValues = _useFormContext3.getValues,
@@ -30013,7 +29747,7 @@ var ArrayStep = function ArrayStep(_ref11) {
     return /*#__PURE__*/React.createElement("div", {
       key: field.id
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(classes.ai_center, classes.mt_5),
+      className: "mrf-ai_center mrf-mt_5",
       style: {
         position: 'relative'
       }
@@ -30032,7 +29766,7 @@ var ArrayStep = function ArrayStep(_ref11) {
         top: '2px',
         right: 0
       },
-      className: classNames(classes.btn, classes.btn_red, classes.btn_sm, classes.ml_5),
+      className: "mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_5",
       disabled: disabled,
       onClick: function onClick() {
         remove(idx);
@@ -30042,10 +29776,10 @@ var ArrayStep = function ArrayStep(_ref11) {
       size: 16
     }))));
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.flex, classes.jc_flex_end)
+    className: "mrf-flex mrf-jc_flex_end"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames(classes.btn, classes.btn_blue, classes.btn_sm, classes.mt_5, _defineProperty$1({}, classes.input__invalid, errorDisplayed)),
+    className: classNames('mrf-btn', 'mrf-btn_blue', 'mrf-btn_sm', 'mrf-mt_5', _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
     onClick: function onClick() {
       var newValue = cleanInputArray({}, getValues(entry), step.flow, step.schema);
       append({
@@ -30062,7 +29796,7 @@ var ArrayStep = function ArrayStep(_ref11) {
     },
     disabled: disabled
   }, "Add"), error && /*#__PURE__*/React.createElement("div", {
-    className: "invalid-feedback"
+    className: "mrf-invalid-feedback"
   }, error.message)));
 };
 
@@ -30090,17 +29824,16 @@ var NestedForm = function NestedForm(_ref12) {
       collapsed = _useState8[0],
       setCollapsed = _useState8[1];
 
-  var classes = useCustomStyle();
   useWatch(step === null || step === void 0 ? void 0 : (_step$conditionalSche = step.conditionalSchema) === null || _step$conditionalSche === void 0 ? void 0 : _step$conditionalSche.ref);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
     var ref = option(condiSchema.ref).map(function (ref) {
       return getValues(ref);
     }).getOrNull();
-    var rawData = getValues();
+    var rawValues = getValues();
     var filterSwitch = condiSchema["switch"].find(function (s) {
       if (typeof s.condition === 'function') {
         return s.condition({
-          rawData: rawData,
+          rawValues: rawValues,
           ref: ref
         });
       } else {
@@ -30121,15 +29854,12 @@ var NestedForm = function NestedForm(_ref12) {
     schema: schema,
     flow: flow
   });
-  var prevSchema = usePrevious(schemaAndFlow.schema);
-  useEffect(function () {
-    if (!!prevSchema && !deepEqual(prevSchema, schemaAndFlow.schema)) {
-      var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema, getValues(parent));
-      setValue(parent, def, {
-        shouldValidate: false
-      });
-    }
-  }, [prevSchema, schemaAndFlow.schema]);
+  useHashEffect(function () {
+    var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema, getValues(parent));
+    setValue(parent, def, {
+      shouldValidate: false
+    });
+  }, [schemaAndFlow.schema]);
   var computedSandF = schemaAndFlow.flow.reduce(function (acc, entry) {
     var step = schemaAndFlow.schema[entry];
     var visibleStep = option(step).map(function (s) {
@@ -30160,13 +29890,13 @@ var NestedForm = function NestedForm(_ref12) {
     return x.visibleStep;
   }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames17 = {}, _defineProperty$1(_classNames17, classes.nestedform__border, bordered), _defineProperty$1(_classNames17, classes.border__error, !!errorDisplayed), _classNames17)),
+    className: classNames((_classNames17 = {}, _defineProperty$1(_classNames17, 'mrf-nestedform__border', bordered), _defineProperty$1(_classNames17, 'mrf-border__error', !!errorDisplayed), _classNames17)),
     style: {
       position: 'relative'
     }
   }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/React.createElement(ChevronDown, {
     size: 30,
-    className: classes.cursor_pointer,
+    className: "mrf-cursor_pointer",
     style: {
       position: 'absolute',
       top: -35,
@@ -30179,7 +29909,7 @@ var NestedForm = function NestedForm(_ref12) {
     }
   }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/React.createElement(ChevronUp, {
     size: 30,
-    className: classes.cursor_pointer,
+    className: "mrf-cursor_pointer",
     style: {
       position: 'absolute',
       top: -35,
@@ -30202,7 +29932,7 @@ var NestedForm = function NestedForm(_ref12) {
 
     return /*#__PURE__*/React.createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
-      className: classNames(_defineProperty$1({}, classes.display__none, collapsed && !step.visibleOnCollapse || !visibleStep)),
+      className: classNames(_defineProperty$1({}, 'mrf-display__none', collapsed && !step.visibleOnCollapse || !visibleStep)),
       entry: "".concat(parent, ".").concat(entry),
       label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
       help: step.help,