@maif/react-forms 1.0.58 → 1.1.0

package/lib/index.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('fs');
 var yup = require('yup');
 var React = require('react');
 var yup$1 = require('@hookform/resolvers/yup');
@@ -12,7 +11,7 @@ var reactFeather = require('react-feather');
 var reactHookForm = require('react-hook-form');
 var reactRainbowComponents = require('react-rainbow-components');
 var ReactToolTip = require('react-tooltip');
-var uuid = require('uuid');
+var uuid$1 = require('uuid');
 var CreatableSelect = require('react-select/creatable');
 var Select = require('react-select');
 var hash$1 = require('object-hash');
@@ -24,25 +23,26 @@ var hljs = require('highlight.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
+    }
+    n["default"] = e;
+    return Object.freeze(n);
 }
 
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var deepEqual__default = /*#__PURE__*/_interopDefaultLegacy(deepEqual);
 var ReactToolTip__default = /*#__PURE__*/_interopDefaultLegacy(ReactToolTip);
@@ -52,1124 +52,483 @@ var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash$1);
 var showdown__default = /*#__PURE__*/_interopDefaultLegacy(showdown);
 var hljs__default = /*#__PURE__*/_interopDefaultLegacy(hljs);
 
-var type = {
-  string: 'string',
-  number: 'number',
-  bool: 'bool',
-  date: 'date',
-  object: 'object',
-  file: 'file',
-  json: 'json'
-};
-
-var format = {
-  array: 'array',
-  select: 'select',
-  code: 'code',
-  markdown: 'markdown',
-  text: 'textarea',
-  textarea: 'textarea',
-  email: 'email',
-  password: 'password',
-  hidden: 'hidden',
-  form: 'form',
-  buttonsSelect: 'buttons',
-  singleLineCode: 'singleLineCode'
-};
-
-var _required = function required() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Value required";
-  return function (r) {
-    return r.required(message);
-  };
-}; //string
-
-var _url = function url() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "That is not a valid url";
-  return function (r) {
-    return r.url(message);
-  };
-};
-
-var _email = function email() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "That is not a valid email";
-  return function (r) {
-    return r.email(message);
-  };
-};
-
-var _uuid = function uuid() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "That is not a valid uuid";
-  return function (r) {
-    return r.uuid(message);
-  };
-};
-
-var _matches = function matches() {
-  var regexp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : /.*/;
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field does not match the pattern";
-  return function (r) {
-    return r.matches(regexp, {
-      message: message,
-      excludeEmptyString: true
-    });
-  };
-}; //string & number
-
-var _min = function min(ref) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Min value is required";
-  return function (r) {
-    return r.min(maybeRef(ref), message);
-  };
-};
-
-var _max = function max(ref) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Max value is required";
-  return function (r) {
-    return r.max(maybeRef(ref), message);
-  };
-}; //number
-
-var _positive = function positive() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Positive value is required";
-  return function (r) {
-    return r.positive(message);
-  };
-};
-
-var _negative = function negative() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Negative value is required";
-  return function (r) {
-    return r.negative(message);
-  };
+const type = {
+    string: "string",
+    number: "number",
+    bool: "bool",
+    date: "date",
+    object: "object",
+    file: "file",
+    json: "json"
 };
-
-var _integer = function integer() {
-  var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "an integer please";
-  return function (r) {
-    return r.integer(message);
-  };
+function stringTuple$1(...data) {
+    return data;
+}
+stringTuple$1(...Object.values(type));
+
+const format = {
+    array: "array",
+    select: "select",
+    code: "code",
+    markdown: "markdown",
+    text: "textarea",
+    textarea: "textarea",
+    email: "email",
+    password: "password",
+    hidden: "hidden",
+    form: "form",
+    buttonsSelect: "buttons",
+    singleLineCode: "singleLineCode"
 };
-
-var _lessThan = function lessThan(ref) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field must be less than ".concat(ref);
-  return function (r, key, dependencies) {
+function stringTuple(...data) {
+    return data;
+}
+stringTuple(...Object.values(format));
+
+const required = (message = "Value required") => (r) => r.required(message);
+//string
+const url = (message = "That is not a valid url") => (r) => r.url(message);
+const email = (message = "That is not a valid email") => (r) => r.email(message);
+const uuid = (message = "That is not a valid uuid") => (r) => r.uuid(message);
+const matches = (regexp = /.*/, message = "This field does not match the pattern") => (r) => r.matches(regexp, { message, excludeEmptyString: true });
+//string & number
+const min = (ref, message = "Min value is required") => (r) => r.min(maybeRef(ref), message);
+const max = (ref, message = "Max value is required") => (r) => r.max(maybeRef(ref), message);
+//number
+const positive = (message = "Positive value is required") => (r) => r.positive(message);
+const negative = (message = "Negative value is required") => (r) => r.negative(message);
+const integer = (message = "an integer please") => (r) => r.integer(message);
+const lessThan$1 = (ref, message = `This field must be less than ${ref}`) => (r, key /* FIXME */, dependencies) => {
     if (typeof ref !== 'number') {
-      dependencies.push([key, ref]);
+        dependencies.push([key, ref]);
     }
-
     return r.lessThan(maybeRef(ref), message);
-  };
 };
-
-var _moreThan = function moreThan(ref) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This field must be more than ".concat(ref);
-  return function (r, key, dependencies) {
+const moreThan = (ref, message = `This field must be more than ${ref}`) => (r, key, dependencies) => {
     if (typeof ref !== 'number') {
-      dependencies.push([key, ref]);
+        dependencies.push([key, ref]);
     }
-
     return r.moreThan(maybeRef(ref), message);
-  };
-}; //array
-
-var _length = function length(ref) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "The size of this collection must be ".concat(ref);
-  return function (r) {
-    return r.length(maybeRef(ref), message);
-  };
-}; //file
-
-var _supportedFormat = function supportedFormat(arrayOfValues) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Unsupported File Format';
-  return function (r) {
-    var SUPPORTED_FORMATS = arrayOfValues.map(function (f) {
-      return f.toLowerCase();
-    });
-    return r.test('supportedFormat', message, function (value) {
-      if (!value.length) return true;
-      return SUPPORTED_FORMATS.some(function (format) {
-        return value[0].type.toLowerCase().includes(format);
-      });
-    });
-  };
 };
-
-var _unsupportedFormat = function unsupportedFormat(arrayOfValues) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Unsupported File Format';
-  return function (r) {
-    var UNSUPPORTED_FORMATS = arrayOfValues.map(function (f) {
-      return f.toLowerCase();
+//array
+const length = (ref, message = `The size of this collection must be ${ref}`) => (r) => r.length(maybeRef(ref), message);
+//file
+const supportedFormat = (arrayOfValues, message = 'Unsupported File Format') => (r /* TODO check */) => {
+    const SUPPORTED_FORMATS = arrayOfValues.map(f => f.toLowerCase());
+    return r.test('supportedFormat', message, (value) => {
+        if (!value.length)
+            return true;
+        return SUPPORTED_FORMATS.some(format => value[0].type.toLowerCase().includes(format));
     });
-    return r.test('unsupportedFormat', message, function (value) {
-      if (!value.length) return true;
-      return UNSUPPORTED_FORMATS.some(function (format) {
-        return value[0].type.toLowerCase().includes(format);
-      });
+};
+const unsupportedFormat = (arrayOfValues, message = 'Unsupported File Format') => (r) => {
+    const UNSUPPORTED_FORMATS = arrayOfValues.map(f => f.toLowerCase());
+    return r.test('unsupportedFormat', message, (value) => {
+        if (!value.length)
+            return true;
+        return UNSUPPORTED_FORMATS.some(format => value[0].type.toLowerCase().includes(format));
     });
-  };
 };
-
-var _maxSize = function maxSize(ref) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "size is excedeed ".concat(ref);
-  return function (r) {
-    return r.test('fileSize', message, function (value) {
-      if (!value.length) return true;
-      return value[0].size <= maybeRef(ref);
+const maxSize = (ref, message = `size is excedeed ${ref}`) => (r) => {
+    return r.test('fileSize', message, (value) => {
+        if (!value.length)
+            return true;
+        return value[0].size <= maybeRef(ref);
     });
-  };
-}; //mixed
-
-var _test = function test(name) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Test failed';
-  var test = arguments.length > 2 ? arguments[2] : undefined;
-  return function (r) {
-    return r.test(name, message, test);
-  };
 };
-
-var _when = function when(ref, test) {
-  var then = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var otherwise = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  return function (r, key, dependencies) {
+//mixed
+const test = (name, message = 'Test failed', test) => (r) => r.test(name, message, test);
+const when = (ref, test, then = [], otherwise = []) => (r, key, dependencies) => {
     // dependencies.push([key, ref])
-    var thenReducer = then.reduce(function (resolver, constraint) {
-      return constraint(resolver, key, dependencies);
+    const thenReducer = then.reduce((resolver, constraint) => {
+        return constraint(resolver, key, dependencies);
     }, r);
-    var otherWiseReducer = otherwise.reduce(function (resolver, constraint) {
-      return constraint(resolver, key, dependencies);
+    const otherWiseReducer = otherwise.reduce((resolver, constraint) => {
+        return constraint(resolver, key, dependencies);
     }, r);
-    return r.when(ref, {
-      is: test,
-      then: thenReducer,
-      otherwise: otherWiseReducer
-    });
-  };
-};
-
-var _oneOf = function oneOf(arrayOfValues) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This value must be one of ".concat(arrayOfValues.join(', '));
-  return function (r) {
-    return r.oneOf(arrayOfValues.map(maybeRef), message);
-  };
-}; //todo: rename by notOneOf
-
-var _blacklist = function blacklist(arrayOfValues) {
-  var message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "This value can't include the following values ".concat(arrayOfValues.join(', '));
-  return function (r) {
-    return r.test('blacklist', message, function (value) {
-      return !arrayOfValues.some(function (f) {
-        return (value || '').includes(f);
-      });
-    });
-  };
-};
-
-var _ref21 = function ref(_ref) {
-  return yup__namespace.ref(_ref);
+    return r.when(ref, { is: test, then: thenReducer, otherwise: otherWiseReducer });
 };
-
-var maybeRef = function maybeRef(x) {
-  return x !== null && x !== void 0 && x.ref ? _ref21(x.ref) : x;
-}; //### JSON method ###
-
-
-var jsonConstraints = {
-  required: function required(_ref2) {
-    var _ref2$message = _ref2.message,
-        message = _ref2$message === void 0 ? "Value required" : _ref2$message;
-    return _required(message);
-  },
-  url: function url(_ref3) {
-    var _ref3$message = _ref3.message,
-        message = _ref3$message === void 0 ? "That is not a valid url" : _ref3$message;
-    return _url(message);
-  },
-  email: function email(_ref4) {
-    var _ref4$message = _ref4.message,
-        message = _ref4$message === void 0 ? "That is not a valid email" : _ref4$message;
-    return _email(message);
-  },
-  uuid: function uuid(_ref5) {
-    var _ref5$message = _ref5.message,
-        message = _ref5$message === void 0 ? "That is not a valid uuid" : _ref5$message;
-    return _uuid(message);
-  },
-  matches: function matches(_ref6) {
-    var _ref6$regexp = _ref6.regexp,
-        regexp = _ref6$regexp === void 0 ? /.*/ : _ref6$regexp,
-        _ref6$message = _ref6.message,
-        message = _ref6$message === void 0 ? "This field does not match the pattern" : _ref6$message;
-    return _matches(regexp, message);
-  },
-  min: function min(_ref7) {
-    var ref = _ref7.ref,
-        _ref7$message = _ref7.message,
-        message = _ref7$message === void 0 ? "Min value is required" : _ref7$message;
-    return _min(ref, message);
-  },
-  max: function max(_ref8) {
-    var ref = _ref8.ref,
-        _ref8$message = _ref8.message,
-        message = _ref8$message === void 0 ? "Max value is required" : _ref8$message;
-    return _max(ref, message);
-  },
-  positive: function positive(_ref9) {
-    var _ref9$message = _ref9.message,
-        message = _ref9$message === void 0 ? "Positive value is required" : _ref9$message;
-    return _positive(message);
-  },
-  negative: function negative(_ref10) {
-    var _ref10$message = _ref10.message,
-        message = _ref10$message === void 0 ? "Negative value is required" : _ref10$message;
-    return _negative(message);
-  },
-  integer: function integer(_ref11) {
-    var _ref11$message = _ref11.message,
-        message = _ref11$message === void 0 ? "an integer please" : _ref11$message;
-    return _integer(message);
-  },
-  lessThan: function lessThan(_ref12) {
-    var ref = _ref12.ref,
-        _ref12$message = _ref12.message,
-        message = _ref12$message === void 0 ? "This field must be less than ".concat(ref) : _ref12$message;
-    return _lessThan(ref, message);
-  },
-  moreThan: function moreThan(_ref13) {
-    var ref = _ref13.ref,
-        _ref13$message = _ref13.message,
-        message = _ref13$message === void 0 ? "This field must be more than ".concat(ref) : _ref13$message;
-    return _moreThan(ref, message);
-  },
-  length: function length(_ref14) {
-    var ref = _ref14.ref,
-        _ref14$message = _ref14.message,
-        message = _ref14$message === void 0 ? "The size of this collection must be ".concat(ref) : _ref14$message;
-    return _length(ref, message);
-  },
-  supportedFormat: function supportedFormat(_ref15) {
-    var arrayOfValues = _ref15.arrayOfValues,
-        _ref15$message = _ref15.message,
-        message = _ref15$message === void 0 ? 'Unsupported File Format' : _ref15$message;
-    return _supportedFormat(arrayOfValues, message);
-  },
-  unsupportedFormat: function unsupportedFormat(_ref16) {
-    var arrayOfValues = _ref16.arrayOfValues,
-        _ref16$message = _ref16.message,
-        message = _ref16$message === void 0 ? 'Unsupported File Format' : _ref16$message;
-    return _unsupportedFormat(arrayOfValues, message);
-  },
-  maxSize: function maxSize(_ref17) {
-    var ref = _ref17.ref,
-        _ref17$message = _ref17.message,
-        message = _ref17$message === void 0 ? "size is excedeed ".concat(ref) : _ref17$message;
-    return _maxSize(ref, message);
-  },
-  test: function test(c) {
-    return _test(c.name, c.message, c.test);
-  },
-  when: function when(_ref18) {
-    var ref = _ref18.ref,
-        test = _ref18.test,
-        _ref18$then = _ref18.then,
-        then = _ref18$then === void 0 ? [] : _ref18$then,
-        _ref18$otherwise = _ref18.otherwise,
-        otherwise = _ref18$otherwise === void 0 ? [] : _ref18$otherwise;
-    return _when(ref, test, then, otherwise);
-  },
-  oneOf: function oneOf(_ref19) {
-    var arrayOfValues = _ref19.arrayOfValues,
-        _ref19$message = _ref19.message,
-        message = _ref19$message === void 0 ? "This value must be one of ".concat(arrayOfValues.join(', ')) : _ref19$message;
-    return _oneOf(arrayOfValues, message);
-  },
-  blacklist: function blacklist(_ref20) {
-    var arrayOfValues = _ref20.arrayOfValues,
-        _ref20$message = _ref20.message,
-        message = _ref20$message === void 0 ? "This value can't include the following values ".concat(arrayOfValues.join(', ')) : _ref20$message;
-    return _blacklist(arrayOfValues, message);
-  },
-  ref: function ref(val) {
-    return _ref21(val.ref);
-  }
+const oneOf = (arrayOfValues, message = `This value must be one of ${arrayOfValues.join(', ')}`) => (r) => r.oneOf(arrayOfValues.map(maybeRef), message);
+//todo: rename by notOneOf
+const blacklist = (arrayOfValues, message = `This value can't include the following values ${arrayOfValues.join(', ')}`) => (r) => r.test('blacklist', message, value => {
+    return !arrayOfValues.some(f => (value || '').includes(f));
+});
+const ref = (ref) => yup__namespace.ref(ref);
+const maybeRef = (x) => (x === null || x === void 0 ? void 0 : x.ref) ? ref(x.ref) : x;
+//### JSON method ###
+const jsonConstraints = {
+    required: ({ message = "Value required" }) => required(message),
+    url: ({ message = "That is not a valid url" }) => url(message),
+    email: ({ message = "That is not a valid email" }) => email(message),
+    uuid: ({ message = "That is not a valid uuid" }) => uuid(message),
+    matches: ({ regexp = /.*/, message = "This field does not match the pattern" }) => matches(regexp, message),
+    min: ({ ref, message = "Min value is required" }) => min(ref, message),
+    max: ({ ref, message = "Max value is required" }) => max(ref, message),
+    positive: ({ message = "Positive value is required" }) => positive(message),
+    negative: ({ message = "Negative value is required" }) => negative(message),
+    integer: ({ message = "an integer please" }) => integer(message),
+    lessThan: ({ ref, message = `This field must be less than ${ref}` }) => lessThan$1(ref, message),
+    moreThan: ({ ref, message = `This field must be more than ${ref}` }) => moreThan(ref, message),
+    length: ({ ref, message = `The size of this collection must be ${ref}` }) => length(ref, message),
+    supportedFormat: ({ arrayOfValues, message = 'Unsupported File Format' }) => supportedFormat(arrayOfValues, message),
+    unsupportedFormat: ({ arrayOfValues, message = 'Unsupported File Format' }) => unsupportedFormat(arrayOfValues, message),
+    maxSize: ({ ref, message = `size is excedeed ${ref}` }) => maxSize(ref, message),
+    test: (c) => test(c.name, c.message, c.test),
+    when: ({ ref, test, then = [], otherwise = [] }) => when(ref, test, then, otherwise),
+    oneOf: ({ arrayOfValues, message = `This value must be one of ${arrayOfValues.join(', ')}` }) => oneOf(arrayOfValues, message),
+    blacklist: ({ arrayOfValues, message = `This value can't include the following values ${arrayOfValues.join(', ')}` }) => blacklist(arrayOfValues, message),
+    ref: (val) => ref(val.ref)
 };
 
 var constraints = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  required: _required,
-  url: _url,
-  email: _email,
-  uuid: _uuid,
-  matches: _matches,
-  min: _min,
-  max: _max,
-  positive: _positive,
-  negative: _negative,
-  integer: _integer,
-  lessThan: _lessThan,
-  moreThan: _moreThan,
-  length: _length,
-  supportedFormat: _supportedFormat,
-  unsupportedFormat: _unsupportedFormat,
-  maxSize: _maxSize,
-  test: _test,
-  when: _when,
-  oneOf: _oneOf,
-  blacklist: _blacklist,
-  ref: _ref21,
-  jsonConstraints: jsonConstraints
+    __proto__: null,
+    required: required,
+    url: url,
+    email: email,
+    uuid: uuid,
+    matches: matches,
+    min: min,
+    max: max,
+    positive: positive,
+    negative: negative,
+    integer: integer,
+    lessThan: lessThan$1,
+    moreThan: moreThan,
+    length: length,
+    supportedFormat: supportedFormat,
+    unsupportedFormat: unsupportedFormat,
+    maxSize: maxSize,
+    test: test,
+    when: when,
+    oneOf: oneOf,
+    blacklist: blacklist,
+    ref: ref,
+    jsonConstraints: jsonConstraints
 });
 
-function ownKeys$1(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 _objectSpread2$1(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {
-      _defineProperty$1(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _typeof$1(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof$1(obj);
-}
-
-function _defineProperty$1(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;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+const BooleanInput = React__default["default"].forwardRef(({ onChange, value, readOnly }, ref) => {
+    const handleClick = (value) => {
+        if (!readOnly) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _readOnlyError(name) {
-  throw new TypeError("\"" + name + "\" is read-only");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray$1(arr) {
-  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1();
-}
-
-function _arrayWithoutHoles$1(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray$1(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen);
-}
-
-function _arrayLikeToArray$1(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 _nonIterableSpread$1() {
-  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 _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 BooleanInput = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _classNames;
-
-  var onChange = _ref.onChange,
-      value = _ref.value,
-      readOnly = _ref.readOnly;
-
-  var handleClick = function handleClick(value) {
-    if (!readOnly) {
-      onChange(value);
-    }
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]((_classNames = {}, _defineProperty$1(_classNames, 'cursor_pointer', !readOnly), _defineProperty$1(_classNames, 'cursor_not_allowed', readOnly), _classNames))
-  }, !!value && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('content_switch_button_on'),
-    onClick: function onClick() {
-      return handleClick(false);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('switch_button_on')
-  })), !value && value !== null && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('content_switch_button_off'),
-    onClick: function onClick() {
-      return handleClick(true);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('switch_button_off')
-  })), value === null && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('content_switch_button_null'),
-    onClick: function onClick() {
-      return handleClick(true);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('switch_button_null')
-  })));
+    };
+    return (React__default["default"].createElement("div", { className: classNames__default["default"]({ ['mrf-cursor_pointer']: !readOnly, ['mrf-cursor_not_allowed']: readOnly }) },
+        !!value && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_on'), onClick: () => handleClick(false) },
+            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_on') })),
+        !value && value !== null && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_off'), onClick: () => handleClick(true) },
+            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_off') })),
+        value === null && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_null'), onClick: () => handleClick(true) },
+            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_null') }))));
 });
 
-var Collapse = function Collapse(props) {
-  var _classNames4;
-
-  var _useState = React.useState(props.initCollapsed || props.collapsed),
-      _useState2 = _slicedToArray(_useState, 2),
-      collapsed = _useState2[0],
-      setCollapsed = _useState2[1];
-
-  var toggle = function toggle(e) {
-    if (e && e.preventDefault) e.stopPropagation();
-    setCollapsed(!collapsed);
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: classNames__default["default"](_defineProperty$1({}, 'collapse_error', props.errored))
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "cursor_pointer flex jc_between",
-    onClick: toggle
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]('collapse_label', _defineProperty$1({}, 'collapse_error', props.errored))
-  }, props.label), /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: classNames__default["default"]('btn', 'btn_sm', 'ml_5', _defineProperty$1({}, 'collapse_error', props.errored)),
-    onClick: toggle
-  }, !!collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.Eye, {
-    size: 16
-  }), !collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.EyeOff, {
-    size: 16
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('ml_10', (_classNames4 = {}, _defineProperty$1(_classNames4, 'display__none', !!collapsed), _defineProperty$1(_classNames4, 'flex', !!props.inline), _defineProperty$1(_classNames4, 'collapse__inline', !!props.inline), _classNames4))
-  }, props.children), props.lineEnd && /*#__PURE__*/React__default["default"].createElement("hr", null));
+const Collapse = (props) => {
+    const [collapsed, setCollapsed] = React.useState(props.initCollapsed || props.collapsed);
+    const toggle = (e) => {
+        if (e)
+            e.stopPropagation();
+        setCollapsed(!collapsed);
+    };
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement("hr", { className: classNames__default["default"]({ ['mrf-collapse_error']: props.errored }) }),
+        React__default["default"].createElement("div", { className: 'mrf-cursor_pointer mrf-flex mrf-jc_between', onClick: toggle },
+            React__default["default"].createElement("span", { className: classNames__default["default"]('mrf-collapse_label', { ['mrf-collapse_error']: props.errored }) }, props.label),
+            React__default["default"].createElement("button", { type: "button", className: classNames__default["default"]('mrf-btn', 'mrf-btn_sm', 'mrf-ml_5', { ['mrf-collapse_error']: props.errored }), onClick: toggle },
+                !!collapsed && React__default["default"].createElement(reactFeather.Eye, { size: 16 }),
+                !collapsed && React__default["default"].createElement(reactFeather.EyeOff, { size: 16 }))),
+        React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-ml_10', {
+                ['mrf-display__none']: !!collapsed,
+                ['mrf-flex']: !!props.inline,
+                ['mrf-collapse__inline']: !!props.inline,
+            }) }, props.children),
+        props.lineEnd && React__default["default"].createElement("hr", null)));
 };
 
-var option = function option(x) {
-  return x === undefined || x === null ? None : Some(x);
-};
-var Some = function Some(x) {
-  return {
-    map: function map(f) {
-      return option(f(x));
-    },
-    flatMap: function flatMap(f) {
-      return f(x);
-    },
-    fold: function fold(_ifEmpty, f) {
-      return f(x);
-    },
-    orElse: function orElse() {
-      return option(x);
-    },
-    getOrElse: function getOrElse() {
-      return x;
-    },
-    getOrNull: function getOrNull() {
-      return x;
-    },
-    isDefined: true,
-    exists: function exists(f) {
-      return option(f(x)).isDefined;
-    }
-  };
-};
-var None = {
-  map: function map() {
-    return None;
-  },
-  flatMap: function flatMap() {
-    return None;
-  },
-  fold: function fold(ifEmpty, _f) {
-    return ifEmpty();
-  },
-  orElse: function orElse(x) {
-    return option(x);
-  },
-  getOrElse: function getOrElse(ifEmpty) {
-    return ifEmpty;
-  },
-  getOrNull: function getOrNull() {
-    return undefined;
-  },
-  isDefined: false,
-  exists: function exists() {
-    return false;
-  }
+function option(x) {
+    return (x === undefined || x === null ? None : Some(x));
+}
+const Some = (x) => {
+    return {
+        map: (f) => option(f(x)),
+        flatMap: (f) => option(f(x)).getOrElse(None),
+        fold: (_ifEmpty, f) => f(x),
+        orElse: () => option(x),
+        getOrElse: () => x,
+        getOrNull: () => x,
+        isDefined: () => true,
+        exists: (f) => option(f(x)).isDefined(),
+    };
 };
-
-var isPromise = function isPromise(value) {
-  return Boolean(value && typeof value.then === 'function');
+const None = {
+    map: () => None,
+    flatMap: () => None,
+    fold: (ifEmpty) => ifEmpty(),
+    orElse: (x) => option(x),
+    getOrElse: (ifEmpty) => ifEmpty,
+    getOrNull: () => undefined,
+    isDefined: () => false,
+    exists: () => false,
 };
-var arrayFlatten = function arrayFlatten(array) {
-  if (array.some(Array.isArray)) {
-    return arrayFlatten(array.flat());
-  }
 
-  return array;
+const isPromise = (value) => {
+    return Boolean(value && typeof value.then === 'function');
 };
-var isDefined = function isDefined(value) {
-  return value !== null && value !== undefined;
+const arrayFlatten = (array) => {
+    if (array.some(Array.isArray)) {
+        return arrayFlatten(array.flat());
+    }
+    return array;
 };
-var useHashEffect = function useHashEffect(func, deps) {
-  var isFirst = React.useRef(true);
-  var prevDeps = React.useRef(deps);
-  React.useEffect(function () {
-    if (isFirst.current) {
-      func();
-      isFirst.current = false;
-      return;
+function isDefined(value) {
+    return value !== null && value !== undefined;
+}
+const cleanPromise = (obj) => {
+    if (!!obj && Array.isArray(obj)) {
+        return obj.map(cleanPromise);
     }
-
-    var depsHash = hash__default["default"](deps);
-    var prevDepsHash = hash__default["default"](prevDeps.current);
-
-    if (depsHash !== prevDepsHash) {
-      prevDeps.current = deps;
-      func();
+    else if (!!obj && typeof obj === 'object') {
+        return Object.fromEntries(Object.entries(obj).map(([k, v]) => {
+            if (isPromise(v)) {
+                return [k, `promise-${k}`];
+            }
+            else if (typeof v === "object") {
+                return [k, cleanPromise(v)];
+            }
+            else {
+                return [k, v];
+            }
+        }));
     }
-  }, [deps]);
+    return obj;
 };
-
-var valueToSelectOption = function valueToSelectOption(value) {
-  var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var isMulti = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
-  if (value === null || !value) {
-    return null;
-  }
-
-  if (isMulti) {
-    return option(value).map(function (v) {
-      return function () {
-        if (Array.isArray(v)) return v || [];else if (_typeof$1(v) === 'object') return Object.values(v);
-        return v;
-      }().map(function (x) {
-        return valueToSelectOption(x, possibleValues, false);
-      });
-    }).getOrElse([]);
-  }
-
-  var maybeValue = option(possibleValues.find(function (v) {
-    return deepEqual__default["default"](v.value, value);
-  }));
-  return maybeValue.getOrElse({
-    label: maybeValue.map(function (v) {
-      return v.label;
-    }).getOrElse((value === null || value === void 0 ? void 0 : value.label) || (_typeof$1(value) === 'object' ? JSON.stringify(value) : value)),
-    value: maybeValue.map(function (v) {
-      return v.value;
-    }).getOrElse((value === null || value === void 0 ? void 0 : value.value) || value)
-  });
+const cleanHash = (item) => hash__default["default"](cleanPromise(item));
+const useHashEffect = (func, deps) => {
+    const isFirst = React.useRef(true);
+    const prevDeps = React.useRef(deps);
+    React.useEffect(() => {
+        if (isFirst.current) {
+            func();
+            isFirst.current = false;
+            return;
+        }
+        const depsHash = cleanHash(deps);
+        const prevDepsHash = cleanHash(prevDeps.current);
+        if (depsHash !== prevDepsHash) {
+            prevDeps.current = deps;
+            func();
+        }
+    }, deps); /* FIXME deps or [deps] ? */
 };
 
-var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, _) {
-  var _useFormContext = reactHookForm.useFormContext(),
-      getValues = _useFormContext.getValues;
-
-  var possibleValues = (props.possibleValues || []).map(function (v) {
-    return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
-      label: v[props.transformer.label],
-      value: v[props.transformer.value]
-    } : v;
-  }).map(function (v) {
-    return {
-      label: (v === null || v === void 0 ? void 0 : v.label) || (_typeof$1(v) === 'object' ? JSON.stringify(v) : v),
-      value: (v === null || v === void 0 ? void 0 : v.value) || v
-    };
-  });
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      loading = _useState2[0],
-      setLoading = _useState2[1];
-
-  var _useState3 = React.useState(possibleValues),
-      _useState4 = _slicedToArray(_useState3, 2),
-      values = _useState4[0],
-      setValues = _useState4[1];
-
-  var _useState5 = React.useState(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
-
-  React.useEffect(function () {
-    setValue(valueToSelectOption(props.value, values, props.isMulti));
-  }, [props.value, values]);
-  React.useEffect(function () {
-    if (props.optionsFrom) {
-      var cond = option(props.fetchCondition).map(function (cond) {
-        return cond();
-      }).getOrElse(true);
-
-      if (cond) {
-        setLoading(true);
-        var promise;
-
-        if (isPromise(props.optionsFrom)) {
-          promise = props.optionsFrom;
-        } else if (typeof props.optionsFrom === 'function') {
-          var result = props.optionsFrom({
-            rawValues: getValues(),
-            value: getValues(props.id)
-          });
-          promise = isPromise(result) ? result : props.httpClient(result, 'GET').then(function (r) {
-            return r.json();
-          });
-        } else {
-          promise = props.httpClient(props.optionsFrom, 'GET').then(function (r) {
-            return r.json();
-          });
+const valueToSelectOption = (value, possibleValues = [], isMulti = false) => {
+    if (value === null || !value) {
+        return null;
+    }
+    if (isMulti) {
+        return option(value)
+            .map(v => {
+            return (() => {
+                if (Array.isArray(v))
+                    return (v || []);
+                else if (typeof v === 'object')
+                    return Object.values(v);
+                return v;
+            })().map((x) => valueToSelectOption(x, possibleValues, false));
+        })
+            .getOrElse([]);
+    }
+    const maybeValue = option(possibleValues.find(v => deepEqual__default["default"](v.value, value)));
+    return maybeValue
+        .getOrElse({
+        label: maybeValue.map(v => v.label).getOrElse((value === null || value === void 0 ? void 0 : value.label) || (typeof value === 'object' ? JSON.stringify(value) : value)),
+        value: maybeValue.map(v => v.value).getOrElse((value === null || value === void 0 ? void 0 : value.value) || value),
+    });
+};
+const SelectInput = (props) => {
+    const { getValues } = reactHookForm.useFormContext();
+    function transform(v) {
+        if (!props.transformer) {
+            return None;
+        }
+        if (typeof props.transformer === 'function') {
+            return option(props.transformer(v));
+        }
+        else {
+            return Some({ label: v[props.transformer.label], value: v[props.transformer.value] });
         }
-
-        promise.then(function (values) {
-          return values.map(function (x) {
-            return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
-          });
-        }).then(function (values) {
-          setValues(values);
-          setValue(values.find(function (item) {
-            return item.value === (value ? value.value : value);
-          }) || null);
-          setLoading(false);
-        });
-      }
     }
-  }, [props.optionsFrom]);
-
-  var onChange = function onChange(changes) {
-    setValue(changes);
-
-    if (props.isMulti) {
-      props.onChange(changes.map(function (x) {
-        return x.value;
-      }));
-    } else {
-      props.onChange(changes === null || changes === void 0 ? void 0 : changes.value);
+    function transformOption(v) {
+        const maybeSelectOption = props.transformer ?
+            (typeof props.transformer === 'function' ?
+                props.transformer(v) :
+                ({ label: v[props.transformer.label], value: v[props.transformer.value] }))
+            : v;
+        return {
+            label: (maybeSelectOption === null || maybeSelectOption === void 0 ? void 0 : maybeSelectOption.label) || (typeof maybeSelectOption === 'object' ? JSON.stringify(maybeSelectOption) : maybeSelectOption),
+            value: (maybeSelectOption === null || maybeSelectOption === void 0 ? void 0 : maybeSelectOption.value) || v
+        };
     }
-  };
-
-  var handleCreate = function handleCreate(label, fn) {
-    var createdValue = option(fn).map(function (func) {
-      return func(label);
-    }).map(function (createdOpt) {
-      return option(props.transformer).map(function (t) {
-        return t(createdOpt);
-      }).getOrElse(createdOpt);
-    }).getOrElse(valueToSelectOption(label, values));
-    setValues([].concat(_toConsumableArray$1(values), [createdValue]));
-
-    if (props.isMulti) {
-      onChange([].concat(_toConsumableArray$1(value), [createdValue]));
-    } else {
-      onChange(createdValue);
+    const possibleValues = (props.possibleValues || [])
+        .map(v => transformOption(v));
+    const [loading, setLoading] = React.useState(false);
+    const [values, setValues] = React.useState(possibleValues);
+    const [value, setValue] = React.useState(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti));
+    React.useEffect(() => {
+        setValue(valueToSelectOption(props.value, values, props.isMulti));
+    }, [props.value, values]);
+    React.useEffect(() => {
+        if (props.optionsFrom) {
+            const cond = option(props.fetchCondition)
+                .map(cond => cond())
+                .getOrElse(true);
+            if (cond) {
+                setLoading(true);
+                let promise;
+                if (isPromise(props.optionsFrom)) { /* FIXME undocumented behaviour ? */
+                    promise = props.optionsFrom;
+                }
+                else if (typeof props.optionsFrom === 'function') { /* FIXME undocumented behaviour ? */
+                    const result = props.optionsFrom({ rawValues: getValues(), value: getValues(props.id) });
+                    promise = isPromise(result) ? result : props.httpClient(result, 'GET').then(r => r.json());
+                }
+                else {
+                    promise = props.httpClient(props.optionsFrom, 'GET').then(r => r.json());
+                }
+                promise
+                    .then((values) => {
+                    return values.map(x => transformOption(x));
+                })
+                    .then((values) => {
+                    setValues(values);
+                    setValue(values.find((item) => {
+                        if (Array.isArray(value)) {
+                            return value.find(opt => opt.value === item.value);
+                        }
+                        else {
+                            return item.value === (value ? value.value : value);
+                        }
+                    }) || null);
+                    setLoading(false);
+                });
+            }
+        }
+        else {
+            setValues((props.possibleValues || [])
+                .map(v => transformOption(v)));
+        }
+    }, [props.optionsFrom, props.possibleValues]);
+    const onChange = (changes) => {
+        var _a, _b;
+        setValue(changes);
+        if (props.isMulti) {
+            (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, changes.map(x => x.value));
+        }
+        else {
+            (_b = props === null || props === void 0 ? void 0 : props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, changes === null || changes === void 0 ? void 0 : changes.value);
+        }
+    };
+    const handleCreate = (label, fn) => {
+        const createdValue = option(fn)
+            .map(func => func(label))
+            .flatMap(createdOpt => transform(createdOpt))
+            .getOrElse(valueToSelectOption(label, values));
+        setValues([...values, createdValue]);
+        if (props.isMulti) {
+            onChange([...value, createdValue]);
+        }
+        else {
+            onChange(createdValue);
+        }
+    };
+    const handleSelectButtonClick = (v) => {
+        if (props.isMulti) {
+            const vs = value;
+            if (vs.includes(v)) { /* FIXME could be a different object ref but the same SelectOption, perhaps it would be better to compare label/values ? */
+                return onChange(vs.filter(val => val.value !== v.value));
+            }
+            else {
+                return onChange([...vs, v]);
+            }
+        }
+        return onChange(v);
+    };
+    if (props.buttons) {
+        return (React__default["default"].createElement("div", { style: { display: 'flex' } }, values.map((v, idx) => {
+            const active = !!value && (props.isMulti ? value.includes(v) : v.value === value.value);
+            return (React__default["default"].createElement("button", { key: idx, type: "button", disabled: props.disabled, className: classNames__default["default"](props.className, 'mrf-btn mrf-btn_grey mrf-ml_5', { active }), onClick: () => handleSelectButtonClick(v) }, v.label));
+        })));
     }
-  };
-
-  var handleSelectButtonClick = function handleSelectButtonClick(v) {
-    if (props.isMulti) {
-      if (value.includes(v)) {
-        return onChange(value.filter(function (val) {
-          return val.value !== v.value;
-        }));
-      } else {
-        return onChange([].concat(_toConsumableArray$1(value), [v]));
-      }
+    if (props.createOption) {
+        return (React__default["default"].createElement(CreatableSelect__default["default"], Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, isDisabled: props.disabled, placeholder: props.placeholder, onChange: onChange, options: values, onCreateOption: option => handleCreate(option, props.onCreateOption), classNamePrefix: "react-form-select", className: props.className })));
     }
+    else {
+        return (React__default["default"].createElement(Select__default["default"], Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, defaultValue: value, isDisabled: props.disabled, placeholder: props.placeholder, options: values, onChange: onChange, classNamePrefix: "react-form-select", className: props.className })));
+    }
+};
 
-    return onChange(v);
-  };
-
-  if (props.buttons) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, values.map(function (v, idx) {
-      var active = !!value && (props.isMulti ? value.includes(v) : v.value === value.value);
-      return /*#__PURE__*/React__default["default"].createElement("button", {
-        key: idx,
-        type: "button",
-        disabled: props.disabled,
-        className: classNames__default["default"](props.className, 'btn btn_grey ml_5', {
-          active: active
-        }),
-        onClick: function onClick() {
-          return handleSelectButtonClick(v);
+const ObjectInput = (props) => {
+    const [internalState, setInternalState] = React.useState({});
+    React.useEffect(() => {
+        setInternalState(Object.fromEntries(Object.entries(props.value || {})
+            .map(([key, value], idx) => [Date.now() + idx, { key, value }])));
+    }, []);
+    React.useEffect(() => {
+        if (props.value) {
+            const newState = props.value || {};
+            const previousState = Object.entries(internalState || {})
+                .reduce((acc, [_, item]) => {
+                if (item.key)
+                    return (Object.assign(Object.assign({}, acc), { [item.key]: item.value }));
+                return acc;
+            }, {});
+            if (!deepEqual__default["default"](newState, previousState))
+                setInternalState(Object.fromEntries(Object.entries(props.value || {})
+                    .map(([key, value], idx) => [Date.now() + idx, { key, value }])));
         }
-      }, v.label);
-    }));
-  }
-
-  if (props.createOption) {
-    return /*#__PURE__*/React__default["default"].createElement(CreatableSelect__default["default"], _extends({}, props, {
-      name: "".concat(props.label, "-search"),
-      isLoading: loading,
-      value: value,
-      isDisabled: props.disabled,
-      placeholder: props.placeholder,
-      onChange: onChange,
-      options: values,
-      onCreateOption: function onCreateOption(option) {
-        return handleCreate(option, props.onCreateOption);
-      },
-      classNamePrefix: "react-form-select",
-      className: props.className,
-      readOnly: props.disabled ? 'readOnly' : null
-    }));
-  } else {
-    return /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends({}, props, {
-      name: "".concat(props.label, "-search"),
-      isLoading: loading,
-      value: value,
-      defaultValue: value,
-      isDisabled: props.disabled,
-      placeholder: props.placeholder,
-      options: values,
-      onChange: onChange,
-      classNamePrefix: "react-form-select",
-      className: props.className,
-      readOnly: props.disabled ? 'readOnly' : null
-    }));
-  }
-});
-
-var ObjectInput = function ObjectInput(props) {
-  var _useState = React.useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalState = _useState2[0],
-      setInternalState = _useState2[1];
-
-  React.useEffect(function () {
-    setInternalState(Object.fromEntries(Object.entries(props.value || {}).map(function (_ref, idx) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
-
-      return [Date.now() + idx, {
-        key: key,
-        value: value
-      }];
-    })));
-  }, []);
-  React.useEffect(function () {
-    if (props.value) {
-      var newState = props.value || {};
-      var previousState = Object.entries(internalState || {}).reduce(function (acc, _ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2);
-            _ref4[0];
-            var item = _ref4[1];
-
-        if (item.key) return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, item.key, item.value));
-        return acc;
-      }, {});
-      if (!deepEqual__default["default"](newState, previousState)) setInternalState(Object.fromEntries(Object.entries(props.value || {}).map(function (_ref5, idx) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-            key = _ref6[0],
-            value = _ref6[1];
-
-        return [Date.now() + idx, {
-          key: key,
-          value: value
-        }];
-      })));
-    }
-  }, [props.value]);
-
-  var onChange = function onChange(state) {
-    props.onChange(Object.values(state).reduce(function (acc, c) {
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, c.key, c.value));
-    }, {}));
-  };
-
-  var changeValue = function changeValue(id, newValue) {
-    var newState = _objectSpread2$1(_objectSpread2$1({}, internalState), {}, _defineProperty$1({}, id, {
-      key: internalState[id].key,
-      value: newValue
-    }));
-
-    setInternalState(newState);
-    onChange(newState);
-  };
-
-  var changeKey = function changeKey(id, newValue) {
-    var newState = _objectSpread2$1(_objectSpread2$1({}, internalState), {}, _defineProperty$1({}, id, {
-      key: newValue,
-      value: internalState[id].value
-    }));
-
-    setInternalState(newState);
-    onChange(newState);
-  };
-
-  var addFirst = function addFirst() {
-    if (!internalState || Object.keys(internalState).length === 0) {
-      var newState = _objectSpread2$1(_objectSpread2$1({}, internalState), {}, _defineProperty$1({}, Date.now(), props.defaultKeyValue || {
-        key: '',
-        value: ''
-      }));
-
-      setInternalState(newState);
-      onChange(newState);
-    }
-  };
-
-  var addNext = function addNext() {
-    var newItem = props.defaultKeyValue || {
-      key: '',
-      value: ''
+    }, [props.value]);
+    const onChange = (state) => {
+        var _a;
+        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, Object.values(state).reduce((acc, c) => (Object.assign(Object.assign({}, acc), { [c.key]: c.value })), {}));
     };
-
-    var newState = _objectSpread2$1(_objectSpread2$1({}, internalState), {}, _defineProperty$1({}, Date.now(), newItem));
-
-    setInternalState(newState);
-    onChange(newState);
-  };
-
-  var remove = function remove(removedId) {
-    var newState = Object.fromEntries(Object.entries(internalState).filter(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 2),
-          id = _ref8[0];
-          _ref8[1];
-
-      return id !== removedId;
-    }));
-    setInternalState(newState);
-    onChange(newState);
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: props.className
-  }, Object.keys(internalState || {}).length === 0 && /*#__PURE__*/React__default["default"].createElement("button", {
-    disabled: props.disabled,
-    type: "button",
-    className: "flex btn btn_blue btn_sm",
-    onClick: addFirst
-  }, /*#__PURE__*/React__default["default"].createElement(reactFeather.PlusCircle, null)), Object.entries(internalState || {}).map(function (_ref9, idx) {
-    var _ref10 = _slicedToArray(_ref9, 2),
-        id = _ref10[0],
-        _ref10$ = _ref10[1],
-        key = _ref10$.key,
-        value = _ref10$.value;
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex mt_5",
-      key: idx
-    }, /*#__PURE__*/React__default["default"].createElement("input", {
-      disabled: props.disabled,
-      type: "text",
-      className: "w_50 input",
-      placeholder: props.placeholderKey,
-      value: key,
-      onChange: function onChange(e) {
-        return changeKey(id, e.target.value);
-      }
-    }), /*#__PURE__*/React__default["default"].createElement("input", {
-      disabled: props.disabled,
-      type: "text",
-      className: "w_50 input",
-      placeholder: props.placeholderValue,
-      value: value,
-      onChange: function onChange(e) {
-        return changeValue(id, e.target.value);
-      }
-    }), /*#__PURE__*/React__default["default"].createElement("button", {
-      disabled: props.disabled,
-      type: "button",
-      className: "flex btn btn_red btn_sm ml_10",
-      onClick: function onClick() {
-        return remove(id);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(reactFeather.MinusCircle, null)), idx === Object.keys(internalState).length - 1 && /*#__PURE__*/React__default["default"].createElement("button", {
-      disabled: props.disabled,
-      type: "button",
-      className: "flex btn btn_blue btn_sm ml_5",
-      onClick: addNext
-    }, /*#__PURE__*/React__default["default"].createElement(reactFeather.PlusCircle, null)));
-  }));
+    const changeValue = (id, newValue) => {
+        const newState = Object.assign(Object.assign({}, internalState), { [id]: { key: internalState[id].key, value: newValue } });
+        setInternalState(newState);
+        onChange(newState);
+    };
+    const changeKey = (id, newValue) => {
+        const newState = Object.assign(Object.assign({}, internalState), { [id]: { key: newValue, value: internalState[id].value } });
+        setInternalState(newState);
+        onChange(newState);
+    };
+    const addFirst = () => {
+        if (!internalState || Object.keys(internalState).length === 0) {
+            const newState = Object.assign(Object.assign({}, internalState), { [Date.now()]: props.defaultKeyValue || { key: '', value: '' } });
+            setInternalState(newState);
+            onChange(newState);
+        }
+    };
+    const addNext = () => {
+        const newItem = props.defaultKeyValue || { key: '', value: '' };
+        const newState = Object.assign(Object.assign({}, internalState), { [Date.now()]: newItem });
+        setInternalState(newState);
+        onChange(newState);
+    };
+    const remove = (removedId) => {
+        const newState = Object.fromEntries(Object.entries(internalState).filter(([id, _]) => id !== removedId));
+        setInternalState(newState);
+        onChange(newState);
+    };
+    return (React__namespace.createElement("div", { className: props.className },
+        Object.keys(internalState || {}).length === 0 && (React__namespace.createElement("button", { disabled: props.disabled, type: "button", className: 'mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm', onClick: addFirst },
+            React__namespace.createElement(reactFeather.PlusCircle, null))),
+        Object.entries(internalState || {}).map(([id, { key, value }], idx) => (React__namespace.createElement("div", { className: 'mrf-flex mrf-mt_5', key: idx },
+            React__namespace.createElement("input", { disabled: props.disabled, type: "text", className: 'mrf-w_50 mrf-input', placeholder: props.placeholderKey, value: key, onChange: e => changeKey(id, e.target.value) }),
+            React__namespace.createElement("input", { disabled: props.disabled, type: "text", className: 'mrf-w_50 mrf-input', placeholder: props.placeholderValue, value: value, onChange: e => changeValue(id, e.target.value) }),
+            React__namespace.createElement("button", { disabled: props.disabled, type: "button", className: 'mrf-flex mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_10', onClick: () => remove(id) },
+                React__namespace.createElement(reactFeather.MinusCircle, null)),
+            idx === Object.keys(internalState).length - 1 && (React__namespace.createElement("button", { disabled: props.disabled, type: "button", className: 'mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm mrf-ml_5', onClick: addNext },
+                React__namespace.createElement(reactFeather.PlusCircle, null))))))));
 };
 
-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 _objectSpread2(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 _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-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;
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-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 _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 _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.");
-}
-
 // Compressed representation of the Grapheme_Cluster_Break=Extend
 // information from
 // http://www.unicode.org/Public/13.0.0/ucd/auxiliary/GraphemeBreakProperty.txt.
@@ -28227,1765 +27586,971 @@ the highlight style).
 */
 const oneDark = [oneDarkTheme, oneDarkHighlightStyle];
 
-var languages = {
-  javascript: javascript,
-  css: css,
-  json: json,
-  html: html,
-  markdown: markdown
+/*global event*/
+const languages = {
+    javascript,
+    css,
+    json,
+    html,
+    markdown
 };
-function Editor(parent, mode, onChange, value) {
-  var tabSize = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-  var readOnly = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var showLinesNumber = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
-  var highlightLine = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
-  var themeStyle = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : {
+function Editor(parent, mode, onChange, value, tabSize = 1, readOnly = false, showLinesNumber = true, highlightLine = false, themeStyle = {
     height: '-1',
     minHeight: '300px',
     maxHeight: '-1',
     width: '-1',
     minWidth: '-1',
-    maxWidth: '-1'
-  };
-  var theme = EditorView.theme({
-    '&': _objectSpread2({}, themeStyle)
-  });
-  var setup = [showLinesNumber ? lineNumbers() : lineNumbers({
-    formatNumber: ""
-  }), highlightActiveLineGutter(), highlightSpecialChars(), history(), languages[mode](), foldGutter(), drawSelection(), dropCursor(), EditorState.allowMultipleSelections.of(true), defaultHighlightStyle.fallback, bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), highlightLine ? highlightActiveLine() : undefined, highlightSelectionMatches(), keymap.of([].concat(_toConsumableArray(closeBracketsKeymap), _toConsumableArray(defaultKeymap), _toConsumableArray(searchKeymap), _toConsumableArray(historyKeymap), _toConsumableArray(foldKeymap), _toConsumableArray(commentKeymap), _toConsumableArray(completionKeymap), _toConsumableArray(lintKeymap), [indentWithTab])), oneDark, theme, EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))].filter(function (f) {
-    return f;
-  });
-  var state = EditorState.create({
-    extensions: [].concat(_toConsumableArray(setup), [EditorView.updateListener.of(function (vu) {
-      try {
-        if (vu.docChanged) {
-          var doc = vu.state.doc.toString();
-          onChange(doc);
-        }
-      } catch (_) {}
-    }), EditorView.editable.of(!readOnly)]),
-    doc: value === null || value === undefined ? '' : _typeof(value) === 'object' ? value.value : value
-  });
-  return new EditorView({
-    state: state,
-    parent: parent
-  });
+    maxWidth: '-1',
+}) {
+    const theme = EditorView.theme({
+        '&': Object.assign({}, themeStyle),
+    });
+    const setup = [
+        showLinesNumber ? lineNumbers() : lineNumbers({ formatNumber: () => "" }),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        languages[mode](),
+        foldGutter(),
+        drawSelection(),
+        dropCursor(),
+        EditorState.allowMultipleSelections.of(true),
+        defaultHighlightStyle.fallback,
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        rectangularSelection(),
+        highlightLine ? highlightActiveLine() : undefined,
+        highlightSelectionMatches(),
+        keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...searchKeymap,
+            ...historyKeymap,
+            ...foldKeymap,
+            ...commentKeymap,
+            ...completionKeymap,
+            ...lintKeymap,
+            indentWithTab
+        ]),
+        oneDark,
+        theme,
+        EditorState.tabSize.of(tabSize), indentUnit.of(" ".repeat(tabSize))
+    ].filter((f) => !!f);
+    const state = EditorState.create({
+        extensions: [
+            ...setup,
+            EditorView.updateListener.of(vu => {
+                try {
+                    if (vu.docChanged) {
+                        const doc = vu.state.doc.toString();
+                        onChange(doc);
+                    }
+                }
+                catch (_) {
+                }
+            }),
+            EditorView.editable.of(!readOnly)
+        ],
+        doc: (value === null || value === undefined) ? '' : (typeof value === 'object' ? value.value : value),
+    });
+    return new EditorView({
+        state,
+        parent
+    });
 }
 
-function CodeInput(_ref) {
-  var onChange = _ref.onChange,
-      value = _ref.value,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
-      _ref$tabSize = _ref.tabSize,
-      tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$showLinesNumber = _ref.showLinesNumber,
-      showLinesNumber = _ref$showLinesNumber === void 0 ? true : _ref$showLinesNumber,
-      _ref$highlightLine = _ref.highlightLine,
-      highlightLine = _ref$highlightLine === void 0 ? false : _ref$highlightLine,
-      _ref$themeStyle = _ref.themeStyle,
-      themeStyle = _ref$themeStyle === void 0 ? {
+function CodeInput({ onChange, value, mode = 'javascript', tabSize = 2, readOnly = false, showLinesNumber = true, highlightLine = false, themeStyle = {
     height: '-1',
     minHeight: '300px',
     maxHeight: '-1',
     width: '-1',
     minWidth: '-1',
-    maxWidth: '-1'
-  } : _ref$themeStyle,
-      setRef = _ref.setRef;
-  var ref = React.useRef();
-
-  var _useState = React.useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      editor = _useState2[0],
-      setEditor = _useState2[1];
-
-  React.useEffect(function () {
-    var e = Editor(ref.current, mode, onChange, value, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle);
-    ref.current.addEventListener("keydown", function (e) {
-      e.stopImmediatePropagation();
-    });
-    if (setRef) setRef(e);
-    e.dispatch({
-      changes: {
-        from: 0,
-        to: e.state.doc.length,
-        insert: value === null || value === undefined ? '' : _typeof$1(value) === 'object' ? JSON.stringify(value, null, 2) : value
-      }
-    });
-    setEditor(e);
-  }, []);
-  React.useEffect(function () {
-    if (editor && (_typeof$1(value) === 'object' ? JSON.stringify(value, null, 2) : value) !== editor.state.doc.toString()) {
-      editor.dispatch({
-        changes: {
-          from: 0,
-          to: editor.state.doc.length,
-          insert: value === null || value === undefined ? '' : _typeof$1(value) === 'object' ? JSON.stringify(value, null, 2) : value
-        }
-      });
-    }
-  }, [value]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: ref
-  });
-}
-
-var converter = new showdown__default["default"].Converter({
-  omitExtraWLInCodeBlocks: true,
-  ghCompatibleHeaderId: true,
-  parseImgDimensions: true,
-  simplifiedAutoLink: true,
-  tables: true,
-  tasklists: true,
-  requireSpaceBeforeHeadingText: true,
-  ghMentions: true,
-  emoji: true,
-  ghMentionsLink: '/{u}'
-});
-var MarkdownInput = function MarkdownInput(props) {
-  var _useState = React.useState(props.preview),
-      _useState2 = _slicedToArray(_useState, 2),
-      preview = _useState2[0],
-      setPreview = _useState2[1];
-
-  var ref = React.useRef();
-  React.useEffect(function () {
-    if (preview) {
-      showPreview();
-    }
-  }, [preview, props.value]);
-  var commands = [{
-    name: 'Add header',
-    icon: 'heading',
-    inject: function inject(range) {
-      return !range ? '#' : [{
-        from: range.from,
-        insert: "# "
-      }];
-    }
-  }, {
-    name: 'Add bold text',
-    icon: 'bold',
-    inject: function inject(range) {
-      return !range ? '**  **' : [{
-        from: range.from,
-        insert: "**"
-      }, {
-        from: range.to,
-        insert: '**'
-      }];
-    }
-  }, {
-    name: 'Add italic text',
-    icon: 'italic',
-    inject: function inject(range) {
-      return !range ? '* *' : [{
-        from: range.from,
-        insert: '*'
-      }, {
-        from: range.to,
-        insert: '*'
-      }];
-    }
-  }, {
-    name: 'Add strikethrough text',
-    icon: 'strikethrough',
-    inject: function inject(range) {
-      return !range ? '~~ ~~' : [{
-        from: range.from,
-        insert: '~~'
-      }, {
-        from: range.to,
-        insert: '~~'
-      }];
-    }
-  }, {
-    name: 'Add link',
-    icon: 'link',
-    inject: function inject(range) {
-      return !range ? '[ ](url)' : [{
-        from: range.from,
-        insert: '['
-      }, {
-        from: range.to,
-        insert: '](url)'
-      }];
-    }
-  }, {
-    name: 'Add code',
-    icon: 'code',
-    inject: function inject(range) {
-      return !range ? '```\n\n```\n' : [{
-        from: range.from,
-        insert: '```\n'
-      }, {
-        from: range.to,
-        insert: '\n```\n'
-      }];
-    }
-  }, {
-    name: 'Add quotes',
-    icon: 'quote-right',
-    inject: function inject(range) {
-      return !range ? '> ' : [{
-        from: range.from,
-        insert: '> '
-      }];
-    }
-  }, {
-    name: 'Add image',
-    icon: 'image',
-    inject: function inject(range) {
-      return !range ? '![ ](image-url)' : [{
-        from: range.from,
-        insert: '!['
-      }, {
-        from: range.to,
-        insert: '](image-url)'
-      }];
-    }
-  }, {
-    name: 'Add unordered list',
-    icon: 'list-ul',
-    inject: function inject(range) {
-      return !range ? '* ' : [{
-        from: range.from,
-        insert: '* '
-      }];
-    }
-  }, {
-    name: 'Add ordered list',
-    icon: 'list-ol',
-    inject: function inject(range) {
-      return !range ? '1. ' : [{
-        from: range.from,
-        insert: '1. '
-      }];
-    }
-  }, {
-    name: 'Add check list',
-    icon: 'tasks',
-    inject: function inject(range) {
-      return !range ? '* [ ] ' : [{
-        from: range.from,
-        insert: '* [ ] '
-      }];
-    }
-  }];
-
-  var showPreview = function showPreview() {
-    var parent = _toConsumableArray$1(document.getElementsByClassName('preview'));
-
-    if (parent.length > 0) _toConsumableArray$1(parent[0].querySelectorAll('pre code')).forEach(function (block) {
-      return hljs__default["default"].highlightElement(block);
-    });
-  };
-
-  var injectButtons = function injectButtons() {
-    return commands.map(function (command, idx) {
-      if (command.component) {
-        return command.component(idx);
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement("button", {
-        type: "button",
-        className: classNames__default["default"]('btn_for_descriptionToolbar'),
-        "aria-label": command.name,
-        title: command.name,
-        key: "toolbar-btn-".concat(idx),
-        onClick: function onClick() {
-          var editor = ref.current;
-          var selections = editor.state.selection.ranges;
-          if (selections.length === 1 && selections[0].from === selections[0].to) editor.dispatch({
+    maxWidth: '-1',
+}, setRef }) {
+    const ref = React.useRef();
+    const [editor, setEditor] = React.useState();
+    React.useEffect(() => {
+        const e = Editor(ref.current, mode, onChange, value, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle);
+        ref.current.addEventListener("keydown", (e) => {
+            e.stopImmediatePropagation();
+        });
+        if (setRef)
+            setRef(e);
+        e.dispatch({
             changes: {
-              from: 0,
-              to: editor.state.doc.length,
-              insert: editor.state.doc.toString() + command.inject()
-            }
-          });else {
-            editor.dispatch(editor.state.changeByRange(function (range) {
-              return {
-                changes: command.inject(range),
-                range: range
-              };
-            }));
-          }
+                from: 0,
+                to: e.state.doc.length,
+                insert: (value === null || value === undefined) ? '' : (typeof value === 'object' ? JSON.stringify(value, null, 2) : value)
+            }
+        });
+        setEditor(e);
+    }, []);
+    React.useEffect(() => {
+        if (editor && (typeof value === 'object' ? JSON.stringify(value, null, 2) : value) !== editor.state.doc.toString()) {
+            editor.dispatch({
+                changes: {
+                    from: 0,
+                    to: editor.state.doc.length,
+                    insert: (value === null || value === undefined) ? '' : (typeof value === 'object' ? JSON.stringify(value, null, 2) : value)
+                }
+            });
         }
-      }, /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "fas fa-".concat(command.icon)
-      }));
-    });
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](props.className)
-  }, !props.readOnly && /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginBottom: 10
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: "btn btn_sm",
-    style: {
-      color: !preview ? '#7f96af' : 'white',
-      backgroundColor: preview ? '#7f96af' : 'white'
-    },
-    onClick: function onClick() {
-      return setPreview(false);
-    }
-  }, "Write"), /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: "btn btn_sm ml_5",
-    style: {
-      color: preview ? '#7f96af' : 'white',
-      backgroundColor: preview ? 'white' : '#7f96af'
-    },
-    onClick: function onClick() {
-      return setPreview(true);
-    }
-  }, "Preview"))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flexWrap"
-  }, injectButtons())), !preview && /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
-    setRef: function setRef(e) {
-      return ref.current = e;
-    }
-  })), preview && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "preview",
-    dangerouslySetInnerHTML: {
-      __html: converter.makeHtml(props.value)
-    }
-  }));
+    }, [value]);
+    return React__default["default"].createElement("div", { ref: ref });
+}
+
+const converter = new showdown__default["default"].Converter({
+    omitExtraWLInCodeBlocks: true,
+    ghCompatibleHeaderId: true,
+    parseImgDimensions: true,
+    simplifiedAutoLink: true,
+    tables: true,
+    tasklists: true,
+    requireSpaceBeforeHeadingText: true,
+    ghMentions: true,
+    emoji: true,
+    ghMentionsLink: '/{u}'
+});
+const MarkdownInput = (props) => {
+    const [preview, setPreview] = React.useState(props.preview || false);
+    const ref = React.useRef();
+    React.useEffect(() => {
+        if (preview) {
+            showPreview();
+        }
+    }, [preview, props.value]);
+    const commands = [
+        {
+            name: 'Add header',
+            icon: 'heading',
+            inject: (range) => !range ? '#' : [{ from: range.from, insert: "# " }]
+        },
+        {
+            name: 'Add bold text',
+            icon: 'bold',
+            inject: (range) => !range ? '**  **' : [{ from: range.from, insert: "**" }, { from: range.to, insert: '**' }]
+        },
+        {
+            name: 'Add italic text',
+            icon: 'italic',
+            inject: (range) => !range ? '* *' : [{ from: range.from, insert: '*' }, { from: range.to, insert: '*' }]
+        },
+        {
+            name: 'Add strikethrough text',
+            icon: 'strikethrough',
+            inject: (range) => !range ? '~~ ~~' : [{ from: range.from, insert: '~~' }, { from: range.to, insert: '~~' }]
+        },
+        {
+            name: 'Add link',
+            icon: 'link',
+            inject: (range) => !range ? '[ ](url)' : [{ from: range.from, insert: '[' }, { from: range.to, insert: '](url)' }]
+        },
+        {
+            name: 'Add code',
+            icon: 'code',
+            inject: (range) => !range ? '```\n\n```\n' : [{ from: range.from, insert: '```\n' }, { from: range.to, insert: '\n```\n' }]
+        },
+        {
+            name: 'Add quotes',
+            icon: 'quote-right',
+            inject: (range) => !range ? '> ' : [{ from: range.from, insert: '> ' }]
+        },
+        {
+            name: 'Add image',
+            icon: 'image',
+            inject: (range) => !range ? '![ ](image-url)' : [{ from: range.from, insert: '![' }, { from: range.to, insert: '](image-url)' }]
+        },
+        {
+            name: 'Add unordered list',
+            icon: 'list-ul',
+            inject: (range) => !range ? '* ' : [{ from: range.from, insert: '* ' }]
+        },
+        {
+            name: 'Add ordered list',
+            icon: 'list-ol',
+            inject: (range) => !range ? '1. ' : [{ from: range.from, insert: '1. ' }]
+        },
+        {
+            name: 'Add check list',
+            icon: 'tasks',
+            inject: (range) => !range ? '* [ ] ' : [{ from: range.from, insert: '* [ ] ' }]
+        }
+    ];
+    const showPreview = () => {
+        const parent = [...document.getElementsByClassName('mrf-preview')];
+        if (parent.length > 0)
+            [...parent[0].querySelectorAll('pre code')]
+                .forEach(block => hljs__default["default"].highlightElement(block));
+    };
+    const injectButtons = () => {
+        return commands.map((command, idx) => {
+            return (React__default["default"].createElement("button", { type: "button", className: classNames__default["default"]('mrf-btn_for_descriptionToolbar'), "aria-label": command.name, title: command.name, key: `toolbar-btn-${idx}`, onClick: () => {
+                    const editor = ref.current;
+                    const selections = editor.state.selection.ranges;
+                    if (selections.length === 1 && selections[0].from === selections[0].to)
+                        editor.dispatch({
+                            changes: {
+                                from: 0,
+                                to: editor.state.doc.length,
+                                insert: editor.state.doc.toString() + command.inject()
+                            }
+                        });
+                    else {
+                        editor.dispatch(editor.state.changeByRange((range) => ({
+                            changes: command.inject(range),
+                            range
+                        })));
+                    }
+                } },
+                React__default["default"].createElement("i", { className: `fas fa-${command.icon}` })));
+        });
+    };
+    return React__default["default"].createElement("div", { className: classNames__default["default"](props.className) },
+        !props.readOnly && React__default["default"].createElement("div", { style: {
+                marginBottom: 10,
+            } },
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement("div", null,
+                    React__default["default"].createElement("button", { type: "button", className: 'mrf-btn mrf-btn_sm', style: { color: !preview ? '#7f96af' : 'white', backgroundColor: preview ? '#7f96af' : 'white' }, onClick: () => setPreview(false) }, "Write"),
+                    React__default["default"].createElement("button", { type: "button", className: 'mrf-btn mrf-btn_sm mrf-ml_5', style: { color: preview ? '#7f96af' : 'white', backgroundColor: preview ? 'white' : '#7f96af' }, onClick: () => setPreview(true) }, "Preview"))),
+            React__default["default"].createElement("div", { className: 'mrf-flex mrf-flexWrap' }, injectButtons())),
+        !preview && (React__default["default"].createElement(CodeInput, Object.assign({}, props, { setRef: e => ref.current = e }))),
+        preview && (React__default["default"].createElement("div", { className: "mrf-preview", dangerouslySetInnerHTML: { __html: converter.makeHtml(props.value || "") } })));
 };
 
-function SingleLineCode(_ref) {
-  var onChange = _ref.onChange,
-      value = _ref.value,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
-      _ref$tabSize = _ref.tabSize,
-      tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      _ref$showLinesNumber = _ref.showLinesNumber,
-      showLinesNumber = _ref$showLinesNumber === void 0 ? true : _ref$showLinesNumber,
-      _ref$highlightLine = _ref.highlightLine,
-      highlightLine = _ref$highlightLine === void 0 ? false : _ref$highlightLine,
-      _ref$themeStyle = _ref.themeStyle,
-      themeStyle = _ref$themeStyle === void 0 ? {
+function SingleLineCode({ onChange, value, mode = 'javascript', tabSize = 2, readOnly = false, showLinesNumber = true, highlightLine = false, themeStyle = {
     height: '-1',
     minHeight: '-1',
     maxHeight: '-1',
     width: '-1',
     minWidth: '-1',
-    maxWidth: '-1'
-  } : _ref$themeStyle;
-  var ref = React.useRef();
-  React.useEffect(function () {
-    Editor(ref.current, mode, function (v) {
-      onChange(v.replace(/\n/g, ""));
-    }, value, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle);
-    ref.current.addEventListener("keydown", function (e) {
-      e.stopImmediatePropagation();
-    });
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: ref,
-    style: {
-      flex: 1,
-      overflow: 'hidden'
-    }
-  });
+    maxWidth: '-1',
+} }) {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        Editor(ref.current, mode, (v) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(v.replace(/\n/g, ""));
+        }, value, tabSize, readOnly, showLinesNumber, highlightLine, themeStyle);
+        ref.current.addEventListener("keydown", (e) => {
+            e.stopImmediatePropagation();
+        });
+    }, []);
+    return React__default["default"].createElement("div", { ref: ref, style: {
+            flex: 1, overflow: 'hidden'
+        } });
 }
 
-var _resolvers;
-var resolvers = (_resolvers = {}, _defineProperty$1(_resolvers, type.string, function (typeErrorMessage) {
-  return yup__namespace.string().nullable().optional().typeError(typeErrorMessage || 'Value must be a string');
-}), _defineProperty$1(_resolvers, type.number, function (typeErrorMessage) {
-  return yup__namespace.number().nullable().optional().transform(function (v) {
-    return isNaN(v) ? null : v;
-  }).typeError(typeErrorMessage || 'Value must be a number');
-}), _defineProperty$1(_resolvers, type.bool, function () {
-  return yup__namespace.bool().nullable().optional();
-}), _defineProperty$1(_resolvers, type.object, function () {
-  return yup__namespace.object().nullable().optional();
-}), _defineProperty$1(_resolvers, type.date, function (typeErrorMessage) {
-  return yup__namespace.date().nullable().optional().typeError(typeErrorMessage || 'Value must be a date');
-}), _defineProperty$1(_resolvers, type.file, function () {
-  return yup__namespace.mixed();
-}), _defineProperty$1(_resolvers, type.json, function () {
-  return yup__namespace.mixed();
-}), _resolvers);
-var buildSubResolver = function buildSubResolver(props, key, dependencies, rawData) {
-  var _props$constraints = props.constraints,
-      constraints = _props$constraints === void 0 ? [] : _props$constraints;
-
-  if (props.array || props.isMulti) {
-    var subResolver;
-    var arrayResolver = yup__namespace.array();
-
-    if (props.schema && props.schema.type) {
-      subResolver = buildSubResolver(props.schema, key, dependencies, rawData);
-      arrayResolver = arrayResolver.of(subResolver);
-    } else if (props.schema) {
-      var deps = [];
-      subResolver = yup__namespace.object().shape(getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, deps, rawData).shape, deps);
-      arrayResolver = arrayResolver.of(yup__namespace.object().shape({
-        value: subResolver
-      }));
+const resolvers = {
+    [type.string]: (typeErrorMessage) => yup__namespace.string().nullable().optional().typeError(typeErrorMessage || 'Value must be a string'),
+    [type.number]: (typeErrorMessage) => yup__namespace.number().nullable().optional()
+        .transform(v => { return isNaN(v) ? null : v; })
+        .typeError(typeErrorMessage || 'Value must be a number'),
+    [type.bool]: () => yup__namespace.bool().nullable().optional(),
+    [type.object]: () => yup__namespace.object().nullable().optional(),
+    [type.date]: (typeErrorMessage) => yup__namespace.date().nullable().optional().typeError(typeErrorMessage || 'Value must be a date'),
+    [type.file]: () => yup__namespace.mixed(),
+    [type.json]: () => yup__namespace.mixed()
+};
+const buildSubResolver = (props, key, dependencies, rawValues) => {
+    const { constraints = [] } = props;
+    if (props.array || props.isMulti) {
+        let subResolver;
+        let arrayResolver = yup__namespace.array();
+        if (props.schema) {
+            const deps = [];
+            subResolver = yup__namespace.object().shape(getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, deps, rawValues).shape, deps);
+            arrayResolver = arrayResolver.of(yup__namespace.object().shape({ value: subResolver }));
+        }
+        return constraints.reduce((resolver, constraint) => {
+            return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+        }, arrayResolver);
+    }
+    else if (props.type === type.object && props.schema) {
+        if (!Object.keys(props.schema).length) {
+            return yup__namespace.object();
+        }
+        const subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawValues);
+        return constraints.reduce((resolver, constraint) => {
+            return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+        }, yup__namespace.object().shape(subResolver.shape, dependencies));
+    }
+    else if (props.type === type.object && props.conditionalSchema) {
+        const { schema, flow } = option(props.conditionalSchema)
+            .map(condiSchema => {
+            const ref = option(condiSchema.ref).map(ref => rawValues[ref]).getOrNull();
+            const filterSwitch = condiSchema.switch.find(s => {
+                if (typeof s.condition === 'function') {
+                    return s.condition({ rawValues, ref }); /* FIXME rawData vs rowValue */
+                }
+                else {
+                    return s.condition === ref;
+                }
+            });
+            return option(filterSwitch)
+                .orElse(condiSchema.switch.find(s => s.default))
+                .getOrElse({ schema: {}, flow: [] });
+        })
+            .getOrElse({ schema: {}, flow: [] });
+        const subResolver = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawValues);
+        return constraints.reduce((resolver, constraint) => {
+            return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+        }, yup__namespace.object().shape(subResolver.shape, dependencies));
     }
-
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, arrayResolver);
-  } else if (props.type === type.object && props.schema) {
-    if (!Object.keys(props.schema).length) {
-      return yup__namespace.object();
+    else {
+        return constraints.reduce((resolver, constraint) => {
+            return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
+        }, resolvers[props.type]());
     }
-
-    var _subResolver = getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, dependencies, rawData);
-
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, yup__namespace.object().shape(_subResolver.shape, dependencies));
-  } else if (props.type === type.object && props.conditionalSchema) {
-    var _option$map$getOrElse = option(props.conditionalSchema).map(function (condiSchema) {
-      var ref = option(condiSchema.ref).map(function (ref) {
-        return rawData[ref];
-      }).getOrNull();
-      var filterSwitch = condiSchema["switch"].find(function (s) {
-        if (typeof s.condition === 'function') {
-          return s.condition({
-            rawData: rawData,
-            ref: ref
-          });
-        } else {
-          return s.condition === ref;
-        }
-      });
-      return option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
-        return s["default"];
-      })).getOrElse({
-        schema: {},
-        flow: []
-      });
-    }).getOrElse({
-      schema: {},
-      flow: []
-    }),
-        schema = _option$map$getOrElse.schema,
-        flow = _option$map$getOrElse.flow;
-
-    var realFlow = flow || Object.keys(schema);
-
-    if (realFlow.length) {
-      var _subResolver2 = getShapeAndDependencies(flow || Object.keys(schema), schema, dependencies, rawData);
-
-      return constraints.reduce(function (resolver, constraint) {
-        return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-      }, yup__namespace.object().shape(_subResolver2.shape, dependencies));
+};
+const jsonOrFunctionConstraint = (constraint, resolver, key, dependencies) => {
+    if (typeof constraint === 'function') {
+        return constraint(resolver, key, dependencies);
+    }
+    else {
+        // TODO
+        return (jsonConstraints[constraint.type])(constraint)(resolver, key, dependencies);
     }
-  } else {
-    return constraints.reduce(function (resolver, constraint) {
-      return jsonOrFunctionConstraint(constraint, resolver, key, dependencies);
-    }, resolvers[props.type]());
-  }
 };
-
-var jsonOrFunctionConstraint = function jsonOrFunctionConstraint(constraint, resolver, key, dependencies) {
-  if (typeof constraint === 'function') {
-    return constraint(resolver, key, dependencies);
-  } else {
-    return jsonConstraints[constraint.type](constraint)(resolver, key, dependencies);
-  }
+const getShapeAndDependencies = (flow, schema, dependencies = [], rawData = {}) => {
+    if (!Object.keys(schema).length) {
+        return { shape: {}, dependencies };
+    }
+    const shape = (flow || Object.keys(schema))
+        .reduce((resolvers, key) => {
+        if (typeof key === 'object') {
+            return Object.assign(Object.assign({}, resolvers), getShapeAndDependencies(key.flow, schema, dependencies, rawData).shape);
+        }
+        if (!schema[key]) {
+            return resolvers;
+        }
+        const resolver = buildSubResolver(schema[key], key, dependencies, rawData);
+        return Object.assign(Object.assign({}, resolvers), { [key]: resolver });
+    }, {});
+    return { shape, dependencies };
 };
 
-var getShapeAndDependencies = function getShapeAndDependencies(flow, schema) {
-  var dependencies = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var rawData = arguments.length > 3 ? arguments[3] : undefined;
-
-  if (!Object.keys(schema).length) {
-    return {
-      shape: yup__namespace.object().shape({}),
-      dependencies: dependencies
-    };
-  }
-
-  var shape = (flow || Object.keys(schema)).reduce(function (resolvers, key) {
-    if (_typeof$1(key) === 'object') {
-      return _objectSpread2$1(_objectSpread2$1({}, resolvers), getShapeAndDependencies(key.flow, schema, dependencies, rawData).shape);
+const CustomizableInput$1 = React__namespace.memo((props) => {
+    if (props.render) {
+        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error })));
     }
-
-    if (!schema[key]) {
-      return resolvers;
+    return props.children;
+}, (prev, next) => {
+    if (next.render || next.conditionalSchema) {
+        return false;
     }
-
-    var resolver = buildSubResolver(schema[key], key, dependencies, rawData);
-    return _objectSpread2$1(_objectSpread2$1({}, resolvers), {}, _defineProperty$1({}, key, resolver));
-  }, {});
-  return {
-    shape: shape,
-    dependencies: dependencies
-  };
-};
-
-var CustomizableInput$1 = /*#__PURE__*/React__default["default"].memo(function (props) {
-  if (props.render) {
-    return props.render(_objectSpread2$1(_objectSpread2$1({}, props.field), {}, {
-      error: props.error
-    }));
-  }
-
-  return props.children;
-}, function (prev, next) {
-  if (next.render || next.conditionalSchema) {
-    return false;
-  }
-
-  return prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed;
+    return (prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed && cleanHash(next.step) === cleanHash(prev.step));
 });
-var ControlledInput = function ControlledInput(_ref) {
-  var step = _ref.step,
-      entry = _ref.entry,
-      children = _ref.children,
-      component = _ref.component,
-      errorDisplayed = _ref.errorDisplayed;
-
-  var _useController = reactHookForm.useController({
-    defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
-    name: entry
-  }),
-      field = _useController.field;
-
-  var _useFormContext = reactHookForm.useFormContext(),
-      getValues = _useFormContext.getValues,
-      _setValue = _useFormContext.setValue,
-      errors = _useFormContext.formState.errors;
-
-  var functionalProperty = function functionalProperty(entry, prop) {
-    if (typeof prop === 'function') {
-      return prop({
-        rawValues: getValues(),
-        value: getValues(entry)
-      });
-    } else {
-      return prop;
-    }
-  };
-
-  var props = _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, field), step.props), {}, {
-    id: entry,
-    readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
-    placeholder: step.placeholder,
-    onChange: function onChange(e) {
-      var value = function () {
-        if (!e) {
-          if (step.type === type.bool || step.type === type.number && field.value === 0) {
-            return e;
-          } else {
-            return null;
-          }
-        } else if (e.target) {
-          return e.target.value || null;
-        } else {
-          return e;
-        }
-      }();
-
-      field.onChange(value);
-      option(step.onChange).map(function (onChange) {
-        return onChange({
-          rawValues: getValues(),
-          value: value,
-          setValue: _setValue
-        });
-      });
-    },
-    value: field.value
-  });
-
-  var error = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, errors);
-  return /*#__PURE__*/React__default["default"].createElement(CustomizableInput$1, {
-    render: step.render,
-    field: _objectSpread2$1({
-      parent: parent,
-      setValue: function setValue(key, value) {
-        return _setValue(key, value);
-      },
-      rawValues: getValues()
-    }, field),
-    error: error,
-    errorDisplayed: errorDisplayed
-  }, component ? component(field, props) : /*#__PURE__*/React__default["default"].cloneElement(children, _objectSpread2$1({}, props)));
-};
-
-var usePrevious = function usePrevious(value) {
-  // The ref object is a generic container whose current property is mutable ...
-  // ... and can hold any value, similar to an instance property on a class
-  var ref = React.useRef(); // Store current value in ref
-
-  React.useEffect(function () {
-    ref.current = value;
-  }, [value]); // Only re-run if value changes
-  // Return previous value (happens before update in useEffect above)
-
-  return ref.current;
-};
-
-var BasicWrapper = function BasicWrapper(_ref) {
-  var entry = _ref.entry;
-      _ref.className;
-      var label = _ref.label,
-      help = _ref.help,
-      children = _ref.children,
-      render = _ref.render;
-
-  if (_typeof$1(entry) === 'object') {
-    return children;
-  }
-
-  var id = uuid.v4();
-
-  var _useFormContext = reactHookForm.useFormContext(),
-      formState = _useFormContext.formState;
-
-  var error = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, formState.errors);
-  var isDirty = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, formState.dirtyFields);
-  var isTouched = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, formState.touchedFields);
-  var errorDisplayed = formState.isSubmitted || isDirty || isTouched;
-
-  if (render) {
-    return render({
-      entry: entry,
-      label: label,
-      error: error,
-      help: help,
-      children: children
+const ControlledInput = (inputProps) => {
+    const { step, entry, children, component, errorDisplayed = false } = inputProps;
+    const { field } = reactHookForm.useController({
+        defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
+        name: entry
     });
-  }
-
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mt_10",
-    style: {
-      position: 'relative'
-    }
-  }, label && /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "flex ai_center mb_5",
-    htmlFor: entry
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, label), help && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ReactToolTip__default["default"], {
-    html: true,
-    place: 'bottom',
-    id: id
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "flex ai_center",
-    "data-html": true,
-    "data-tip": help,
-    "data-for": id
-  }, /*#__PURE__*/React__default["default"].createElement(reactFeather.HelpCircle, {
-    style: {
-      color: 'gray',
-      width: 17,
-      marginLeft: '.5rem',
-      cursor: 'help'
-    }
-  })))), children, error && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('feedback', _defineProperty$1({}, 'txt_red', errorDisplayed))
-  }, error.message));
+    const { getValues, setValue, formState: { errors } } = reactHookForm.useFormContext();
+    const functionalProperty = (entry, prop) => {
+        if (typeof prop === 'function') {
+            return prop({ rawValues: getValues(), value: getValues(entry) });
+        }
+        else {
+            return prop;
+        }
+    };
+    const props = Object.assign(Object.assign(Object.assign({}, field), step.props), { id: entry, readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null, placeholder: step.placeholder, onChange: (e) => {
+            const value = (() => {
+                if (!e) {
+                    if (step.type === type.bool ||
+                        (step.type === type.number && field.value === 0)) {
+                        return e;
+                    }
+                    else {
+                        return null;
+                    }
+                }
+                else if (e.target) {
+                    return e.target.value || null;
+                }
+                else {
+                    return e;
+                }
+            })();
+            field.onChange(value);
+            option(step.onChange)
+                .map(onChange => onChange({ rawValues: getValues(), value, setValue }));
+        }, value: field.value });
+    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], errors);
+    return React__namespace.createElement(CustomizableInput$1, { render: step.render, step: step, field: Object.assign({ parent, setValue: (key, value) => setValue(key, value), rawValues: getValues() }, field), error: error, errorDisplayed: errorDisplayed }, component ? component(field, props) : React__namespace.cloneElement(children, Object.assign({}, props)));
 };
 
-var CustomizableInput = function CustomizableInput(props) {
-  if (props.render) {
-    return props.render(_objectSpread2$1(_objectSpread2$1({}, props.field), {}, {
-      error: props.error
-    }));
-  }
-
-  return props.children;
+const usePrevious = (value) => {
+    // The ref object is a generic container whose current property is mutable ...
+    // ... and can hold any value, similar to an instance property on a class
+    const ref = React.useRef();
+    // Store current value in ref
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
 };
-
-var defaultVal = function defaultVal(value, array, defaultValue, type) {
-  if (isDefined(defaultValue)) return defaultValue;
-  if (!!array) return [];
-  return value;
+const BasicWrapper = ({ entry, className, help, children, render, functionalProperty, label }) => {
+    if (typeof entry === 'object') {
+        return children;
+    }
+    const computedLabel = functionalProperty(entry, label === null ? null : label || entry);
+    const id = uuid$1.v4();
+    const { formState } = reactHookForm.useFormContext();
+    // FIXME not sure it works as intended with more two or more parts
+    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.errors);
+    const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.dirtyFields);
+    const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.touchedFields);
+    const errorDisplayed = formState.isSubmitted || isDirty || isTouched;
+    if (render) {
+        return render({ entry, label: computedLabel, error, help, children });
+    }
+    return (React__default["default"].createElement("div", { className: 'mrf-mt_10', style: { position: 'relative' } },
+        computedLabel && React__default["default"].createElement("label", { className: 'mrf-flex mrf-ai_center mrf-mb_5', htmlFor: entry },
+            React__default["default"].createElement("span", null, computedLabel),
+            help && React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(ReactToolTip__default["default"], { html: true, place: 'bottom', id: id }),
+                React__default["default"].createElement("span", { className: 'mrf-flex mrf-ai_center', "data-html": true, "data-tip": help, "data-for": id },
+                    React__default["default"].createElement(reactFeather.HelpCircle, { style: { color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' } })))),
+        children,
+        error && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-feedback', { ['mrf-txt_red']: !!errorDisplayed }) }, error.message)));
 };
-
-var getDefaultValues = function getDefaultValues(flow, schema, value) {
-  return (flow || []).reduce(function (acc, key) {
-    if (_typeof$1(key) === 'object') {
-      return _objectSpread2$1(_objectSpread2$1({}, acc), getDefaultValues(key.flow, schema, value));
+const CustomizableInput = (props) => {
+    if (props.render) {
+        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error })));
     }
-
-    var entry = schema[key];
-
-    if (!entry) {
-      return acc;
-    }
-
-    return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, defaultVal(value ? value[key] : null, entry.array || entry.isMulti, entry.defaultValue)));
-  }, {});
+    return props.children;
 };
-
-var cleanInputArray = function cleanInputArray(obj, defaultValues, flow, subSchema) {
-  var realFlow = option(flow).map(function (f) {
-    return f.map(function (v) {
-      return v.flow || v;
-    });
-  }).map(arrayFlatten).getOrElse(Object.keys(subSchema || {}));
-  return Object.entries(subSchema || {}).filter(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 1),
-        key = _ref3[0];
-
-    return realFlow.includes(key);
-  }).reduce(function (acc, _ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        key = _ref5[0],
-        step = _ref5[1];
-
-    var v = null;
-
-    if (obj) {
-      v = obj[key];
-    }
-
-    var maybeDefaultValue = defaultValues[key];
-
-    if (!v && isDefined(maybeDefaultValue)) {
-      v = maybeDefaultValue;
-    }
-
-    if (step.array && !step.render) {
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, (v || []).map(function (value) {
-        var _subSchema$key, _subSchema$key2;
-
-        return {
-          value: _typeof$1(value) === 'object' && !(value instanceof Date) && !Array.isArray(value) ? cleanInputArray(value, defaultValues, (_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.flow, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {}) : value
-        };
-      })));
-    } else if (_typeof$1(v) === 'object' && !(v instanceof Date) && !Array.isArray(v)) {
-      var _subSchema$key3, _subSchema$key4;
-
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, cleanInputArray(v, defaultValues, (_subSchema$key3 = subSchema[key]) === null || _subSchema$key3 === void 0 ? void 0 : _subSchema$key3.flow, ((_subSchema$key4 = subSchema[key]) === null || _subSchema$key4 === void 0 ? void 0 : _subSchema$key4.schema) || {})));
-    } else {
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v === undefined ? Array.isArray(v) ? [] : step.type === type.object ? {} : null : v));
-    }
-  }, obj);
+const defaultVal = (value, array, defaultValue, type) => {
+    if (isDefined(defaultValue))
+        return defaultValue;
+    if (array)
+        return [];
+    return value;
 };
-
-var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
-  return Object.entries(obj).reduce(function (acc, curr) {
-    var _curr = _slicedToArray(curr, 2),
-        key = _curr[0],
-        v = _curr[1];
-
-    if (Array.isArray(v)) {
-      var isArray = option(subSchema) //        .orElse(schema) TODO : schema is undefined
-      .map(function (s) {
-        return s[key];
-      }).map(function (entry) {
-        return !!entry.array && !entry.render;
-      }).getOrElse(false);
-
-      if (isArray) {
-        return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v.map(function (step) {
-          var _subSchema$key5;
-
-          if (!!step.value && _typeof$1(step.value) === 'object' && !(step.value instanceof Date && !Array.isArray(step.value))) return cleanOutputArray(step.value, ((_subSchema$key5 = subSchema[key]) === null || _subSchema$key5 === void 0 ? void 0 : _subSchema$key5.schema) || {});
-          return step.value;
-        })));
-      }
-
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
-    } else if (!!v && _typeof$1(v) === 'object' && !(v instanceof Date && !Array.isArray(v))) {
-      var _subSchema$key6;
-
-      return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, cleanOutputArray(v, ((_subSchema$key6 = subSchema[key]) === null || _subSchema$key6 === void 0 ? void 0 : _subSchema$key6.schema) || {})));
-    } else {
-      var _subSchema$key7;
-
-      if (((_subSchema$key7 = subSchema[key]) === null || _subSchema$key7 === void 0 ? void 0 : _subSchema$key7.type) === 'json') {
-        try {
-          return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, JSON.parse(v)));
-        } catch (err) {
-          return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
+function getDefaultValues(flow, schema, value) {
+    return (flow || []).reduce((acc, key) => {
+        if (typeof key === 'object') {
+            return Object.assign(Object.assign({}, acc), getDefaultValues(key.flow, schema, value));
+        }
+        const entry = schema[key];
+        if (!entry) {
+            return acc;
+        }
+        return Object.assign(Object.assign({}, acc), { [key]: defaultVal(value ? value[key] : null, entry.array || entry.isMulti || false, entry.defaultValue) });
+    }, {});
+}
+const cleanInputArray = (obj = {}, defaultValues = {}, flow, subSchema) => {
+    const realFlow = option(flow)
+        .map(f => f.map(v => typeof v === 'object' ? v.flow : v))
+        .map(arrayFlatten)
+        .getOrElse(Object.keys(subSchema || {}));
+    return Object.entries(subSchema || {})
+        .filter(([key]) => realFlow.includes(key))
+        .reduce((acc, [key, step]) => {
+        var _a, _b;
+        let v = null;
+        if (obj) {
+            v = obj[key];
+        }
+        const maybeDefaultValue = defaultValues[key];
+        if (!v && isDefined(maybeDefaultValue)) {
+            v = maybeDefaultValue;
+        }
+        if (step.array && !step.render) {
+            return Object.assign(Object.assign({}, acc), { [key]: (v || []).map((value) => {
+                    var _a, _b;
+                    return ({
+                        value: typeof value === 'object' && !(value instanceof Date) && !Array.isArray(value) ?
+                            cleanInputArray(value, defaultValues, (_a = subSchema === null || subSchema === void 0 ? void 0 : subSchema[key]) === null || _a === void 0 ? void 0 : _a.flow, ((_b = subSchema === null || subSchema === void 0 ? void 0 : subSchema[key]) === null || _b === void 0 ? void 0 : _b.schema) || {}) : value
+                    });
+                }) });
         }
-      } else {
-        return _objectSpread2$1(_objectSpread2$1({}, acc), {}, _defineProperty$1({}, key, v));
-      }
-    }
-  }, {});
+        else if (typeof v === 'object' && !(v instanceof Date) && !Array.isArray(v)) {
+            return Object.assign(Object.assign({}, acc), { [key]: cleanInputArray(v, defaultValues, (_a = subSchema === null || subSchema === void 0 ? void 0 : subSchema[key]) === null || _a === void 0 ? void 0 : _a.flow, ((_b = subSchema === null || subSchema === void 0 ? void 0 : subSchema[key]) === null || _b === void 0 ? void 0 : _b.schema) || {}) });
+        }
+        else {
+            return Object.assign(Object.assign({}, acc), { [key]: v === undefined ? (Array.isArray(v) ? [] : step.type === type.object ? {} : null) : v });
+        }
+    }, obj);
 };
-
-var validate = function validate(flow, schema, value) {
-  var formFlow = flow || Object.keys(schema);
-
-  var _getShapeAndDependenc = getShapeAndDependencies(formFlow, schema),
-      shape = _getShapeAndDependenc.shape,
-      dependencies = _getShapeAndDependenc.dependencies;
-
-  return yup__namespace.object().shape(shape, dependencies).validate(value, {
-    abortEarly: false
-  });
+const cleanOutputArray = (obj, subSchema) => {
+    return Object.entries(obj).reduce((acc, curr) => {
+        var _a, _b;
+        const [key, v] = curr;
+        if (Array.isArray(v)) {
+            const isArray = option(subSchema)
+                //        .orElse(schema) TODO : schema is undefined
+                .map(s => s[key])
+                .map(entry => !!entry.array && !entry.render)
+                .getOrElse(false);
+            if (isArray) {
+                return Object.assign(Object.assign({}, acc), { [key]: v.map(step => {
+                        var _a;
+                        if (!!step.value && typeof step.value === 'object' && !(step.value instanceof (Date) && !Array.isArray(step.value)))
+                            return cleanOutputArray(step.value, ((_a = subSchema[key]) === null || _a === void 0 ? void 0 : _a.schema) || {});
+                        return step.value;
+                    }) });
+            }
+            return Object.assign(Object.assign({}, acc), { [key]: v });
+        }
+        else if (!!v && typeof v === 'object' && !(v instanceof (Date) && !Array.isArray(v))) {
+            return Object.assign(Object.assign({}, acc), { [key]: cleanOutputArray(v, ((_a = subSchema[key]) === null || _a === void 0 ? void 0 : _a.schema) || {}) });
+        }
+        else {
+            if (((_b = subSchema[key]) === null || _b === void 0 ? void 0 : _b.type) === 'json') {
+                try {
+                    return Object.assign(Object.assign({}, acc), { [key]: JSON.parse(v) });
+                }
+                catch (err) {
+                    return Object.assign(Object.assign({}, acc), { [key]: v });
+                }
+            }
+            else {
+                return Object.assign(Object.assign({}, acc), { [key]: v });
+            }
+        }
+    }, {});
 };
-
-var Watcher = function Watcher(_ref6) {
-  var options = _ref6.options,
-      control = _ref6.control,
-      schema = _ref6.schema,
-      onSubmit = _ref6.onSubmit,
-      handleSubmit = _ref6.handleSubmit;
-  var data = reactHookForm.useWatch({
-    control: control
-  });
-  useHashEffect(function () {
-    if (!!options.autosubmit) {
-      handleSubmit(function () {
-        onSubmit(cleanOutputArray(data, schema));
-      })();
-    }
-  }, [data]);
-
-  if (options.watch) {
-    if (typeof options.watch === 'function') {
-      options.watch(cleanOutputArray(data, schema));
-    } else {
-      console.group('react-form watch');
-      console.log(cleanOutputArray(data, schema));
-      console.groupEnd();
-    }
-  }
-
-  return null;
+const validate = (flow, schema, value) => {
+    const formFlow = flow || Object.keys(schema);
+    const { shape, dependencies } = getShapeAndDependencies(formFlow, schema);
+    return yup__namespace.object()
+        .shape(shape, dependencies)
+        .validate(value, {
+        abortEarly: false
+    });
 };
-
-var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, ref) {
-  var schema = _ref7.schema,
-      flow = _ref7.flow,
-      value = _ref7.value,
-      inputWrapper = _ref7.inputWrapper,
-      onSubmit = _ref7.onSubmit,
-      _ref7$onError = _ref7.onError,
-      onError = _ref7$onError === void 0 ? function () {} : _ref7$onError,
-      footer = _ref7.footer;
-      _ref7.style;
-      var className = _ref7.className,
-      _ref7$options = _ref7.options,
-      options = _ref7$options === void 0 ? {} : _ref7$options;
-      _ref7.nostyle;
-  var formFlow = flow || Object.keys(schema);
-
-  var maybeCustomHttpClient = function maybeCustomHttpClient(url, method) {
-    //todo: if present props.resolve()
-    if (options.httpClient) {
-      return options.httpClient(url, method);
+const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
+    const data = reactHookForm.useWatch({ control });
+    useHashEffect(() => {
+        if (options.autosubmit) {
+            handleSubmit(() => {
+                onSubmit(cleanOutputArray(data, schema));
+            })();
+        }
+    }, [data]);
+    if (options.watch) {
+        if (typeof options.watch === 'function') {
+            options.watch(cleanOutputArray(data, schema));
+        }
+        else {
+            console.group('react-form watch');
+            console.log(cleanOutputArray(data, schema));
+            console.groupEnd();
+        }
     }
-
-    return fetch(url, {
-      method: method,
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-      }
+    return null;
+};
+const Form = React__default["default"].forwardRef(function Form({ schema, flow, value, inputWrapper, onSubmit, onError = () => { }, footer, style = {}, className, options = {}, nostyle }, ref) {
+    const formFlow = flow || Object.keys(schema);
+    const maybeCustomHttpClient = (url, method) => {
+        //todo: if present props.resolve()
+        if (options.httpClient) {
+            return options.httpClient(url, method);
+        }
+        return fetch(url, {
+            method,
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json'
+            },
+        });
+    };
+    const defaultValues = getDefaultValues(formFlow, schema, value);
+    //FIXME: get real schema through the switch
+    const resolver = (rawData) => {
+        const { shape, dependencies } = getShapeAndDependencies(formFlow, schema, [], rawData);
+        const resolver = yup__namespace.object().shape(shape, dependencies);
+        return resolver;
+    };
+    const methods = reactHookForm.useForm({
+        resolver: (data, context, options) => yup$1.yupResolver(resolver(data))(data, context, options),
+        shouldFocusError: false,
+        mode: 'onChange'
     });
-  };
-
-  var defaultValues = getDefaultValues(formFlow, schema, value); //FIXME: get real schema through the switch
-
-  var _resolver = function resolver(rawData) {
-    var _getShapeAndDependenc2 = getShapeAndDependencies(formFlow, schema, [], rawData),
-        shape = _getShapeAndDependenc2.shape,
-        dependencies = _getShapeAndDependenc2.dependencies;
-
-    var resolver = yup__namespace.object().shape(shape, dependencies);
-    return resolver;
-  };
-
-  var methods = reactHookForm.useForm({
-    resolver: function resolver(data, context, options) {
-      return yup$1.yupResolver(_resolver(data))(data, context, options);
-    },
-    shouldFocusError: false,
-    mode: 'onChange'
-  });
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      initialReseted = _useState2[0];
-      _useState2[1]; // useEffect(() => {
-  //   reset(cleanInputArray(value, defaultValues, flow, schema))
-  //   setReset(true)
-  // }, [reset])
-
-
-  React.useEffect(function () {
-    trigger();
-  }, [trigger, initialReseted]);
-  var _handleSubmit = methods.handleSubmit,
-      _methods$formState = methods.formState;
-      _methods$formState.errors;
-      var dirtyFields = _methods$formState.dirtyFields,
-      _reset = methods.reset,
-      trigger = methods.trigger,
-      getValues = methods.getValues,
-      watch = methods.watch;
-  useHashEffect(function () {
-    _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
-  }, [value, schema]);
-
-  var functionalProperty = function functionalProperty(entry, prop) {
-    if (typeof prop === 'function') {
-      return prop({
-        rawValues: getValues(),
-        value: getValues(entry)
-      });
-    } else {
-      return prop;
-    }
-  };
-
-  React.useImperativeHandle(ref, function () {
-    return {
-      handleSubmit: function handleSubmit() {
-        return _handleSubmit(function (data) {
-          var clean = cleanOutputArray(data, schema);
-          onSubmit(clean);
-        }, onError)();
-      },
-      trigger: trigger,
-      methods: _objectSpread2$1(_objectSpread2$1({}, methods), {}, {
-        data: function data() {
-          return cleanOutputArray(getValues(), schema);
-        }
-      })
+    const [initialReseted, setReset] = React.useState(false);
+    // useEffect(() => {
+    //   reset(cleanInputArray(value, defaultValues, flow, schema))
+    //   setReset(true)
+    // }, [reset])
+    const { handleSubmit, formState: { errors, dirtyFields }, reset, trigger, getValues, watch } = methods;
+    React.useEffect(() => {
+        if (!!options.showErrorsOnStart) {
+            trigger();
+        }
+    }, [trigger, initialReseted]);
+    useHashEffect(() => {
+        reset(Object.assign({}, cleanInputArray(value, defaultValues, flow, schema)));
+    }, [value, schema]);
+    const functionalProperty = (entry, prop) => {
+        if (typeof prop === 'function') {
+            return prop({ rawValues: getValues(), value: getValues(entry) }); // FIXME why ???
+        }
+        else {
+            return prop;
+        }
     };
-  });
-  return /*#__PURE__*/React__default["default"].createElement(reactHookForm.FormProvider, methods, /*#__PURE__*/React__default["default"].createElement(Watcher, {
-    options: options,
-    control: methods.control,
-    schema: schema,
-    onSubmit: onSubmit,
-    handleSubmit: _handleSubmit,
-    watch: methods.watch
-  }), /*#__PURE__*/React__default["default"].createElement("form", {
-    className: className || "pr_15 w_100",
-    onSubmit: _handleSubmit(function (data) {
-      var clean = cleanOutputArray(data, schema);
-      onSubmit(clean);
-    }, onError)
-  }, formFlow.map(function (entry, idx) {
-    var step = schema[entry];
-
-    if (!step && typeof entry === 'string') {
-      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
-      return null;
-    }
-
-    var visibleStep = option(step).map(function (s) {
-      return s.visible;
-    }).map(function (visible) {
-      switch (_typeof$1(visible)) {
-        case 'object':
-          var _value = watch(step.visible.ref);
-
-          return option(step.visible.test).map(function (test) {
-            return test(_value, idx);
-          }).getOrElse(_value);
-
-        case 'boolean':
-          return visible;
-
-        default:
-          return true;
-      }
-    }).getOrElse(true);
-
-    if (!visibleStep) {
-      return null;
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(BasicWrapper, {
-      key: "".concat(entry, "-").concat(idx),
-      entry: entry,
-      dirtyFields: dirtyFields,
-      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 === null || step === void 0 ? void 0 : step.help,
-      render: inputWrapper
-    }, /*#__PURE__*/React__default["default"].createElement(Step, {
-      key: idx,
-      entry: entry,
-      step: step,
-      schema: schema,
-      inputWrapper: inputWrapper,
-      httpClient: maybeCustomHttpClient,
-      functionalProperty: functionalProperty
+    React.useImperativeHandle(ref, () => ({
+        handleSubmit: () => handleSubmit(data => {
+            const clean = cleanOutputArray(data, schema);
+            onSubmit(clean);
+        }, onError)(),
+        trigger,
+        methods: Object.assign(Object.assign({}, methods), { data: () => cleanOutputArray(getValues(), schema) })
     }));
-  }), /*#__PURE__*/React__default["default"].createElement(Footer, {
-    render: footer,
-    reset: function reset() {
-      return _reset(defaultValues);
-    },
-    valid: _handleSubmit(function (data) {
-      return onSubmit(cleanOutputArray(data, schema));
-    }, onError),
-    actions: options.actions
-  })));
+    return (React__default["default"].createElement(reactHookForm.FormProvider, Object.assign({}, methods),
+        React__default["default"].createElement(Watcher, { options: options, control: methods.control, schema: schema, onSubmit: onSubmit, handleSubmit: handleSubmit }),
+        React__default["default"].createElement("form", { className: className || `mrf-pr_15 mrf-w_100`, onSubmit: handleSubmit(data => {
+                const clean = cleanOutputArray(data, schema);
+                onSubmit(clean);
+            }, onError) },
+            formFlow.map((entry, idx) => {
+                const step = typeof entry === "object" ? undefined : schema[entry];
+                if (!step && typeof entry === 'string') {
+                    console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
+                    return null;
+                }
+                const visibleStep = option(step)
+                    .map((s) => s.visible)
+                    .map((visible) => {
+                    let value;
+                    switch (typeof visible) {
+                        case 'object':
+                            value = getValues(visible.ref);
+                            return option(visible.test).map(test => test(value, idx)).getOrElse(value);
+                        case 'boolean':
+                            return visible;
+                        default:
+                            return true;
+                    }
+                })
+                    .getOrElse(true);
+                if (!visibleStep) {
+                    return null;
+                }
+                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, label: step === null || step === void 0 ? void 0 : step.label, help: step === null || step === void 0 ? void 0 : step.help, render: inputWrapper },
+                    React__default["default"].createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty })));
+            }),
+            React__default["default"].createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
 });
-
-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;
-
-  if (props.render) {
-    return props.render({
-      reset: props.reset,
-      valid: props.valid
-    });
-  }
-
-  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__default["default"].createElement("div", {
-    className: "flex jc_end 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__default["default"].createElement("button", {
-    className: "btn btn_red",
-    type: "button",
-    onClick: function onClick() {
-      var _props$actions4;
-
-      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__default["default"].createElement("button", {
-    className: "btn 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__default["default"].createElement("button", {
-    className: "btn btn_green 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'));
+const Footer = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    if (props.render) {
+        return props.render({ reset: props.reset, valid: props.valid });
+    }
+    const isSubmitDisplayed = ((_b = (_a = props.actions) === null || _a === void 0 ? void 0 : _a.submit) === null || _b === void 0 ? void 0 : _b.display) === undefined ? true : !!((_d = (_c = props.actions) === null || _c === void 0 ? void 0 : _c.submit) === null || _d === void 0 ? void 0 : _d.display);
+    return (React__default["default"].createElement("div", { className: 'mrf-flex mrf-jc_end mrf-mt_5' },
+        ((_f = (_e = props.actions) === null || _e === void 0 ? void 0 : _e.cancel) === null || _f === void 0 ? void 0 : _f.display) && React__default["default"].createElement("button", { className: 'mrf-btn mrf-btn_red', type: "button", onClick: () => { var _a, _b; return (_b = (_a = props.actions) === null || _a === void 0 ? void 0 : _a.cancel) === null || _b === void 0 ? void 0 : _b.action(); } }, ((_h = (_g = props.actions) === null || _g === void 0 ? void 0 : _g.cancel) === null || _h === void 0 ? void 0 : _h.label) || 'Cancel'),
+        ((_k = (_j = props.actions) === null || _j === void 0 ? void 0 : _j.reset) === null || _k === void 0 ? void 0 : _k.display) && React__default["default"].createElement("button", { className: 'mrf-btn mrf-btn_red', type: "button", onClick: props.reset }, ((_m = (_l = props.actions) === null || _l === void 0 ? void 0 : _l.reset) === null || _m === void 0 ? void 0 : _m.label) || 'Reset'),
+        isSubmitDisplayed && React__default["default"].createElement("button", { className: 'mrf-btn mrf-btn_green mrf-ml_10', type: "submit" }, ((_p = (_o = props.actions) === null || _o === void 0 ? void 0 : _o.submit) === null || _p === void 0 ? void 0 : _p.label) || 'Save')));
 };
-
-var Step = function Step(_ref8) {
-  var entry = _ref8.entry,
-      realEntry = _ref8.realEntry,
-      step = _ref8.step,
-      schema = _ref8.schema,
-      inputWrapper = _ref8.inputWrapper,
-      httpClient = _ref8.httpClient,
-      defaultValue = _ref8.defaultValue,
-      index = _ref8.index,
-      functionalProperty = _ref8.functionalProperty,
-      parent = _ref8.parent,
-      onAfterChange = _ref8.onAfterChange;
-
-  var _useFormContext2 = reactHookForm.useFormContext(),
-      _useFormContext2$form = _useFormContext2.formState,
-      errors = _useFormContext2$form.errors,
-      dirtyFields = _useFormContext2$form.dirtyFields,
-      touchedFields = _useFormContext2$form.touchedFields,
-      isSubmitted = _useFormContext2$form.isSubmitted,
-      control = _useFormContext2.control;
-      _useFormContext2.trigger;
-      var getValues = _useFormContext2.getValues,
-      _setValue = _useFormContext2.setValue,
-      watch = _useFormContext2.watch;
-      _useFormContext2.register;
-
-  if (entry && _typeof$1(entry) === 'object') {
-    var errored = entry.flow.some(function (step) {
-      return !!errors[step] && (dirtyFields[step] || touchedFields[step]);
-    });
-    return /*#__PURE__*/React__default["default"].createElement(Collapse, _extends({}, entry, {
-      errored: errored
-    }), entry.flow.map(function (en, entryIdx) {
-      var stp = schema[en];
-      _typeof$1(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
-        return object && object[key];
-      }, errors);
-
-      if (!stp && typeof en === 'string') {
-        console.error("no step found for the entry \"".concat(en, "\" in the given schema. Your form might not work properly. Please fix it"));
-        return null;
-      }
-
-      var visibleStep = option(stp).map(function (s) {
-        return s.visible;
-      }).map(function (visible) {
-        switch (_typeof$1(visible)) {
-          case 'object':
-            var value = watch(visible.ref);
-            return option(visible.test).map(function (test) {
-              return test(value, index);
-            }).getOrElse(value);
-
-          case 'boolean':
-            return visible;
-
-          default:
-            return true;
-        }
-      }).getOrElse(true);
-
-      if (!visibleStep) {
-        return null;
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement(BasicWrapper, {
-        key: "collapse-".concat(en, "-").concat(entryIdx),
-        entry: en,
-        label: functionalProperty(en, (stp === null || stp === void 0 ? void 0 : stp.label) === null ? null : (stp === null || stp === void 0 ? void 0 : stp.label) || en),
-        help: stp === null || stp === void 0 ? void 0 : stp.help,
-        render: inputWrapper
-      }, /*#__PURE__*/React__default["default"].createElement(Step, {
-        entry: en,
-        step: stp,
-        schema: schema,
-        inputWrapper: inputWrapper,
-        httpClient: httpClient,
-        defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue,
-        functionalProperty: functionalProperty
-      }));
-    }));
-  }
-
-  var error = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, errors);
-  var isDirty = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, dirtyFields);
-  var isTouched = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, touchedFields);
-  var errorDisplayed = !!error && (isSubmitted || isDirty || isTouched);
-  var onAfterChangeFunc = onAfterChange || step.onAfterChange || step.on_after_change;
-
-  if (onAfterChangeFunc) {
-    var data = watch();
-    var d = entry.replace('[', '.').replace(']', '').split('.').reduce(function (acc, curr) {
-      return acc && acc[curr];
-    }, data) || {};
-    var currentData = usePrevious(cleanOutputArray(d, schema));
-    var newData = cleanOutputArray(d, schema);
-    if (!deepEqual__default["default"](newData, currentData) || newData !== undefined && currentData === undefined) onAfterChangeFunc({
-      entry: entry,
-      value: getValues(entry),
-      rawValues: newData,
-      previousValue: currentData,
-      getValue: function getValue(e) {
-        return getValues(e);
-      },
-      setValue: _setValue,
-      onChange: function onChange(v) {
-        return _setValue(entry, v);
-      }
-    });
-  }
-
-  if (step.array) {
-    return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-      render: step.render,
-      field: {
-        setValue: function setValue(key, value) {
-          return _setValue(key, value);
-        },
-        rawValues: getValues(),
-        value: getValues(entry),
-        onChange: function onChange(v) {
-          return _setValue(entry, v);
-        }
-      },
-      error: error
-    }, /*#__PURE__*/React__default["default"].createElement(ArrayStep, {
-      entry: entry,
-      step: step,
-      disabled: functionalProperty(entry, step.disabled),
-      component: function component(props, idx) {
-        var _props$defaultValue;
-
-        return /*#__PURE__*/React__default["default"].createElement(Step, {
-          entry: "".concat(entry, ".").concat(idx, ".value"),
-          onAfterChange: step.onAfterChange || step.on_after_change,
-          step: _objectSpread2$1(_objectSpread2$1({}, schema[realEntry || entry]), {}, {
-            render: step.itemRender,
-            onChange: undefined,
-            array: false
-          }),
-          schema: schema,
-          inputWrapper: inputWrapper,
-          httpClient: httpClient,
-          defaultValue: (_props$defaultValue = props.defaultValue) === null || _props$defaultValue === void 0 ? void 0 : _props$defaultValue.value,
-          value: props.value,
-          index: idx,
-          functionalProperty: functionalProperty
-        });
-      }
-    }));
-  }
-
-  switch (step.type) {
-    case type.string:
-      switch (step.format) {
-        case format.text:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement("textarea", {
-            type: "text",
-            className: classNames__default["default"]('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }));
-
-        case format.code:
-        case format.singleLineCode:
-          var Component = step.format === format.code ? CodeInput : SingleLineCode;
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(Component, {
-            className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }));
-
-        case format.markdown:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(MarkdownInput, {
-            className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }));
-
-        case format.buttonsSelect:
-        case format.select:
-          {
-            return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-              defaultValue: defaultValue,
-              step: step,
-              entry: entry,
-              errorDisplayed: errorDisplayed
-            }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
-              className: classNames__default["default"]('flex_grow_1', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed)),
-              disabled: functionalProperty(entry, step.disabled)
-            }, step.props, {
-              possibleValues: step.options,
-              httpClient: httpClient,
-              isMulti: step.isMulti,
-              createOption: step.createOption,
-              transformer: step.transformer,
-              buttons: step.format === format.buttonsSelect,
-              optionsFrom: step.optionsFrom
-            })));
-          }
-
-        default:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement("input", {
-            type: step.format || 'text',
-            className: classNames__default["default"]('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }));
-      }
-
-    case type.number:
-      switch (step.format) {
-        case format.buttonsSelect:
-        case format.select:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
-            className: classNames__default["default"]('content', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }, step.props, {
-            possibleValues: step.options,
-            httpClient: httpClient,
-            isMulti: step.isMulti,
-            createOption: step.createOption,
-            onCreateOption: step.onCreateOption,
-            transformer: step.transformer,
-            buttons: step.format === format.buttonsSelect,
-            optionsFrom: step.optionsFrom
-          })));
-
-        default:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement("input", {
-            type: step.format || 'number',
-            className: classNames__default["default"]('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }));
-      }
-
-    case type.bool:
-      return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-        step: step,
-        entry: entry,
-        errorDisplayed: errorDisplayed
-      }, /*#__PURE__*/React__default["default"].createElement(BooleanInput, {
-        className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-      }));
-
-    case type.object:
-      switch (step.format) {
-        case format.buttonsSelect:
-        case format.select:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
-            className: classNames__default["default"]('flex_grow_1', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }, step.props, {
-            possibleValues: step.options,
-            httpClient: httpClient,
-            isMulti: step.isMulti,
-            createOption: step.createOption,
-            onCreateOption: step.onCreateOption,
-            transformer: step.transformer,
-            buttons: step.format === format.buttonsSelect,
-            optionsFrom: step.optionsFrom
-          })));
-
-        case format.form:
-          //todo: disabled ?
-          var flow = option(step.flow).getOrElse(option(step.schema).map(function (s) {
-            return Object.keys(s);
-          }).getOrNull());
-          return /*#__PURE__*/React__default["default"].createElement(CustomizableInput, {
-            render: step.render,
-            field: {
-              parent: parent,
-              setValue: function setValue(key, value) {
-                return _setValue(key, value);
-              },
-              rawValues: getValues(),
-              value: getValues(entry),
-              onChange: function onChange(v) {
-                return _setValue(entry, v, {
-                  shouldValidate: true
-                });
-              }
-            }
-          }, /*#__PURE__*/React__default["default"].createElement(NestedForm, {
-            schema: step.schema,
-            flow: flow,
-            step: step,
-            parent: entry,
-            inputWrapper: inputWrapper,
-            maybeCustomHttpClient: httpClient,
-            value: getValues(entry) || defaultValue,
-            index: index,
-            functionalProperty: functionalProperty,
-            errorDisplayed: errorDisplayed
-          }));
-
-        case format.code:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed,
-            component: function component(field, props) {
-              return /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
-                className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', error)),
-                onChange: function onChange(e) {
-                  _readOnlyError("errorDisplayed");
-                  var v;
-
-                  try {
-                    v = JSON.parse(e);
-                  } catch (err) {
-                    v = e;
-                  }
-
-                  field.onChange(v);
-                  option(step.onChange).map(function (onChange) {
-                    return onChange({
-                      rawValues: getValues(),
-                      value: v,
-                      setValue: _setValue
-                    });
-                  });
-                },
-                value: field.value === null ? null : _typeof$1(field.value) === 'object' ? JSON.stringify(field.value, null, 2) : field.value
-              }));
+const Step = (props) => {
+    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, onAfterChange } = props;
+    const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, trigger, getValues, setValue, watch, register } = reactHookForm.useFormContext();
+    if (entry && typeof entry === 'object') {
+        const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]));
+        return (React__default["default"].createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
+            const stp = typeof en === "object" ? undefined : schema[en]; // TODO Factorise this logic
+            if (!stp && typeof en === 'string') {
+                console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
+                return null;
             }
-          });
-
+            const visibleStep = option(stp)
+                .map(s => s.visible)
+                .map(visible => {
+                let value;
+                switch (typeof visible) {
+                    case 'object':
+                        value = getValues(visible.ref);
+                        return option(visible.test).map(test => test(value, index)).getOrElse(value);
+                    case 'boolean':
+                        return visible;
+                    default:
+                        return true;
+                }
+            })
+                .getOrElse(true);
+            if (!visibleStep) {
+                return null;
+            }
+            return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: stp === null || stp === void 0 ? void 0 : stp.label, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+                React__default["default"].createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
+        })));
+    }
+    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], errors);
+    const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], dirtyFields);
+    const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], touchedFields);
+    const errorDisplayed = (!!error && (isSubmitted || isDirty || isTouched));
+    step = step;
+    if (step.onAfterChange) {
+        const data = watch();
+        const d = entry
+            .replace('[', '.').replace(']', '')
+            .split('.')
+            .reduce((acc, curr) => acc && acc[curr], data) || {};
+        const currentData = usePrevious(cleanOutputArray(d, schema));
+        const newData = cleanOutputArray(d, schema);
+        if (!deepEqual__default["default"](newData, currentData) || (newData !== undefined && currentData === undefined))
+            step.onAfterChange({
+                entry,
+                value: getValues(entry),
+                rawValues: newData,
+                previousValue: currentData,
+                getValue: (e) => getValues(e),
+                setValue,
+                onChange: (v) => setValue(entry, v)
+            });
+    }
+    if (step.array) {
+        return (React__default["default"].createElement(CustomizableInput, { render: step.render, field: {
+                setValue: (key, value) => setValue(key, value), rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v)
+            }, error: !!error },
+            React__default["default"].createElement(ArrayStep, { entry: entry, step: step, disabled: functionalProperty(entry, step.disabled || false), component: ((props, idx) => {
+                    var _a;
+                    return (React__default["default"].createElement(Step, { entry: `${entry}.${idx}.value`, step: Object.assign(Object.assign({}, (schema[realEntry || entry])), { render: step.itemRender, onChange: undefined, array: false, onAfterChange: step.onAfterChange }), schema: schema, inputWrapper: inputWrapper, httpClient: httpClient, defaultValue: (_a = props.defaultValue) === null || _a === void 0 ? void 0 : _a.value, index: idx, functionalProperty: functionalProperty }));
+                }) })));
+    }
+    switch (step.type) {
+        case type.string:
+            switch (step.format) {
+                case format.text:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement("textarea", { className: classNames__default["default"]('mrf-input', step.className, { 'mrf-mrf-input__invalid': !!errorDisplayed }) })));
+                case format.code:
+                case format.singleLineCode:
+                    const Component = step.format === format.code ? CodeInput : SingleLineCode;
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(Component /*TODO try to pass className down OR use built in mechanism to display error classNames(step.className, { 'mrf-input__invalid': !!errorDisplayed })}*/, null)));
+                case format.markdown:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(MarkdownInput, { className: classNames__default["default"](step.className, { 'mrf-input__invalid': !!errorDisplayed }) })));
+                case format.buttonsSelect:
+                case format.select: {
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(SelectInput, Object.assign({ className: classNames__default["default"]('mrf-flex_grow_1', step.className, { 'mrf-input__invalid': !!errorDisplayed }), disabled: functionalProperty(entry, step.disabled || false) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                }
+                default:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement("input", { type: step.format || 'text', className: classNames__default["default"]('mrf-input', step.className, { 'mrf-input__invalid': !!errorDisplayed }) })));
+            }
+        case type.number:
+            switch (step.format) {
+                case format.buttonsSelect:
+                case format.select:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(SelectInput, Object.assign({ className: classNames__default["default"]('mrf-content', step.className, { 'mrf-input__invalid': !!errorDisplayed }) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                default:
+                    return React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement("input", { type: step.format || 'number', className: classNames__default["default"]('mrf-input', step.className, { 'mrf-input__invalid': !!errorDisplayed }) }));
+            }
+        case type.bool:
+            return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                React__default["default"].createElement(BooleanInput /* TODO see how to pass error down className={classNames(step.className, { 'mrf-input__invalid': !!errorDisplayed })}*/, null)));
+        case type.object:
+            switch (step.format) {
+                case format.buttonsSelect:
+                case format.select:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(SelectInput, Object.assign({ className: classNames__default["default"]('mrf-flex_grow_1', step.className, { 'mrf-input__invalid': !!errorDisplayed }) }, step.props, { possibleValues: step.options, httpClient: httpClient, isMulti: step.isMulti, createOption: step.createOption, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                case format.form: //todo: disabled ?
+                    const flow = option(step.flow).getOrElse(option(step.schema).map(s => Object.keys(s)).getOrElse([]));
+                    return (React__default["default"].createElement(CustomizableInput, { render: step.render, field: { parent, setValue: (key, value) => setValue(key, value), rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v, { shouldValidate: true }) } },
+                        React__default["default"].createElement(NestedForm, { schema: step.schema, flow: flow, step: step, parent: entry, inputWrapper: inputWrapper, maybeCustomHttpClient: httpClient, value: getValues(entry) || defaultValue, index: index, functionalProperty: functionalProperty, errorDisplayed: errorDisplayed })));
+                case format.code:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, component: (field, props) => (React__default["default"].createElement(CodeInput, Object.assign({}, props, { 
+                            /* TODO className={classNames(step.className, { 'mrf-input__invalid': !!error })}*/
+                            onChange: (e) => {
+                                let v;
+                                try {
+                                    v = JSON.parse(e);
+                                }
+                                catch (err) {
+                                    v = e;
+                                }
+                                field.onChange(v);
+                                option(step === null || step === void 0 ? void 0 : step.onChange)
+                                    .map(onChange => onChange({ rawValues: getValues(), value: v, setValue }));
+                            }, value: field.value === null ? null : ((typeof field.value === 'object') ? JSON.stringify(field.value, null, 2) : field.value) }))) }));
+                default:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(ObjectInput, { className: classNames__default["default"](step.className, { 'mrf-input__invalid': !!errorDisplayed }) })));
+            }
+        case type.date:
+            return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                React__default["default"].createElement(reactRainbowComponents.DatePicker, { className: classNames__default["default"]('mrf-datepicker', step.className, { 'mrf-input__invalid': !!errorDisplayed }), formatStyle: "large" })));
+        case type.file:
+            return (React__default["default"].createElement(reactHookForm.Controller, { name: entry, control: control, render: ({ field }) => {
+                    const FileInput = ({ onChange }) => {
+                        const [uploading, setUploading] = React.useState(false);
+                        const [input, setInput] = React.useState(undefined);
+                        const setFiles = (e) => {
+                            const files = e.target.files;
+                            setUploading(true);
+                            onChange && onChange(files ? [...files] : []);
+                            setUploading(false);
+                        };
+                        const trigger = () => {
+                            input === null || input === void 0 ? void 0 : input.click();
+                        };
+                        const files = field.value || [];
+                        return (React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-flex', 'mrf-ai_center', step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }) },
+                            React__default["default"].createElement("input", { ref: (r) => setInput(r), type: "file", multiple: true, className: 'mrf-d_none', onChange: setFiles }),
+                            React__default["default"].createElement("button", { type: "button", className: 'mrf-btn mrf-btn_sm mrf-flex mrf-ai_center', disabled: uploading || functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.disabled) || false), onClick: trigger },
+                                uploading && React__default["default"].createElement(reactFeather.Loader, null),
+                                !uploading && React__default["default"].createElement(reactFeather.Upload, null),
+                                React__default["default"].createElement("span", { className: 'mrf-ml_5' }, "Select file(s)")),
+                            React__default["default"].createElement("span", { className: 'mrf-ml_5' }, files.length <= 0 ? 'No files selected' : files.map(r => r.name).join(" , "))));
+                    };
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                        React__default["default"].createElement(FileInput, null)));
+                } }));
+        case type.json:
+            return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, component: (field, props) => (React__default["default"].createElement(CodeInput, Object.assign({}, props, { 
+                    /* TODO className={classNames({ 'mrf-input__invalid': !!error })} */
+                    onChange: (v) => {
+                        field.onChange(v);
+                        option(step === null || step === void 0 ? void 0 : step.onChange)
+                            .map(onChange => onChange({ rawValues: getValues(), value: v, setValue }));
+                    }, value: field.value }))) }));
         default:
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(ObjectInput, {
-            className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
-          }));
-      }
-
-    case type.date:
-      return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-        defaultValue: defaultValue,
-        step: step,
-        entry: entry,
-        errorDisplayed: errorDisplayed
-      }, /*#__PURE__*/React__default["default"].createElement(reactRainbowComponents.DatePicker, {
-        className: classNames__default["default"]('datepicker', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed)),
-        formatStyle: "large"
-      }));
-
-    case type.file:
-      return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-        name: entry,
-        control: control,
-        render: function render(_ref9) {
-          var field = _ref9.field;
-
-          var FileInput = function FileInput(_ref10) {
-            var onChange = _ref10.onChange;
-
-            var _useState3 = React.useState(false),
-                _useState4 = _slicedToArray(_useState3, 2),
-                uploading = _useState4[0],
-                setUploading = _useState4[1];
-
-            var _useState5 = React.useState(undefined),
-                _useState6 = _slicedToArray(_useState5, 2),
-                input = _useState6[0],
-                setInput = _useState6[1];
-
-            var setFiles = function setFiles(e) {
-              var files = e.target.files;
-              setUploading(true);
-              onChange(_toConsumableArray$1(files));
-              setUploading(false);
-            };
-
-            var trigger = function trigger() {
-              input.click();
-            };
-
-            var files = field.value || [];
-            return /*#__PURE__*/React__default["default"].createElement("div", {
-              className: classNames__default["default"]('flex', 'ai_center', step.className, _defineProperty$1({}, 'input__invalid', error))
-            }, /*#__PURE__*/React__default["default"].createElement("input", {
-              ref: function ref(r) {
-                return setInput(r);
-              },
-              type: "file",
-              multiple: true,
-              className: 'd_none',
-              onChange: setFiles
-            }), /*#__PURE__*/React__default["default"].createElement("button", {
-              type: "button",
-              className: "btn btn_sm flex ai_center",
-              disabled: uploading || functionalProperty(entry, step.disabled),
-              onClick: trigger
-            }, uploading && /*#__PURE__*/React__default["default"].createElement(reactFeather.Loader, null), !uploading && /*#__PURE__*/React__default["default"].createElement(reactFeather.Upload, null), /*#__PURE__*/React__default["default"].createElement("span", {
-              className: "ml_5"
-            }, "Select file(s)")), /*#__PURE__*/React__default["default"].createElement("span", {
-              className: "ml_5"
-            }, files.length <= 0 ? 'No files selected' : files.map(function (r) {
-              return r.name;
-            }).join(" , ")));
-          };
-
-          return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-            defaultValue: defaultValue,
-            step: step,
-            entry: entry,
-            errorDisplayed: errorDisplayed
-          }, /*#__PURE__*/React__default["default"].createElement(FileInput, null));
-        }
-      });
-
-    case type.json:
-      return /*#__PURE__*/React__default["default"].createElement(ControlledInput, {
-        defaultValue: defaultValue,
-        step: step,
-        entry: entry,
-        component: function component(field, props) {
-          return /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
-            className: classNames__default["default"](_defineProperty$1({}, 'input__invalid', error)),
-            onChange: function onChange(v) {
-              field.onChange(v);
-              option(step.onChange).map(function (onChange) {
-                return onChange({
-                  rawValues: getValues(),
-                  value: v,
-                  setValue: _setValue
-                });
-              });
-            },
-            value: field.value
-          }));
-        }
-      });
-
-    default:
-      return null;
-  }
+            return null;
+    }
 };
-
-var ArrayStep = function ArrayStep(_ref11) {
-  var entry = _ref11.entry,
-      step = _ref11.step,
-      component = _ref11.component,
-      disabled = _ref11.disabled;
-
-  var _useFormContext3 = reactHookForm.useFormContext(),
-      getValues = _useFormContext3.getValues,
-      setValue = _useFormContext3.setValue,
-      control = _useFormContext3.control,
-      trigger = _useFormContext3.trigger,
-      formState = _useFormContext3.formState;
-
-  var values = getValues(entry);
-  var error = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, formState.errors);
-  var isDirty = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, formState.dirtyFields);
-  var isTouched = entry.split('.').reduce(function (acc, curr) {
-    return acc && acc[curr];
-  }, formState.touchedFields);
-  var errorDisplayed = !!error && (formState.isSubmitted || isDirty || isTouched);
-
-  var _useFieldArray = reactHookForm.useFieldArray({
-    control: control,
-    name: entry
-  }),
-      fields = _useFieldArray.fields,
-      append = _useFieldArray.append,
-      remove = _useFieldArray.remove;
-
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fields.map(function (field, idx) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: field.id
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]('ai_center', 'mt_5'),
-      style: {
-        position: 'relative'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        width: '95%'
-      }
-    }, component(_objectSpread2$1(_objectSpread2$1({
-      key: field.id
-    }, field), {}, {
-      defaultValue: values[idx]
-    }), idx)), /*#__PURE__*/React__default["default"].createElement("button", {
-      type: "button",
-      style: {
-        position: 'absolute',
-        top: '2px',
-        right: 0
-      },
-      className: classNames__default["default"]('btn', 'btn_red', 'btn_sm', 'ml_5'),
-      disabled: disabled,
-      onClick: function onClick() {
-        remove(idx);
-        trigger(entry);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(reactFeather.Trash2, {
-      size: 16
-    }))));
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('flex', 'jc_flex_end')
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: classNames__default["default"]('btn', 'btn_blue', 'btn_sm', 'mt_5', _defineProperty$1({}, 'input__invalid', errorDisplayed)),
-    onClick: function onClick() {
-      var newValue = cleanInputArray({}, getValues(entry), step.flow, step.schema);
-      append({
-        value: step.addableDefaultValue || (step.type === type.object && newValue ? newValue : defaultVal())
-      }); // trigger(entry);
-
-      option(step.onChange).map(function (onChange) {
-        return onChange({
-          rawValues: getValues(),
-          value: getValues(entry),
-          setValue: setValue
-        });
-      });
-    },
-    disabled: disabled
-  }, "Add"), error && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "invalid-feedback"
-  }, error.message)));
+const ArrayStep = ({ entry, step, component, disabled }) => {
+    const { getValues, setValue, control, trigger, formState } = reactHookForm.useFormContext();
+    const values = getValues(entry);
+    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.errors);
+    const isDirty = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.dirtyFields);
+    const isTouched = entry.split('.').reduce((acc, curr) => acc && acc[curr], formState.touchedFields);
+    const errorDisplayed = !!error && (formState.isSubmitted || isDirty || isTouched);
+    const { fields, append, remove } = reactHookForm.useFieldArray({ control, name: entry });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        fields
+            .map((field, idx) => {
+            return (React__default["default"].createElement("div", { key: field.id },
+                React__default["default"].createElement("div", { className: 'mrf-ai_center mrf-mt_5', style: { position: 'relative' } },
+                    React__default["default"].createElement("div", { style: { width: '95%' } }, component(Object.assign(Object.assign({ key: field.id }, field), { defaultValue: values[idx] }), idx)),
+                    React__default["default"].createElement("button", { type: "button", style: { position: 'absolute', top: '2px', right: 0 }, className: 'mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_5', disabled: disabled, onClick: () => {
+                            remove(idx);
+                            trigger(entry);
+                        } },
+                        React__default["default"].createElement(reactFeather.Trash2, { size: 16 })))));
+        }),
+        React__default["default"].createElement("div", { className: 'mrf-flex mrf-jc_flex_end' },
+            React__default["default"].createElement("button", { type: "button", className: classNames__default["default"]('mrf-btn', 'mrf-btn_blue', 'mrf-btn_sm', 'mrf-mt_5', { ['mrf-input__invalid']: !!errorDisplayed }), onClick: () => {
+                    const newValue = cleanInputArray({}, getValues(entry), step.flow, step.schema);
+                    append({ value: step.addableDefaultValue || ((step.type === type.object && newValue) ? newValue : defaultVal()) });
+                    // trigger(entry);
+                    option(step.onChange)
+                        .map(onChange => onChange({ rawValues: getValues(), value: getValues(entry), setValue }));
+                }, disabled: disabled }, "Add"),
+            error && React__default["default"].createElement("div", { className: "mrf-invalid-feedback" }, error.message))));
 };
-
-var NestedForm = function NestedForm(_ref12) {
-  var _step$conditionalSche, _classNames17;
-
-  var schema = _ref12.schema,
-      flow = _ref12.flow,
-      parent = _ref12.parent,
-      inputWrapper = _ref12.inputWrapper,
-      maybeCustomHttpClient = _ref12.maybeCustomHttpClient,
-      errorDisplayed = _ref12.errorDisplayed,
-      value = _ref12.value,
-      step = _ref12.step,
-      functionalProperty = _ref12.functionalProperty,
-      index = _ref12.index;
-
-  var _useFormContext4 = reactHookForm.useFormContext(),
-      getValues = _useFormContext4.getValues,
-      setValue = _useFormContext4.setValue,
-      watch = _useFormContext4.watch;
-
-  var _useState7 = React.useState(!!step.collapsed),
-      _useState8 = _slicedToArray(_useState7, 2),
-      collapsed = _useState8[0],
-      setCollapsed = _useState8[1];
-
-  reactHookForm.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 rawValues = getValues();
-    var filterSwitch = condiSchema["switch"].find(function (s) {
-      if (typeof s.condition === 'function') {
-        return s.condition({
-          rawValues: rawValues,
-          ref: ref
+const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient, errorDisplayed, value, step, functionalProperty, index }) => {
+    var _a;
+    const { getValues, setValue, watch, control, formState: { errors, dirtyFields, touchedFields } } = reactHookForm.useFormContext();
+    const [collapsed, setCollapsed] = React.useState(!!step.collapsed);
+    reactHookForm.useWatch({ name: ((_a = step === null || step === void 0 ? void 0 : step.conditionalSchema) === null || _a === void 0 ? void 0 : _a.ref) || "", control });
+    const schemaAndFlow = option(step.conditionalSchema)
+        .map(condiSchema => {
+        const ref = option(condiSchema.ref).map(ref => getValues(ref)).getOrNull();
+        const rawValues = getValues();
+        const filterSwitch = condiSchema.switch.find(s => {
+            if (typeof s.condition === 'function') {
+                return s.condition({ rawValues, ref });
+            }
+            else {
+                return s.condition === ref;
+            }
         });
-      } else {
-        return s.condition === ref;
-      }
-    });
-    var schemaAndFlow = option(filterSwitch).orElse(condiSchema["switch"].find(function (s) {
-      return s["default"];
-    })).getOrElse({
-      schema: {},
-      flow: []
-    });
-    return {
-      schema: schemaAndFlow.schema,
-      flow: schemaAndFlow.flow || Object.keys(schemaAndFlow.schema)
-    };
-  }).getOrElse({
-    schema: schema,
-    flow: flow
-  });
-  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) {
-      return s.visible;
-    }).map(function (visible) {
-      switch (_typeof$1(visible)) {
-        case 'object':
-          var _value2 = watch(visible.ref);
-
-          return option(visible.test).map(function (test) {
-            return test(_value2, index);
-          }).getOrElse(_value2);
-
-        case 'boolean':
-          return visible;
-
-        default:
-          return true;
-      }
-    }).getOrElse(true);
-    return [].concat(_toConsumableArray$1(acc), [{
-      step: step,
-      visibleStep: visibleStep,
-      entry: entry
-    }]);
-  }, []);
-  var bordered = computedSandF.filter(function (x) {
-    return x.visibleStep;
-  }).length >= 1 && step.label !== null;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]((_classNames17 = {}, _defineProperty$1(_classNames17, 'nestedform__border', bordered), _defineProperty$1(_classNames17, 'border__error', !!errorDisplayed), _classNames17)),
-    style: {
-      position: 'relative'
-    }
-  }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.ChevronDown, {
-    size: 30,
-    className: 'cursor_pointer',
-    style: {
-      position: 'absolute',
-      top: -35,
-      right: 0,
-      zIndex: 100
-    },
-    strokeWidth: "2",
-    onClick: function onClick() {
-      return setCollapsed(!collapsed);
-    }
-  }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.ChevronUp, {
-    size: 30,
-    className: 'cursor_pointer',
-    style: {
-      position: 'absolute',
-      top: -35,
-      right: 0,
-      zIndex: 100
-    },
-    strokeWidth: "2",
-    onClick: function onClick() {
-      return setCollapsed(!collapsed);
-    }
-  }), computedSandF.map(function (_ref13, idx) {
-    var step = _ref13.step,
-        visibleStep = _ref13.visibleStep,
-        entry = _ref13.entry;
-
-    if (!step && typeof entry === 'string') {
-      console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
-      return null;
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(BasicWrapper, {
-      key: "".concat(entry, ".").concat(idx),
-      className: classNames__default["default"](_defineProperty$1({}, '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,
-      render: inputWrapper
-    }, /*#__PURE__*/React__default["default"].createElement(Step, {
-      key: "step.".concat(entry, ".").concat(idx),
-      entry: "".concat(parent, ".").concat(entry),
-      realEntry: entry,
-      step: schemaAndFlow.schema[entry],
-      parent: parent,
-      schema: schemaAndFlow.schema,
-      inputWrapper: inputWrapper,
-      httpClient: maybeCustomHttpClient,
-      defaultValue: value && value[entry],
-      functionalProperty: functionalProperty
-    }));
-  }));
+        const schemaAndFlow = option(filterSwitch)
+            .orElse(condiSchema.switch.find(s => s.default))
+            .getOrElse({ schema: {}, flow: [] });
+        return { schema: schemaAndFlow.schema, flow: schemaAndFlow.flow || Object.keys(schemaAndFlow.schema) };
+    })
+        .getOrElse({ schema, flow });
+    useHashEffect(() => {
+        const def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema, getValues(parent));
+        setValue(parent, def, { shouldValidate: false });
+    }, [schemaAndFlow.schema]);
+    const computedSandF = schemaAndFlow.flow.reduce((acc, entry) => {
+        const step = (typeof entry === "string") ? schemaAndFlow.schema[entry] : schemaAndFlow.schema[entry.label];
+        const visibleStep = option(step)
+            .map(s => s.visible)
+            .map(visible => {
+            switch (typeof visible) {
+                case 'object':
+                    const value = watch(visible.ref);
+                    return option(visible.test).map(test => test(value, index)).getOrElse(value);
+                case 'boolean':
+                    return visible;
+                default:
+                    return true;
+            }
+        })
+            .getOrElse(true);
+        return [...acc, { step, visibleStep, entry }];
+    }, []);
+    const bordered = computedSandF.filter(x => x.visibleStep).length >= 1 && step.label !== null;
+    return (React__default["default"].createElement("div", { className: classNames__default["default"]({ ['mrf-nestedform__border']: bordered, ['mrf-border__error']: !!errorDisplayed }), style: { position: 'relative' } },
+        !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed &&
+            React__default["default"].createElement(reactFeather.ChevronDown, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
+        !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed &&
+            React__default["default"].createElement(reactFeather.ChevronUp, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
+        computedSandF.map(({ step, visibleStep, entry }, idx) => {
+            if (!step && typeof entry === 'string') {
+                console.error(`no step found for the entry "${entry}" in the given schema. Your form might not work properly. Please fix it`);
+                return null;
+            }
+            if (typeof entry === "object") {
+                const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step])); /* FIXME does it works in case of Flow object ? Need to do a "flatMap" to retrieve all leafs string of flows objects */
+                return React__default["default"].createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
+                    const stp = typeof en === "object" ? undefined : schema[en];
+                    if (!stp && typeof en === 'string') {
+                        console.error(`no step found for the entry "${en}" in the given schema. Your form might not work properly. Please fix it`);
+                        return null;
+                    }
+                    const visibleStep = option(stp)
+                        .map(s => s.visible)
+                        .map(visible => {
+                        let value;
+                        switch (typeof visible) {
+                            case 'object':
+                                value = getValues(visible.ref);
+                                return option(visible.test).map(test => test(value, index)).getOrElse(value);
+                            case 'boolean':
+                                return visible;
+                            default:
+                                return true;
+                        }
+                    })
+                        .getOrElse(true);
+                    if (!visibleStep) {
+                        return null;
+                    }
+                    return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: stp === null || stp === void 0 ? void 0 : stp.help, render: inputWrapper },
+                        React__default["default"].createElement(Step, { entry: en, step: stp, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue, functionalProperty: functionalProperty })));
+                }));
+                // TODO return collapse, then entry will always be a string in below return
+            }
+            return (React__default["default"].createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames__default["default"]({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) || !visibleStep }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, label: (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, help: step.help, render: inputWrapper },
+                React__default["default"].createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], parent: parent, schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty })));
+        })));
 };
+function extractFlowString(entry) {
+    return entry.flow.map(eitherStringOrObject => {
+        if (typeof eitherStringOrObject === "string") {
+            return eitherStringOrObject;
+        }
+        else {
+            return extractFlowString(eitherStringOrObject);
+        }
+    }).flat();
+}
 
 exports.BooleanInput = BooleanInput;
 exports.CodeInput = CodeInput;