@itcase/forms 1.1.53 → 1.1.55

package/dist/itcase-forms.esm.js

@@ -39,31 +39,34 @@ import { Group } from '@itcase/ui/components/Group';
 import { Notification } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
-const phoneValidation = value => {
+var phoneValidation = function phoneValidation(value) {
   if (!value) {
     return true;
   }
   return isPossiblePhoneNumber(value, 'RU');
 };
-const emailValidation = value => {
+var emailValidation = function emailValidation(value) {
   // from https://emailregex.com/
   if (!value) {
     return true;
   }
 
   // from https://www.regular-expressions.info/email.html
-  const regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
+  var regexp = /^[a-za-яёЁ0-9_-]+(?:\.[a-za-яёЁ0-9_-]+)*@(?:[a-za-яёЁ0-9](?:[a-za-яёЁ0-9-]*[a-za-яёЁ0-9])?\.)+[a-za-яёЁ0-9]+$/;
   return regexp.test(String(value).toLowerCase());
 };
-const dateValidation = value => {
-  const valueDate = value instanceof Date ? value : new Date(value);
-  const isDateValid = !isNaN(valueDate.getTime());
+var dateValidation = function dateValidation(value) {
+  var valueDate = value instanceof Date ? value : new Date(value);
+  var isDateValid = !isNaN(valueDate.getTime());
   return isDateValid;
 };
-const addRequiredFieldsParamToSchema = schema => {
-  const fields = Object.entries(schema.fields);
-  schema.requiredFields = fields.reduce((list, [fieldName, validationProps]) => {
-    if (validationProps.exclusiveTests?.required) {
+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) {
       list.push(fieldName);
     }
     return list;
@@ -71,6 +74,169 @@ const addRequiredFieldsParamToSchema = schema => {
   return schema;
 };
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: true
+      } : {
+        done: false,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 /**
  * Sets the `innerError.message` in an `errors` object at the key
  * defined by `innerError.path`.
@@ -78,7 +244,7 @@ const addRequiredFieldsParamToSchema = schema => {
  * @param {{ path: string, message: string }} innerError A `yup` field error.
  * @returns {Object} The result of setting the new error message onto `errors`.
  */
-const setInError = (errors, innerError) => {
+var setInError = function setInError(errors, innerError) {
   return setIn(errors, innerError.path, innerError.message);
 };
 
@@ -87,7 +253,7 @@ const setInError = (errors, innerError) => {
  * value for reducing the `err.inner` array of errors
  * from a `yup~ValidationError`.
  */
-const emptyObj = Object.create(null);
+var emptyObj = Object.create(null);
 
 /**
  * Takes a `yup` validation schema and returns a function that expects
@@ -99,27 +265,50 @@ const emptyObj = Object.create(null);
  *  and resolves to either `undefined` or a map of field names to error messages.
  */
 
-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.');
-      }
+var makeValidate = function makeValidate(schema) {
+  return /*#__PURE__*/function () {
+    var _validate = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(values) {
+      var _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            _context.p = 0;
+            _context.n = 1;
+            return schema.validate(values, {
+              abortEarly: false
+            });
+          case 1:
+            _context.n = 4;
+            break;
+          case 2:
+            _context.p = 2;
+            _t = _context.v;
+            if (!_t.inner) {
+              _context.n = 3;
+              break;
+            }
+            return _context.a(2, _t.inner.reduce(setInError, emptyObj));
+          case 3:
+            console.warn('itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.');
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, null, [[0, 2]]);
+    }));
+    function validate(_x) {
+      return _validate.apply(this, arguments);
     }
-  };
+    return validate;
+  }();
 };
 function useYupValidationSchema(schema, language) {
-  const validate = useMemo(() => schema && makeValidate(schema), [schema, language]);
+  var validate = useMemo(function () {
+    return schema && makeValidate(schema);
+  }, [schema, language]);
   return validate;
 }
 
-const defaultCheckboxProps = {
+var defaultCheckboxProps = {
   appearance: 'defaultPrimary sizeL solid',
   width: 'fill',
   // useValidationAppearanceInputProps
@@ -131,20 +320,22 @@ const defaultCheckboxProps = {
 
 // Whether to display an error message based on "fieldProps" and meta-objects
 function useFieldValidationState(props) {
-  const {
-    fieldProps = {},
-    input = {},
-    meta = {}
-  } = props;
+  var _meta$error;
+  var _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$input = props.input,
+    input = _props$input === void 0 ? {} : _props$input,
+    _props$meta = props.meta,
+    meta = _props$meta === void 0 ? {} : _props$meta;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
-  const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
+  var submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
 
   // Determines a key for the error, defaulting to 'error' if no specific key is found.
-  const errorKey = meta.error?.key || 'error';
-  const successKey = 'success';
+  var errorKey = ((_meta$error = meta.error) == null ? void 0 : _meta$error.key) || 'error';
+  var successKey = 'success';
 
   // Determines if the field is in an error state based on various conditions.
-  const isErrorState = useMemo(() => {
+  var isErrorState = useMemo(function () {
     if (fieldProps.showErrorsOnSubmit) {
       return Boolean(meta.submitFailed && meta.touched && (meta.error || submitError));
     } else {
@@ -153,15 +344,15 @@ function useFieldValidationState(props) {
   }, [fieldProps.showErrorsOnSubmit, meta.submitFailed, meta.touched, meta.error, submitError]);
 
   // Determines if the field's input state is valid
-  const isValidState = useMemo(() => {
-    const hasValue = Array.isArray(input?.value) ? input?.value.length : input?.value;
-    const isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
+  var isValidState = useMemo(function () {
+    var hasValue = Array.isArray(input == null ? void 0 : input.value) ? input == null ? void 0 : input.value.length : input == null ? void 0 : input.value;
+    var isModifiedAfterSubmit = meta.modifiedSinceLastSubmit && !meta.error && submitError;
     return Boolean(hasValue && (meta.valid || isModifiedAfterSubmit));
-  }, [input?.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
-  const errorMessage = useMemo(() => {
+  }, [input == null ? void 0 : input.value, meta.valid, meta.error, submitError, meta.modifiedSinceLastSubmit]);
+  var errorMessage = useMemo(function () {
     // If final-form field has error in "meta" render-property.
     // If field not modified after last form submit - use submit error
-    const error = meta.error || submitError || false;
+    var error = meta.error || submitError || false;
     if (error) {
       // And error in "meta" is string
       if (typeof error === 'string') {
@@ -179,24 +370,22 @@ function useFieldValidationState(props) {
     return '';
   }, [meta.error, submitError]);
   return {
-    errorKey,
-    errorMessage,
-    isErrorState,
-    successKey,
-    isValidState
+    errorKey: errorKey,
+    errorMessage: errorMessage,
+    isErrorState: isErrorState,
+    successKey: successKey,
+    isValidState: isValidState
   };
 }
 
 // This hook changes the props of the child component depending on the type of error,
 // looks at what props were in initialProps, if they are there then changes
 function useValidationAppearanceInputProps(props) {
-  const {
-    inputProps,
-    validationStateKey
-  } = props;
+  var inputProps = props.inputProps,
+    validationStateKey = props.validationStateKey;
 
   // TODO: need to add props that can change during errors in this field
-  const validationAppearanceInputProps = useMemo(() => {
+  var validationAppearanceInputProps = useMemo(function () {
     // const resultAppearanceProps = {
     //   messageTextColor: props.errorMessageTextColor,
     //   messageTextSize: props.errorMessageTextSize,
@@ -204,24 +393,26 @@ function useValidationAppearanceInputProps(props) {
     //   // Override appearance(styled) props for child input
     //   inputProps: {},
     // }
-    const updatedInputProps = {};
+    var updatedInputProps = {};
     if (validationStateKey) {
-      Object.entries(inputProps || {}).forEach(([propKey, propValue]) => {
+      Object.entries(inputProps || {}).forEach(function (_ref) {
+        var propKey = _ref[0],
+          propValue = _ref[1];
         // Convert the input property key to "snake_case" format.
         // e.g. "requiredBorderColor" -> "required_border_color".
-        const propKeySnake = snakeCase(propKey);
+        var propKeySnake = snakeCase(propKey);
         // Check if this property is for appearance.
         // Key maybe starts with: "error", "required", "success", etc from validation config.
-        const isPropForValidationState = propKeySnake.startsWith(`${validationStateKey}_`);
+        var isPropForValidationState = propKeySnake.startsWith(validationStateKey + "_");
 
         // If property is for appearance
         if (isPropForValidationState) {
           // Remove validation state part from begin of property key, to make clean appearance property.
           // e.g. "required_border_color" -> "border_color".
-          const stateTargetKeySnake = propKeySnake.replace(`${validationStateKey}_`, '');
+          var stateTargetKeySnake = propKeySnake.replace(validationStateKey + "_", '');
           // Convert clean appearance property key to "camelCase" format.
           // e.g. "border_color" -> "borderColor"
-          const stateTargetKey = camelCase(stateTargetKeySnake);
+          var stateTargetKey = camelCase(stateTargetKeySnake);
           // And save the value with a new clean property key
           updatedInputProps[stateTargetKey] = propValue;
           // Else if not already added earlier
@@ -238,147 +429,146 @@ function useValidationAppearanceInputProps(props) {
   return validationAppearanceInputProps;
 }
 
-const defaultFieldProps = {
+var defaultFieldProps = {
   width: 'fill',
   direction: 'vertical',
   labelTextColor: 'surfaceTextPrimary',
   messageTextColor: 'surfaceTextSecondary',
-  errorMessageTextColor: 'errorTextSecondary',
   dividerFill: 'errorPrimary',
+  errorMessageTextColor: 'errorTextSecondary',
   helpTextColor: 'surfaceTextQuaternary',
   requiredMessageTextColor: 'warningTextSecondary',
   showMessage: true
 };
-const defaultFieldSizeS = {
+var defaultFieldSizeS = Object.assign({
   size: 's',
   labelTextSize: 's',
   messageTextSize: 's',
   errorMessageTextSize: 's',
   helpTextSize: 's',
-  requiredMessageTextSize: 's',
-  ...defaultFieldProps
-};
-const defaultFieldSizeM = {
+  requiredMessageTextSize: 's'
+}, defaultFieldProps);
+var defaultFieldSizeM = Object.assign({
   size: 'm',
   labelTextSize: 's',
   messageTextSize: 's',
   errorMessageTextSize: 's',
   helpTextSize: 's',
-  requiredMessageTextSize: 's',
-  ...defaultFieldProps
-};
-const defaultFieldSizeL = {
+  requiredMessageTextSize: 's'
+}, defaultFieldProps);
+var defaultFieldSizeL = Object.assign({
   size: 'l',
   labelTextSize: 's',
   messageTextSize: 's',
   errorMessageTextSize: 's',
   helpTextSize: 's',
-  requiredMessageTextSize: 's',
-  ...defaultFieldProps
-};
-const defaultFieldSizeXL = {
+  requiredMessageTextSize: 's'
+}, defaultFieldProps);
+var defaultFieldSizeXL = Object.assign({
   size: 'xl',
   labelTextSize: 's',
   messageTextSize: 's',
   errorMessageTextSize: 's',
   helpTextSize: 's',
-  requiredMessageTextSize: 's',
-  ...defaultFieldProps
-};
+  requiredMessageTextSize: 's'
+}, defaultFieldProps);
 
 function FieldWrapperBase(props) {
-  const {
-    id,
-    className,
-    dataTour,
-    type,
-    label,
-    labelHidden,
-    labelTextColor,
-    labelTextSize,
-    labelTextSizeMobile,
-    labelTextSizeTablet,
-    labelTextWeight,
-    messageTextSize,
-    desc,
-    descTextColor,
-    descTextSize,
-    descTextWeight,
-    afterItem,
-    beforeItem,
-    dividerDirection,
-    dividerFill,
-    dividerSize,
-    dividerWidth,
-    errorKey,
-    errorMessage,
-    fieldClassName,
-    helpText,
-    helpTextColor,
-    helpTextColorSuccess,
-    helpTextSize,
-    helpTextSizeMobile,
-    helpTextWeight,
-    inputName,
-    inputValue,
-    metaActive,
-    metaError,
-    showDivider,
-    showMessage,
-    tag: Tag = 'div',
-    before,
-    after,
-    isDisabled,
-    isErrorState,
-    isHidden,
-    isRequired,
-    isValidState,
-    children
-  } = props;
-  const formFieldClass = useMemo(() => clsx(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
-  const fieldClass = useMemo(() => clsx(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
-  const sizeClass = useDeviceTargetClass(props, {
-    prefix: 'form-field_size_',
-    propsKey: 'size'
+  var _React$createElement, _React$createElement2;
+  var id = props.id,
+    className = props.className,
+    dataTour = props.dataTour,
+    type = props.type,
+    label = props.label,
+    labelHidden = props.labelHidden,
+    labelTextColor = props.labelTextColor,
+    labelTextSize = props.labelTextSize,
+    labelTextSizeMobile = props.labelTextSizeMobile,
+    labelTextSizeTablet = props.labelTextSizeTablet,
+    labelTextWeight = props.labelTextWeight,
+    messageTextSize = props.messageTextSize,
+    desc = props.desc,
+    descTextColor = props.descTextColor,
+    descTextSize = props.descTextSize,
+    descTextWeight = props.descTextWeight,
+    afterItem = props.afterItem,
+    beforeItem = props.beforeItem,
+    dividerDirection = props.dividerDirection,
+    dividerFill = props.dividerFill,
+    dividerSize = props.dividerSize,
+    dividerWidth = props.dividerWidth,
+    errorKey = props.errorKey,
+    errorMessage = props.errorMessage,
+    fieldClassName = props.fieldClassName,
+    helpText = props.helpText,
+    helpTextColor = props.helpTextColor,
+    helpTextColorSuccess = props.helpTextColorSuccess,
+    helpTextSize = props.helpTextSize,
+    helpTextSizeMobile = props.helpTextSizeMobile,
+    helpTextWeight = props.helpTextWeight,
+    inputName = props.inputName,
+    inputValue = props.inputValue,
+    metaActive = props.metaActive,
+    metaError = props.metaError,
+    showDivider = props.showDivider,
+    showMessage = props.showMessage,
+    _props$tag = props.tag,
+    Tag = _props$tag === void 0 ? "div" : _props$tag,
+    before = props.before,
+    after = props.after,
+    isDisabled = props.isDisabled,
+    isErrorState = props.isErrorState,
+    isHidden = props.isHidden,
+    isRequired = props.isRequired,
+    isValidState = props.isValidState,
+    children = props.children;
+  var formFieldClass = useMemo(function () {
+    return clsx(className, isValidState && "form__item_state_success", isRequired && "form__item_state_required", isDisabled && "form__item_state_disabled", metaActive && "form__item_state_focus", inputValue && "form__item_state_filled", isErrorState && "form__item_state_" + errorKey);
+  }, [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
+  var fieldClass = useMemo(function () {
+    return clsx(fieldClassName, isValidState && fieldClassName + "_state_success", metaActive && fieldClassName + "_state_focus", inputValue && fieldClassName + "_state_filled", isDisabled && fieldClassName + "_state_disabled", isErrorState && fieldClassName + "_state_" + errorKey);
+  }, [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
+  var sizeClass = useDeviceTargetClass(props, {
+    prefix: "form-field_size_",
+    propsKey: "size"
   });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
+  var fillClass = useDeviceTargetClass(props, {
+    prefix: "fill_",
+    propsKey: "fill"
   });
-  const inputFillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'inputFill'
+  var inputFillClass = useDeviceTargetClass(props, {
+    prefix: "fill_",
+    propsKey: "inputFill"
   });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'form-field_shape_',
-    propsKey: 'shape'
+  var shapeClass = useDeviceTargetClass(props, {
+    prefix: "form-field_shape_",
+    propsKey: "shape"
   });
-  const inputShapeClass = useDeviceTargetClass(props, {
-    prefix: 'form-field__item-value_shape_',
-    propsKey: 'inputShape'
+  var inputShapeClass = useDeviceTargetClass(props, {
+    prefix: "form-field__item-value_shape_",
+    propsKey: "inputShape"
   });
-  const directionClass = useDeviceTargetClass(props, {
-    prefix: 'direction_',
-    propsKey: 'direction'
+  var directionClass = useDeviceTargetClass(props, {
+    prefix: "direction_",
+    propsKey: "direction"
   });
-  const widthClass = useDeviceTargetClass(props, {
-    prefix: 'width_',
-    propsKey: 'width'
+  var widthClass = useDeviceTargetClass(props, {
+    prefix: "width_",
+    propsKey: "width"
   });
-  const {
-    styles: formFieldStyles
-  } = useStyles(props);
-  const errorTextSize = props[`${errorKey}MessageTextSize`];
-  const errorTextColor = props[`${errorKey}MessageTextColor`];
-  const errorTextWeight = props[`${errorKey}MessageTextWeight`];
+  var _useStyles = useStyles(props),
+    formFieldStyles = _useStyles.styles;
+  var errorTextSize = props[errorKey + "MessageTextSize"];
+  var errorTextColor = props[errorKey + "MessageTextColor"];
+  var errorTextWeight = props[errorKey + "MessageTextWeight"];
   return /*#__PURE__*/React.createElement(Tag, {
-    className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
-    "data-testid": `${inputName}-field`,
+    className: clsx(formFieldClass, "form__item", "form-field", type && "form-field_type_" + type, sizeClass, fillClass, shapeClass, isDisabled && "form-field_state_disabled", isHidden && "form-field_state_hidden", directionClass, widthClass),
+    "data-testid": inputName + "-field",
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-field__label'),
-    "data-testid": `${inputName}-field-label`,
+    className: clsx("form-field__label"),
+    "data-testid": inputName + "-field-label",
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
@@ -386,17 +576,17 @@ function FieldWrapperBase(props) {
     textWeight: labelTextWeight,
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
-  }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
+  }, label, labelHidden && "\xA0")), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
-    "data-testid": `${inputName}-field-desc`
+    "data-testid": inputName + "-field-desc"
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
     textWeight: descTextWeight
   }, desc)), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-field__content', inputFillClass, inputShapeClass)
+    className: clsx("form-field__content", inputFillClass, inputShapeClass)
   }, /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-field__content-inner', fieldClass)
+    className: clsx("form-field__content-inner", fieldClass)
   }, beforeItem, children, afterItem), showDivider && /*#__PURE__*/React.createElement(Divider, {
     className: "form-field__item-divider",
     width: dividerWidth,
@@ -405,63 +595,52 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
-    "data-testid": `${inputName}-field-message`
-  }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
-    id: `${inputName}-error`,
+    "data-testid": inputName + "-field-message"
+  }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, (_React$createElement = {
+    id: inputName + "-error",
     className: "form-field__message-item form-field__message-item_type-error",
-    dataTestId: `${inputName}-field-message-error`,
-    size: errorTextSize,
-    textColor: errorTextColor,
-    textWeight: errorTextWeight
-  }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
+    dataTestId: inputName + "FieldMessageError"
+  }, _React$createElement["dataTestId"] = inputName + "-field-message-error", _React$createElement.size = errorTextSize, _React$createElement.textColor = errorTextColor, _React$createElement.textWeight = errorTextWeight, _React$createElement), errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, (_React$createElement2 = {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: `${inputName}-field-message-help-text`,
-    size: helpTextSize,
-    textColor: isValidState ? helpTextColorSuccess : helpTextColor,
-    textWeight: helpTextWeight,
-    sizeMobile: helpTextSizeMobile
-  }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
+    dataTestId: inputName + "FieldMessageHelpText"
+  }, _React$createElement2["dataTestId"] = inputName + "-field-message-help-text", _React$createElement2.size = helpTextSize, _React$createElement2.textColor = isValidState ? helpTextColorSuccess : helpTextColor, _React$createElement2.textWeight = helpTextWeight, _React$createElement2.sizeMobile = helpTextSizeMobile, _React$createElement2), helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: `${inputName}field-message-help-text`,
+    dataTestId: inputName + "field-message-help-text",
     size: messageTextSize
-  }, '\u00A0')), after);
+  }, "\xA0")), after);
 }
 function FieldWrapper(props) {
-  const {
-    inputName
-  } = props;
-  const {
-    change
-  } = useForm(); // , mutators
-
-  useEffect(() => {
-    return () => {
+  var inputName = props.inputName;
+  var _useForm = useForm(),
+    change = _useForm.change; // , mutators
+
+  useEffect(function () {
+    return function () {
       change(inputName, undefined);
     };
   }, []);
   return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
 }
 
-const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
+var FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    isDisabled = props.isDisabled,
+    classNameGroupItem = props.classNameGroupItem,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    showMessage = props.showMessage,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     type: "checkbox",
     name: name,
     initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -469,24 +648,23 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback(event => {
+    var onChangeField = useCallback(function (event) {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
       }
     }, [onChange, input.onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -519,7 +697,7 @@ const FormFieldCheckbox = /*#__PURE__*/React.memo(function FormFieldCheckbox(pro
   });
 });
 
-const defaultChipsProps = {
+var defaultChipsProps = {
   appearance: 'surfacePrimary sizeM rounded',
   width: 'fill',
   // useValidationAppearanceInputProps
@@ -532,32 +710,31 @@ const defaultChipsProps = {
 };
 
 function FormFieldChips(props) {
-  const {
-    name,
-    initialValue,
-    classNameGroupItem,
-    emptyMessage,
-    emptyMessageTextColor,
-    emptyMessageTextSize,
-    fieldProps,
-    inputProps,
-    options,
-    showMessage,
-    isDisabled,
-    isRequired,
-    onChange
-  } = props;
-  const {
-    change
-  } = useForm();
+  var name = props.name,
+    initialValue = props.initialValue,
+    classNameGroupItem = props.classNameGroupItem,
+    emptyMessage = props.emptyMessage,
+    emptyMessageTextColor = props.emptyMessageTextColor,
+    emptyMessageTextSize = props.emptyMessageTextSize,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    options = props.options,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
+  var _useForm = useForm(),
+    change = _useForm.change;
 
   // Callback for value changes
-  const onChangeSomeInput = useCallback((inputValue, newOptionValue) => {
-    const updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(selectedValue => selectedValue !== newOptionValue) : [...inputValue, newOptionValue];
+  var onChangeSomeInput = useCallback(function (inputValue, newOptionValue) {
+    var updatedValues = inputValue.includes(newOptionValue) ? inputValue.filter(function (selectedValue) {
+      return selectedValue !== newOptionValue;
+    }) : [].concat(inputValue, [newOptionValue]);
     change(name, updatedValues);
     onChange && onChange(updatedValues);
   }, [change, name, onChange]);
-  useEffect(() => {
+  useEffect(function () {
     initialValue && change(name, initialValue);
     // update the form value only when the initialValue changes, so use disable eslint to ignore the warning
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -565,32 +742,33 @@ function FormFieldChips(props) {
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
-    const {
-      errorKey,
-      errorMessage,
-      successKey,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
-    const activeOptionsList = useMemo(() => {
-      const emptyOptionsList = [{
+    var activeOptionsList = useMemo(function () {
+      var emptyOptionsList = [{
         label: null,
         value: null
       }];
-      if (input?.value) {
-        const currentOptions = options.filter(option => input.value?.includes(option.value));
+      if (input != null && input.value) {
+        var currentOptions = options.filter(function (option) {
+          var _input$value;
+          return (_input$value = input.value) == null ? void 0 : _input$value.includes(option.value);
+        });
         return currentOptions || emptyOptionsList;
       }
       return emptyOptionsList;
@@ -613,22 +791,28 @@ function FormFieldChips(props) {
       direction: "horizontal",
       gap: "1m",
       wrap: "wrap"
-    }, options.map(option => /*#__PURE__*/React.createElement(Chips, Object.assign({
-      className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
-      key: option.value,
-      label: option.label,
-      value: option.value,
-      isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
-      isDisabled: option.isDisabled,
-      onClick: () => onChangeSomeInput(input.value, option.value)
-    }, updatedInputProps)))) : /*#__PURE__*/React.createElement(Text, {
+    }, options.map(function (option) {
+      return /*#__PURE__*/React.createElement(Chips, Object.assign({
+        className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && "form-chips_state_" + errorKey),
+        key: option.value,
+        label: option.label,
+        value: option.value,
+        isActive: activeOptionsList.some(function (activeOption) {
+          return activeOption.value === option.value;
+        }),
+        isDisabled: option.isDisabled,
+        onClick: function onClick() {
+          return onChangeSomeInput(input.value, option.value);
+        }
+      }, updatedInputProps));
+    })) : /*#__PURE__*/React.createElement(Text, {
       size: emptyMessageTextSize,
       textColor: emptyMessageTextColor
     }, emptyMessage));
   });
 }
 
-const defaultChoiceProps = {
+var defaultChoiceProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
   // useValidationAppearanceInputProps
@@ -638,27 +822,24 @@ const defaultChoiceProps = {
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
-const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
-  const {
-    name,
-    initialValue,
-    label,
-    messageType,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps,
-    inputProps,
-    options,
-    placeholder,
-    showMessage,
-    isCheckbox,
-    isRequired,
-    onChange
-  } = props;
-  const {
-    change
-  } = useForm();
-  const setActiveSegment = useCallback((option, isChecked) => {
+var FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    label = props.label,
+    messageType = props.messageType,
+    classNameGroupItem = props.classNameGroupItem,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    options = props.options,
+    placeholder = props.placeholder,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isCheckbox = props.isCheckbox,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
+  var _useForm = useForm(),
+    change = _useForm.change;
+  var setActiveSegment = useCallback(function (option, isChecked) {
     change(name, isChecked && option.value);
     if (onChange) {
       onChange(option.value, name, isChecked);
@@ -667,39 +848,39 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
   return /*#__PURE__*/React.createElement(Field, {
     initialValue: initialValue,
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const activeOption = useMemo(() => {
-      const emptyOption = {
+    var activeOption = useMemo(function () {
+      var emptyOption = {
         value: null,
         label: null
       };
       if (input.value) {
-        const currentOption = options.find(option => option.value === input.value);
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
         return currentOption || emptyOption;
       }
       return emptyOption;
     }, [input.value]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -720,21 +901,21 @@ const FormFieldChoice = /*#__PURE__*/React.memo(function FormFieldChoice(props)
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
-      className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
+      className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && "form-choice_state_" + errorKey),
       name: input.name,
-      isDisabled: isDisabled,
       active: activeOption,
       inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
-      setActiveSegment: setActiveSegment,
+      isDisabled: isDisabled,
       isCheckbox: isCheckbox,
-      isRequired: isRequired
+      isRequired: isRequired,
+      setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
 });
 
-const defaultCodeProps = {
+var defaultCodeProps = {
   appearance: 'defaultPrimary sizeL solid rounded',
   // useValidationAppearanceInputProps
   // Error
@@ -743,26 +924,25 @@ const defaultCodeProps = {
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
-const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
-  const {
-    name,
-    initialValue,
-    label,
-    messageType,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired
-  } = props;
+var FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    label = props.label,
+    messageType = props.messageType,
+    isDisabled = props.isDisabled,
+    classNameGroupItem = props.classNameGroupItem,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    showMessage = props.showMessage,
+    isRequired = props.isRequired;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -770,18 +950,17 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
      * custom React Hook function.
      */
 
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -811,30 +990,28 @@ const FormFieldCode = /*#__PURE__*/React.memo(function FormFieldCode(props) {
   });
 });
 
-const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
-  const {
-    Component,
-    isDisabled,
-    isRequired,
-    name,
-    initialValue,
-    fieldProps = {},
-    classNameGroupItem,
-    showMessage,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
-    onClickClearIcon
-  } = props;
+var FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props) {
+  var Component = props.Component,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    name = props.name,
+    initialValue = props.initialValue,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    classNameGroupItem = props.classNameGroupItem,
+    showMessage = props.showMessage,
+    clearIcon = props.clearIcon,
+    clearIconFill = props.clearIconFill,
+    clearIconFillHover = props.clearIconFillHover,
+    clearIconShape = props.clearIconShape,
+    clearIconSize = props.clearIconSize,
+    onClickClearIcon = props.onClickClearIcon;
   return /*#__PURE__*/React.createElement(Field, {
     initialValue: initialValue,
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -842,17 +1019,16 @@ const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props)
      * custom React Hook function.
      */
 
-    const {
-      isErrorState,
-      isValidState,
-      errorKey,
-      errorMessage
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState,
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage;
+    var updatedInputProps = useValidationAppearanceInputProps({
       validationStateKey: isErrorState ? errorKey : 'success',
       // For "Custom" field we pass all props. Can contain some special props, we don't known.
       inputProps: props
@@ -888,7 +1064,7 @@ const FormFieldCustom = /*#__PURE__*/React.memo(function FormFieldCustom(props)
   });
 });
 
-const defaultDadataInputProps = {
+var defaultDadataInputProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   // useValidationAppearanceInputProps
   // Error
@@ -899,39 +1075,36 @@ const defaultDadataInputProps = {
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
-const FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInput(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps,
-    inputProps,
-    parse,
-    showMessage,
-    token,
-    isRequired,
-    onDadataAutocomplete
-  } = props;
+var FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInput(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    isDisabled = props.isDisabled,
+    classNameGroupItem = props.classNameGroupItem,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    parse = props.parse,
+    showMessage = props.showMessage,
+    token = props.token,
+    isRequired = props.isRequired,
+    onDadataAutocomplete = props.onDadataAutocomplete;
   if (process.env.NODE_ENV === 'development') {
-    const hint = `Check your form config at field "${name}".`;
+    var hint = "Check your form config at field \"" + name + "\".";
     if (!token) {
-      const message = `FormFieldDadataInput: 'token' prop is missing, instead got ${token}.`;
+      var message = "FormFieldDadataInput: 'token' prop is missing, instead got " + token + ".";
       throw new Error(message + '\n' + hint);
     }
     if (!onDadataAutocomplete) {
-      const message = `FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got ${onDadataAutocomplete}.`;
-      throw new Error(message + '\n' + hint);
+      var _message = "FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got " + onDadataAutocomplete + ".";
+      throw new Error(_message + '\n' + hint);
     }
   }
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -939,18 +1112,17 @@ const FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInp
      * custom React Hook function.
      */
 
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -984,7 +1156,7 @@ const FormFieldDadataInput = /*#__PURE__*/React.memo(function FormFieldDadataInp
   });
 });
 
-const defaultDatepickerProps = {
+var defaultDatepickerProps = {
   appearance: 'surfacePrimary sizeS',
   dateFormat: 'dd/MM/yyyy - HH:mm',
   readOnly: false,
@@ -998,23 +1170,22 @@ const defaultDatepickerProps = {
 };
 
 function FormFieldDatePicker(props) {
-  const {
-    name,
-    isDisabled,
-    classNameGroupItem,
-    datePickerProps,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
+  var name = props.name,
+    isDisabled = props.isDisabled,
+    classNameGroupItem = props.classNameGroupItem,
+    datePickerProps = props.datePickerProps,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    showMessage = props.showMessage,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -1022,7 +1193,7 @@ function FormFieldDatePicker(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback((startDate, endDate) => {
+    var onChangeField = useCallback(function (startDate, endDate) {
       if (!datePickerProps.selectsRange) {
         // When we need to save single date, value is date
         // TODO: make object with one date? need to check all forms with FormFieldDatePicker
@@ -1030,26 +1201,25 @@ function FormFieldDatePicker(props) {
       } else {
         // When we need to save range, value is object with two date
         input.onChange({
-          endDate,
-          startDate
+          endDate: endDate,
+          startDate: startDate
         });
       }
       if (onChange) {
         onChange(startDate, endDate);
       }
     }, [input.onChange, onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -1081,7 +1251,7 @@ function FormFieldDatePicker(props) {
   });
 }
 
-const defaultDropzoneProps = {
+var defaultDropzoneProps = {
   fill: 'surfaceSecondary',
   fillHover: 'surfaceTertiary',
   // borderColor: 'surfaceBorderTertiary',
@@ -1103,45 +1273,45 @@ const defaultDropzoneProps = {
   isPreviews: true
 };
 
-const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
-  const {
-    // className, unused
-    maxFiles,
-    maxSize,
-    // size, unused
-    fileErrorText,
-    dropzoneProps = {},
-    hintDescription,
-    hintTitle,
-    inputName,
-    inputValue,
-    showFilename,
-    thumbColumn,
-    isPreviews,
-    onAddFiles,
-    onClickPreview,
-    onDeleteFile
-  } = props;
+var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
+  var maxFiles = props.maxFiles,
+    maxSize = props.maxSize,
+    fileErrorText = props.fileErrorText,
+    _props$dropzoneProps = props.dropzoneProps,
+    dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps,
+    hintDescription = props.hintDescription,
+    hintTitle = props.hintTitle,
+    inputName = props.inputName,
+    inputValue = props.inputValue,
+    showFilename = props.showFilename,
+    thumbColumn = props.thumbColumn,
+    isPreviews = props.isPreviews,
+    onAddFiles = props.onAddFiles,
+    onClickPreview = props.onClickPreview,
+    onDeleteFile = props.onDeleteFile;
 
   // TODO: delete react-final-form things out of here?
-  const {
-    change
-  } = useForm();
-  const [fileError, setFileError] = useState('');
-  const [fileIsLoading, setFileIsLoading] = useState(false);
-  const prevFilesListRef = useRef(null);
-  const filesList = useMemo(() => {
-    const newFilesList = inputValue ? castArray(inputValue) : [];
+  var _useForm = useForm(),
+    change = _useForm.change;
+  var _useState = useState(''),
+    fileError = _useState[0],
+    setFileError = _useState[1];
+  var _useState2 = useState(false),
+    fileIsLoading = _useState2[0],
+    setFileIsLoading = _useState2[1];
+  var prevFilesListRef = useRef(null);
+  var filesList = useMemo(function () {
+    var newFilesList = inputValue ? castArray(inputValue) : [];
     if (prevFilesListRef.current === null) {
       prevFilesListRef.current = newFilesList;
       return newFilesList;
     }
     // keep track of previous state and revoke unused object urls
-    prevFilesListRef.current.forEach(prevFile => {
+    prevFilesListRef.current.forEach(function (prevFile) {
       if (!prevFile.preview) {
         return;
       }
-      const isFileDeleted = !newFilesList.some(newFile => {
+      var isFileDeleted = !newFilesList.some(function (newFile) {
         return newFile.preview === prevFile.preview;
       });
       if (isFileDeleted) {
@@ -1151,10 +1321,10 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     prevFilesListRef.current = newFilesList;
     return newFilesList;
   }, [inputValue]);
-  const changeFormState = useCallback(newFiles => {
+  var changeFormState = useCallback(function (newFiles) {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
-    const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
+    var toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
     change(inputName, toSave);
     return toSave;
   },
@@ -1163,28 +1333,57 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
   [dropzoneProps, change]);
 
   //
-  const convertFiledValueAndSaveAsFiles = useCallback(async currentFilesList => {
-    setFileIsLoading(true);
-    const newFiles = [];
-    for (const fileItem of currentFilesList) {
-      if (typeof fileItem === 'string') {
-        const newFile = await convertToFile(fileItem, isPreviews);
-        if (newFile) {
-          newFiles.push(newFile);
+  var convertFiledValueAndSaveAsFiles = useCallback(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(currentFilesList) {
+      var newFiles, _iterator, _step, fileItem, newFile;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setFileIsLoading(true);
+            newFiles = [];
+            _iterator = _createForOfIteratorHelperLoose(currentFilesList);
+          case 1:
+            if ((_step = _iterator()).done) {
+              _context.n = 5;
+              break;
+            }
+            fileItem = _step.value;
+            if (!(typeof fileItem === 'string')) {
+              _context.n = 3;
+              break;
+            }
+            _context.n = 2;
+            return convertToFile(fileItem, isPreviews);
+          case 2:
+            newFile = _context.v;
+            if (newFile) {
+              newFiles.push(newFile);
+            }
+            _context.n = 4;
+            break;
+          case 3:
+            newFiles.push(fileItem);
+          case 4:
+            _context.n = 1;
+            break;
+          case 5:
+            changeFormState(newFiles);
+            setFileIsLoading(false);
+          case 6:
+            return _context.a(2);
         }
-      } else {
-        newFiles.push(fileItem);
-      }
-    }
-    changeFormState(newFiles);
-    setFileIsLoading(false);
-  }, [isPreviews, changeFormState]);
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [isPreviews, changeFormState]);
 
   // Delete file from dropzone
-  const removeFile = useCallback((event, index) => {
+  var removeFile = useCallback(function (event, index) {
     event.stopPropagation();
     event.preventDefault();
-    const newFiles = [...filesList];
+    var newFiles = [].concat(filesList);
     newFiles.splice(index, 1);
     if (onDeleteFile) {
       onDeleteFile(filesList[index], inputName);
@@ -1196,165 +1395,184 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
   [filesList, changeFormState, onDeleteFile]);
 
   // Create dropzone options
-  const {
-    getInputProps,
-    getRootProps
-  } = useDropzone({
-    maxFiles: maxFiles || 5,
-    maxSize: maxSize || 10485760,
-    // 10mb
-    // 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 [...filesList, ...newFiles];
-    },
-    onDropAccepted: acceptedFiles => {
-      // 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) {
-            file.preview = URL.createObjectURL(file);
+  var _useDropzone = useDropzone(Object.assign({
+      maxFiles: maxFiles || 5,
+      maxSize: maxSize || 10485760
+    }, dropzoneProps, {
+      getFilesFromEvent: function () {
+        var _getFilesFromEvent = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(event) {
+          var result, newFiles;
+          return _regenerator().w(function (_context2) {
+            while (1) switch (_context2.n) {
+              case 0:
+                _context2.n = 1;
+                return fromEvent(event);
+              case 1:
+                result = _context2.v;
+                newFiles = result.filter(function (item) {
+                  return item instanceof File;
+                }); // Add exists and new files to accepted(or rejected)
+                return _context2.a(2, [].concat(filesList, newFiles));
+            }
+          }, _callee2);
+        }));
+        function getFilesFromEvent(_x2) {
+          return _getFilesFromEvent.apply(this, arguments);
+        }
+        return getFilesFromEvent;
+      }(),
+      onDropAccepted: function onDropAccepted(acceptedFiles) {
+        // 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) {
+              file.preview = URL.createObjectURL(file);
+            }
+          });
+        }
+        // Save to form data (including empty when files are not valid)
+        var filesToSave = changeFormState(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 () {
+          if (onAddFiles) {
+            onAddFiles(filesToSave, inputName);
           }
         });
-      }
-      // Save to form data (including empty when files are not valid)
-      const filesToSave = changeFormState(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(() => {
-        if (onAddFiles) {
-          onAddFiles(filesToSave, inputName);
-        }
-      });
-    },
-    onDropRejected: rejectedFiles => {
-      // If dropped files has rejected
-      if (rejectedFiles.length) {
-        let fileErrorMessage = 'Ошибка при добавлении файла';
-        const firstFileErrorItem = rejectedFiles[0].errors[0];
-        if (firstFileErrorItem) {
-          if (firstFileErrorItem.code === ErrorCode.TooManyFiles) {
-            fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
-          } else {
-            fileErrorMessage = firstFileErrorItem.message;
+      },
+      onDropRejected: function onDropRejected(rejectedFiles) {
+        // If dropped files has rejected
+        if (rejectedFiles.length) {
+          var fileErrorMessage = 'Ошибка при добавлении файла';
+          var firstFileErrorItem = rejectedFiles[0].errors[0];
+          if (firstFileErrorItem) {
+            if (firstFileErrorItem.code === ErrorCode.TooManyFiles) {
+              fileErrorMessage = "\u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E\u0435 \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0444\u0430\u0439\u043B\u043E\u0432: " + maxFiles;
+            } else {
+              fileErrorMessage = firstFileErrorItem.message;
+            }
           }
+          // Show error
+          setFileError(fileErrorMessage);
+        } else {
+          // Else clean error
+          setFileError('');
         }
-        // Show error
-        setFileError(fileErrorMessage);
-      } else {
-        // Else clean error
-        setFileError('');
       }
-    }
-  });
-  useEffect(() => {
-    const currentFilesList = castArray(inputValue);
-    const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
+    })),
+    getInputProps = _useDropzone.getInputProps,
+    getRootProps = _useDropzone.getRootProps;
+  useEffect(function () {
+    var currentFilesList = castArray(inputValue);
+    var isNeedToConvert = currentFilesList.some(function (fileItem) {
+      return typeof fileItem === 'string';
+    });
     if (isNeedToConvert) {
       // First time convert value to Files and save to local and form state
       convertFiledValueAndSaveAsFiles(currentFilesList);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue]);
-  useEffect(() => {
+  useEffect(function () {
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return () => {
-      prevFilesListRef.current.forEach(file => {
+    return function () {
+      prevFilesListRef.current.forEach(function (file) {
         if (file.preview) {
           URL.revokeObjectURL(file.preview);
         }
       });
     };
   }, []);
-  const propsGenerator = useDevicePropsGenerator(props);
-  const {
-    fillClass,
-    fillHoverClass,
-    borderColorClass,
-    borderColorHoverClass,
-    borderTypeClass,
-    borderWidthClass,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbAppearance,
-    removeThumbShape,
-    removeThumbText,
-    removeThumbTextWeight,
-    shapeClass,
-    thumbBorderColorClass,
-    thumbBorderColorHoverClass,
-    thumbBorderTypeClass,
-    thumbBorderWidthClass,
-    thumbDirectionClass,
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
+  var propsGenerator = useDevicePropsGenerator(props);
+  var fillClass = propsGenerator.fillClass,
+    fillHoverClass = propsGenerator.fillHoverClass,
+    borderColorClass = propsGenerator.borderColorClass,
+    borderColorHoverClass = propsGenerator.borderColorHoverClass,
+    borderTypeClass = propsGenerator.borderTypeClass,
+    borderWidthClass = propsGenerator.borderWidthClass,
+    errorMessageTextColor = propsGenerator.errorMessageTextColor,
+    errorMessageTextSize = propsGenerator.errorMessageTextSize,
+    errorMessageTextWeight = propsGenerator.errorMessageTextWeight,
+    hintDescriptionTextColor = propsGenerator.hintDescriptionTextColor,
+    hintDescriptionTextSize = propsGenerator.hintDescriptionTextSize,
+    hintDescriptionTextWeight = propsGenerator.hintDescriptionTextWeight,
+    hintDescriptionTextWrap = propsGenerator.hintDescriptionTextWrap,
+    hintTitleTextColor = propsGenerator.hintTitleTextColor,
+    hintTitleTextSize = propsGenerator.hintTitleTextSize,
+    hintTitleTextWeight = propsGenerator.hintTitleTextWeight,
+    hintTitleTextWrap = propsGenerator.hintTitleTextWrap,
+    removeThumbAppearance = propsGenerator.removeThumbAppearance,
+    removeThumbShape = propsGenerator.removeThumbShape,
+    removeThumbText = propsGenerator.removeThumbText,
+    removeThumbTextWeight = propsGenerator.removeThumbTextWeight,
+    shapeClass = propsGenerator.shapeClass,
+    thumbBorderColorClass = propsGenerator.thumbBorderColorClass,
+    thumbBorderColorHoverClass = propsGenerator.thumbBorderColorHoverClass,
+    thumbBorderTypeClass = propsGenerator.thumbBorderTypeClass,
+    thumbBorderWidthClass = propsGenerator.thumbBorderWidthClass,
+    thumbDirectionClass = propsGenerator.thumbDirectionClass,
+    thumbNameTextColor = propsGenerator.thumbNameTextColor,
+    thumbNameTextSize = propsGenerator.thumbNameTextSize,
+    thumbNameTextWeight = propsGenerator.thumbNameTextWeight,
+    thumbNameTextWrap = propsGenerator.thumbNameTextWrap;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
     // className: `form-dropzone__dropzone dropzone  ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`,
-    className: `form-dropzone__dropzone dropzone`
+    className: "form-dropzone__dropzone dropzone"
   }), /*#__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 && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`)
-  }, filesList.map((file, index) => /*#__PURE__*/React.createElement("aside", {
-    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
-    key: file.id || `${file.name}_${index}`
-  }, 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,
-    onClick: event => {
-      onClickPreview && onClickPreview(file, event);
-    }
-  })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__thumb-name"
-  }, /*#__PURE__*/React.createElement(Text, {
-    className: "form-dropzone__thumb-name-inner",
-    size: thumbNameTextSize,
-    textColor: thumbNameTextColor,
-    textWeight: thumbNameTextWeight,
-    textWrap: thumbNameTextWrap
-  }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
-    className: "form-dropzone__thumb-loader"
-  }, /*#__PURE__*/React.createElement(Loader, {
-    width: "fill",
-    height: "fill"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__thumb-remove')
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "form-dropzone__thumb-remove-text",
-    appearance: removeThumbAppearance,
-    label: removeThumbText || 'Удалить',
-    labelTextWeight: removeThumbTextWeight,
-    shape: removeThumbShape,
-    onClick: event => removeFile(event, index)
-  })))), !filesList.length ? /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && "form-dropzone__dropzone-wrapper_column_" + thumbColumn, fillClass && "fill_" + fillClass, fillHoverClass && "fill_hover_" + fillHoverClass, borderWidthClass && "border-width_" + borderWidthClass, borderColorClass && "border-color_" + borderColorClass, borderColorHoverClass && "border-color_hover_" + borderColorHoverClass, borderTypeClass && "border_type_" + borderTypeClass, shapeClass && "shape_" + shapeClass)
+  }, filesList.map(function (file, index) {
+    return /*#__PURE__*/React.createElement("aside", {
+      className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+      key: file.id || file.name + "_" + index
+    }, 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,
+      onClick: function onClick(event) {
+        onClickPreview && onClickPreview(file, event);
+      }
+    })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      size: thumbNameTextSize,
+      textColor: thumbNameTextColor,
+      textWeight: thumbNameTextWeight,
+      textWrap: thumbNameTextWrap
+    }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React.createElement("div", {
+      className: "form-dropzone__thumb-name"
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "form-dropzone__thumb-name-inner",
+      size: thumbNameTextSize,
+      textColor: thumbNameTextColor,
+      textWeight: thumbNameTextWeight,
+      textWrap: thumbNameTextWrap
+    }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
+      className: "form-dropzone__thumb-loader"
+    }, /*#__PURE__*/React.createElement(Loader, {
+      width: "fill",
+      height: "fill"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: clsx('form-dropzone__thumb-remove')
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: "form-dropzone__thumb-remove-text",
+      appearance: removeThumbAppearance,
+      label: removeThumbText || 'Удалить',
+      labelTextWeight: removeThumbTextWeight,
+      shape: removeThumbShape,
+      onClick: function onClick(event) {
+        return removeFile(event, index);
+      }
+    })));
+  }), !filesList.length ? /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__hint"
   }, /*#__PURE__*/React.createElement(Text, {
     className: "form-dropzone__hint-title",
@@ -1391,67 +1609,101 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     textWeight: errorMessageTextWeight
   }, fileError)));
 });
-async function getFileByURL(url) {
-  try {
-    const response = await axios({
-      url: 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) {
-      filename = url.split('/').at(-1);
-      // 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(_x3) {
+  return _getFileByURL.apply(this, arguments);
 }
-async function convertToFile(inputValue, isPreviews) {
-  let newFile = null;
-
-  // Download image by url and save as File instance
-  const isURL = typeof inputValue === 'string' && inputValue.includes('/');
-  if (inputValue.image || isURL) {
-    newFile = await getFileByURL(inputValue.image || inputValue);
-    if (newFile) {
-      setFileDataURL(newFile);
-    }
-  }
-
-  // Convert dataURL to File instance
-  if (inputValue.dataURL) {
-    newFile = createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
-    newFile.dataURL = inputValue.dataURL;
-  }
+function _getFileByURL() {
+  _getFileByURL = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(url) {
+    var _response$headers$con, response, blobObject, dirtyFilename, filename, _t;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.p = _context3.n) {
+        case 0:
+          _context3.p = 0;
+          _context3.n = 1;
+          return axios({
+            url: url,
+            responseType: 'blob'
+          });
+        case 1:
+          response = _context3.v;
+          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) {
+            filename = url.split('/').at(-1);
+            // const typeParts = blobObject.type.split('/')
+            // const fileType = typeParts[typeParts.length - 1]
+            // filename = `${new Date().getTime()}.${fileType}`
+          }
+          return _context3.a(2, new File([blobObject], filename, {
+            type: blobObject.type
+          }));
+        case 2:
+          _context3.p = 2;
+          _t = _context3.v;
+          console.log('error: ', _t);
+          return _context3.a(2, null);
+      }
+    }, _callee3, null, [[0, 2]]);
+  }));
+  return _getFileByURL.apply(this, arguments);
+}
+function convertToFile(_x4, _x5) {
+  return _convertToFile.apply(this, arguments);
+}
+function _convertToFile() {
+  _convertToFile = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(inputValue, isPreviews) {
+    var newFile, isURL;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          newFile = null; // Download image by url and save as File instance
+          isURL = typeof inputValue === 'string' && inputValue.includes('/');
+          if (!(inputValue.image || isURL)) {
+            _context4.n = 2;
+            break;
+          }
+          _context4.n = 1;
+          return getFileByURL(inputValue.image || inputValue);
+        case 1:
+          newFile = _context4.v;
+          if (newFile) {
+            setFileDataURL(newFile);
+          }
+        case 2:
+          // Convert dataURL to File instance
+          if (inputValue.dataURL) {
+            newFile = createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
+            newFile.dataURL = inputValue.dataURL;
+          }
 
-  // Save new File to state
-  if (newFile) {
-    newFile.id = inputValue.id;
-    if (isPreviews) {
-      newFile.preview = URL.createObjectURL(newFile);
-    }
-  }
-  return newFile;
+          // Save new File to state
+          if (newFile) {
+            newFile.id = inputValue.id;
+            if (isPreviews) {
+              newFile.preview = URL.createObjectURL(newFile);
+            }
+          }
+          return _context4.a(2, newFile);
+      }
+    }, _callee4);
+  }));
+  return _convertToFile.apply(this, arguments);
 }
 function setFileDataURL(file, resolve) {
-  resolve = resolve || (() => {});
+  resolve = resolve || function () {};
   // Init reader and save his file
-  const reader = new FileReader();
+  var reader = new FileReader();
   reader._readedFile = file;
 
   // Set handlers
-  reader.onabort = () => resolve();
-  reader.onerror = () => resolve();
-  reader.onload = event => {
+  reader.onabort = function () {
+    return resolve();
+  };
+  reader.onerror = function () {
+    return resolve();
+  };
+  reader.onload = function (event) {
     event.target._readedFile.dataURL = reader.result;
     resolve();
   };
@@ -1463,70 +1715,67 @@ function setFileDataURL(file, resolve) {
   }
 }
 
-const FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(props) {
-  const {
-    className,
-    name,
-    width,
-    maxFiles,
-    maxSize,
-    label,
-    fileErrorText,
-    classNameGroupItem,
-    dropzoneProps,
-    fieldProps,
-    hintDescription,
-    hintTitle,
-    showFilename,
-    showMessage,
-    isPreviews,
-    isRequired,
-    onAddFiles,
-    onClickPreview,
-    onDeleteFile
-  } = props;
-  const propsGenerator = useDevicePropsGenerator(props);
-  const {
-    size,
-    fill,
-    fillHover,
-    labelTextColor,
-    borderColorHover,
-    borderType,
-    borderWidth,
-    errorMessageTextColor,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    hintDescriptionTextColor,
-    hintDescriptionTextSize,
-    hintDescriptionTextWeight,
-    hintDescriptionTextWrap,
-    hintTitleTextColor,
-    hintTitleTextSize,
-    hintTitleTextWeight,
-    hintTitleTextWrap,
-    removeThumbAppearance,
-    removeThumbShape,
-    removeThumbText,
-    removeThumbTextWeight,
-    shape,
-    thumbBorderColor,
-    thumbBorderColorHover,
-    thumbBorderType,
-    thumbBorderWidth,
-    thumbColumn = 1,
-    thumbDirection = 'vertical',
-    thumbNameTextColor,
-    thumbNameTextSize,
-    thumbNameTextWeight,
-    thumbNameTextWrap
-  } = propsGenerator;
+var FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(props) {
+  var className = props.className,
+    name = props.name,
+    width = props.width,
+    maxFiles = props.maxFiles,
+    maxSize = props.maxSize,
+    label = props.label,
+    fileErrorText = props.fileErrorText,
+    classNameGroupItem = props.classNameGroupItem,
+    dropzoneProps = props.dropzoneProps,
+    fieldProps = props.fieldProps,
+    hintDescription = props.hintDescription,
+    hintTitle = props.hintTitle,
+    showFilename = props.showFilename,
+    showMessage = props.showMessage,
+    isPreviews = props.isPreviews,
+    isRequired = props.isRequired,
+    onAddFiles = props.onAddFiles,
+    onClickPreview = props.onClickPreview,
+    onDeleteFile = props.onDeleteFile;
+  var propsGenerator = useDevicePropsGenerator(props);
+  var size = propsGenerator.size,
+    fill = propsGenerator.fill,
+    fillHover = propsGenerator.fillHover,
+    labelTextColor = propsGenerator.labelTextColor,
+    borderColorHover = propsGenerator.borderColorHover,
+    borderType = propsGenerator.borderType,
+    borderWidth = propsGenerator.borderWidth,
+    errorMessageTextColor = propsGenerator.errorMessageTextColor,
+    errorMessageTextSize = propsGenerator.errorMessageTextSize,
+    errorMessageTextWeight = propsGenerator.errorMessageTextWeight,
+    hintDescriptionTextColor = propsGenerator.hintDescriptionTextColor,
+    hintDescriptionTextSize = propsGenerator.hintDescriptionTextSize,
+    hintDescriptionTextWeight = propsGenerator.hintDescriptionTextWeight,
+    hintDescriptionTextWrap = propsGenerator.hintDescriptionTextWrap,
+    hintTitleTextColor = propsGenerator.hintTitleTextColor,
+    hintTitleTextSize = propsGenerator.hintTitleTextSize,
+    hintTitleTextWeight = propsGenerator.hintTitleTextWeight,
+    hintTitleTextWrap = propsGenerator.hintTitleTextWrap,
+    removeThumbAppearance = propsGenerator.removeThumbAppearance,
+    removeThumbShape = propsGenerator.removeThumbShape,
+    removeThumbText = propsGenerator.removeThumbText,
+    removeThumbTextWeight = propsGenerator.removeThumbTextWeight,
+    shape = propsGenerator.shape,
+    thumbBorderColor = propsGenerator.thumbBorderColor,
+    thumbBorderColorHover = propsGenerator.thumbBorderColorHover,
+    thumbBorderType = propsGenerator.thumbBorderType,
+    thumbBorderWidth = propsGenerator.thumbBorderWidth,
+    _propsGenerator$thumb = propsGenerator.thumbColumn,
+    thumbColumn = _propsGenerator$thumb === void 0 ? 1 : _propsGenerator$thumb,
+    _propsGenerator$thumb2 = propsGenerator.thumbDirection,
+    thumbDirection = _propsGenerator$thumb2 === void 0 ? 'vertical' : _propsGenerator$thumb2,
+    thumbNameTextColor = propsGenerator.thumbNameTextColor,
+    thumbNameTextSize = propsGenerator.thumbNameTextSize,
+    thumbNameTextWeight = propsGenerator.thumbNameTextWeight,
+    thumbNameTextWrap = propsGenerator.thumbNameTextWrap;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -1534,17 +1783,16 @@ const FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(p
      * custom React Hook function.
      */
 
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: props,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
@@ -1623,7 +1871,7 @@ const FormFieldFileInput = /*#__PURE__*/React.memo(function FormFieldFileInput(p
   });
 });
 
-const defaultGroupProps = {
+var defaultGroupProps = {
   width: 'fill',
   labelTextSize: 's',
   messageTextColor: 'surfaceTextPrimary',
@@ -1635,63 +1883,59 @@ const defaultGroupProps = {
   requiredMessageTextSize: 's'
 };
 
-const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
-  const {
-    dataTour,
-    className,
-    name,
-    title,
-    titleTextColor,
-    titleTextSize,
-    titleTextWeight,
-    label,
-    labelTextColor,
-    labelTextSize,
-    labelTextWeight,
-    message,
-    messageTextColor,
-    messageTextSize,
-    messageTextWeight,
-    column,
-    showGroupMessage,
-    before,
-    after,
-    isHidden,
-    children
-  } = props;
+var FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
+  var dataTour = props.dataTour,
+    className = props.className,
+    name = props.name,
+    title = props.title,
+    titleTextColor = props.titleTextColor,
+    titleTextSize = props.titleTextSize,
+    titleTextWeight = props.titleTextWeight,
+    label = props.label,
+    labelTextColor = props.labelTextColor,
+    labelTextSize = props.labelTextSize,
+    labelTextWeight = props.labelTextWeight,
+    message = props.message,
+    messageTextColor = props.messageTextColor,
+    messageTextSize = props.messageTextSize,
+    messageTextWeight = props.messageTextWeight,
+    column = props.column,
+    showGroupMessage = props.showGroupMessage,
+    before = props.before,
+    after = props.after,
+    isHidden = props.isHidden,
+    children = props.children;
 
   // @ts-expect-error
-  const {
-    styles: styles
-  } = useStyles(props);
+  var _useStyles = useStyles(props),
+    styles = _useStyles.styles;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState
-    } = useFieldValidationState({
-      fieldProps: props,
-      // or fieldProps?
-      input: input,
-      meta: meta
-    });
-    const updatedProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: props,
+        // or fieldProps?
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState;
+    var updatedProps = useValidationAppearanceInputProps({
       inputProps: props,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
+      className: clsx('form__group', className, isHidden && 'form__group_hidden', column && "form__group_column_" + column),
+      "data-test-id": name + "Group",
       "data-tour": dataTour,
       style: styles
     }, /*#__PURE__*/React.createElement("div", {
@@ -1701,34 +1945,38 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
     }, /*#__PURE__*/React.createElement(Title, {
       size: titleTextSize,
       textColor: titleTextColor,
-      textWeight: titleTextWeight
+      textWeight: titleTextWeight,
+      dataTestId: name + "GroupTitle"
     }, title)), label && /*#__PURE__*/React.createElement("div", {
       className: "form__group-label"
     }, /*#__PURE__*/React.createElement(Text, {
       size: labelTextSize,
       textColor: labelTextColor,
-      textWeight: labelTextWeight
+      textWeight: labelTextWeight,
+      dataTestId: name + "GroupLabel"
     }, label)), /*#__PURE__*/React.createElement("div", {
       className: "form__group-items"
     }, children), after), showGroupMessage && /*#__PURE__*/React.createElement(React.Fragment, null, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
-      id: `${name}-error`,
-      className: `form__group-message form__group-message_type-${errorKey}`,
+      id: name + "-error",
+      className: "form__group-message form__group-message_type-" + errorKey,
       size: updatedProps.messageTextSize,
       textColor: updatedProps.messageTextColor,
-      textWeight: updatedProps.messageTextWeight
+      textWeight: updatedProps.messageTextWeight,
+      dataTestId: name + "GroupMessageError"
     }, errorMessage), Boolean(message) && (!isErrorState || !errorMessage) && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize,
       textColor: messageTextColor,
-      textWeight: messageTextWeight
+      textWeight: messageTextWeight,
+      dataTestId: name + "GroupMessage"
     }, message), !isErrorState && !message && /*#__PURE__*/React.createElement(Text, {
       className: "form__group-message",
       size: messageTextSize
-    }, '\u00A0')));
+    }, "\xA0")));
   });
 });
 
-const defaultInputProps = {
+var defaultInputProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
   // useValidationAppearanceInputProps
@@ -1740,33 +1988,32 @@ const defaultInputProps = {
   successAppearance: 'successPrimary sizeM solid rounded'
 };
 
-const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
-  const {
-    name,
-    initialValue,
-    classNameGroupItem,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
-    fieldProps = {},
-    inputProps = {},
-    parse,
-    showMessage,
-    isDisabled,
-    isRequired,
-    onClickClearIcon,
-    onChange
-  } = props;
+var FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    classNameGroupItem = props.classNameGroupItem,
+    clearIcon = props.clearIcon,
+    clearIconFill = props.clearIconFill,
+    clearIconFillHover = props.clearIconFillHover,
+    clearIconShape = props.clearIconShape,
+    clearIconSize = props.clearIconSize,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    parse = props.parse,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    onClickClearIcon = props.onClickClearIcon,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -1774,34 +2021,33 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback(event => {
+    var onChangeField = useCallback(function (event) {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
       }
     }, [onChange, input.onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      successKey,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
+      className: clsx("form-field_input", "form__item_input", classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-input",
       inputName: input.name,
-      inputValue: input.value || '',
+      inputValue: input.value || "",
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage,
@@ -1810,12 +2056,12 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      dataTestId: `${input.name}-field-input`,
+      className: clsx(meta.active && "input_state_focus", meta.error && meta.touched && "input_state_" + errorKey),
+      dataTestId: input.name + "-field-input",
       type: "text",
       name: input.name,
       autoComplete: "nope",
-      value: input.value || '',
+      value: input.value || "",
       isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
@@ -1825,58 +2071,57 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       size: clearIconSize,
       iconFill: clearIconFill,
       iconFillHover: clearIconFillHover,
-      imageSrc: typeof clearIcon === 'string' && clearIcon,
+      imageSrc: typeof clearIcon === "string" && clearIcon,
       shape: clearIconShape,
-      SvgImage: typeof clearIcon !== 'string' && clearIcon,
+      SvgImage: typeof clearIcon !== "string" && clearIcon,
       onClick: onClickClearIcon
     }));
   });
 });
 
-const defaultInputNumberProps = {
+var defaultInputNumberProps = {
   appearance: 'surfaceSecondary sizeM solid rounded',
   width: 'fill'
 };
 
-const FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumber(props) {
-  const {
-    type = 'custom',
-    name,
-    initialValue,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    parse,
-    showMessage,
-    isDisabled,
-    isRequired,
-    onChange
-  } = props;
+var FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumber(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'custom' : _props$type,
+    name = props.name,
+    initialValue = props.initialValue,
+    classNameGroupItem = props.classNameGroupItem,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    parse = props.parse,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
-  }, function Render({
-    input,
-    meta
-  }) {
-    const onChangeField = useCallback(event => {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
+    var onChangeField = useCallback(function (event) {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value);
       }
     }, [onChange, input.onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
@@ -1894,8 +2139,8 @@ const FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumb
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(InputNumber, Object.assign({
-      className: clsx(meta.active && 'input_state_focus', (meta.submitFailed || meta.touched) && meta.error && `input_state_${errorKey}`),
-      dataTestId: `${input.name}FieldInputNumber`,
+      className: clsx(meta.active && 'input_state_focus', (meta.submitFailed || meta.touched) && meta.error && "input_state_" + errorKey),
+      dataTestId: input.name + "FieldInputNumber",
       type: type,
       name: input.name,
       value: input.value || 0,
@@ -1904,32 +2149,31 @@ const FormFieldInputNumber = /*#__PURE__*/React.memo(function FormFieldInputNumb
   });
 });
 
-const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput(props) {
-  const {
-    name,
-    initialValue,
-    classNameGroupItem,
-    clearIcon,
-    clearIconFill,
-    clearIconFillHover,
-    clearIconShape,
-    clearIconSize,
-    fieldProps = {},
-    inputProps = {},
-    optionsMask,
-    showMessage,
-    unmasked,
-    isDisabled,
-    isRequired,
-    onClickClearIcon
-  } = props;
+var FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInput(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    classNameGroupItem = props.classNameGroupItem,
+    clearIcon = props.clearIcon,
+    clearIconFill = props.clearIconFill,
+    clearIconFillHover = props.clearIconFillHover,
+    clearIconShape = props.clearIconShape,
+    clearIconSize = props.clearIconSize,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    optionsMask = props.optionsMask,
+    showMessage = props.showMessage,
+    unmasked = props.unmasked,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    onClickClearIcon = props.onClickClearIcon;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -1937,36 +2181,34 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
      * custom React Hook function.
      */
 
-    const {
-      ref,
-      unmaskedValue,
-      value,
-      setUnmaskedValue
-    } = useIMask(optionsMask, {
-      defaultValue: initialValue,
-      onAccept: (_newValue, event, element) => {
-        if (element) {
-          input.onChange(event._unmaskedValue);
+    var _useIMask = useIMask(optionsMask, {
+        defaultValue: initialValue,
+        onAccept: function onAccept(_newValue, event, element) {
+          if (element) {
+            input.onChange(event._unmaskedValue);
+          }
         }
-      }
-    });
-    useEffect(() => {
+      }),
+      ref = _useIMask.ref,
+      unmaskedValue = _useIMask.unmaskedValue,
+      value = _useIMask.value,
+      setUnmaskedValue = _useIMask.setUnmaskedValue;
+    useEffect(function () {
       if (input.value !== unmaskedValue) {
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
     }, [input.value]);
-    const {
-      errorKey,
-      errorMessage,
-      successKey,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -1985,7 +2227,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
-      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_" + errorKey),
       ref: ref,
       value: value,
       onBlur: input.onBlur,
@@ -2003,7 +2245,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
   });
 });
 
-const defaultPasswordProps = {
+var defaultPasswordProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   // useValidationAppearanceInputProps
   // Error
@@ -2014,27 +2256,24 @@ const defaultPasswordProps = {
   successAppearance: 'successPrimary sizeM solid rounded'
 };
 
-const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
-  const {
-    name,
-    initialValue,
-    classNameGroupItem,
-    fieldProps,
-    inputProps,
-    parse,
-    showMessage,
-    isDisabled,
-    isRequired,
-    onChange
-  } = props;
+var FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(props) {
+  var name = props.name,
+    initialValue = props.initialValue,
+    classNameGroupItem = props.classNameGroupItem,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    parse = props.parse,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue,
     parse: parse
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -2042,34 +2281,33 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback(event => {
+    var onChangeField = useCallback(function (event) {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.value, input.name);
       }
     }, [onChange, input.onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      successKey,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_input-password', 'form__item_input-password', classNameGroupItem),
+      className: clsx("form-field_input-password", "form__item_input-password", classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       fieldClassName: "form-password",
       inputName: input.name,
-      inputValue: input.value || '',
+      inputValue: input.value || "",
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage,
@@ -2078,11 +2316,11 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(InputPassword, Object.assign({
-      className: clsx(meta.active && 'input-password_state_focus', meta.error && meta.touched && `input-password_state_${errorKey}`),
-      dataTestId: `${input.name}-field-input-password`,
+      className: clsx(meta.active && "input-password_state_focus", meta.error && meta.touched && "input-password_state_" + errorKey),
+      dataTestId: input.name + "-field-input-password",
       name: input.name,
       autoComplete: "nope",
-      value: input.value || '',
+      value: input.value || "",
       isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: onChangeField,
@@ -2091,20 +2329,18 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
   });
 });
 
-const defaultRadioProps = {
+var defaultRadioProps = {
   appearance: 'defaultPrimary sizeM solid circular'
 };
 
 function FormFieldRadioGroupList(props) {
-  const {
-    input,
-    inputProps,
-    options,
-    onChange
-  } = props;
+  var input = props.input,
+    inputProps = props.inputProps,
+    options = props.options,
+    onChange = props.onChange;
 
   // Callback for value changes
-  const onChangeSomeInput = useCallback(value => {
+  var onChangeSomeInput = useCallback(function (value) {
     // Save to form values
     input.onChange(value);
     if (onChange) {
@@ -2114,44 +2350,47 @@ function FormFieldRadioGroupList(props) {
   }, [input, onChange]);
 
   // Handle for radio inputs
-  const onChangeRadio = useCallback(event => {
+  var onChangeRadio = useCallback(function (event) {
     if (event.target.checked) {
       onChangeSomeInput(event.target.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => /*#__PURE__*/React.createElement(Radio, Object.assign({
-    className: "form-radio__item",
-    key: option.value,
-    type: "radio",
-    name: input.name,
-    label: option.label,
-    checked: option.value === input.value,
-    value: option.value,
-    onBlur: input.onBlur,
-    onChange: onChangeRadio,
-    onFocus: input.onFocus
-  }, inputProps))));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(Radio, Object.assign({
+      className: "form-radio__item",
+      key: option.value,
+      type: "radio",
+      name: input.name,
+      label: option.label,
+      checked: option.value === input.value,
+      value: option.value,
+      onBlur: input.onBlur,
+      onChange: onChangeRadio,
+      onFocus: input.onFocus
+    }, inputProps));
+  }));
 }
 
-const FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup(props) {
-  const {
-    name,
-    isDisabled,
-    editableProps = {},
-    fieldProps = {},
-    inputProps = {},
-    options = [],
-    classNameGroupItem,
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
+var FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup(props) {
+  var name = props.name,
+    isDisabled = props.isDisabled,
+    _props$editableProps = props.editableProps,
+    editableProps = _props$editableProps === void 0 ? {} : _props$editableProps,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    classNameGroupItem = props.classNameGroupItem,
+    showMessage = props.showMessage,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -2159,17 +2398,16 @@ const FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup
      * custom React Hook function.
      */
 
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
@@ -2198,7 +2436,7 @@ const FormFieldRadioGroup = /*#__PURE__*/React.memo(function FormFieldRadioGroup
   });
 });
 
-const defaultSegmentedProps = {
+var defaultSegmentedProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
   // useValidationAppearanceInputProps
@@ -2209,27 +2447,23 @@ const defaultSegmentedProps = {
 };
 
 function FormFieldSegmented(props) {
-  const {
-    name,
-    isDisabled,
-    fieldProps,
-    inputProps,
-    options,
-    showMessage,
-    isRequired
-  } = props;
-  const {
-    change
-  } = useForm();
-  const setActiveSegment = useCallback(option => {
+  var name = props.name,
+    isDisabled = props.isDisabled,
+    fieldProps = props.fieldProps,
+    inputProps = props.inputProps,
+    options = props.options,
+    showMessage = props.showMessage,
+    isRequired = props.isRequired;
+  var _useForm = useForm(),
+    change = _useForm.change;
+  var setActiveSegment = useCallback(function (option) {
     change(name, option.value);
   }, [change]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -2237,29 +2471,30 @@ function FormFieldSegmented(props) {
      * custom React Hook function.
      */
 
-    const activeOption = useMemo(() => {
-      const emptyOption = {
+    var activeOption = useMemo(function () {
+      var emptyOption = {
         label: null,
         value: null
       };
       if (input.value) {
-        const currentOption = options.find(option => option.value === input.value);
+        var currentOption = options.find(function (option) {
+          return option.value === input.value;
+        });
         return currentOption || emptyOption;
       }
       return emptyOption;
     }, [input.value]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -2286,7 +2521,7 @@ function FormFieldSegmented(props) {
   });
 }
 
-const defaultSelectProps = {
+var defaultSelectProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   // useValidationAppearanceInputProps
   // Error
@@ -2298,12 +2533,12 @@ const defaultSelectProps = {
 };
 
 function getDefaultValue(options, selectValue) {
-  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 = [];
+  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 = [];
     if (item.options) {
       childOptions = getDefaultValue(item.options, selectValue);
     }
@@ -2315,38 +2550,39 @@ function getDefaultValue(options, selectValue) {
   });
   return result;
 }
-const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props) {
-  const {
-    isDisabled,
-    isRequired,
-    classNameGroupItem,
-    fieldProps,
-    initialValue,
-    name,
-    options = [],
-    selectProps,
-    selectRef,
-    showMessage,
-    onChange,
-    onInputChange
-  } = props;
+var FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props) {
+  var isDisabled = props.isDisabled,
+    isRequired = props.isRequired,
+    classNameGroupItem = props.classNameGroupItem,
+    fieldProps = props.fieldProps,
+    initialValue = props.initialValue,
+    name = props.name,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    selectProps = props.selectProps,
+    selectRef = props.selectRef,
+    showMessage = props.showMessage,
+    onChange = props.onChange,
+    onInputChange = props.onInputChange;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     initialValue: initialValue
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
      * React Hooks must be called in a React function component or a
      * custom React Hook function.
      */
-    const [selectedOptions, setSelectedOptions] = useState(null);
-    const defaultValue = useMemo(() => {
-      const optionsValues = getDefaultValue(options, input.value);
-      if (!optionsValues.length && input.value?.length) {
+    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) {
         optionsValues.push({
           label: input.value,
           value: input.value
@@ -2354,32 +2590,33 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
       }
       return optionsValues;
     }, [input.value]);
-    const onChangeField = useCallback(value => {
+    var onChangeField = useCallback(function (value) {
       input.onChange(value);
       if (onChange) {
         onChange(value, input.name);
       }
     }, [onChange, input.onChange]);
-    const onChangeValue = useCallback((option, actionMeta) => {
-      const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
+    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;
       setSelectedOptions(option);
       onChangeField(value);
     }, [onChangeField]);
-    useEffect(() => {
+    useEffect(function () {
       setSelectedOptions(defaultValue);
     }, [defaultValue]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedSelectProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedSelectProps = useValidationAppearanceInputProps({
       inputProps: selectProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -2401,7 +2638,7 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
       className: "form-select-item",
       ref: selectRef,
       isDisabled: isDisabled,
-      instanceId: `id_${input.name}`,
+      instanceId: "id_" + input.name,
       options: options,
       value: selectedOptions,
       onChange: onChangeValue,
@@ -2410,31 +2647,30 @@ const FormFieldSelect = /*#__PURE__*/React.memo(function FormFieldSelect(props)
   });
 });
 
-const defaultSwitchProps = {
+var defaultSwitchProps = {
   appearance: 'defaultPrimary sizeL solid rounded',
   errorAppearance: 'errorPrimary sizeL solid rounded',
   successAppearance: 'successPrimary sizeL solid rounded',
   requiredAppearance: 'requirePrimary sizeL solid rounded'
 };
 
-const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
-  const {
-    name,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isRequired,
-    onChange
-  } = props;
+var FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props) {
+  var name = props.name,
+    isDisabled = props.isDisabled,
+    classNameGroupItem = props.classNameGroupItem,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    showMessage = props.showMessage,
+    isRequired = props.isRequired,
+    onChange = props.onChange;
   return /*#__PURE__*/React.createElement(Field, {
     type: "checkbox",
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -2442,24 +2678,23 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
      * custom React Hook function.
      */
 
-    const onChangeField = useCallback(event => {
+    var onChangeField = useCallback(function (event) {
       input.onChange(event);
       if (onChange) {
         onChange(event.target.checked, input.name);
       }
     }, [onChange, input.onChange]);
-    const {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      successKey = _useFieldValidationSt.successKey,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
@@ -2491,7 +2726,7 @@ const FormFieldSwitch = /*#__PURE__*/React.memo(function FormFieldSwitch(props)
   });
 });
 
-const defaultTextareaProps = {
+var defaultTextareaProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   // useValidationAppearanceInputProps
   // Error
@@ -2502,22 +2737,21 @@ const defaultTextareaProps = {
   requiredAppearance: 'requirePrimary sizeM solid rounded'
 };
 
-const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
-  const {
-    name,
-    classNameGroupItem,
-    fieldProps = {},
-    inputProps = {},
-    showMessage,
-    isDisabled,
-    isRequired
-  } = props;
+var FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
+  var name = props.name,
+    classNameGroupItem = props.classNameGroupItem,
+    _props$fieldProps = props.fieldProps,
+    fieldProps = _props$fieldProps === void 0 ? {} : _props$fieldProps,
+    _props$inputProps = props.inputProps,
+    inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
+    showMessage = props.showMessage,
+    isDisabled = props.isDisabled,
+    isRequired = props.isRequired;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
-  }, function Render({
-    input,
-    meta
-  }) {
+  }, function Render(_ref) {
+    var input = _ref.input,
+      meta = _ref.meta;
     /** Note:
      * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
      * React Hooks cannot be called inside a callback.
@@ -2525,26 +2759,25 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
      * custom React Hook function.
      */
 
-    const {
-      errorKey,
-      errorMessage,
-      successKey,
-      isErrorState,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
+    var _useFieldValidationSt = useFieldValidationState({
+        fieldProps: fieldProps,
+        input: input,
+        meta: meta
+      }),
+      errorKey = _useFieldValidationSt.errorKey,
+      errorMessage = _useFieldValidationSt.errorMessage,
+      successKey = _useFieldValidationSt.successKey,
+      isErrorState = _useFieldValidationSt.isErrorState,
+      isValidState = _useFieldValidationSt.isValidState;
+    var updatedInputProps = useValidationAppearanceInputProps({
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
-      className: clsx('form-field_textarea', 'form__item_textarea', classNameGroupItem),
+      className: clsx("form-field_textarea", "form__item_textarea", classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      fieldClassName: 'form-textarea',
+      fieldClassName: "form-textarea",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
@@ -2555,11 +2788,11 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
-      className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && `textarea_state_${errorKey}`),
-      dataTestId: `${input.name}-field-textarea`,
+      className: clsx(meta.active && "textarea_state_focus", meta.error && meta.touched && "textarea_state_" + errorKey),
+      dataTestId: input.name + "-field-textarea",
       name: input.name,
       autoComplete: "nope",
-      value: input.value || '',
+      value: input.value || "",
       isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: input.onChange,
@@ -2568,7 +2801,7 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
   });
 });
 
-const formTypes = {
+var formTypes = {
   custom: 'custom',
   password: 'password',
   code: 'code',
@@ -2587,7 +2820,7 @@ const formTypes = {
   radioGroup: 'radioGroup',
   segmented: 'segmented',
   select: 'select',
-  switch: 'switch'
+  "switch": 'switch'
 };
 function generateField(field, config, props) {
   switch (field.type) {
@@ -2621,7 +2854,7 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
-    case formTypes.switch:
+    case formTypes["switch"]:
       {
         return /*#__PURE__*/React.createElement(FormFieldSwitch, Object.assign({
           key: config.key
@@ -2697,12 +2930,13 @@ function generateField(field, config, props) {
       {
         return /*#__PURE__*/React.createElement(FormBlockGroup, Object.assign({
           key: config.key
-        }, field, props), Object.entries(field.group).map(([key, value]) => {
-          const groupProps = {
-            ...value,
+        }, field, props), Object.entries(field.group).map(function (_ref) {
+          var key = _ref[0],
+            value = _ref[1];
+          var groupProps = Object.assign({}, value, {
             classNameGroupItem: value.classNameGroupItem || 'form__group-item',
             showMessage: field.showMessage
-          };
+          });
           return generateField(groupProps, {
             key: key + '_form_group'
           }, props);
@@ -2711,32 +2945,32 @@ function generateField(field, config, props) {
   }
 }
 
-const focusOnError = (formElementsList, errors) => {
-  const selectsIds = Object.keys(errors).map(fieldName => {
+var focusOnError = function focusOnError(formElementsList, errors) {
+  var selectsIds = Object.keys(errors).map(function (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";
   });
-  const errorFieldElement = formElementsList.find(element => {
+  var errorFieldElement = formElementsList.find(function (element) {
     if (element.name) {
       return getIn(errors, element.name);
     } else {
       return selectsIds.includes(element.id);
     }
   });
-  const errorsList = Object.keys(errors);
+  var errorsList = Object.keys(errors);
   if (!errorFieldElement && errorsList.length) {
-    let errorElement;
+    var errorElement;
     try {
-      const fieldName = errorsList[0];
+      var 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) {
@@ -2758,11 +2992,12 @@ const focusOnError = (formElementsList, errors) => {
   }
   return null;
 };
-const focusOnErrorDecorator = createDecorator(null, focusOnError);
-const setErrorsMutator = (args, state) => {
-  const [fieldName, data] = args;
-  const submitError = data.submitError;
-  const fieldError = data.error;
+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;
   if (fieldName === 'non_field_errors' || fieldName === FORM_ERROR) {
     // state.formState.invalid = true
     // state.formState.valid = false
@@ -2773,18 +3008,16 @@ const setErrorsMutator = (args, state) => {
 
     // TODO: make clear error not by empty string check
     if (fieldError || fieldError === '') {
-      const errorsState = Object.assign({}, state.formState.errors, {
-        [fieldName]: fieldError
-      });
+      var _Object$assign;
+      var errorsState = Object.assign({}, state.formState.errors, (_Object$assign = {}, _Object$assign[fieldName] = fieldError, _Object$assign));
       state.fields[fieldName].error = fieldError;
       state.formState.errors = errorsState;
     }
 
     // TODO: make clear error not by empty string check
     if (submitError || submitError === '') {
-      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
-        [fieldName]: submitError
-      });
+      var _Object$assign2;
+      var submitErrorsState = Object.assign({}, state.formState.submitErrors, (_Object$assign2 = {}, _Object$assign2[fieldName] = submitError, _Object$assign2));
       state.fields[fieldName].submitFailed = true;
       state.fields[fieldName].submitSucceeded = false;
       state.fields[fieldName].submitError = submitError;
@@ -2795,169 +3028,192 @@ const setErrorsMutator = (args, state) => {
     }
   }
 };
-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 {
-      error,
-      success: false,
-      formErrors
-    };
-  }
-};
-
-const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
-  const {
-    className,
-    dataTestId,
-    dataTour,
-    type,
-    name,
-    initialValues,
-    initialValuesEqual,
-    config,
-    validationSchema,
-    title,
-    titleFill,
-    titlePosition,
-    titleTextColor,
-    titleTextSize,
-    titleTextWeight,
-    desc,
-    descSize,
-    descTextColor,
-    descTextWeight,
-    buttonGap,
-    additionalProps = {},
-    buttonDirection = 'vertical',
-    buttonFill,
-    buttonJustifyContent,
-    buttonPadding,
-    buttonPosition,
-    dataTestIdButtons,
-    dataTestIdPrimaryButton,
-    dataTestIdSecondaryButton,
-    dataTestIdTertiaryButton,
-    dataTourButtons,
-    dataTourPrimaryButton,
-    dataTourSecondaryButton,
-    dataTourTertiaryButton,
-    disableFieldsAutoComplete = false,
-    fieldsGap,
-    formName,
-    groupGap,
-    heightClass,
-    language,
-    loader,
-    loaderAppearance,
-    loaderFill = 'surfacePrimary',
-    loaderItemFill = 'accentItemSecondary',
-    loaderShape,
-    loaderSize = 'l',
-    loaderText,
-    loaderType = 'simple',
-    mutators,
-    notificationCloseButton,
-    notificationType,
-    primaryButton,
-    primaryButtonAppearance,
-    primaryButtonFill,
-    primaryButtonFillHover,
-    primaryButtonHtmlType,
-    primaryButtonIsDisabled,
-    primaryButtonIsLoading,
-    primaryButtonLabel,
-    primaryButtonLabelSize,
-    primaryButtonLabelTextColor,
-    primaryButtonLabelTextWeight,
-    primaryButtonSize,
-    primarySecondaryHtmlType,
-    renderFieldsWrapper = wrapperChildren => wrapperChildren,
-    secondaryButton,
-    secondaryButtonAppearance,
-    secondaryButtonFill,
-    secondaryButtonFillHover,
-    secondaryButtonIsDisabled,
-    secondaryButtonIsLoading,
-    secondaryButtonLabel,
-    secondaryButtonLabelSize,
-    secondaryButtonLabelTextColor,
-    secondaryButtonLabelTextWeight,
-    secondaryButtonSize,
-    shapeStrengthClass,
-    tertiaryButton,
-    tertiaryButtonFill,
-    tertiaryButtonFillHover,
-    tertiaryButtonLabel,
-    tertiaryButtonLabelSize,
-    tertiaryButtonLabelTextColor,
-    tertiaryButtonLabelTextWeight,
-    tertiaryButtonSize,
-    widthClass,
-    before,
-    after,
-    isLoading,
-    onClickSecondaryButton,
-    onClickTertiaryButton,
-    onChangeFormValues,
-    onSubmit
-  } = props;
-  const validate = useYupValidationSchema(validationSchema, language);
-  const onRefFormInstance = useCallback(formInstance => {
+var sendFormDataToServer = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, data) {
+    var response, _error$response, _error$response2, formErrors, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          _context.p = 0;
+          _context.n = 1;
+          return axios({
+            url: url,
+            method: 'POST',
+            data: data
+          });
+        case 1:
+          response = _context.v;
+          return _context.a(2, {
+            success: true,
+            response: response
+          });
+        case 2:
+          _context.p = 2;
+          _t = _context.v;
+          formErrors = {};
+          if (typeof ((_error$response = _t.response) == null ? void 0 : _error$response.data) === 'string') {
+            formErrors[FORM_ERROR] = 'Something went wrong';
+          }
+          if (typeof ((_error$response2 = _t.response) == null ? void 0 : _error$response2.data) === 'object') {
+            Object.entries(_t.response.data).forEach(function (_ref2) {
+              var fieldName = _ref2[0],
+                errorsList = _ref2[1];
+              formErrors[fieldName] = errorsList[0];
+            });
+          }
+          return _context.a(2, {
+            error: _t,
+            success: false,
+            formErrors: formErrors
+          });
+      }
+    }, _callee, null, [[0, 2]]);
+  }));
+  return function sendFormDataToServer(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
+  var className = props.className,
+    dataTestId = props.dataTestId,
+    dataTour = props.dataTour,
+    type = props.type,
+    name = props.name,
+    initialValues = props.initialValues,
+    initialValuesEqual = props.initialValuesEqual,
+    config = props.config,
+    validationSchema = props.validationSchema,
+    title = props.title,
+    titleFill = props.titleFill,
+    titlePosition = props.titlePosition,
+    titleTextColor = props.titleTextColor,
+    titleTextSize = props.titleTextSize,
+    titleTextWeight = props.titleTextWeight,
+    desc = props.desc,
+    descSize = props.descSize,
+    descTextColor = props.descTextColor,
+    descTextWeight = props.descTextWeight,
+    buttonGap = props.buttonGap,
+    _props$additionalProp = props.additionalProps,
+    additionalProps = _props$additionalProp === void 0 ? {} : _props$additionalProp,
+    _props$buttonDirectio = props.buttonDirection,
+    buttonDirection = _props$buttonDirectio === void 0 ? "vertical" : _props$buttonDirectio,
+    buttonFill = props.buttonFill,
+    buttonJustifyContent = props.buttonJustifyContent,
+    buttonPadding = props.buttonPadding,
+    buttonPosition = props.buttonPosition,
+    dataTestIdButtons = props.dataTestIdButtons,
+    dataTestIdPrimaryButton = props.dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton = props.dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton = props.dataTestIdTertiaryButton,
+    dataTourButtons = props.dataTourButtons,
+    dataTourPrimaryButton = props.dataTourPrimaryButton,
+    dataTourSecondaryButton = props.dataTourSecondaryButton,
+    dataTourTertiaryButton = props.dataTourTertiaryButton,
+    _props$disableFieldsA = props.disableFieldsAutoComplete,
+    disableFieldsAutoComplete = _props$disableFieldsA === void 0 ? false : _props$disableFieldsA,
+    fieldsGap = props.fieldsGap,
+    formName = props.formName,
+    groupGap = props.groupGap,
+    heightClass = props.heightClass,
+    language = props.language,
+    loader = props.loader,
+    loaderAppearance = props.loaderAppearance,
+    _props$loaderFill = props.loaderFill,
+    loaderFill = _props$loaderFill === void 0 ? "surfacePrimary" : _props$loaderFill,
+    _props$loaderItemFill = props.loaderItemFill,
+    loaderItemFill = _props$loaderItemFill === void 0 ? "accentItemSecondary" : _props$loaderItemFill,
+    loaderShape = props.loaderShape,
+    _props$loaderSize = props.loaderSize,
+    loaderSize = _props$loaderSize === void 0 ? "l" : _props$loaderSize,
+    loaderText = props.loaderText,
+    _props$loaderType = props.loaderType,
+    loaderType = _props$loaderType === void 0 ? "dot" : _props$loaderType,
+    mutators = props.mutators,
+    notificationCloseButton = props.notificationCloseButton,
+    notificationType = props.notificationType,
+    primaryButton = props.primaryButton,
+    primaryButtonAppearance = props.primaryButtonAppearance,
+    primaryButtonFill = props.primaryButtonFill,
+    primaryButtonFillHover = props.primaryButtonFillHover,
+    primaryButtonHtmlType = props.primaryButtonHtmlType,
+    primaryButtonIsDisabled = props.primaryButtonIsDisabled,
+    primaryButtonIsLoading = props.primaryButtonIsLoading,
+    primaryButtonLabel = props.primaryButtonLabel,
+    primaryButtonLabelSize = props.primaryButtonLabelSize,
+    primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
+    primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
+    primaryButtonSize = props.primaryButtonSize,
+    primarySecondaryHtmlType = props.primarySecondaryHtmlType,
+    _props$renderFieldsWr = props.renderFieldsWrapper,
+    renderFieldsWrapper = _props$renderFieldsWr === void 0 ? function (wrapperChildren) {
+      return wrapperChildren;
+    } : _props$renderFieldsWr,
+    secondaryButton = props.secondaryButton,
+    secondaryButtonAppearance = props.secondaryButtonAppearance,
+    secondaryButtonFill = props.secondaryButtonFill,
+    secondaryButtonFillHover = props.secondaryButtonFillHover,
+    secondaryButtonIsDisabled = props.secondaryButtonIsDisabled,
+    secondaryButtonIsLoading = props.secondaryButtonIsLoading,
+    secondaryButtonLabel = props.secondaryButtonLabel,
+    secondaryButtonLabelSize = props.secondaryButtonLabelSize,
+    secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
+    secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
+    secondaryButtonSize = props.secondaryButtonSize,
+    shapeStrengthClass = props.shapeStrengthClass,
+    tertiaryButton = props.tertiaryButton,
+    tertiaryButtonFill = props.tertiaryButtonFill,
+    tertiaryButtonFillHover = props.tertiaryButtonFillHover,
+    tertiaryButtonLabel = props.tertiaryButtonLabel,
+    tertiaryButtonLabelSize = props.tertiaryButtonLabelSize,
+    tertiaryButtonLabelTextColor = props.tertiaryButtonLabelTextColor,
+    tertiaryButtonLabelTextWeight = props.tertiaryButtonLabelTextWeight,
+    tertiaryButtonSize = props.tertiaryButtonSize,
+    widthClass = props.widthClass,
+    before = props.before,
+    after = props.after,
+    isLoading = props.isLoading,
+    onClickSecondaryButton = props.onClickSecondaryButton,
+    onClickTertiaryButton = props.onClickTertiaryButton,
+    onChangeFormValues = props.onChangeFormValues,
+    onSubmit = props.onSubmit;
+  var validate = useYupValidationSchema(validationSchema, language);
+  var onRefFormInstance = useCallback(function (formInstance) {
     if (ref) {
       ref.current = formInstance;
     }
   }, [ref]);
-  const propsGenerator = useDevicePropsGenerator(props);
-  const {
-    directionClass,
-    fillClass,
-    elevationClass,
-    shapeClass
-  } = propsGenerator;
-  const {
-    styles: formStyles,
-    wrapper: wrapperStyles
-  } = useStyles(props);
+  var propsGenerator = useDevicePropsGenerator(props);
+  var directionClass = propsGenerator.directionClass,
+    fillClass = propsGenerator.fillClass,
+    elevationClass = propsGenerator.elevationClass,
+    shapeClass = propsGenerator.shapeClass;
+  var _useStyles = useStyles(props),
+    formStyles = _useStyles.styles,
+    wrapperStyles = _useStyles.wrapper;
   return /*#__PURE__*/React.createElement(Form, {
     initialValues: initialValues,
     initialValuesEqual: initialValuesEqual,
-    render: ({
-      form,
-      handleSubmit,
-      modifiedSinceLastSubmit,
-      submitError
-    }) => {
+    render: function render(_ref) {
+      var form = _ref.form,
+        handleSubmit = _ref.handleSubmit,
+        modifiedSinceLastSubmit = _ref.modifiedSinceLastSubmit,
+        submitError = _ref.submitError;
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', type && `form_type_${type}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
-        name: formName || 'form'
+        className: clsx(className, "form", type && "form_type_" + type, widthClass && "width_" + widthClass, heightClass && "height_" + heightClass, titlePosition && "form_title-position_" + titlePosition, buttonPosition && "form_button-position_" + buttonPosition, directionClass && "direction_" + directionClass, fillClass && "fill_" + fillClass, shapeClass && "shape_" + shapeClass, shapeStrengthClass && "shape-strength_" + shapeStrengthClass, elevationClass && "elevation_" + elevationClass),
+        name: formName || "form"
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
-        ref: () => onRefFormInstance(form),
-        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
-        autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
-        autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
+        ref: function ref() {
+          return onRefFormInstance(form);
+        },
+        autoCapitalize: disableFieldsAutoComplete ? "off" : undefined,
+        autoComplete: disableFieldsAutoComplete ? "off" : undefined,
+        autoCorrect: disableFieldsAutoComplete ? "off" : undefined,
         "data-testid": dataTestId || name,
         "data-tour": dataTour,
-        spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
+        spellCheck: disableFieldsAutoComplete ? "false" : undefined,
         style: formStyles,
         onSubmit: handleSubmit
       }, before, title && /*#__PURE__*/React.createElement(Title, {
@@ -2972,7 +3228,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         textColor: descTextColor,
         textWeight: descTextWeight
       }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
-        className: clsx('notification', 'form-notification', notificationType ? `form-notification_${notificationType}` : 'form-notification_global')
+        className: clsx("notification", "form-notification", notificationType ? "form-notification_" + notificationType : "form-notification_global")
       }, /*#__PURE__*/React.createElement(Notification, {
         appearance: "errorPrimary sizeM solid rounded",
         type: "global",
@@ -2989,9 +3245,11 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         direction: "vertical",
         gap: fieldsGap || groupGap,
         style: wrapperStyles
-      }, Object.keys(config).map(key => generateField(config[key], {
-        key
-      }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
+      }, Object.keys(config).map(function (key) {
+        return generateField(config[key], {
+          key: key
+        }, additionalProps[config[key].name]);
+      }), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
         appearance: loaderAppearance,
         className: "form__loader",
         type: loaderType,
@@ -3012,7 +3270,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         appearance: primaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdPrimaryButton || (name ? `${name}-primary` : 'form-primary'),
+        dataTestId: dataTestIdPrimaryButton || (name ? name + "-primary" : "form-primary"),
         dataTour: dataTourPrimaryButton,
         width: "fill",
         size: primaryButtonSize,
@@ -3022,13 +3280,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
-        htmlType: primaryButtonHtmlType || 'submit',
+        htmlType: primaryButtonHtmlType || "submit",
         loading: primaryButtonIsLoading,
         isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         appearance: secondaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdSecondaryButton || (name ? `${name}-secondary` : 'form-secondary'),
+        dataTestId: dataTestIdSecondaryButton || (name ? name + "-secondary" : "form-secondary"),
         dataTour: dataTourSecondaryButton,
         width: "fill",
         size: secondaryButtonSize,
@@ -3070,34 +3328,34 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
   });
 });
 FinalForm.defaultProps = {
-  direction: 'vertical'
+  direction: "vertical"
 };
 
-const DEFAULT_MESSAGES_REQUIRED = {
+var DEFAULT_MESSAGES_REQUIRED = {
   required: {
     key: 'required',
     message: 'Обязательное поле'
   }
 };
-const DEFAULT_MESSAGES_ERROR = {
+var DEFAULT_MESSAGES_ERROR = {
   invalid_value: {
     key: 'error',
     message: 'Некорректное значение'
   }
 };
-const DEFAULT_MESSAGES_URL = {
+var DEFAULT_MESSAGES_URL = {
   url: {
     key: 'error',
     message: 'Введите корректный URL-адрес'
   }
 };
-const DEFAULT_MESSAGES_PASSWORD = {
+var DEFAULT_MESSAGES_PASSWORD = {
   password_required: {
     key: 'required',
     message: 'Введите пароль'
   }
 };
-const DEFAULT_MESSAGES_NUMBER = {
+var DEFAULT_MESSAGES_NUMBER = {
   matches: {
     key: 'error',
     message: 'Допускается ввод только цифр от 0 до 9'
@@ -3107,21 +3365,23 @@ const DEFAULT_MESSAGES_NUMBER = {
     message: 'Только числовое значение'
   }
 };
-const DEFAULT_MESSAGES_MIN_MAX = {
+var DEFAULT_MESSAGES_MIN_MAX = {
   min: {
     key: 'error',
-    message: ({
-      min
-    }) => `Значение должно быть не менее ${min} символов`
+    message: function message(_ref) {
+      var min = _ref.min;
+      return "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 " + min + " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432";
+    }
   },
   max: {
     key: 'error',
-    message: ({
-      max
-    }) => `Значение должно быть не менее ${max} символов`
+    message: function message(_ref2) {
+      var max = _ref2.max;
+      return "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 " + max + " \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432";
+    }
   }
 };
-const DEFAULT_MESSAGES_PHONE = {
+var DEFAULT_MESSAGES_PHONE = {
   phone_error: {
     key: 'error',
     message: 'Введите корректный номер телефона'
@@ -3135,7 +3395,7 @@ const DEFAULT_MESSAGES_PHONE = {
     message: 'Укажите номер телефона'
   }
 };
-const DEFAULT_MESSAGES_EMAIL = {
+var DEFAULT_MESSAGES_EMAIL = {
   email_error: {
     key: 'error',
     message: 'Введите корректный адрес электронной почты'
@@ -3210,20 +3470,11 @@ const DEFAULT_MESSAGES_EMAIL = {
         ... etc
   */
 
-const DEFAULT_MESSAGES_FIELDS = {
-  ...DEFAULT_MESSAGES_EMAIL,
-  ...DEFAULT_MESSAGES_ERROR,
-  ...DEFAULT_MESSAGES_MIN_MAX,
-  ...DEFAULT_MESSAGES_NUMBER,
-  ...DEFAULT_MESSAGES_PASSWORD,
-  ...DEFAULT_MESSAGES_PHONE,
-  ...DEFAULT_MESSAGES_REQUIRED,
-  ...DEFAULT_MESSAGES_URL
-};
+var DEFAULT_MESSAGES_FIELDS = Object.assign({}, DEFAULT_MESSAGES_EMAIL, DEFAULT_MESSAGES_ERROR, DEFAULT_MESSAGES_MIN_MAX, DEFAULT_MESSAGES_NUMBER, DEFAULT_MESSAGES_PASSWORD, DEFAULT_MESSAGES_PHONE, DEFAULT_MESSAGES_REQUIRED, DEFAULT_MESSAGES_URL);
 
-const parseNumericField = value => {
-  const numberValue = value.slice(0, 10).replace(/,/g, '.').replace(/[^\d.]/g, '');
-  const parsedValue = parseFloat(numberValue);
+var parseNumericField = function parseNumericField(value) {
+  var numberValue = value.slice(0, 10).replace(/,/g, '.').replace(/[^\d.]/g, '');
+  var parsedValue = parseFloat(numberValue);
   if (parsedValue || parsedValue === 0) {
     if (numberValue.endsWith('.')) {
       if ((numberValue.match(/\./g) || []).length > 1) {
@@ -3287,22 +3538,23 @@ const parseNumericField = value => {
 //   return formErrors
 // }
 
-const getErrorsForFinalForm = error => {
+var getErrorsForFinalForm = function getErrorsForFinalForm(error) {
+  var _error$response;
   /*
    * error - its an "axios" error in many cases
    */
 
-  const formErrors = {};
-  const serverErrors = error.response?.data || error;
+  var formErrors = {};
+  var serverErrors = ((_error$response = error.response) == null ? void 0 : _error$response.data) || error;
   if (serverErrors) {
     // Collect errors for some fields, which in the response from server
     if (typeof serverErrors === 'string') {
       // Server may send an html page as error data
       formErrors[FORM_ERROR] = 'Во время обработки запроса произошла ошибка, попробуйте повторить запрос';
     } else {
-      for (const key in serverErrors) {
+      for (var key in serverErrors) {
         // "non_field_errors" and "detail" is special keys in django to mark errors not for fields
-        const errorFieldKey = key === 'non_field_errors' || key === 'detail' ? FORM_ERROR : key;
+        var errorFieldKey = key === 'non_field_errors' || key === 'detail' ? FORM_ERROR : key;
 
         // Say to "react-final-form" that we have some fields errors
         formErrors[errorFieldKey] = castArray(serverErrors[key])[0];