@maif/react-forms 1.1.2 → 1.2.0

package/lib/index.js

@@ -7,18 +7,24 @@ var React = require('react');
 var yup$1 = require('@hookform/resolvers/yup');
 var classNames = require('classnames');
 var deepEqual = require('fast-deep-equal');
-var reactFeather = require('react-feather');
+var PropTypes = require('prop-types');
 var reactHookForm = require('react-hook-form');
-var reactRainbowComponents = require('react-rainbow-components');
 var ReactToolTip = require('react-tooltip');
 var uuid$1 = require('uuid');
+var debounce = require('lodash.debounce');
+var AdapterDateFns = require('@mui/x-date-pickers/AdapterDateFns');
+var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
+var DatePicker = require('@mui/x-date-pickers/DatePicker');
+var TimePicker = require('@mui/x-date-pickers/TimePicker');
+var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
+var TextField = require('@mui/material/TextField');
 var CreatableSelect = require('react-select/creatable');
 var Select = require('react-select');
 var hash$1 = require('object-hash');
 var showdown = require('showdown');
 require('@fortawesome/fontawesome-free/css/all.css');
 require('highlight.js/styles/monokai.css');
-var hljs = require('highlight.js');
+var hljs = require('highlight.js/lib/core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,7 +51,10 @@ 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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var ReactToolTip__default = /*#__PURE__*/_interopDefaultLegacy(ReactToolTip);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
 var CreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(CreatableSelect);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var hash__default = /*#__PURE__*/_interopDefaultLegacy(hash$1);
@@ -78,7 +87,9 @@ const format = {
     hidden: "hidden",
     form: "form",
     buttonsSelect: "buttons",
-    singleLineCode: "singleLineCode"
+    singleLineCode: "singleLineCode",
+    datetime: "datetime-local",
+    time: "time"
 };
 function stringTuple(...data) {
     return data;
@@ -206,20 +217,365 @@ var constraints = /*#__PURE__*/Object.freeze({
     jsonConstraints: jsonConstraints
 });
 
-const BooleanInput = React__default["default"].forwardRef(({ onChange, value, readOnly }, ref) => {
+function _extends$8() { _extends$8 = 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]; } } } return target; }; return _extends$8.apply(this, arguments); }
+
+function _objectWithoutProperties$8(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$8(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$8(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var HelpCircle = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$8(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$8({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "12",
+    y1: "17",
+    x2: "12.01",
+    y2: "17"
+  }));
+});
+HelpCircle.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+HelpCircle.displayName = 'HelpCircle';
+
+function _extends$7() { _extends$7 = 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]; } } } return target; }; return _extends$7.apply(this, arguments); }
+
+function _objectWithoutProperties$7(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$7(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$7(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Loader = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$7(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$7({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "12",
+    y1: "2",
+    x2: "12",
+    y2: "6"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "12",
+    y1: "18",
+    x2: "12",
+    y2: "22"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "4.93",
+    y1: "4.93",
+    x2: "7.76",
+    y2: "7.76"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "16.24",
+    y1: "16.24",
+    x2: "19.07",
+    y2: "19.07"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "2",
+    y1: "12",
+    x2: "6",
+    y2: "12"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "18",
+    y1: "12",
+    x2: "22",
+    y2: "12"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "4.93",
+    y1: "19.07",
+    x2: "7.76",
+    y2: "16.24"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "16.24",
+    y1: "7.76",
+    x2: "19.07",
+    y2: "4.93"
+  }));
+});
+Loader.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+Loader.displayName = 'Loader';
+
+function _extends$6() { _extends$6 = 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]; } } } return target; }; return _extends$6.apply(this, arguments); }
+
+function _objectWithoutProperties$6(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$6(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Upload = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$6(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$6({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+  }), /*#__PURE__*/React__default["default"].createElement("polyline", {
+    points: "17 8 12 3 7 8"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "12",
+    y1: "3",
+    x2: "12",
+    y2: "15"
+  }));
+});
+Upload.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+Upload.displayName = 'Upload';
+
+function _extends$5() { _extends$5 = 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]; } } } return target; }; return _extends$5.apply(this, arguments); }
+
+function _objectWithoutProperties$5(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$5(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChevronDown = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$5(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$5({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("polyline", {
+    points: "6 9 12 15 18 9"
+  }));
+});
+ChevronDown.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+ChevronDown.displayName = 'ChevronDown';
+
+function _extends$4() { _extends$4 = 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]; } } } return target; }; return _extends$4.apply(this, arguments); }
+
+function _objectWithoutProperties$4(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$4(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$4(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChevronUp = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$4(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$4({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("polyline", {
+    points: "18 15 12 9 6 15"
+  }));
+});
+ChevronUp.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+ChevronUp.displayName = 'ChevronUp';
+
+function _extends$3() { _extends$3 = 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]; } } } return target; }; return _extends$3.apply(this, arguments); }
+
+function _objectWithoutProperties$3(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$3(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Trash2 = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$3(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$3({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("polyline", {
+    points: "3 6 5 6 21 6"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "10",
+    y1: "11",
+    x2: "10",
+    y2: "17"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "14",
+    y1: "11",
+    x2: "14",
+    y2: "17"
+  }));
+});
+Trash2.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+Trash2.displayName = 'Trash2';
+
+const BooleanInput = ({ onChange, value, readOnly, className, errorDisplayed }) => {
     const handleClick = (value) => {
         if (!readOnly) {
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
     };
-    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') }))));
+    let classes = classNames__default["default"]("mrf-content_switch", className, {
+        "mrf-content_switch_button_on": !!value,
+        "mrf-content_switch_button_off": !value && value !== null,
+        "mrf-content_switch_button_null": value === null,
+        "mrf-cursor_pointer": !readOnly,
+        "mrf-cursor_not_allowed": readOnly,
+        "mrf-input__invalid": !!errorDisplayed
+    });
+    let callback = () => handleClick(true);
+    if (!!value) {
+        callback = () => handleClick(false);
+    }
+    return React__default["default"].createElement("input", { type: "checkbox", className: classes, onChange: callback });
+};
+
+function _extends$2() { _extends$2 = 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]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var EyeOff = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$2({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "1",
+    y1: "1",
+    x2: "23",
+    y2: "23"
+  }));
+});
+EyeOff.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+EyeOff.displayName = 'EyeOff';
+
+function _extends$1() { _extends$1 = 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]; } } } return target; }; return _extends$1.apply(this, arguments); }
+
+function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Eye = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$1(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends$1({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }));
 });
+Eye.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+Eye.displayName = 'Eye';
 
 const Collapse = (props) => {
     const [collapsed, setCollapsed] = React.useState(props.initCollapsed || props.collapsed);
@@ -233,8 +589,8 @@ const Collapse = (props) => {
         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 }))),
+                !!collapsed && React__default["default"].createElement(Eye, { size: 16 }),
+                !collapsed && React__default["default"].createElement(EyeOff, { size: 16 }))),
         React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-ml_10', {
                 ['mrf-display__none']: !!collapsed,
                 ['mrf-flex']: !!props.inline,
@@ -313,7 +669,7 @@ const useHashEffect = (func, deps) => {
         const depsHash = cleanHash(deps);
         const prevDepsHash = cleanHash(prevDeps.current);
         if (depsHash !== prevDepsHash) {
-            prevDeps.current = deps;
+            prevDeps.current = Object.assign({}, deps);
             func();
         }
     }, deps); /* FIXME deps or [deps] ? */
@@ -369,12 +725,14 @@ const SelectInput = (props) => {
     }
     const possibleValues = (props.possibleValues || [])
         .map(v => transformOption(v));
-    const [loading, setLoading] = React.useState(false);
+    const [loading, setLoading] = React.useState(true);
     const [values, setValues] = React.useState(possibleValues);
-    const [value, setValue] = React.useState(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti));
+    const [value, setValue] = React.useState();
     React.useEffect(() => {
-        setValue(valueToSelectOption(props.value, values, props.isMulti));
-    }, [props.value, values]);
+        if (!loading && values.length) {
+            setValue(valueToSelectOption(props.value || props.defaultValue, values, props.isMulti));
+        }
+    }, [props.value, values, props.defaultValue, loading]);
     React.useEffect(() => {
         if (props.optionsFrom) {
             const cond = option(props.fetchCondition)
@@ -394,9 +752,7 @@ const SelectInput = (props) => {
                     promise = props.httpClient(props.optionsFrom, 'GET').then(r => r.json());
                 }
                 promise
-                    .then((values) => {
-                    return values.map(x => transformOption(x));
-                })
+                    .then((values) => values.map(x => transformOption(x)))
                     .then((values) => {
                     setValues(values);
                     setValue(values.find((item) => {
@@ -414,6 +770,7 @@ const SelectInput = (props) => {
         else {
             setValues((props.possibleValues || [])
                 .map(v => transformOption(v)));
+            setTimeout(() => setLoading(false), 250);
         }
     }, [props.optionsFrom, props.possibleValues]);
     const onChange = (changes) => {
@@ -458,13 +815,58 @@ const SelectInput = (props) => {
         })));
     }
     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 })));
+        return (React__default["default"].createElement(CreatableSelect__default["default"], Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, isDisabled: loading || 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 (React__default["default"].createElement(Select__default["default"], Object.assign({}, props, { name: `${props.label}-search`, isLoading: loading, value: value, defaultValue: value, isDisabled: loading || props.disabled, placeholder: props.placeholder, options: values, onChange: onChange, classNamePrefix: "react-form-select", className: props.className })));
     }
 };
 
+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]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var PlusCircle = React.forwardRef(function (_ref, ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties(_ref, ["color", "size"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, rest), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "12",
+    y1: "8",
+    x2: "12",
+    y2: "16"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "8",
+    y1: "12",
+    x2: "16",
+    y2: "12"
+  }));
+});
+PlusCircle.propTypes = {
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+PlusCircle.displayName = 'PlusCircle';
+
 const ObjectInput = (props) => {
     const [internalState, setInternalState] = React.useState({});
     React.useEffect(() => {
@@ -519,14 +921,14 @@ const ObjectInput = (props) => {
     };
     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))),
+            React__namespace.createElement(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)),
+                React__namespace.createElement(PlusCircle, 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))))))));
+                React__namespace.createElement(PlusCircle, null))))))));
 };
 
 // Compressed representation of the Grapheme_Cluster_Break=Extend
@@ -27667,7 +28069,7 @@ function CodeInput({ onChange, value, mode = 'javascript', tabSize = 2, readOnly
     width: '-1',
     minWidth: '-1',
     maxWidth: '-1',
-}, setRef }) {
+}, className, setRef }) {
     const ref = React.useRef();
     const [editor, setEditor] = React.useState();
     React.useEffect(() => {
@@ -27697,9 +28099,14 @@ function CodeInput({ onChange, value, mode = 'javascript', tabSize = 2, readOnly
             });
         }
     }, [value]);
-    return React__default["default"].createElement("div", { ref: ref });
+    return React__default["default"].createElement("div", { className: className, ref: ref });
 }
 
+['javascript', 'json', 'markdown', 'css'].forEach((langName) => {
+    // Using require() here because import() support hasn't landed in Webpack yet
+    const langModule = require(`highlight.js/lib/languages/${langName}`);
+    hljs__default["default"].registerLanguage(langName, langModule);
+});
 const converter = new showdown__default["default"].Converter({
     omitExtraWLInCodeBlocks: true,
     ghCompatibleHeaderId: true,
@@ -27932,7 +28339,7 @@ const getShapeAndDependencies = (flow, schema, dependencies = [], rawData = {})
 
 const CustomizableInput$1 = React__namespace.memo((props) => {
     if (props.render) {
-        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error })));
+        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error, informations: props.informations })));
     }
     return props.children;
 }, (prev, next) => {
@@ -27942,15 +28349,16 @@ const CustomizableInput$1 = React__namespace.memo((props) => {
     return (prev.field.value === next.field.value && next.errorDisplayed === prev.errorDisplayed && cleanHash(next.step) === cleanHash(prev.step));
 });
 const ControlledInput = (inputProps) => {
-    const { step, entry, children, component, errorDisplayed = false } = inputProps;
+    const { step, entry, children, component, errorDisplayed = false, informations } = inputProps;
     const { field } = reactHookForm.useController({
         defaultValue: isDefined(step.defaultValue) ? step.defaultValue : null,
         name: entry
     });
     const { getValues, setValue, formState: { errors } } = reactHookForm.useFormContext();
+    const error = entry.split('.').reduce((acc, curr) => acc && acc[curr], errors);
     const functionalProperty = (entry, prop) => {
         if (typeof prop === 'function') {
-            return prop({ rawValues: getValues(), value: getValues(entry) });
+            return prop({ rawValues: getValues(), value: getValues(entry), informations, error, getValue: (key) => getValues(key) });
         }
         else {
             return prop;
@@ -27978,8 +28386,7 @@ const ControlledInput = (inputProps) => {
             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)));
+    return React__namespace.createElement(CustomizableInput$1, { render: step.render, step: step, field: Object.assign({ setValue: (key, value) => setValue(key, value), rawValues: getValues(), getValue: (key) => getValues(key) }, field), error: error, errorDisplayed: errorDisplayed, informations: informations }, component ? component(field, props) : React__namespace.cloneElement(children, Object.assign({}, props)));
 };
 
 const usePrevious = (value) => {
@@ -27993,36 +28400,22 @@ const usePrevious = (value) => {
     // Return previous value (happens before update in useEffect above)
     return ref.current;
 };
-const BasicWrapper = ({ entry, children, render, functionalProperty, step }) => {
-    const { formState, watch } = reactHookForm.useFormContext();
+const BasicWrapper = ({ entry, children, render, functionalProperty, step, informations }) => {
+    const { formState } = reactHookForm.useFormContext();
     if (typeof entry === 'object') {
         return children;
     }
-    const visibleStep = option(step)
-        .map(s => s.visible)
-        .map(visible => {
-        let value;
-        switch (typeof visible) {
-            case 'object':
-                value = watch(visible.ref);
-                return option(visible.test).map(test => test(value)).getOrElse(value);
-            case 'boolean':
-                return visible;
-            default:
-                return true;
-        }
-    })
-        .getOrElse(true);
-    if (!visibleStep) {
-        return null;
-    }
-    const computedLabel = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry);
-    const id = uuid$1.v4();
     // 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;
+    const visibleStep = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.visible) === undefined ? true : step.visible, informations, error);
+    if (!visibleStep) {
+        return null;
+    }
+    const computedLabel = functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry, informations);
+    const id = uuid$1.v4();
     if (render) {
         return render({ entry, label: computedLabel, error, help: step === null || step === void 0 ? void 0 : step.help, children });
     }
@@ -28032,13 +28425,13 @@ const BasicWrapper = ({ entry, children, render, functionalProperty, step }) =>
             (step === null || step === void 0 ? void 0 : step.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": step === null || step === void 0 ? void 0 : step.help, "data-for": id },
-                    React__default["default"].createElement(reactFeather.HelpCircle, { style: { color: 'gray', width: 17, marginLeft: '.5rem', cursor: 'help' } })))),
+                    React__default["default"].createElement(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)));
 };
 const CustomizableInput = (props) => {
     if (props.render) {
-        return (props.render(Object.assign(Object.assign({}, props.field), { error: props.error })));
+        return (props.render(Object.assign(Object.assign({}, props), { error: props.error })));
     }
     return props.children;
 };
@@ -28142,16 +28535,18 @@ const validate = (flow, schema, value) => {
         abortEarly: false
     });
 };
-const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
+const Watcher = React__default["default"].memo(({ options, control, schema, onSubmit, handleSubmit }) => {
     const data = reactHookForm.useWatch({ control });
+    const realSubmit = (d) => handleSubmit(() => {
+        onSubmit(d);
+    })();
+    const debouncedSubmit = React.useCallback(debounce__default["default"](realSubmit, 250, { leading: true }), []);
     useHashEffect(() => {
-        if (options.autosubmit) {
-            handleSubmit(() => {
-                onSubmit(cleanOutputArray(data, schema));
-            })();
+        if (options === null || options === void 0 ? void 0 : options.autosubmit) {
+            debouncedSubmit(data);
         }
     }, [data]);
-    if (options.watch) {
+    if (options === null || options === void 0 ? void 0 : options.watch) {
         if (typeof options.watch === 'function') {
             options.watch(cleanOutputArray(data, schema));
         }
@@ -28162,7 +28557,9 @@ const Watcher = ({ options, control, schema, onSubmit, handleSubmit }) => {
         }
     }
     return null;
-};
+}, () => {
+    return true;
+});
 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) => {
@@ -28195,7 +28592,7 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
     //   reset(cleanInputArray(value, defaultValues, flow, schema))
     //   setReset(true)
     // }, [reset])
-    const { handleSubmit, formState: { errors, dirtyFields }, reset, trigger, getValues, watch } = methods;
+    const { handleSubmit, reset, trigger, getValues } = methods;
     React.useEffect(() => {
         if (!!options.showErrorsOnStart) {
             trigger();
@@ -28204,9 +28601,9 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
     useHashEffect(() => {
         reset(Object.assign({}, cleanInputArray(value, defaultValues, flow, schema)));
     }, [value, schema]);
-    const functionalProperty = (entry, prop) => {
+    const functionalProperty = (entry, prop, informations, error) => {
         if (typeof prop === 'function') {
-            return prop({ rawValues: getValues(), value: getValues(entry) }); // FIXME why ???
+            return prop({ rawValues: getValues(), value: getValues(entry), informations, getValue: (key) => getValues(key), error });
         }
         else {
             return prop;
@@ -28227,13 +28624,17 @@ const Form = React__default["default"].forwardRef(function Form({ schema, flow,
                 onSubmit(clean);
             }, onError) },
             formFlow.map((entry, idx) => {
-                const step = typeof entry === "object" ? undefined : schema[entry];
+                if (typeof entry === 'object') {
+                    return (React__default["default"].createElement(CollapsedStep, { key: idx, entry: entry, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty }));
+                }
+                const step = 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;
                 }
-                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step },
-                    React__default["default"].createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty })));
+                const informations = { path: entry };
+                return (React__default["default"].createElement(BasicWrapper, { key: `${entry}-${idx}`, entry: entry, functionalProperty: functionalProperty, render: inputWrapper, step: step, informations: informations },
+                    React__default["default"].createElement(Step, { key: idx, entry: entry, step: step, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty, informations: informations })));
             }),
             React__default["default"].createElement(Footer, { render: footer, reset: () => reset(defaultValues), valid: handleSubmit(data => onSubmit(cleanOutputArray(data, schema)), onError), actions: options.actions }))));
 });
@@ -28248,26 +28649,32 @@ const Footer = (props) => {
         ((_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')));
 };
+const CollapsedStep = (props) => {
+    let { entry, schema, inputWrapper, httpClient, functionalProperty } = props;
+    const { formState: { errors, dirtyFields, touchedFields } } = reactHookForm.useFormContext();
+    const errored = extractFlowString(entry).some(step => !!errors[step] && (dirtyFields[step] || touchedFields[step]));
+    //FIXME: get collapse errors
+    return (React__default["default"].createElement(Collapse, Object.assign({}, entry, { errored: errored }), entry.flow.map((en, entryIdx) => {
+        if (typeof en === 'object') {
+            return (React__default["default"].createElement(CollapsedStep, Object.assign({ key: entryIdx }, props, { entry: en })));
+        }
+        const stp = 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 informations = { path: en };
+        return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, render: inputWrapper, informations: informations },
+            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, informations: informations })));
+    })));
+};
 const Step = (props) => {
-    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, parent, parentInformations } = props;
+    let { entry, realEntry, step, schema, inputWrapper, httpClient, defaultValue, index, functionalProperty, informations } = props;
     const { formState: { errors, dirtyFields, touchedFields, isSubmitted }, control, getValues, setValue, watch } = 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;
-            }
-            return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, 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, parentInformations: parentInformations })));
-        })));
-    }
     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));
-    const informations = { path: entry, parent: parentInformations, index };
     step = step;
     if (step.onAfterChange) {
         const data = watch();
@@ -28290,64 +28697,60 @@ const Step = (props) => {
             });
     }
     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) => {
+        return (React__default["default"].createElement(CustomizableInput, { render: step.render, rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v), setValue: (key, value) => setValue(key, value), getValue: (key) => getValues(key), informations: informations, error: !!error },
+            React__default["default"].createElement(ArrayStep, { entry: entry, step: step, disabled: functionalProperty(entry, step.disabled || false, informations, error), 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, parentInformations: informations }));
+                    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, informations: { path: entry, parent: informations, index: idx } }));
                 }) })));
     }
     switch (step.type) {
         case type.string:
             switch (step.format) {
                 case format.text:
-                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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)));
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
+                        React__default["default"].createElement(Component, { className: classNames__default["default"](step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }) })));
                 case format.markdown:
-                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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, onCreateOption: step.onCreateOption, transformer: step.transformer, buttons: step.format === format.buttonsSelect, optionsFrom: step.optionsFrom }))));
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
+                        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, informations, error) }, 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 },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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 },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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 },
+                    return React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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)));
+            return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
+                React__default["default"].createElement(BooleanInput, { className: step.className, errorDisplayed: errorDisplayed })));
         case type.object:
             switch (step.format) {
                 case format.buttonsSelect:
                 case format.select:
-                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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 }) } },
+                    return (React__default["default"].createElement(CustomizableInput, { render: step.render, rawValues: getValues(), value: getValues(entry), onChange: (v) => setValue(entry, v, { shouldValidate: true }), setValue: (key, value) => setValue(key, value), getValue: (key) => getValues(key), informations: informations },
                         React__default["default"].createElement(NestedForm, { schema: step.schema, flow: flow, step: step, parent: entry, inputWrapper: inputWrapper, maybeCustomHttpClient: httpClient, value: getValues(entry) || defaultValue, functionalProperty: functionalProperty, errorDisplayed: errorDisplayed, informations: informations })));
                 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) => {
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations, component: (field, props) => (React__default["default"].createElement(CodeInput, Object.assign({}, props, { className: classNames__default["default"](step === null || step === void 0 ? void 0 : step.className, { 'mrf-input__invalid': !!error }), onChange: (e) => {
                                 let v;
                                 try {
                                     v = JSON.parse(e);
@@ -28360,12 +28763,28 @@ const Step = (props) => {
                                     .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 },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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" })));
+            switch (step.format) {
+                case format.datetime:
+                    console.debug('datetime');
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field) => {
+                            return (React__default["default"].createElement(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDateFns.AdapterDateFns },
+                                React__default["default"].createElement(DateTimePicker.DateTimePicker, { value: field.value, onChange: field.onChange, renderInput: (params) => React__default["default"].createElement(TextField__default["default"], Object.assign({}, params)) })));
+                        } }));
+                case format.time:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field) => {
+                            return (React__default["default"].createElement(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDateFns.AdapterDateFns },
+                                React__default["default"].createElement(TimePicker.TimePicker, { value: field.value, onChange: field.onChange, renderInput: (params) => React__default["default"].createElement(TextField__default["default"], Object.assign({}, params)) })));
+                        } }));
+                default:
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field) => {
+                            return (React__default["default"].createElement(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDateFns.AdapterDateFns },
+                                React__default["default"].createElement(DatePicker.DatePicker, { value: field.value, onChange: field.onChange, renderInput: (params) => React__default["default"].createElement(TextField__default["default"], Object.assign({}, params)) })));
+                        } }));
+            }
         case type.file:
             return (React__default["default"].createElement(reactHookForm.Controller, { name: entry, control: control, render: ({ field }) => {
                     const FileInput = ({ onChange }) => {
@@ -28383,19 +28802,17 @@ const Step = (props) => {
                         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("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, informations, error), onClick: trigger },
+                                uploading && React__default["default"].createElement(Loader, null),
+                                !uploading && React__default["default"].createElement(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 },
+                    return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, errorDisplayed: errorDisplayed, informations: informations },
                         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) => {
+            return (React__default["default"].createElement(ControlledInput, { step: step, entry: entry, informations: informations, component: (field, props) => (React__default["default"].createElement(CodeInput, Object.assign({}, props, { className: classNames__default["default"](step === null || step === void 0 ? void 0 : step.className, { '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 }));
@@ -28422,7 +28839,7 @@ const ArrayStep = ({ entry, step, component, disabled }) => {
                             remove(idx);
                             trigger(entry);
                         } },
-                        React__default["default"].createElement(reactFeather.Trash2, { size: 16 })))));
+                        React__default["default"].createElement(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: () => {
@@ -28466,31 +28883,21 @@ const NestedForm = ({ schema, flow, parent, inputWrapper, maybeCustomHttpClient,
         return [...acc, { step, entry }];
     }, []);
     const bordered = computedSandF.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' } },
+    return (React__default["default"].createElement("div", { className: classNames__default["default"](step.className, { ['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) }),
+            React__default["default"].createElement(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) }),
+            React__default["default"].createElement(ChevronUp, { size: 30, className: 'mrf-cursor_pointer', style: { position: 'absolute', top: -35, right: 0, zIndex: 100 }, strokeWidth: "2", onClick: () => setCollapsed(!collapsed) }),
         computedSandF.map(({ step, entry }, idx) => {
+            if (typeof entry === 'object') {
+                return (React__default["default"].createElement(CollapsedStep, { key: idx, entry: entry, schema: schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, functionalProperty: functionalProperty }));
+            }
             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;
-                    }
-                    return (React__default["default"].createElement(BasicWrapper, { key: `collapse-${en}-${entryIdx}`, entry: en, functionalProperty: functionalProperty, step: stp, 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) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, 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, parentInformations: informations })));
+            return (React__default["default"].createElement(BasicWrapper, { key: `${entry}.${idx}`, className: classNames__default["default"]({ ['mrf-display__none']: (collapsed && !step.visibleOnCollapse) }), entry: `${parent}.${entry}`, functionalProperty: functionalProperty, step: step, render: inputWrapper, informations: { path: entry, parent: informations } },
+                React__default["default"].createElement(Step, { key: `step.${entry}.${idx}`, entry: `${parent}.${entry}`, realEntry: entry, step: schemaAndFlow.schema[entry], schema: schemaAndFlow.schema, inputWrapper: inputWrapper, httpClient: maybeCustomHttpClient, defaultValue: value && value[entry], functionalProperty: functionalProperty, informations: { path: entry, parent: informations } })));
         })));
 };
 function extractFlowString(entry) {