@itcase/forms 1.0.36 → 1.0.38

package/dist/itcase-forms.esm.js

@@ -32,28 +32,25 @@ import { Group as Group$1 } from '@itcase/ui/components/Group';
 import { NotificationItem } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
-var phoneValidation = function phoneValidation(value, context) {
+const phoneValidation = (value, context) => {
   if (!value) {
     return true;
   }
   return isPossiblePhoneNumber(value, 'RU');
 };
-var emailValidation = function emailValidation(value, context) {
+const emailValidation = (value, context) => {
   // from https://emailregex.com/
   if (!value) {
     return true;
   }
   // eslint-disable-next-line
-  var regexp = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
+  const regexp = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
   return regexp.test(String(value).toLowerCase());
 };
-var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(schema) {
-  var fields = Object.entries(schema.fields);
-  schema.requiredFields = fields.reduce(function (list, _ref) {
-    var _validationProps$excl;
-    var fieldName = _ref[0],
-      validationProps = _ref[1];
-    if ((_validationProps$excl = validationProps.exclusiveTests) != null && _validationProps$excl.required) {
+const addRequiredFieldsParamToSchema = schema => {
+  const fields = Object.entries(schema.fields);
+  schema.requiredFields = fields.reduce((list, [fieldName, validationProps]) => {
+    if (validationProps.exclusiveTests?.required) {
       list.push(fieldName);
     }
     return list;
@@ -61,382 +58,6 @@ var addRequiredFieldsParamToSchema = function addRequiredFieldsParamToSchema(sch
   return schema;
 };
 
-function _asyncIterator(r) {
-  var n,
-    t,
-    o,
-    e = 2;
-  for ("undefined" != typeof Symbol && (t = Symbol.asyncIterator, o = Symbol.iterator); e--;) {
-    if (t && null != (n = r[t])) return n.call(r);
-    if (o && null != (n = r[o])) return new AsyncFromSyncIterator(n.call(r));
-    t = "@@asyncIterator", o = "@@iterator";
-  }
-  throw new TypeError("Object is not async iterable");
-}
-function AsyncFromSyncIterator(r) {
-  function AsyncFromSyncIteratorContinuation(r) {
-    if (Object(r) !== r) return Promise.reject(new TypeError(r + " is not an object."));
-    var n = r.done;
-    return Promise.resolve(r.value).then(function (r) {
-      return {
-        value: r,
-        done: n
-      };
-    });
-  }
-  return AsyncFromSyncIterator = function (r) {
-    this.s = r, this.n = r.next;
-  }, AsyncFromSyncIterator.prototype = {
-    s: null,
-    n: null,
-    next: function () {
-      return AsyncFromSyncIteratorContinuation(this.n.apply(this.s, arguments));
-    },
-    return: function (r) {
-      var n = this.s.return;
-      return void 0 === n ? Promise.resolve({
-        value: r,
-        done: !0
-      }) : AsyncFromSyncIteratorContinuation(n.apply(this.s, arguments));
-    },
-    throw: function (r) {
-      var n = this.s.return;
-      return void 0 === n ? Promise.reject(r) : AsyncFromSyncIteratorContinuation(n.apply(this.s, arguments));
-    }
-  }, new AsyncFromSyncIterator(r);
-}
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return e;
-  };
-  var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }), t[e];
-  }
-  try {
-    define({}, "");
-  } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
-    };
-  }
-  function wrap(t, e, r, n) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
-  }
-  function tryCatch(t, e, r) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(e, r)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
-  }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
-    return this;
-  });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
-      });
-    });
-  }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
-      if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
-        }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
-        }, function (t) {
-          return invoke("throw", t, i, a);
-        });
-      }
-      a(c.arg);
-    }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
-        }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw new Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
-        return {
-          value: t,
-          done: !0
-        };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
-      }
-    };
-  }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
-    var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
-  }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
-  }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
-  }
-  function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
-  }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      if (!isNaN(e.length)) {
-        var o = -1,
-          i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
-          };
-        return i.next = i;
-      }
-    }
-    throw new TypeError(typeof e + " is not iterable");
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: !0
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    configurable: !0
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
-    var e = "function" == typeof t && t.constructor;
-    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
-    return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
-    return this;
-  }), define(g, "toString", function () {
-    return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
-      }
-      return next.done = !0, next;
-    };
-  }, e.values = values, Context.prototype = {
-    constructor: Context,
-    reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
-    },
-    stop: function () {
-      this.done = !0;
-      var t = this.tryEntries[0].completion;
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
-      }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-          } else {
-            if (!u) throw new Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
-        }
-      }
-    },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
-          break;
-        }
-      }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
-    },
-    complete: function (t, e) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
-    },
-    finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
-      }
-    },
-    catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
-          if ("throw" === n.type) {
-            var o = n.arg;
-            resetTryEntry(r);
-          }
-          return o;
-        }
-      }
-      throw new Error("illegal catch attempt");
-    },
-    delegateYield: function (e, r, n) {
-      return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
-    }
-  }, e;
-}
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-      args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-      _next(undefined);
-    });
-  };
-}
-
 /**
  * Sets the `innerError.message` in an `errors` object at the key
  * defined by `innerError.path`.
@@ -444,7 +65,7 @@ function _asyncToGenerator(fn) {
  * @param {{ path: string, message: string }} innerError A `yup` field error.
  * @returns {Object} The result of setting the new error message onto `errors`.
  */
-var setInError = function setInError(errors, innerError) {
+const setInError = (errors, innerError) => {
   return setIn(errors, innerError.path, innerError.message);
 };
 
@@ -453,7 +74,7 @@ var setInError = function setInError(errors, innerError) {
  * value for reducing the `err.inner` array of errors
  * from a `yup~ValidationError`.
  */
-var emptyObj = Object.create(null);
+const emptyObj = Object.create(null);
 
 /**
  * Takes a `yup` validation schema and returns a function that expects
@@ -465,146 +86,122 @@ var emptyObj = Object.create(null);
  *  and resolves to either `undefined` or a map of field names to error messages.
  */
 
-var makeValidate = function makeValidate(schema) {
-  return /*#__PURE__*/function () {
-    var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(values) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return schema.validate(values, {
-              abortEarly: false
-            });
-          case 3:
-            _context.next = 12;
-            break;
-          case 5:
-            _context.prev = 5;
-            _context.t0 = _context["catch"](0);
-            if (!_context.t0.inner) {
-              _context.next = 11;
-              break;
-            }
-            return _context.abrupt("return", _context.t0.inner.reduce(setInError, emptyObj));
-          case 11:
-            console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
-          case 12:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 5]]);
-    }));
-    function validate(_x) {
-      return _validate.apply(this, arguments);
+const makeValidate = schema => {
+  return async function validate(values) {
+    try {
+      await schema.validate(values, {
+        abortEarly: false
+      });
+    } catch (error) {
+      if (error.inner) {
+        return error.inner.reduce(setInError, emptyObj);
+      } else {
+        console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
+      }
     }
-    return validate;
-  }();
+  };
 };
 function useYupValidationSchema(schema, language) {
-  var validate = useMemo(function () {
-    return schema && makeValidate(schema);
-  }, [schema, language]);
+  const validate = useMemo(() => schema && makeValidate(schema), [schema, language]);
   return validate;
 }
 
 function FieldWrapperBase(props) {
-  var after = props.after,
-    afterItem = props.afterItem,
-    before = props.before,
-    beforeItem = props.beforeItem,
-    children = props.children,
-    className = props.className,
-    desc = props.desc,
-    descTextSize = props.descTextSize,
-    descTextColor = props.descTextColor,
-    descTextWidth = props.descTextWidth,
-    divider = props.divider,
-    dividerDirection = props.dividerDirection,
-    dividerFill = props.dividerFill,
-    dividerSize = props.dividerSize,
-    dividerWidth = props.dividerWidth,
-    fieldClassName = props.fieldClassName,
-    id = props.id,
-    inputName = props.inputName,
-    inputValue = props.inputValue,
-    isRequired = props.isRequired,
-    label = props.label,
-    labelTextSize = props.labelTextSize,
-    labelTextColor = props.labelTextColor,
-    labelTextWidth = props.labelTextWidth,
-    errorMessageTextSize = props.errorMessageTextSize,
-    errorMessageTextWeight = props.errorMessageTextWeight,
-    errorMessageTextColor = props.errorMessageTextColor,
-    message = props.message,
-    messageTextSize = props.messageTextSize,
-    messageTextColor = props.messageTextColor,
-    messageTextWeight = props.messageTextWeight,
-    metaActive = props.metaActive,
-    metaError = props.metaError,
-    metaModifiedSinceLastSubmit = props.metaModifiedSinceLastSubmit,
-    metaSubmitError = props.metaSubmitError,
-    metaSubmitFailed = props.metaSubmitFailed,
-    metaTouched = props.metaTouched,
-    metaValid = props.metaValid,
-    set = props.set,
-    type = props.type,
-    hideMessage = props.hideMessage,
-    isHidden = props.isHidden,
-    Tag = props.tag,
-    dataTour = props.dataTour,
-    showErrorsOnSubmit = props.showErrorsOnSubmit;
-  var error = metaError || !metaModifiedSinceLastSubmit && metaSubmitError || false;
-  var showError = useMemo(function () {
+  const {
+    after,
+    afterItem,
+    before,
+    beforeItem,
+    children,
+    className,
+    desc,
+    descTextSize,
+    descTextColor,
+    descTextWidth,
+    divider,
+    dividerDirection,
+    dividerFill,
+    dividerSize,
+    dividerWidth,
+    fieldClassName,
+    id,
+    inputName,
+    inputValue,
+    isRequired,
+    label,
+    labelTextSize,
+    labelTextColor,
+    labelTextWidth,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    message,
+    messageTextSize,
+    messageTextColor,
+    messageTextWeight,
+    metaActive,
+    metaError,
+    metaModifiedSinceLastSubmit,
+    metaSubmitError,
+    metaSubmitFailed,
+    metaTouched,
+    metaValid,
+    set,
+    type,
+    hideMessage,
+    isHidden,
+    tag: Tag,
+    dataTour,
+    showErrorsOnSubmit
+  } = props;
+  const error = metaError || !metaModifiedSinceLastSubmit && metaSubmitError || false;
+  const showError = useMemo(() => {
     if (showErrorsOnSubmit) {
       return metaSubmitFailed && metaTouched && error;
     } else {
       return metaTouched && error;
     }
   }, [showErrorsOnSubmit, metaSubmitFailed, metaTouched, error]);
-  var showValid = useMemo(function () {
-    var hasValue = Array.isArray(inputValue) ? inputValue.length : inputValue;
-    var isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
+  const showValid = useMemo(() => {
+    const hasValue = Array.isArray(inputValue) ? inputValue.length : inputValue;
+    const isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
     return hasValue && (metaValid || isModifiedAfterSubmit);
   }, [inputValue, metaValid, metaError, metaSubmitError, metaModifiedSinceLastSubmit]);
-  var formFieldClass = useMemo(function () {
-    return clsx(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled');
-  }, [className, showError, showValid, isRequired, metaActive, inputValue]);
-  var fieldClass = useMemo(function () {
-    return clsx(fieldClassName, showError && fieldClassName + "_state_error", showValid && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled");
-  }, [fieldClassName, showError, showValid, metaActive, inputValue]);
-  var sizeClass = useDeviceTargetClass(props, {
+  const formFieldClass = useMemo(() => clsx(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue]);
+  const fieldClass = useMemo(() => clsx(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`), [fieldClassName, showError, showValid, metaActive, inputValue]);
+  const sizeClass = useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
   });
-  var fillClass = useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var inputFillClass = useDeviceTargetClass(props, {
+  const inputFillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'inputFill'
   });
-  var shapeClass = useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'form-field_shape_',
     propsKey: 'shape'
   });
-  var inputShapeClass = useDeviceTargetClass(props, {
+  const inputShapeClass = useDeviceTargetClass(props, {
     prefix: 'form-field__item-value_shape_',
     propsKey: 'inputShape'
   });
-  var directionClass = useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
   });
-  var widthClass = useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles(props),
-    formFieldStyles = _useStyles.styles;
+  const {
+    styles: formFieldStyles
+  } = useStyles(props);
   return /*#__PURE__*/React.createElement(Tag, {
-    className: clsx(formFieldClass, 'form__item', 'form-field', type && "form-field_type_" + type, set && "form-field_set_" + set, sizeClass, fillClass, shapeClass, isHidden && "form-field_state_hidden", directionClass, widthClass),
+    className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, label && /*#__PURE__*/React.createElement("div", {
@@ -637,7 +234,7 @@ function FieldWrapperBase(props) {
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
-    id: inputName + "-error"
+    id: `${inputName}-error`
   }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
@@ -646,7 +243,7 @@ function FieldWrapperBase(props) {
   }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize
-  }, "\xA0")), after);
+  }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
   tag: 'div',
@@ -702,12 +299,15 @@ FieldWrapperBase.propTypes = {
   type: PropTypes.string
 };
 function FieldWrapper(props) {
-  var inputName = props.inputName;
-  var _useForm = useForm(),
-    change = _useForm.change; // , mutators
+  const {
+    inputName
+  } = props;
+  const {
+    change
+  } = useForm(); // , mutators
 
-  useEffect(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       change(inputName, undefined);
     };
   }, []);
@@ -737,21 +337,24 @@ FieldWrapper.propTypes = {
   showErrorsOnSubmit: PropTypes.bool
 };
 
-var CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
-  var name = props.name,
-    isRequired = props.isRequired,
-    onChange = props.onChange,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    classNameGroupItem = props.classNameGroupItem,
-    hideMessage = props.hideMessage;
+const CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
+  const {
+    name,
+    isRequired,
+    onChange,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     type: "checkbox"
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var onChangeField = useCallback(function (event) {
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
@@ -795,41 +398,43 @@ CheckboxField.propTypes = {
   onChange: PropTypes.func
 };
 
-var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
-  var options = props.options,
-    classNameGroupItem = props.classNameGroupItem,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    isMultiple = props.isMultiple,
-    isRequired = props.isRequired,
-    initialValue = props.initialValue,
-    label = props.label,
-    name = props.name,
-    messageType = props.messageType,
-    hideMessage = props.hideMessage,
-    placeholder = props.placeholder;
-  var _useForm = useForm(),
-    change = _useForm.change;
+const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
+  const {
+    options,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    isMultiple,
+    isRequired,
+    initialValue,
+    label,
+    name,
+    messageType,
+    hideMessage,
+    placeholder
+  } = props;
+  const {
+    change
+  } = useForm();
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var activeOption = useMemo(function () {
-      var emptyOption = {
+  }, ({
+    input,
+    meta
+  }) => {
+    const activeOption = useMemo(() => {
+      const emptyOption = {
         value: null,
         label: null
       };
       if (input.value) {
-        var currentOption = options.find(function (option) {
-          return option.value === input.value;
-        });
+        const currentOption = options.find(option => option.value === input.value);
         return currentOption || emptyOption;
       }
       return emptyOption;
     }, [input.value]);
-    var setActiveSegment = useCallback(function (option) {
+    const setActiveSegment = useCallback(option => {
       change(name, option.value);
     }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
@@ -872,37 +477,38 @@ ChoiceField.propTypes = {
   placeholder: PropTypes.string
 };
 
-var CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
-  var Component = props.Component,
-    isRequired = props.isRequired,
-    name = props.name,
-    fieldProps = props.fieldProps,
-    classNameGroupItem = props.classNameGroupItem,
-    hideMessage = props.hideMessage;
+const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
+  const {
+    Component,
+    isRequired,
+    name,
+    fieldProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
-      fieldClassName: 'form-custom',
-      inputName: input.name,
-      inputValue: input.value,
-      isRequired: isRequired,
-      metaActive: meta.active,
-      metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
-      hideMessage: hideMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
-      input: input,
-      meta: meta
-    })));
-  });
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+    fieldClassName: 'form-custom',
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
+    input: input,
+    meta: meta
+  }))));
 });
 CustomField.defaultProps = {
   inputProps: {},
@@ -915,41 +521,42 @@ CustomField.propTypes = {
   inputProps: PropTypes.object
 };
 
-var CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
-  var isRequired = props.isRequired,
-    name = props.name,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    classNameGroupItem = props.classNameGroupItem,
-    hideMessage = props.hideMessage;
+const CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
+  const {
+    isRequired,
+    name,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
-      fieldClassName: 'form-code',
-      inputName: input.name,
-      inputValue: input.value,
-      isRequired: isRequired,
-      metaActive: meta.active,
-      metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
-      hideMessage: hideMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
-      autoComplete: "nope",
-      name: input.name,
-      value: input.value,
-      onBlur: input.onBlur,
-      onChange: input.onChange,
-      onFocus: input.onFocus
-    }, inputProps)));
-  });
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+    fieldClassName: 'form-code',
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
+    autoComplete: "nope",
+    name: input.name,
+    value: input.value,
+    onBlur: input.onBlur,
+    onChange: input.onChange,
+    onFocus: input.onFocus
+  }, inputProps))));
 });
 CodeField.defaultProps = {
   inputProps: {},
@@ -963,28 +570,31 @@ CodeField.propTypes = {
 };
 
 function DatePickerField(props) {
-  var isRequired = props.isRequired,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    datePickerProps = props.datePickerProps,
-    name = props.name;
-    props.iconSize;
-    props.iconBorder;
-    props.iconBorderHover;
-    props.iconFill;
-    props.iconFillHover;
-    props.iconRevealableShow;
-    props.iconRevealableHide;
-    props.iconShape;
-    var hideMessage = props.hideMessage,
-    onChange = props.onChange,
-    classNameGroupItem = props.classNameGroupItem;
+  const {
+    isRequired,
+    fieldProps,
+    inputProps,
+    datePickerProps,
+    name,
+    iconSize,
+    iconBorder,
+    iconBorderHover,
+    iconFill,
+    iconFillHover,
+    iconRevealableShow,
+    iconRevealableHide,
+    iconShape,
+    hideMessage,
+    onChange,
+    classNameGroupItem
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var onChangeField = useCallback(function (value) {
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(value => {
       input.onChange(value);
       if (onChange) {
         onChange(value, input.name);
@@ -1027,161 +637,78 @@ DatePickerField.propTypes = {
   onChange: PropTypes.func
 };
 
-function getFileByURL(_x) {
-  return _getFileByURL.apply(this, arguments);
+async function getFileByURL(url) {
+  try {
+    const response = await axios({
+      url: `/api/${url}/`,
+      responseType: 'blob'
+    });
+    const blobObject = response.data;
+    const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
+    // Remove double quotes
+    let filename = dirtyFilename?.substring(1).slice(0, -1);
+    if (!filename) {
+      const typeParts = blobObject.type.split('/');
+      const fileType = typeParts[typeParts.length - 1];
+      filename = `${new Date().getTime()}.${fileType}`;
+    }
+    return new File([blobObject], filename, {
+      type: blobObject.type
+    });
+  } catch (error) {
+    console.log('error: ', error);
+    return null;
+  }
 }
-function _getFileByURL() {
-  _getFileByURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(url) {
-    var _response$headers$con, response, blobObject, dirtyFilename, filename, typeParts, fileType;
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _context3.prev = 0;
-          _context3.next = 3;
-          return axios({
-            url: "/api/" + url + "/",
-            responseType: 'blob'
-          });
-        case 3:
-          response = _context3.sent;
-          blobObject = response.data;
-          dirtyFilename = (_response$headers$con = response.headers['content-disposition']) == null ? void 0 : _response$headers$con.split('filename=')[1]; // Remove double quotes
-          filename = dirtyFilename == null ? void 0 : dirtyFilename.substring(1).slice(0, -1);
-          if (!filename) {
-            typeParts = blobObject.type.split('/');
-            fileType = typeParts[typeParts.length - 1];
-            filename = new Date().getTime() + "." + fileType;
-          }
-          return _context3.abrupt("return", new File([blobObject], filename, {
-            type: blobObject.type
-          }));
-        case 11:
-          _context3.prev = 11;
-          _context3.t0 = _context3["catch"](0);
-          console.log('error: ', _context3.t0);
-          return _context3.abrupt("return", null);
-        case 15:
-        case "end":
-          return _context3.stop();
+async function convertToFiles(inputValue, isPreviews) {
+  const newFiles = [];
+  for await (const value of castArray(inputValue)) {
+    let newFile = null;
+
+    // Download image by url and save as File instance
+    const isURL = typeof value === 'string' && value.includes('/');
+    if (value.image || isURL) {
+      newFile = await getFileByURL(value.image || value);
+      if (newFile) {
+        setFileDataURL(newFile);
       }
-    }, _callee3, null, [[0, 11]]);
-  }));
-  return _getFileByURL.apply(this, arguments);
-}
-function convertToFiles(_x2, _x3) {
-  return _convertToFiles.apply(this, arguments);
-}
-function _convertToFiles() {
-  _convertToFiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(inputValue, isPreviews) {
-    var newFiles, _iteratorAbruptCompletion, _didIteratorError, _iteratorError, _iterator, _step, value, newFile, isURL;
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          newFiles = [];
-          _iteratorAbruptCompletion = false;
-          _didIteratorError = false;
-          _context4.prev = 3;
-          _iterator = _asyncIterator(castArray(inputValue));
-        case 5:
-          _context4.next = 7;
-          return _iterator.next();
-        case 7:
-          if (!(_iteratorAbruptCompletion = !(_step = _context4.sent).done)) {
-            _context4.next = 21;
-            break;
-          }
-          value = _step.value;
-          newFile = null; // Download image by url and save as File instance
-          isURL = typeof value === 'string' && value.includes('/');
-          if (!(value.image || isURL)) {
-            _context4.next = 16;
-            break;
-          }
-          _context4.next = 14;
-          return getFileByURL(value.image || value);
-        case 14:
-          newFile = _context4.sent;
-          if (newFile) {
-            setFileDataURL(newFile);
-          }
-        case 16:
-          // Convert dataURL to File instance
-          if (value.dataURL) {
-            newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
-            newFile.dataURL = value.dataURL;
-          }
+    }
 
-          // Save new File to state
-          if (newFile) {
-            newFile.id = value.id;
-            if (isPreviews) {
-              newFile.preview = URL.createObjectURL(newFile);
-            }
-            newFiles.push(newFile);
-          }
+    // Convert dataURL to File instance
+    if (value.dataURL) {
+      newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
+      newFile.dataURL = value.dataURL;
+    }
 
-          // else if (value) {
-          //   newFiles.push({
-          //     name: value,
-          //     error: 'File is unavailable',
-          //   })
-          // }
-        case 18:
-          _iteratorAbruptCompletion = false;
-          _context4.next = 5;
-          break;
-        case 21:
-          _context4.next = 27;
-          break;
-        case 23:
-          _context4.prev = 23;
-          _context4.t0 = _context4["catch"](3);
-          _didIteratorError = true;
-          _iteratorError = _context4.t0;
-        case 27:
-          _context4.prev = 27;
-          _context4.prev = 28;
-          if (!(_iteratorAbruptCompletion && _iterator["return"] != null)) {
-            _context4.next = 32;
-            break;
-          }
-          _context4.next = 32;
-          return _iterator["return"]();
-        case 32:
-          _context4.prev = 32;
-          if (!_didIteratorError) {
-            _context4.next = 35;
-            break;
-          }
-          throw _iteratorError;
-        case 35:
-          return _context4.finish(32);
-        case 36:
-          return _context4.finish(27);
-        case 37:
-          return _context4.abrupt("return", newFiles);
-        case 38:
-        case "end":
-          return _context4.stop();
+    // Save new File to state
+    if (newFile) {
+      newFile.id = value.id;
+      if (isPreviews) {
+        newFile.preview = URL.createObjectURL(newFile);
       }
-    }, _callee4, null, [[3, 23, 27, 37], [28,, 32, 36]]);
-  }));
-  return _convertToFiles.apply(this, arguments);
+      newFiles.push(newFile);
+    }
+
+    // else if (value) {
+    //   newFiles.push({
+    //     name: value,
+    //     error: 'File is unavailable',
+    //   })
+    // }
+  }
+
+  return newFiles;
 }
 function setFileDataURL(file, resolve) {
-  resolve = resolve || function () {};
+  resolve = resolve || (() => {});
   // Init reader and save his file
-  var reader = new FileReader();
+  const reader = new FileReader();
   reader._readedFile = file;
 
   // Set handlers
-  reader.onabort = function () {
-    return resolve();
-  };
-  reader.onerror = function () {
-    return resolve();
-  };
-  reader.onload = function (event) {
+  reader.onabort = () => resolve();
+  reader.onerror = () => resolve();
+  reader.onload = event => {
     event.target._readedFile.dataURL = reader.result;
     resolve();
   };
@@ -1192,146 +719,122 @@ function setFileDataURL(file, resolve) {
     resolve();
   }
 }
-var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
-  var inputName = props.inputName,
-    size = props.size,
-    className = props.className,
-    fileErrorText = props.fileErrorText,
-    hintTitleTextSize = props.hintTitleTextSize,
-    removeThumbTextSize = props.removeThumbTextSize,
-    removeThumbTextColor = props.removeThumbTextColor,
-    removeThumbTextWeight = props.removeThumbTextWeight,
-    thumbNameTextSize = props.thumbNameTextSize,
-    thumbNameTextColor = props.thumbNameTextColor,
-    removeThumbTextHoverColor = props.removeThumbTextHoverColor,
-    thumbNameTextWrap = props.thumbNameTextWrap,
-    thumbNameTextWeight = props.thumbNameTextWeight,
-    hintTitleTextColor = props.hintTitleTextColor,
-    hintTitleTextWrap = props.hintTitleTextWrap,
-    thumbColumn = props.thumbColumn,
-    hintTitleTextWeight = props.hintTitleTextWeight,
-    hintDescriptionTextSize = props.hintDescriptionTextSize,
-    hintDescriptionTextColor = props.hintDescriptionTextColor,
-    hintDescriptionTextWrap = props.hintDescriptionTextWrap,
-    hintDescriptionTextWeight = props.hintDescriptionTextWeight,
-    errorMessageTextSize = props.errorMessageTextSize,
-    errorMessageTextWeight = props.errorMessageTextWeight,
-    errorMessageTextColor = props.errorMessageTextColor,
-    inputValue = props.inputValue,
-    maxFiles = props.maxFiles,
-    maxSize = props.maxSize,
-    removeThumbText = props.removeThumbText,
-    hintTitle = props.hintTitle,
-    hintDescription = props.hintDescription,
-    isShowFilename = props.isShowFilename,
-    isPreviews = props.isPreviews;
-    props.loadingText;
-    var _props$dropzoneProps = props.dropzoneProps,
-    dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps,
-    onAddFiles = props.onAddFiles,
-    onDeleteFile = props.onDeleteFile;
-  var _useState = useState(''),
-    fileError = _useState[0],
-    setFileError = _useState[1];
-  var _useState2 = useState(false),
-    fileIsLoading = _useState2[0],
-    setFileIsLoading = _useState2[1];
+const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
+  const {
+    inputName,
+    size,
+    className,
+    fileErrorText,
+    hintTitleTextSize,
+    removeThumbTextSize,
+    removeThumbTextColor,
+    removeThumbTextWeight,
+    thumbNameTextSize,
+    thumbNameTextColor,
+    removeThumbTextHoverColor,
+    thumbNameTextWrap,
+    thumbNameTextWeight,
+    hintTitleTextColor,
+    hintTitleTextWrap,
+    thumbColumn,
+    hintTitleTextWeight,
+    hintDescriptionTextSize,
+    hintDescriptionTextColor,
+    hintDescriptionTextWrap,
+    hintDescriptionTextWeight,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    inputValue,
+    maxFiles,
+    maxSize,
+    removeThumbText,
+    hintTitle,
+    hintDescription,
+    isShowFilename,
+    isPreviews,
+    loadingText,
+    dropzoneProps = {},
+    onAddFiles,
+    onDeleteFile
+  } = props;
+  const [fileError, setFileError] = useState('');
+  const [fileIsLoading, setFileIsLoading] = useState(false);
   // State with instances of "File" type
-  var _useState3 = useState(inputValue ? castArray(inputValue) : []),
-    files = _useState3[0],
-    setFiles = _useState3[1];
+  const [files, setFiles] = useState(inputValue ? castArray(inputValue) : []);
 
   // Save to mobx state
-  var _useForm = useForm(),
-    change = _useForm.change;
-  var changeFormState = useCallback(function (newFiles) {
+  const {
+    change
+  } = useForm();
+  const changeFormState = useCallback(newFiles => {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
-    var toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
+    const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
     change(inputName, toSave);
     return toSave;
   }, [dropzoneProps, change]);
 
   // Create dropzone options
-  var _useDropzone = useDropzone(Object.assign({
-      maxSize: maxSize || 10485760,
-      // 10mb
-      maxFiles: maxFiles || 5
-    }, dropzoneProps, {
-      getFilesFromEvent: function () {
-        var _getFilesFromEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-          var result, newFiles;
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return fromEvent(event);
-              case 2:
-                result = _context.sent;
-                newFiles = result.filter(function (item) {
-                  return item instanceof File;
-                }); // Add exists and new files to accepted(or rejected)
-                return _context.abrupt("return", [].concat(files, newFiles));
-              case 5:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function getFilesFromEvent(_x4) {
-          return _getFilesFromEvent.apply(this, arguments);
-        }
-        return getFilesFromEvent;
-      }(),
-      onDropAccepted: function onDropAccepted(acceptedFiles, event) {
-        // If dropped files has accepted and we need a previews
-        if (isPreviews) {
-          // Add preview to every file
-          acceptedFiles.forEach(function (file) {
-            if (!file.error) {
-              file.preview = URL.createObjectURL(file);
-            }
-          });
-        }
-        // Save to form data (including empty when files are not valid)
-        setFiles(acceptedFiles);
-        setFileError('');
-
-        // Save DataURL for all files
-        var readerPromisesList = acceptedFiles.map(function (file) {
-          return new Promise(function (resolve) {
-            return setFileDataURL(file, resolve);
-          });
-        });
-        // Save files to form values
-        Promise.all(readerPromisesList).then(function () {
-          var filesToSave = changeFormState(acceptedFiles);
-          if (onAddFiles) {
-            onAddFiles(filesToSave, inputName);
+  const {
+    getRootProps,
+    getInputProps
+  } = useDropzone({
+    maxSize: maxSize || 10485760,
+    // 10mb
+    maxFiles: maxFiles || 5,
+    // accept: { 'image/*': [] },
+    ...dropzoneProps,
+    getFilesFromEvent: async event => {
+      const result = await fromEvent(event);
+      const newFiles = result.filter(item => item instanceof File);
+      // Add exists and new files to accepted(or rejected)
+      return [...files, ...newFiles];
+    },
+    onDropAccepted: (acceptedFiles, event) => {
+      // If dropped files has accepted and we need a previews
+      if (isPreviews) {
+        // Add preview to every file
+        acceptedFiles.forEach(file => {
+          if (!file.error) {
+            file.preview = URL.createObjectURL(file);
           }
         });
-      },
-      onDropRejected: function onDropRejected(rejectedFiles, event) {
-        // If dropped files has rejected
-        if (rejectedFiles.length) {
-          var _rejectedFiles$0$erro;
-          var firstFileError = (_rejectedFiles$0$erro = rejectedFiles[0].errors[0]) == null ? void 0 : _rejectedFiles$0$erro.message;
-          // Show error
-          setFileError(firstFileError || 'Error on adding file');
-        } else {
-          // Else clean error
-          setFileError('');
+      }
+      // Save to form data (including empty when files are not valid)
+      setFiles(acceptedFiles);
+      setFileError('');
+
+      // Save DataURL for all files
+      const readerPromisesList = acceptedFiles.map(file => {
+        return new Promise(resolve => setFileDataURL(file, resolve));
+      });
+      // Save files to form values
+      Promise.all(readerPromisesList).then(() => {
+        const filesToSave = changeFormState(acceptedFiles);
+        if (onAddFiles) {
+          onAddFiles(filesToSave, inputName);
         }
+      });
+    },
+    onDropRejected: (rejectedFiles, event) => {
+      // If dropped files has rejected
+      if (rejectedFiles.length) {
+        const firstFileError = rejectedFiles[0].errors[0]?.message;
+        // Show error
+        setFileError(firstFileError || 'Error on adding file');
+      } else {
+        // Else clean error
+        setFileError('');
       }
-    })),
-    getRootProps = _useDropzone.getRootProps,
-    getInputProps = _useDropzone.getInputProps;
+    }
+  });
 
   // Delete file from dropzone
-  var removeFile = useCallback(function (event, index) {
+  const removeFile = useCallback((event, index) => {
     event.stopPropagation();
     event.preventDefault();
-    var newFiles = [].concat(files);
+    const newFiles = [...files];
     newFiles.splice(index, 1);
     if (onDeleteFile) {
       onDeleteFile(files[index], inputName);
@@ -1340,38 +843,19 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
   }, [files, changeFormState, onDeleteFile]);
 
   //
-  var convertFiledValueAndSaveAsFiles = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(newInputValue) {
-      var newFiles;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            setFileIsLoading(true);
-            _context2.next = 3;
-            return convertToFiles(newInputValue, isPreviews);
-          case 3:
-            newFiles = _context2.sent;
-            setFileIsLoading(false);
-            setFiles(newFiles);
-            return _context2.abrupt("return", newFiles);
-          case 7:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }));
-    return function (_x5) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [isPreviews]);
-  useEffect(function () {
+  const convertFiledValueAndSaveAsFiles = useCallback(async newInputValue => {
+    setFileIsLoading(true);
+    const newFiles = await convertToFiles(newInputValue, isPreviews);
+    setFileIsLoading(false);
+    setFiles(newFiles);
+    return newFiles;
+  }, [isPreviews]);
+  useEffect(() => {
     // First time convert value to Files and save to local and form state
-    convertFiledValueAndSaveAsFiles(inputValue).then(function (newFiles) {
-      return changeFormState(newFiles);
-    });
+    convertFiledValueAndSaveAsFiles(inputValue).then(newFiles => changeFormState(newFiles));
   }, []); // eslint-disable-line
 
-  useEffect(function () {
+  useEffect(() => {
     // Everytime convert value to Files and save to local state
     if (!inputValue) {
       setFiles([]);
@@ -1381,116 +865,108 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     // only "inputValue"
   }, [inputValue]); // eslint-disable-line
 
-  useEffect(function () {
+  useEffect(() => {
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return function () {
-      return files.forEach(function (file) {
-        return URL.revokeObjectURL(file == null ? void 0 : file.preview);
-      });
-    };
+    return () => files.forEach(file => URL.revokeObjectURL(file?.preview));
   }, []); // eslint-disable-line
 
-  var fillClass = useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var borderWidthClass = useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderColorClass = useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderColorHoverClass = useDeviceTargetClass(props, {
+  const borderColorHoverClass = useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderColorHover'
   });
-  var borderTypeClass = useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  var shapeClass = useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'form-dropzone_shape_',
     propsKey: 'shape'
   });
-  var thumbBorderWidthClass = useDeviceTargetClass(props, {
+  const thumbBorderWidthClass = useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'thumbBorderWidth'
   });
-  var thumbDirectionClass = useDeviceTargetClass(props, {
+  const thumbDirectionClass = useDeviceTargetClass(props, {
     prefix: 'form-dropzone__thumb_direction_',
     propsKey: 'thumbDirection'
   });
-  var thumbBorderColorClass = useDeviceTargetClass(props, {
+  const thumbBorderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
   });
-  var thumbBorderColorHoverClass = useDeviceTargetClass(props, {
+  const thumbBorderColorHoverClass = useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'thumbBorderColorHover'
   });
-  var thumbBorderTypeClass = useDeviceTargetClass(props, {
+  const thumbBorderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'thumbBorderType'
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
-    className: "form-dropzone__dropzone dropzone " + className + " thumbColumn form-dropzone__dropzone_size_" + size + " " + shapeClass
+    className: `form-dropzone__dropzone dropzone ${className} thumbColumn form-dropzone__dropzone_size_${size} ${shapeClass}`
   }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && "form-dropzone__dropzone-wrapper_column_" + thumbColumn, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
-  }, files.map(function (file, i) {
-    return /*#__PURE__*/React.createElement("aside", {
-      className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
-      key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
-      className: "form-dropzone__thumb-image"
-    }, /*#__PURE__*/React.createElement("img", {
-      className: "form-dropzone__thumb-image-inner",
-      src: file.preview || file.image,
-      onLoad: function onLoad() {
-        // Revoke data uri after image is loaded
-        URL.revokeObjectURL(file.preview);
-      }
-    })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-      size: thumbNameTextSize,
-      textColor: thumbNameTextColor,
-      textWrap: thumbNameTextWrap,
-      textWeight: thumbNameTextWeight
-    }, fileErrorText || file.error)), isShowFilename && /*#__PURE__*/React.createElement("div", {
-      className: "form-dropzone__thumb-name"
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: thumbNameTextSize,
-      textColor: thumbNameTextColor,
-      textWrap: thumbNameTextWrap,
-      textWeight: thumbNameTextWeight,
-      className: "form-dropzone__thumb-name-inner"
-    }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
-      className: "form-dropzone__thumb-loader"
-    }, /*#__PURE__*/React.createElement(Loader, {
-      fill: "surfacePrimary",
-      height: "fill",
-      itemFill: "surfaceItemAccent",
-      set: "simple",
-      width: "fill"
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "form-dropzone__thumb-remove",
-      onClick: function onClick(event) {
-        return removeFile(event, i);
-      }
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: removeThumbTextSize,
-      textColor: removeThumbTextColor,
-      textWeight: removeThumbTextWeight,
-      textColorHover: removeThumbTextHoverColor,
-      className: "form-dropzone__thumb-remove-text"
-    }, removeThumbText || 'Remove')));
-  }), !files.length ? /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+  }, files.map((file, i) => /*#__PURE__*/React.createElement("aside", {
+    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+    key: `${file.id || `${file.name}_${i}` || 'i' + i}`
+  }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "form-dropzone__thumb-image-inner",
+    src: file.preview || file.image,
+    onLoad: () => {
+      // Revoke data uri after image is loaded
+      URL.revokeObjectURL(file.preview);
+    }
+  })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWrap: thumbNameTextWrap,
+    textWeight: thumbNameTextWeight
+  }, fileErrorText || file.error)), isShowFilename && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-name"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWrap: thumbNameTextWrap,
+    textWeight: thumbNameTextWeight,
+    className: "form-dropzone__thumb-name-inner"
+  }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-loader"
+  }, /*#__PURE__*/React.createElement(Loader, {
+    fill: "surfacePrimary",
+    height: "fill",
+    itemFill: "surfaceItemAccent",
+    set: "simple",
+    width: "fill"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-remove",
+    onClick: event => removeFile(event, i)
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: removeThumbTextSize,
+    textColor: removeThumbTextColor,
+    textWeight: removeThumbTextWeight,
+    textColorHover: removeThumbTextHoverColor,
+    className: "form-dropzone__thumb-remove-text"
+  }, removeThumbText || 'Remove')))), !files.length ? /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__hint"
   }, /*#__PURE__*/React.createElement(Text, {
     size: hintTitleTextSize,
@@ -1543,132 +1019,133 @@ FileInputDropzone.propTypes = {
   onDeleteFile: PropTypes.func
 };
 
-var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
-  var name = props.name,
-    shape = props.shape,
-    size = props.size,
-    borderWidth = props.borderWidth,
-    borderColor = props.borderColor,
-    borderColorHover = props.borderColorHover,
-    borderType = props.borderType,
-    label = props.label,
-    thumbBorderWidth = props.thumbBorderWidth,
-    thumbBorderColor = props.thumbBorderColor,
-    thumbBorderColorHover = props.thumbBorderColorHover,
-    thumbBorderType = props.thumbBorderType,
-    removeThumbTextHoverColor = props.removeThumbTextHoverColor,
-    labelTextColor = props.labelTextColor,
-    fill = props.fill,
-    fillHover = props.fillHover,
-    className = props.className,
-    removeThumbText = props.removeThumbText,
-    thumbNameTextSize = props.thumbNameTextSize,
-    thumbNameTextColor = props.thumbNameTextColor,
-    thumbNameTextWrap = props.thumbNameTextWrap,
-    thumbNameTextWeight = props.thumbNameTextWeight,
-    removeThumbTextSize = props.removeThumbTextSize,
-    removeThumbTextColor = props.removeThumbTextColor,
-    removeThumbTextWeight = props.removeThumbTextWeight,
-    hintTitle = props.hintTitle,
-    errorMessageTextSize = props.errorMessageTextSize,
-    errorMessageTextWeight = props.errorMessageTextWeight,
-    errorMessageTextColor = props.errorMessageTextColor,
-    fieldProps = props.fieldProps,
-    hintTitleTextSize = props.hintTitleTextSize,
-    hintTitleTextColor = props.hintTitleTextColor,
-    hintTitleTextWrap = props.hintTitleTextWrap,
-    hintTitleTextWeight = props.hintTitleTextWeight,
-    hintDescriptionTextSize = props.hintDescriptionTextSize,
-    hintDescriptionTextColor = props.hintDescriptionTextColor,
-    hintDescriptionTextWrap = props.hintDescriptionTextWrap,
-    hintDescriptionTextWeight = props.hintDescriptionTextWeight,
-    hideMessage = props.hideMessage,
-    thumbDirection = props.thumbDirection,
-    hintDescription = props.hintDescription,
-    isShowFilename = props.isShowFilename,
-    fileErrorText = props.fileErrorText,
-    dropzoneProps = props.dropzoneProps,
-    maxFiles = props.maxFiles,
-    maxSize = props.maxSize,
-    thumbColumn = props.thumbColumn,
-    isRequired = props.isRequired,
-    isPreviews = props.isPreviews,
-    onAddFiles = props.onAddFiles,
-    onDeleteFile = props.onDeleteFile,
-    classNameGroupItem = props.classNameGroupItem;
+const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
+  const {
+    name,
+    shape,
+    size,
+    borderWidth,
+    borderColor,
+    borderColorHover,
+    borderType,
+    label,
+    thumbBorderWidth,
+    thumbBorderColor,
+    thumbBorderColorHover,
+    thumbBorderType,
+    removeThumbTextHoverColor,
+    labelTextColor,
+    fill,
+    fillHover,
+    className,
+    removeThumbText,
+    thumbNameTextSize,
+    thumbNameTextColor,
+    thumbNameTextWrap,
+    thumbNameTextWeight,
+    removeThumbTextSize,
+    removeThumbTextColor,
+    removeThumbTextWeight,
+    hintTitle,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    fieldProps,
+    hintTitleTextSize,
+    hintTitleTextColor,
+    hintTitleTextWrap,
+    hintTitleTextWeight,
+    hintDescriptionTextSize,
+    hintDescriptionTextColor,
+    hintDescriptionTextWrap,
+    hintDescriptionTextWeight,
+    hideMessage,
+    thumbDirection,
+    hintDescription,
+    isShowFilename,
+    fileErrorText,
+    dropzoneProps,
+    maxFiles,
+    maxSize,
+    thumbColumn,
+    isRequired,
+    isPreviews,
+    onAddFiles,
+    onDeleteFile,
+    classNameGroupItem
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
-      fieldClassName: "form-dropzone",
-      inputName: input.name,
-      inputValue: input.value,
-      isRequired: isRequired,
-      label: label,
-      labelTextColor: labelTextColor,
-      metaActive: meta.active,
-      metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
-      hideMessage: hideMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
-      dropzoneProps: dropzoneProps,
-      hintDescription: hintDescription,
-      hintTitle: hintTitle,
-      borderWidth: borderWidth,
-      borderColor: borderColor,
-      borderColorHover: borderColorHover,
-      borderType: borderType,
-      thumbBorderWidth: thumbBorderWidth,
-      thumbBorderColor: thumbBorderColor,
-      thumbBorderColorHover: thumbBorderColorHover,
-      thumbBorderType: thumbBorderType,
-      fileErrorText: fileErrorText,
-      fill: fill,
-      size: size,
-      maxFiles: maxFiles,
-      maxSize: maxSize,
-      removeThumbTextHoverColor: removeThumbTextHoverColor,
-      fillHover: fillHover,
-      className: className,
-      thumbColumn: thumbColumn,
-      thumbDirection: thumbDirection,
-      inputName: input.name,
-      inputValue: input.value,
-      thumbNameTextSize: thumbNameTextSize,
-      thumbNameTextColor: thumbNameTextColor,
-      thumbNameTextWrap: thumbNameTextWrap,
-      thumbNameTextWeight: thumbNameTextWeight,
-      hintTitleTextSize: hintTitleTextSize,
-      hintTitleTextColor: hintTitleTextColor,
-      hintTitleTextWrap: hintTitleTextWrap,
-      hintTitleTextWeight: hintTitleTextWeight,
-      removeThumbTextSize: removeThumbTextSize,
-      removeThumbTextColor: removeThumbTextColor,
-      removeThumbTextWeight: removeThumbTextWeight,
-      hintDescriptionTextSize: hintDescriptionTextSize,
-      hintDescriptionTextColor: hintDescriptionTextColor,
-      hintDescriptionTextWrap: hintDescriptionTextWrap,
-      hintDescriptionTextWeight: hintDescriptionTextWeight,
-      errorMessageTextSize: errorMessageTextSize,
-      errorMessageWeight: errorMessageTextWeight,
-      errorMessageTextColor: errorMessageTextColor,
-      isPreviews: isPreviews,
-      shape: shape,
-      isShowFilename: isShowFilename,
-      metaError: meta.error,
-      metaTouched: meta.touched,
-      removeThumbText: removeThumbText,
-      onAddFiles: onAddFiles,
-      onDeleteFile: onDeleteFile
-    }));
-  });
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+    fieldClassName: "form-dropzone",
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    label: label,
+    labelTextColor: labelTextColor,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
+    dropzoneProps: dropzoneProps,
+    hintDescription: hintDescription,
+    hintTitle: hintTitle,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderColorHover: borderColorHover,
+    borderType: borderType,
+    thumbBorderWidth: thumbBorderWidth,
+    thumbBorderColor: thumbBorderColor,
+    thumbBorderColorHover: thumbBorderColorHover,
+    thumbBorderType: thumbBorderType,
+    fileErrorText: fileErrorText,
+    fill: fill,
+    size: size,
+    maxFiles: maxFiles,
+    maxSize: maxSize,
+    removeThumbTextHoverColor: removeThumbTextHoverColor,
+    fillHover: fillHover,
+    className: className,
+    thumbColumn: thumbColumn,
+    thumbDirection: thumbDirection,
+    inputName: input.name,
+    inputValue: input.value,
+    thumbNameTextSize: thumbNameTextSize,
+    thumbNameTextColor: thumbNameTextColor,
+    thumbNameTextWrap: thumbNameTextWrap,
+    thumbNameTextWeight: thumbNameTextWeight,
+    hintTitleTextSize: hintTitleTextSize,
+    hintTitleTextColor: hintTitleTextColor,
+    hintTitleTextWrap: hintTitleTextWrap,
+    hintTitleTextWeight: hintTitleTextWeight,
+    removeThumbTextSize: removeThumbTextSize,
+    removeThumbTextColor: removeThumbTextColor,
+    removeThumbTextWeight: removeThumbTextWeight,
+    hintDescriptionTextSize: hintDescriptionTextSize,
+    hintDescriptionTextColor: hintDescriptionTextColor,
+    hintDescriptionTextWrap: hintDescriptionTextWrap,
+    hintDescriptionTextWeight: hintDescriptionTextWeight,
+    errorMessageTextSize: errorMessageTextSize,
+    errorMessageWeight: errorMessageTextWeight,
+    errorMessageTextColor: errorMessageTextColor,
+    isPreviews: isPreviews,
+    shape: shape,
+    isShowFilename: isShowFilename,
+    metaError: meta.error,
+    metaTouched: meta.touched,
+    removeThumbText: removeThumbText,
+    onAddFiles: onAddFiles,
+    onDeleteFile: onDeleteFile
+  })));
 });
 FileInput.defaultProps = {
   errorMessageTextSize: 's',
@@ -1695,33 +1172,36 @@ FileInput.propTypes = {
   onDeleteFile: PropTypes.func
 };
 
-var Group = /*#__PURE__*/React.memo(function Group(props) {
-  var after = props.after,
-    before = props.before,
-    className = props.className,
-    label = props.label,
-    labelTextColor = props.labelTextColor,
-    labelTextSize = props.labelTextSize,
-    labelTextWeight = props.labelTextWeight,
-    message = props.message,
-    errorMessageTextSize = props.errorMessageTextSize,
-    errorMessageTextWeight = props.errorMessageTextWeight,
-    errorMessageTextColor = props.errorMessageTextColor,
-    messageTextSize = props.messageTextSize,
-    messageTextWeight = props.messageTextWeight,
-    messageTextColor = props.messageTextColor,
-    children = props.children,
-    dataTour = props.dataTour,
-    hideMessage = props.hideMessage,
-    name = props.name,
-    showErrorsOnSubmit = props.showErrorsOnSubmit;
+const Group = /*#__PURE__*/React.memo(function Group(props) {
+  const {
+    after,
+    before,
+    className,
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWeight,
+    message,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    messageTextSize,
+    messageTextWeight,
+    messageTextColor,
+    children,
+    dataTour,
+    hideMessage,
+    name,
+    showErrorsOnSubmit
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    _ref.input;
-      var meta = _ref.meta;
-    var error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
-    var showError = useMemo(function () {
+  }, ({
+    input,
+    meta
+  }) => {
+    const error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
+    const showError = useMemo(() => {
       if (showErrorsOnSubmit) {
         return meta.submitFailed && meta.touched && error;
       } else {
@@ -1746,7 +1226,7 @@ var Group = /*#__PURE__*/React.memo(function Group(props) {
       size: errorMessageTextSize,
       textWeight: errorMessageTextWeight,
       textColor: errorMessageTextColor,
-      id: name + "-error"
+      id: `${name}-error`
     }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize,
@@ -1755,7 +1235,7 @@ var Group = /*#__PURE__*/React.memo(function Group(props) {
     }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize
-    }, "\xA0")));
+    }, '\u00A0')));
   });
 });
 Group.defaultProps = {
@@ -1774,48 +1254,47 @@ Group.propTypes = {
   inputProps: PropTypes.object
 };
 
-var InputField = /*#__PURE__*/React.memo(function InputField(props) {
-  var isPassword = props.isPassword,
-    isRequired = props.isRequired,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    isRevealable = props.isRevealable,
-    name = props.name,
-    parse = props.parse,
-    iconSize = props.iconSize;
-    props.iconBorder;
-    props.iconBorderHover;
-    var iconFill = props.iconFill,
-    iconFillHover = props.iconFillHover,
-    iconRevealableShow = props.iconRevealableShow,
-    iconRevealableHide = props.iconRevealableHide,
-    iconShape = props.iconShape,
-    hideMessage = props.hideMessage,
-    onChange = props.onChange,
-    classNameGroupItem = props.classNameGroupItem;
-  var _useState = useState(false),
-    isRevealed = _useState[0],
-    setIsRevealed = _useState[1];
-  var inputType = useMemo(function () {
+const InputField = /*#__PURE__*/React.memo(function InputField(props) {
+  const {
+    isPassword,
+    isRequired,
+    fieldProps,
+    inputProps,
+    isRevealable,
+    name,
+    parse,
+    iconSize,
+    iconBorder,
+    iconBorderHover,
+    iconFill,
+    iconFillHover,
+    iconRevealableShow,
+    iconRevealableHide,
+    iconShape,
+    hideMessage,
+    onChange,
+    classNameGroupItem
+  } = props;
+  const [isRevealed, setIsRevealed] = useState(false);
+  const inputType = useMemo(() => {
     if (isPassword) {
       return isRevealed ? 'text' : 'password';
     } else {
       return 'text';
     }
   }, [isRevealed, isPassword]);
-  var revealeHandler = useCallback(function (e) {
+  const revealeHandler = useCallback(e => {
     e.preventDefault();
-    setIsRevealed(function (prev) {
-      return !prev;
-    });
+    setIsRevealed(prev => !prev);
   }, [setIsRevealed]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     parse: parse
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var onChangeField = useCallback(function (event) {
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
@@ -1871,11 +1350,13 @@ InputField.propTypes = {
 };
 
 function RadioGroupItem(props) {
-  var input = props.input,
-    option = props.option,
-    onChange = props.onChange,
-    inputProps = props.inputProps;
-  var onChangeField = useCallback(function (event) {
+  const {
+    input,
+    option,
+    onChange,
+    inputProps
+  } = props;
+  const onChangeField = useCallback(event => {
     if (event.target.checked) {
       onChange(option.value);
     }
@@ -1909,12 +1390,12 @@ RadioGroupItem.propTypes = {
 };
 
 function RadioGroupInput(props) {
-  var input = props.input,
-    value = props.value,
-    onChange = props.onChange;
-  var onChangeField = useCallback(function (event) {
-    return onChange(event.target.value);
-  }, [onChange]);
+  const {
+    input,
+    value,
+    onChange
+  } = props;
+  const onChangeField = useCallback(event => onChange(event.target.value), [onChange]);
   return /*#__PURE__*/React.createElement(Input, Object.assign({
     autoComplete: "nope",
     name: input.name,
@@ -1932,29 +1413,25 @@ RadioGroupInput.propTypes = {
 };
 
 function RadioGroupList(props) {
-  var input = props.input,
-    options = props.options,
-    editableProps = props.editableProps,
-    onChange = props.onChange,
-    inputProps = props.inputProps;
-  var _useState = useState(function () {
-      var isRadioValue = options.find(function (option) {
-        return option.value === input.value;
-      });
-      if (!isRadioValue) {
-        return input.value;
-      }
-      return '';
-    }),
-    editableValue = _useState[0],
-    setEditableValue = _useState[1];
-  useEffect(function () {
+  const {
+    input,
+    options,
+    editableProps,
+    onChange,
+    inputProps
+  } = props;
+  const [editableValue, setEditableValue] = useState(() => {
+    const isRadioValue = options.find(option => option.value === input.value);
+    if (!isRadioValue) {
+      return input.value;
+    }
+    return '';
+  });
+  useEffect(() => {
     // When a new value from outside enters the form
     if (input.value) {
       // Check value for radio type
-      var isRadioValue = options.find(function (option) {
-        return option.value === input.value && !option.editable;
-      });
+      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
       // If new value not in radio list - set to editable input
       setEditableValue(isRadioValue ? '' : input.value);
     } else {
@@ -1964,7 +1441,7 @@ function RadioGroupList(props) {
   }, [input.value]);
 
   // Callback for value changes
-  var onChangeSomeInput = useCallback(function (value) {
+  const onChangeSomeInput = useCallback(value => {
     // Save to form values
     input.onChange(value);
     if (onChange) {
@@ -1974,33 +1451,31 @@ function RadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  var onChangeRadio = useCallback(function (value) {
+  const onChangeRadio = useCallback(value => {
     setEditableValue('');
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
 
   // Handle for text input
-  var onChangeEditable = useCallback(function (value) {
+  const onChangeEditable = useCallback(value => {
     setEditableValue(value);
     onChangeSomeInput(value);
   }, [onChangeSomeInput]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (option) {
-    return option.editable ? /*#__PURE__*/React.createElement(RadioGroupInput, {
-      key: option.label,
-      input: input,
-      value: editableValue,
-      option: option,
-      onChange: onChangeEditable,
-      editableProps: editableProps,
-      inputProps: inputProps
-    }) : /*#__PURE__*/React.createElement(RadioGroupItem, {
-      key: option.value,
-      input: input,
-      option: option,
-      onChange: onChangeRadio,
-      inputProps: inputProps
-    });
-  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React.createElement(RadioGroupInput, {
+    key: option.label,
+    input: input,
+    value: editableValue,
+    option: option,
+    onChange: onChangeEditable,
+    editableProps: editableProps,
+    inputProps: inputProps
+  }) : /*#__PURE__*/React.createElement(RadioGroupItem, {
+    key: option.value,
+    input: input,
+    option: option,
+    onChange: onChangeRadio,
+    inputProps: inputProps
+  })));
 }
 RadioGroupList.propTypes = {
   editableProps: PropTypes.object,
@@ -2010,42 +1485,43 @@ RadioGroupList.propTypes = {
   options: PropTypes.object
 };
 
-var RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
-  var isRequired = props.isRequired,
-    name = props.name,
-    options = props.options,
-    fieldProps = props.fieldProps,
-    editableProps = props.editableProps,
-    inputProps = props.inputProps,
-    onChange = props.onChange,
-    hideMessage = props.hideMessage;
+const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
+  const {
+    isRequired,
+    name,
+    options,
+    fieldProps,
+    editableProps,
+    inputProps,
+    onChange,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: "form__item_type_radio",
-      fieldClassName: 'form-radio',
-      inputName: input.name,
-      inputValue: input.value || '',
-      isRequired: isRequired,
-      metaActive: meta.active,
-      metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
-      hideMessage: hideMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
-      input: input,
-      options: options,
-      onChange: onChange,
-      editableProps: editableProps,
-      inputProps: inputProps
-    }));
-  });
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: "form__item_type_radio",
+    fieldClassName: 'form-radio',
+    inputName: input.name,
+    inputValue: input.value || '',
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
+    input: input,
+    options: options,
+    onChange: onChange,
+    editableProps: editableProps,
+    inputProps: inputProps
+  })));
 });
 RadioGroup.defaultProps = {
   fieldProps: {},
@@ -2065,33 +1541,35 @@ RadioGroup.propTypes = {
 
 // const SegmentedField = React.memo(
 function SegmentedField(props) {
-  var options = props.options,
-    isRequired = props.isRequired,
-    name = props.name,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    hideMessage = props.hideMessage;
-  var _useForm = useForm(),
-    change = _useForm.change;
+  const {
+    options,
+    isRequired,
+    name,
+    fieldProps,
+    inputProps,
+    hideMessage
+  } = props;
+  const {
+    change
+  } = useForm();
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var activeOption = useMemo(function () {
-      var emptyOption = {
+  }, ({
+    input,
+    meta
+  }) => {
+    const activeOption = useMemo(() => {
+      const emptyOption = {
         value: null,
         label: null
       };
       if (input.value) {
-        var currentOption = options.find(function (option) {
-          return option.value === input.value;
-        });
+        const currentOption = options.find(option => option.value === input.value);
         return currentOption || emptyOption;
       }
       return emptyOption;
     }, [input.value]);
-    var setActiveSegment = useCallback(function (option) {
+    const setActiveSegment = useCallback(option => {
       change(name, option.value);
     }, [change]);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
@@ -2130,12 +1608,12 @@ SegmentedField.propTypes = {
 };
 
 function getDefaultValue(options, selectValue) {
-  var selectValues = Array.isArray(selectValue) ? selectValue : [selectValue];
-  var result = [];
-  options.forEach(function (item) {
-    var isValue = selectValues.includes(item.value);
-    var isLabel = selectValues.includes(item.label);
-    var childOptions = [];
+  const selectValues = Array.isArray(selectValue) ? selectValue : [selectValue];
+  let result = [];
+  options.forEach(item => {
+    const isValue = selectValues.includes(item.value);
+    const isLabel = selectValues.includes(item.label);
+    let childOptions = [];
     if (item.options) {
       childOptions = getDefaultValue(item.options, selectValue);
     }
@@ -2147,35 +1625,35 @@ function getDefaultValue(options, selectValue) {
   });
   return result;
 }
-var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
-  var isRequired = props.isRequired,
-    key = props.key,
-    name = props.name,
-    options = props.options,
-    fieldProps = props.fieldProps,
-    selectProps = props.selectProps,
-    selectRef = props.selectRef,
-    onChange = props.onChange,
-    classNameGroupItem = props.classNameGroupItem,
-    hideMessage = props.hideMessage;
+const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
+  const {
+    isRequired,
+    key,
+    name,
+    options,
+    fieldProps,
+    selectProps,
+    selectRef,
+    onChange,
+    classNameGroupItem,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var onChangeField = useCallback(function (value) {
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(value => {
       input.onChange(value);
       if (onChange) {
         onChange(value, input.name);
       }
     }, [onChange]);
-    var _useState = useState(null),
-      selectedOptions = _useState[0],
-      setSelectedOptions = _useState[1];
-    var defaultValue = useMemo(function () {
-      var _input$value;
-      var optionsValues = getDefaultValue(options, input.value);
-      if (!optionsValues.length && (_input$value = input.value) != null && _input$value.length) {
+    const [selectedOptions, setSelectedOptions] = useState(null);
+    const defaultValue = useMemo(() => {
+      const optionsValues = getDefaultValue(options, input.value);
+      if (!optionsValues.length && input.value?.length) {
         optionsValues.push({
           value: input.value,
           label: input.value
@@ -2183,13 +1661,9 @@ var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       }
       return optionsValues;
     }, [input.value]);
-    useEffect(function () {
-      return setSelectedOptions(defaultValue);
-    }, [defaultValue]);
-    var onChangeValue = useCallback(function (option, actionMeta) {
-      var value = Array.isArray(option) ? option.map(function (o) {
-        return o.value;
-      }) : (option == null ? void 0 : option.value) || null;
+    useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
+    const onChangeValue = useCallback((option, actionMeta) => {
+      const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
@@ -2209,7 +1683,7 @@ var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
       hideMessage: hideMessage
     }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
       className: "form-select-item",
-      instanceId: "id_" + input.name,
+      instanceId: `id_${input.name}`,
       value: selectedOptions,
       onChange: onChangeValue,
       options: options,
@@ -2228,21 +1702,24 @@ SelectField.propTypes = {
   onChange: PropTypes.func
 };
 
-var SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
-  var name = props.name,
-    isRequired = props.isRequired,
-    onChange = props.onChange,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    classNameGroupItem = props.classNameGroupItem,
-    hideMessage = props.hideMessage;
+const SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
+  const {
+    name,
+    isRequired,
+    onChange,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     type: "checkbox"
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    var onChangeField = useCallback(function (event) {
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(event => {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
@@ -2286,41 +1763,42 @@ SwitchField.propTypes = {
   onChange: PropTypes.func
 };
 
-var TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
-  var isRequired = props.isRequired,
-    name = props.name,
-    fieldProps = props.fieldProps,
-    inputProps = props.inputProps,
-    classNameGroupItem = props.classNameGroupItem,
-    hideMessage = props.hideMessage;
+const TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
+  const {
+    isRequired,
+    name,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function (_ref) {
-    var input = _ref.input,
-      meta = _ref.meta;
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
-      fieldClassName: 'form-textarea',
-      inputName: input.name,
-      inputValue: input.value,
-      isRequired: isRequired,
-      metaActive: meta.active,
-      metaError: meta.error,
-      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
-      metaSubmitError: meta.submitError,
-      metaSubmitFailed: meta.submitFailed,
-      metaTouched: meta.touched,
-      metaValid: meta.valid,
-      hideMessage: hideMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
-      autoComplete: "nope",
-      name: input.name,
-      value: input.value,
-      onBlur: input.onBlur,
-      onChange: input.onChange,
-      onFocus: input.onFocus
-    }, inputProps)));
-  });
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
+    fieldClassName: 'form-textarea',
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
+    autoComplete: "nope",
+    name: input.name,
+    value: input.value,
+    onBlur: input.onBlur,
+    onChange: input.onChange,
+    onFocus: input.onFocus
+  }, inputProps))));
 });
 TextareaField.defaultProps = {
   inputProps: {},
@@ -2333,32 +1811,32 @@ TextareaField.propTypes = {
   inputProps: PropTypes.object
 };
 
-var focusOnError = function focusOnError(formElementsList, errors) {
-  var selectsIds = Object.keys(errors).map(function (fieldName) {
+const focusOnError = (formElementsList, errors) => {
+  const selectsIds = Object.keys(errors).map(fieldName => {
     if (fieldName === FORM_ERROR) {
       // TODO: get from somewhere
       return 'notification__item_status_error';
     }
-    return "react-select-id_" + fieldName + "-input";
+    return `react-select-id_${fieldName}-input`;
   });
-  var errorFieldElement = formElementsList.find(function (element) {
+  const errorFieldElement = formElementsList.find(element => {
     if (element.name) {
       return getIn(errors, element.name);
     } else {
       return selectsIds.includes(element.id);
     }
   });
-  var errorsList = Object.keys(errors);
+  const errorsList = Object.keys(errors);
   if (!errorFieldElement && errorsList.length) {
-    var errorElement;
+    let errorElement;
     try {
-      var fieldName = errorsList[0];
+      const fieldName = errorsList[0];
       if (fieldName === FORM_ERROR) {
         errorElement = document.querySelector('notification__item_status_error');
       } else {
-        errorElement = document.querySelector("#" + fieldName + "-error");
+        errorElement = document.querySelector(`#${fieldName}-error`);
         if (!errorElement) {
-          errorElement = document.querySelector("#id_" + fieldName);
+          errorElement = document.querySelector(`#id_${fieldName}`);
         }
       }
     } catch (err) {
@@ -2380,12 +1858,11 @@ var focusOnError = function focusOnError(formElementsList, errors) {
   }
   return null;
 };
-var focusOnErrorDecorator = createDecorator(null, focusOnError);
-var setErrorsMutator = function setErrorsMutator(args, state) {
-  var fieldName = args[0],
-    data = args[1];
-  var submitError = data.submitError;
-  var fieldError = data.error;
+const focusOnErrorDecorator = createDecorator(null, focusOnError);
+const setErrorsMutator = (args, state) => {
+  const [fieldName, data] = args;
+  const submitError = data.submitError;
+  const fieldError = data.error;
   if (fieldName === 'non_field_errors') {
     // state.formState.invalid = true
     // state.formState.valid = false
@@ -2393,15 +1870,17 @@ var setErrorsMutator = function setErrorsMutator(args, state) {
     state.formState.submitError = submitError;
   } else if (fieldName in state.fields) {
     if (fieldError) {
-      var _Object$assign;
-      var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
+      const errorsState = Object.assign({}, state.formState.errors, {
+        [fieldName]: fieldError
+      });
       state.fields[fieldName].touched = true;
       state.fields[fieldName].error = fieldError;
       state.formState.errors = errorsState;
     }
     if (submitError) {
-      var _Object$assign2;
-      var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
+      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
+        [fieldName]: submitError
+      });
 
       // state.fields[fieldName].submitFailed = true
       // state.fields[fieldName].submitSucceeded = false
@@ -2413,56 +1892,36 @@ var setErrorsMutator = function setErrorsMutator(args, state) {
     }
   }
 };
-var sendFormDataToServer = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url, data) {
-    var response, _error$response, _error$response2, formErrors;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.prev = 0;
-          _context.next = 3;
-          return axios({
-            url: url,
-            method: 'POST',
-            data: data
-          });
-        case 3:
-          response = _context.sent;
-          return _context.abrupt("return", {
-            success: true,
-            response: response
-          });
-        case 7:
-          _context.prev = 7;
-          _context.t0 = _context["catch"](0);
-          formErrors = {};
-          if (typeof ((_error$response = _context.t0.response) == null ? void 0 : _error$response.data) === 'string') {
-            formErrors[FORM_ERROR] = 'Something went wrong';
-          }
-          if (typeof ((_error$response2 = _context.t0.response) == null ? void 0 : _error$response2.data) === 'object') {
-            Object.entries(_context.t0.response.data).forEach(function (_ref2) {
-              var fieldName = _ref2[0],
-                errorsList = _ref2[1];
-              formErrors[fieldName] = errorsList[0];
-            });
-          }
-          return _context.abrupt("return", {
-            success: false,
-            formErrors: formErrors,
-            error: _context.t0
-          });
-        case 13:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[0, 7]]);
-  }));
-  return function sendFormDataToServer(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
+const sendFormDataToServer = async (url, data) => {
+  try {
+    const response = await axios({
+      url: url,
+      method: 'POST',
+      data: data
+    });
+    return {
+      success: true,
+      response
+    };
+  } catch (error) {
+    const formErrors = {};
+    if (typeof error.response?.data === 'string') {
+      formErrors[FORM_ERROR] = 'Something went wrong';
+    }
+    if (typeof error.response?.data === 'object') {
+      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
+        formErrors[fieldName] = errorsList[0];
+      });
+    }
+    return {
+      success: false,
+      formErrors,
+      error
+    };
+  }
+};
 
-var formTypes = {
+const formTypes = {
   checkbox: 'checkbox',
   custom: 'custom',
   choice: 'choice',
@@ -2474,7 +1933,7 @@ var formTypes = {
   radioGroup: 'radioGroup',
   segmented: 'segmented',
   select: 'select',
-  "switch": 'switch',
+  switch: 'switch',
   text: 'text',
   textarea: 'textarea'
 };
@@ -2498,7 +1957,7 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes["switch"]:
+    case formTypes.switch:
       {
         return /*#__PURE__*/React.createElement(SwitchField, Object.assign({
           key: config.key
@@ -2556,13 +2015,12 @@ function generateField(field, config, props) {
       {
         return /*#__PURE__*/React.createElement(Group, Object.assign({
           key: config.key
-        }, field, props), Object.entries(field.group).map(function (_ref) {
-          var key = _ref[0],
-            value = _ref[1];
-          var groupProps = Object.assign({}, value, {
+        }, field, props), Object.entries(field.group).map(([key, value]) => {
+          const groupProps = {
+            ...value,
             hideMessage: field.hideMessage,
             classNameGroupItem: value.classNameGroupItem || 'form__group-item'
-          });
+          };
           return generateField(groupProps, {
             key: key + '_form_group'
           }, props);
@@ -2571,118 +2029,121 @@ function generateField(field, config, props) {
   }
 }
 
-var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
-  var additionalProps = props.additionalProps,
-    after = props.after,
-    before = props.before,
-    buttonDirection = props.buttonDirection,
-    buttonGap = props.buttonGap,
-    buttonPadding = props.buttonPadding,
-    groupGap = props.groupGap,
-    className = props.className,
-    config = props.config,
-    description = props.description,
-    descriptionSize = props.descriptionSize,
-    descriptionTextColor = props.descriptionTextColor,
-    descriptionTextWeight = props.descriptionTextWeight,
-    disableFieldsAutoComplete = props.disableFieldsAutoComplete,
-    fieldsGap = props.fieldsGap,
-    formName = props.formName,
-    initialValues = props.initialValues,
-    initialValuesEqual = props.initialValuesEqual,
-    isLoading = props.isLoading,
-    loader = props.loader,
-    loaderSet = props.loaderSet,
-    loaderFill = props.loaderFill,
-    loaderItemFill = props.loaderItemFill,
-    loaderText = props.loaderText,
-    language = props.language,
-    mutators = props.mutators,
-    onChangeFormValues = props.onChangeFormValues,
-    onClickSecondaryButton = props.onClickSecondaryButton,
-    onClickTertiaryButton = props.onClickTertiaryButton,
-    onSubmit = props.onSubmit,
-    primaryButton = props.primaryButton,
-    primaryButtonLabel = props.primaryButtonLabel,
-    secondaryButton = props.secondaryButton,
-    secondaryButtonLabel = props.secondaryButtonLabel,
-    primaryButtonFill = props.primaryButtonFill,
-    primaryButtonFillHover = props.primaryButtonFillHover,
-    secondaryButtonFill = props.secondaryButtonFill,
-    secondaryButtonFillHover = props.secondaryButtonFillHover,
-    primaryButtonSize = props.primaryButtonSize,
-    primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
-    primaryButtonLabelSize = props.primaryButtonLabelSize,
-    primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
-    secondaryButtonSize = props.secondaryButtonSize,
-    secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
-    secondaryButtonLabelSize = props.secondaryButtonLabelSize,
-    secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
-    tertiaryButton = props.tertiaryButton,
-    tertiaryButtonFill = props.tertiaryButtonFill,
-    tertiaryButtonFillHover = props.tertiaryButtonFillHover,
-    tertiaryButtonSize = props.tertiaryButtonSize,
-    tertiaryButtonLabelTextColor = props.tertiaryButtonLabelTextColor,
-    tertiaryButtonLabelSize = props.tertiaryButtonLabelSize,
-    tertiaryButtonLabelTextWeight = props.tertiaryButtonLabelTextWeight,
-    tertiaryButtonLabel = props.tertiaryButtonLabel,
-    set = props.set,
-    type = props.type,
-    buttonJustifyContent = props.buttonJustifyContent,
-    title = props.title,
-    notificationType = props.notificationType,
-    buttonFill = props.buttonFill,
-    titleTextSize = props.titleTextSize,
-    titleTextColor = props.titleTextColor,
-    titleTextWeight = props.titleTextWeight,
-    validationSchema = props.validationSchema,
-    dataTour = props.dataTour,
-    dataTourButtons = props.dataTourButtons,
-    dataTourPrimaryButton = props.dataTourPrimaryButton,
-    dataTourSecondaryButton = props.dataTourSecondaryButton,
-    dataTourTertiaryButton = props.dataTourTertiaryButton;
-  var validate = useYupValidationSchema(validationSchema, language);
-  var onRefFormInstance = useCallback(function (formInstance) {
+const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
+  const {
+    additionalProps,
+    after,
+    before,
+    buttonDirection,
+    buttonGap,
+    buttonPadding,
+    groupGap,
+    className,
+    config,
+    description,
+    descriptionSize,
+    descriptionTextColor,
+    descriptionTextWeight,
+    disableFieldsAutoComplete,
+    fieldsGap,
+    formName,
+    initialValues,
+    initialValuesEqual,
+    isLoading,
+    loader,
+    loaderSet,
+    loaderFill,
+    loaderItemFill,
+    loaderText,
+    language,
+    mutators,
+    onChangeFormValues,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
+    onSubmit,
+    primaryButton,
+    primaryButtonLabel,
+    secondaryButton,
+    secondaryButtonLabel,
+    primaryButtonFill,
+    primaryButtonFillHover,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    primaryButtonSize,
+    primaryButtonLabelTextColor,
+    primaryButtonLabelSize,
+    primaryButtonLabelTextWeight,
+    secondaryButtonSize,
+    secondaryButtonLabelTextColor,
+    secondaryButtonLabelSize,
+    secondaryButtonLabelTextWeight,
+    tertiaryButton,
+    tertiaryButtonFill,
+    tertiaryButtonFillHover,
+    tertiaryButtonSize,
+    tertiaryButtonLabelTextColor,
+    tertiaryButtonLabelSize,
+    tertiaryButtonLabelTextWeight,
+    tertiaryButtonLabel,
+    set,
+    type,
+    buttonJustifyContent,
+    title,
+    notificationType,
+    notificationClose,
+    buttonFill,
+    titleTextSize,
+    titleTextColor,
+    titleTextWeight,
+    validationSchema,
+    dataTour,
+    dataTourButtons,
+    dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton
+  } = props;
+  const validate = useYupValidationSchema(validationSchema, language);
+  const onRefFormInstance = useCallback(formInstance => {
     if (ref) {
       ref.current = formInstance;
     }
   }, [ref]);
-  var fillClass = useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var directionClass = useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
   });
-  var shapeClass = useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'shape_',
     propsKey: 'shape'
   });
-  var elevationClass = useDeviceTargetClass(props, {
+  const elevationClass = useDeviceTargetClass(props, {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
-  var _useStyles = useStyles(props),
-    formStyles = _useStyles.styles;
+  const {
+    styles: formStyles
+  } = useStyles(props);
   return /*#__PURE__*/React.createElement(Form, {
     decorators: [focusOnErrorDecorator],
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
     mutators: mutators,
-    render: function render(_ref) {
-      var handleSubmit = _ref.handleSubmit,
-        submitError = _ref.submitError,
-        modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
-        form = _ref.form;
+    render: ({
+      handleSubmit,
+      submitError,
+      modifiedSinceLastSubmit,
+      form
+    }) => {
       return /*#__PURE__*/React.createElement("form", {
         style: formStyles,
-        className: clsx(className, 'form', set && "form_set_" + set, type && "form_type_" + type, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
-        ref: function ref() {
-          return onRefFormInstance(form);
-        },
+        ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2699,10 +2160,11 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
       }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
-        className: clsx('notification', 'form-notification', notificationType ? "form-notification_type_" + notificationType : 'form-notification_type_global')
+        className: clsx('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
       }, /*#__PURE__*/React.createElement(NotificationItem, {
         className: "form-notification__item",
         titleTextSize: "h6",
+        notificationClose: notificationClose,
         title: form.getState().submitError,
         set: "form",
         status: "error"
@@ -2715,11 +2177,9 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         direction: "vertical",
         gap: fieldsGap || groupGap,
         className: "form__wrapper"
-      }, Object.keys(config).map(function (key) {
-        return generateField(config[key], {
-          key: key
-        }, additionalProps[config[key].name]);
-      }), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
+      }, Object.keys(config).map(key => generateField(config[key], {
+        key
+      }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
         className: "form__loader",
         set: loaderSet,
         fill: loaderFill,