@itcase/forms 1.0.37 → 1.0.38

package/dist/itcase-forms.esm.js

@@ -1 +1,2292 @@
-import{isPossiblePhoneNumber as e}from"libphonenumber-js";import t,{useMemo as r,useEffect as i,useCallback as o,useState as a}from"react";import{setIn as n,FORM_ERROR as s,getIn as l}from"final-form";import{useForm as m,Field as c,Form as u,FormSpy as d}from"react-final-form";export{Field,useForm,useFormState}from"react-final-form";import p from"prop-types";import f from"clsx";import{Checkbox as b}from"@itcase/ui/components/Checkbox";import{Divider as g}from"@itcase/ui/components/Divider";import{Text as h}from"@itcase/ui/components/Text";import{useDeviceTargetClass as _}from"@itcase/ui/hooks/useDeviceTargetClass";import{useStyles as x}from"@itcase/ui/hooks/useStyles";import{Choice as T}from"@itcase/ui/components/Choice";import{Code as y}from"@itcase/ui/components/Code";import{DatePickerInput as v}from"@itcase/ui/components/DatePicker";import S from"axios";import{useDropzone as E}from"react-dropzone";import{fromEvent as C}from"file-selector";import N from"lodash/castArray";import{createFileFromDataURL as z}from"@itcase/common";import{Loader as P}from"@itcase/ui/components/Loader";import{Title as F}from"@itcase/ui/components/Title";import{Input as j}from"@itcase/ui/components/Input";import{Icon as k}from"@itcase/ui/components/Icon";import{RadioButton as R}from"@itcase/ui/components/RadioButton";import{Segmented as B}from"@itcase/ui/components/Segmented";import{Select as W}from"@itcase/ui/components/Select";import{Switch as M}from"@itcase/ui/components/Switch";import{Textarea as w}from"@itcase/ui/components/Textarea";import{Button as L}from"@itcase/ui/components/Button";import{Group as q}from"@itcase/ui/components/Group";import{NotificationItem as O}from"@itcase/ui/components/Notification";import V from"final-form-focus";const D=(t,r)=>!t||e(t,"RU"),A=(e,t)=>{if(!e)return!0;return/^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/.test(String(e).toLowerCase())},I=e=>{const t=Object.entries(e.fields);return e.requiredFields=t.reduce(((e,[t,r])=>(r.exclusiveTests?.required&&e.push(t),e)),[]),e},$=(e,t)=>n(e,t.path,t.message),H=Object.create(null);function G(e,t){const i=r((()=>e&&(e=>async function(t){try{await e.validate(t,{abortEarly:!1})}catch(e){if(e.inner)return e.inner.reduce($,H);console.warn("itcase-forms schema.validate error: An error not related to the form occurred during validation. Validation ignored.")}})(e)),[e,t]);return i}function K(e){const{after:i,afterItem:o,before:a,beforeItem:n,children:s,className:l,desc:m,descTextSize:c,descTextColor:u,descTextWidth:d,divider:p,dividerDirection:b,dividerFill:T,dividerSize:y,dividerWidth:v,fieldClassName:S,id:E,inputName:C,inputValue:N,isRequired:z,label:P,labelTextSize:F,labelTextColor:j,labelTextWidth:k,errorMessageTextSize:R,errorMessageTextWeight:B,errorMessageTextColor:W,message:M,messageTextSize:w,messageTextColor:L,messageTextWeight:q,metaActive:O,metaError:V,metaModifiedSinceLastSubmit:D,metaSubmitError:A,metaSubmitFailed:I,metaTouched:$,metaValid:H,set:G,type:K,hideMessage:U,isHidden:J,tag:Q,dataTour:X,showErrorsOnSubmit:Y}=e,Z=V||!D&&A||!1,ee=r((()=>Y?I&&$&&Z:$&&Z),[Y,I,$,Z]),te=r((()=>(Array.isArray(N)?N.length:N)&&(H||!V&&A&&D)),[N,H,V,A,D]),re=r((()=>f(l,ee&&"form__item_state_error",te&&"form__item_state_success",z&&"form__item_state_required",O&&"form__item_state_focus",N&&"form__item_state_filled")),[l,ee,te,z,O,N]),ie=r((()=>f(S,ee&&`${S}_state_error`,te&&`${S}_state_success`,O&&`${S}_state_focus`,N&&`${S}_state_filled`)),[S,ee,te,O,N]),oe=_(e,{prefix:"form-field_size_",propsKey:"size"}),ae=_(e,{prefix:"fill_",propsKey:"fill"}),ne=_(e,{prefix:"fill_",propsKey:"inputFill"}),se=_(e,{prefix:"form-field_shape_",propsKey:"shape"}),le=_(e,{prefix:"form-field__item-value_shape_",propsKey:"inputShape"}),me=_(e,{prefix:"direction_",propsKey:"direction"}),ce=_(e,{prefix:"width_",propsKey:"width"}),{styles:ue}=x(e);return t.createElement(Q,{className:f(re,"form__item","form-field",K&&`form-field_type_${K}`,G&&`form-field_set_${G}`,oe,ae,se,J&&"form-field_state_hidden",me,ce),"data-tour":X,style:ue},a,P&&t.createElement("div",{htmlFor:E,className:"form-field__label"},t.createElement(h,{size:F,textWeight:k,textColor:j},P)),m&&t.createElement("div",{className:"form-field__desc"},t.createElement(h,{size:c,textWeight:d,textColor:u},m)),t.createElement("div",{className:f("form-field__content",ne,le)},t.createElement("div",{className:f("form-field__content-inner",ie)},n,s,o),p&&t.createElement(g,{className:"form-field__item-divider",width:v,direction:b,size:y,fill:T})),!U&&t.createElement("div",{className:"form-field__message"},Boolean(ee)&&t.createElement(h,{className:"form-field__message-item form-field__message-item_type-error",size:R,textWeight:B,textColor:W,id:`${C}-error`},Z),Boolean(M)&&!ee&&t.createElement(h,{className:"form-field__message-item form-field__message-item_type_message",size:w,textWeight:q,textColor:L},M),Boolean(!ee)&&Boolean(!M)&&t.createElement(h,{className:"form-field__message-item form-field__message-item_type_message",size:w}," ")),i)}function U(e){const{inputName:r}=e,{change:o}=m();return i((()=>()=>{o(r,void 0)}),[]),t.createElement(K,e)}K.defaultProps={tag:"div",type:"normal",errorMessageTextSize:"s",errorMessageTextColor:"errorTextSecondary"},K.propTypes={after:p.any,afterItem:p.any,autoComplete:p.string,before:p.any,beforeItem:p.any,children:p.any,className:p.string,desc:p.string,descTextSize:p.string,descTextColor:p.string,descTextWidth:p.string,dividerDirection:p.string,dividerFill:p.string,dividerSize:p.string,dividerWidth:p.string,fieldClassName:p.string,id:p.string,inputName:p.string,inputOnBlur:p.func,inputOnChange:p.func,inputOnFocus:p.func,inputValue:p.any,isRequired:p.bool,itemType:p.string,label:p.any,labelTextSize:p.string,labelTextColor:p.string,labelTextWidth:p.string,errorMessageTextSize:p.string,errorMessageTextWidth:p.string,errorMessageTextColor:p.string,message:p.string,messageSize:p.string,messageTextColor:p.string,messageTextWidth:p.string,metaActive:p.bool,metaError:p.string,metaModifiedSinceLastSubmit:p.bool,metaSubmitError:p.string,metaSubmitFailed:p.bool,metaTouched:p.bool,metaValid:p.bool,set:p.string,showErrorsOnSubmit:p.bool,type:p.string},U.propTypes={autoComplete:p.string,children:p.any,className:p.string,fieldClassName:p.string,hint:p.string,inputName:p.string,inputOnBlur:p.func,inputOnChange:p.func,inputOnFocus:p.func,inputValue:p.any,isRequired:p.bool,itemType:p.string,label:p.any,metaActive:p.bool,metaError:p.string,metaModifiedSinceLastSubmit:p.bool,metaSubmitError:p.string,metaSubmitFailed:p.bool,metaTouched:p.bool,metaValid:p.bool,showErrorsOnSubmit:p.bool};const J=t.memo((function(e){const{name:r,isRequired:i,onChange:a,fieldProps:n,inputProps:s,classNameGroupItem:l,hideMessage:m}=e;return t.createElement(c,{name:r,type:"checkbox"},(({input:e,meta:r})=>{const c=o((t=>{e.onChange(t),a&&a(t.target.checked,e.name)}),[a]);return t.createElement(U,Object.assign({className:f("form-field_type_checkbox","form__item_type_checkbox",l),fieldClassName:"form-checkbox",inputName:e.name,inputValue:e.checked,isRequired:i,metaActive:r.active,metaError:r.error,metaModifiedSinceLastSubmit:r.modifiedSinceLastSubmit,metaSubmitError:r.submitError,metaSubmitFailed:r.submitFailed,metaTouched:r.touched,metaValid:r.valid,tag:"label",hideMessage:m},n),t.createElement(b,Object.assign({autoComplete:"nope",checked:e.checked,name:e.name,type:"checkbox",onBlur:e.onBlur,onChange:c,onFocus:e.onFocus},s)))}))}));J.defaultProps={inputProps:{},fieldProps:{}},J.propTypes={fieldProps:p.object,inputProps:p.object,isRequired:p.bool,name:p.string,onChange:p.func};const Q=t.memo((function(e){const{options:i,classNameGroupItem:a,fieldProps:n,inputProps:s,isMultiple:l,isRequired:u,initialValue:d,label:p,name:b,messageType:g,hideMessage:h,placeholder:_}=e,{change:x}=m();return t.createElement(c,{name:b,initialValue:d},(({input:e,meta:m})=>{const c=r((()=>{const t={value:null,label:null};if(e.value){return i.find((t=>t.value===e.value))||t}return t}),[e.value]),d=o((e=>{x(b,e.value)}),[x]);return t.createElement(U,Object.assign({className:f("form-field_type_choice","form__item_type_choice",a),fieldClassName:"form-choice",inputName:e.name,inputValue:e.value||[],isRequired:u,label:p,messageType:g,metaActive:m.active,metaError:m.error,metaModifiedSinceLastSubmit:m.modifiedSinceLastSubmit,metaSubmitError:m.submitError,metaSubmitFailed:m.submitFailed,metaTouched:m.touched,metaValid:m.valid,hideMessage:h},n),t.createElement(T,Object.assign({className:f(m.active&&"form-choice_state_focus",m.error&&m.touched&&"form-choice_state_error"),options:i,inputName:e.name,inputValue:e.value||[],isMultiple:l,isRequired:u,placeholder:_,active:c,setActiveSegment:d},s)))}))}));Q.propTypes={options:p.array.isRequired,name:p.string.isRequired,className:p.string,inputClass:p.string,isMultiple:p.bool,isRequired:p.bool,label:p.string,placeholder:p.string};const X=t.memo((function(e){const{Component:r,isRequired:i,name:o,fieldProps:a,classNameGroupItem:n,hideMessage:s}=e;return t.createElement(c,{name:o},(({input:o,meta:l})=>t.createElement(U,Object.assign({className:f("form-field_type_custom","form__item_type_custom",n),fieldClassName:"form-custom",inputName:o.name,inputValue:o.value,isRequired:i,metaActive:l.active,metaError:l.error,metaModifiedSinceLastSubmit:l.modifiedSinceLastSubmit,metaSubmitError:l.submitError,metaSubmitFailed:l.submitFailed,metaTouched:l.touched,metaValid:l.valid,hideMessage:s},a),t.createElement(r,Object.assign({},e,{input:o,meta:l})))))}));X.defaultProps={inputProps:{},fieldProps:{}},X.propTypes={name:p.string.isRequired,isRequired:p.bool,fieldProps:p.object,inputProps:p.object};const Y=t.memo((function(e){const{isRequired:r,name:i,fieldProps:o,inputProps:a,classNameGroupItem:n,hideMessage:s}=e;return t.createElement(c,{name:i},(({input:e,meta:i})=>t.createElement(U,Object.assign({className:f("form-field_type_code","form__item_type_code",n),fieldClassName:"form-code",inputName:e.name,inputValue:e.value,isRequired:r,metaActive:i.active,metaError:i.error,metaModifiedSinceLastSubmit:i.modifiedSinceLastSubmit,metaSubmitError:i.submitError,metaSubmitFailed:i.submitFailed,metaTouched:i.touched,metaValid:i.valid,hideMessage:s},o),t.createElement(y,Object.assign({autoComplete:"nope",name:e.name,value:e.value,onBlur:e.onBlur,onChange:e.onChange,onFocus:e.onFocus},a)))))}));function Z(e){const{isRequired:r,fieldProps:i,inputProps:a,datePickerProps:n,name:s,iconSize:l,iconBorder:m,iconBorderHover:u,iconFill:d,iconFillHover:p,iconRevealableShow:b,iconRevealableHide:g,iconShape:h,hideMessage:_,onChange:x,classNameGroupItem:T}=e;return t.createElement(c,{name:s},(({input:e,meta:s})=>{const l=o((t=>{e.onChange(t),x&&x(t,e.name)}),[x]);return t.createElement(U,Object.assign({className:f("form-field_type_datepicker","form__item_type_datepicker",T),fieldClassName:"form-datepicker",inputName:e.name,inputValue:e.value||"",isRequired:r,metaActive:s.active,metaError:s.error,metaModifiedSinceLastSubmit:s.modifiedSinceLastSubmit,metaSubmitError:s.submitError,metaSubmitFailed:s.submitFailed,metaTouched:s.touched,metaValid:s.valid,hideMessage:_},i),t.createElement(v,{name:e.name,value:e.value||"",onBlur:e.onBlur,onChange:l,onFocus:e.onFocus,inputProps:a,datePickerProps:n}))}))}async function ee(e){try{const t=await S({url:`/api/${e}/`,responseType:"blob"}),r=t.data,i=t.headers["content-disposition"]?.split("filename=")[1];let o=i?.substring(1).slice(0,-1);if(!o){const e=r.type.split("/"),t=e[e.length-1];o=`${(new Date).getTime()}.${t}`}return new File([r],o,{type:r.type})}catch(e){return console.log("error: ",e),null}}function te(e,t){t=t||(()=>{});const r=new FileReader;r._readedFile=e,r.onabort=()=>t(),r.onerror=()=>t(),r.onload=e=>{e.target._readedFile.dataURL=r.result,t()},e instanceof File?r.readAsDataURL(e):t()}Y.defaultProps={inputProps:{},fieldProps:{}},Y.propTypes={name:p.string.isRequired,isRequired:p.bool,fieldProps:p.object,inputProps:p.object},Z.defaultProps={inputProps:{},fieldProps:{}},Z.propTypes={fieldProps:p.object,inputProps:p.object,isRequired:p.bool,name:p.string.isRequired,onChange:p.func};const re=t.memo((function(e){const{inputName:r,size:n,className:s,fileErrorText:l,hintTitleTextSize:c,removeThumbTextSize:u,removeThumbTextColor:d,removeThumbTextWeight:p,thumbNameTextSize:b,thumbNameTextColor:g,removeThumbTextHoverColor:x,thumbNameTextWrap:T,thumbNameTextWeight:y,hintTitleTextColor:v,hintTitleTextWrap:S,thumbColumn:F,hintTitleTextWeight:j,hintDescriptionTextSize:k,hintDescriptionTextColor:R,hintDescriptionTextWrap:B,hintDescriptionTextWeight:W,errorMessageTextSize:M,errorMessageTextWeight:w,errorMessageTextColor:L,inputValue:q,maxFiles:O,maxSize:V,removeThumbText:D,hintTitle:A,hintDescription:I,isShowFilename:$,isPreviews:H,loadingText:G,dropzoneProps:K={},onAddFiles:U,onDeleteFile:J}=e,[Q,X]=a(""),[Y,Z]=a(!1),[re,ie]=a(q?N(q):[]),{change:oe}=m(),ae=o((e=>{const t=1==K.maxFiles?e[0]:e;return oe(r,t),t}),[K,oe]),{getRootProps:ne,getInputProps:se}=E({maxSize:V||10485760,maxFiles:O||5,...K,getFilesFromEvent:async e=>{const t=(await C(e)).filter((e=>e instanceof File));return[...re,...t]},onDropAccepted:(e,t)=>{H&&e.forEach((e=>{e.error||(e.preview=URL.createObjectURL(e))})),ie(e),X("");const i=e.map((e=>new Promise((t=>te(e,t)))));Promise.all(i).then((()=>{const t=ae(e);U&&U(t,r)}))},onDropRejected:(e,t)=>{if(e.length){const t=e[0].errors[0]?.message;X(t||"Error on adding file")}else X("")}}),le=o(((e,t)=>{e.stopPropagation(),e.preventDefault();const i=[...re];i.splice(t,1),J&&J(re[t],r),ae(i)}),[re,ae,J]),me=o((async e=>{Z(!0);const t=await async function(e,t){const r=[];for await(const i of N(e)){let e=null;const o="string"==typeof i&&i.includes("/");(i.image||o)&&(e=await ee(i.image||i),e&&te(e)),i.dataURL&&(e=z(i.name||i.path,i.dataURL),e.dataURL=i.dataURL),e&&(e.id=i.id,t&&(e.preview=URL.createObjectURL(e)),r.push(e))}return r}(e,H);return Z(!1),ie(t),t}),[H]);i((()=>{me(q).then((e=>ae(e)))}),[]),i((()=>{q?me(q):ie([])}),[q]),i((()=>()=>re.forEach((e=>URL.revokeObjectURL(e?.preview)))),[]);const ce=_(e,{prefix:"fill_",propsKey:"fill"}),ue=_(e,{prefix:"fill_hover_",propsKey:"fillHover"}),de=_(e,{prefix:"border-width_",propsKey:"borderWidth"}),pe=_(e,{prefix:"border-color_",propsKey:"borderColor"}),fe=_(e,{prefix:"border-color_hover_",propsKey:"borderColorHover"}),be=_(e,{prefix:"border_type_",propsKey:"borderType"}),ge=_(e,{prefix:"form-dropzone_shape_",propsKey:"shape"}),he=_(e,{prefix:"border-width_",propsKey:"thumbBorderWidth"}),_e=_(e,{prefix:"form-dropzone__thumb_direction_",propsKey:"thumbDirection"}),xe=_(e,{prefix:"border-color_",propsKey:"thumbBorderColor"}),Te=_(e,{prefix:"border-color_hover_",propsKey:"thumbBorderColorHover"}),ye=_(e,{prefix:"border_type_",propsKey:"thumbBorderType"});return t.createElement(t.Fragment,null,t.createElement("div",ne({className:`form-dropzone__dropzone dropzone ${s} thumbColumn form-dropzone__dropzone_size_${n} ${ge}`}),t.createElement("input",Object.assign({},se(),{name:r})),t.createElement("div",{className:f("form-dropzone__dropzone-wrapper",F&&`form-dropzone__dropzone-wrapper_column_${F}`,ce,ue,de,pe,fe,be)},re.map(((e,r)=>t.createElement("aside",{className:f("form-dropzone__thumb",ce,_e,he,xe,Te,ye),key:`${e.id||`${e.name}_${r}`||"i"+r}`},H&&!e.error&&t.createElement("div",{className:"form-dropzone__thumb-image"},t.createElement("img",{className:"form-dropzone__thumb-image-inner",src:e.preview||e.image,onLoad:()=>{URL.revokeObjectURL(e.preview)}})),e.error&&t.createElement("div",null,t.createElement(h,{size:b,textColor:g,textWrap:T,textWeight:y},l||e.error)),$&&t.createElement("div",{className:"form-dropzone__thumb-name"},t.createElement(h,{size:b,textColor:g,textWrap:T,textWeight:y,className:"form-dropzone__thumb-name-inner"},e.name)),Y&&t.createElement("div",{className:"form-dropzone__thumb-loader"},t.createElement(P,{fill:"surfacePrimary",height:"fill",itemFill:"surfaceItemAccent",set:"simple",width:"fill"})),t.createElement("div",{className:"form-dropzone__thumb-remove",onClick:e=>le(e,r)},t.createElement(h,{size:u,textColor:d,textWeight:p,textColorHover:x,className:"form-dropzone__thumb-remove-text"},D||"Remove"))))),re.length?t.createElement("div",{className:"form-dropzone__hint form-dropzone__hint_type_add-more"},t.createElement(h,{size:c,textColor:v,textWrap:S,textWeight:j,className:"form-dropzone__hint-title"},A||"Select a file or drag in form"),t.createElement(h,{size:k,textColor:R,textWrap:B,textWeight:W,className:"form-dropzone__hint-text"},I)):t.createElement("div",{className:"form-dropzone__hint"},t.createElement(h,{size:c,textColor:v,textWrap:S,textWeight:j,className:"form-dropzone__hint-title"},A||"Select a file or drag in form"),t.createElement(h,{size:k,textColor:R,textWrap:B,textWeight:W,className:"form-dropzone__hint-text"},I)))),Q&&t.createElement("div",{className:"form-field__message"},t.createElement(h,{className:"form-field__message-item form-field__message-item_type_message",size:M,textWeight:w,textColor:L},Q)))}));re.propTypes={dropzoneProps:p.object,hintDescription:p.string,hintTitle:p.string,inputName:p.string,inputValue:p.any,isPreviews:p.bool,isShowFilename:p.bool,loadingText:p.string,metaError:p.string,metaTouched:p.bool,removeThumbText:p.string,onAddFiles:p.func,onDeleteFile:p.func};const ie=t.memo((function(e){const{name:r,shape:i,size:o,borderWidth:a,borderColor:n,borderColorHover:s,borderType:l,label:m,thumbBorderWidth:u,thumbBorderColor:d,thumbBorderColorHover:p,thumbBorderType:b,removeThumbTextHoverColor:g,labelTextColor:h,fill:_,fillHover:x,className:T,removeThumbText:y,thumbNameTextSize:v,thumbNameTextColor:S,thumbNameTextWrap:E,thumbNameTextWeight:C,removeThumbTextSize:N,removeThumbTextColor:z,removeThumbTextWeight:P,hintTitle:F,errorMessageTextSize:j,errorMessageTextWeight:k,errorMessageTextColor:R,fieldProps:B,hintTitleTextSize:W,hintTitleTextColor:M,hintTitleTextWrap:w,hintTitleTextWeight:L,hintDescriptionTextSize:q,hintDescriptionTextColor:O,hintDescriptionTextWrap:V,hintDescriptionTextWeight:D,hideMessage:A,thumbDirection:I,hintDescription:$,isShowFilename:H,fileErrorText:G,dropzoneProps:K,maxFiles:J,maxSize:Q,thumbColumn:X,isRequired:Y,isPreviews:Z,onAddFiles:ee,onDeleteFile:te,classNameGroupItem:ie}=e;return t.createElement(c,{name:r},(({input:e,meta:r})=>t.createElement(U,Object.assign({className:f("form-field_type_dropzone","form__item_type_dropzone",ie),fieldClassName:"form-dropzone",inputName:e.name,inputValue:e.value,isRequired:Y,label:m,labelTextColor:h,metaActive:r.active,metaError:r.error,metaModifiedSinceLastSubmit:r.modifiedSinceLastSubmit,metaSubmitError:r.submitError,metaSubmitFailed:r.submitFailed,metaTouched:r.touched,metaValid:r.valid,hideMessage:A},B),t.createElement(re,{dropzoneProps:K,hintDescription:$,hintTitle:F,borderWidth:a,borderColor:n,borderColorHover:s,borderType:l,thumbBorderWidth:u,thumbBorderColor:d,thumbBorderColorHover:p,thumbBorderType:b,fileErrorText:G,fill:_,size:o,maxFiles:J,maxSize:Q,removeThumbTextHoverColor:g,fillHover:x,className:T,thumbColumn:X,thumbDirection:I,inputName:e.name,inputValue:e.value,thumbNameTextSize:v,thumbNameTextColor:S,thumbNameTextWrap:E,thumbNameTextWeight:C,hintTitleTextSize:W,hintTitleTextColor:M,hintTitleTextWrap:w,hintTitleTextWeight:L,removeThumbTextSize:N,removeThumbTextColor:z,removeThumbTextWeight:P,hintDescriptionTextSize:q,hintDescriptionTextColor:O,hintDescriptionTextWrap:V,hintDescriptionTextWeight:D,errorMessageTextSize:j,errorMessageWeight:k,errorMessageTextColor:R,isPreviews:Z,shape:i,isShowFilename:H,metaError:r.error,metaTouched:r.touched,removeThumbText:y,onAddFiles:ee,onDeleteFile:te}))))}));ie.defaultProps={errorMessageTextSize:"s",errorMessageTextColor:"errorTextPrimary",thumbColumn:1,thumbDirection:"vertical"},ie.propTypes={name:p.string.isRequired,className:p.string,classNameGroupItem:p.string,classNameInput:p.string,classNameInputWrapper:p.string,dropzoneProps:p.object,hintDescription:p.string,hintTitle:p.string,inputClass:p.string,isPreviews:p.bool,isRequired:p.bool,isShowFilename:p.bool,label:p.any,removeThumbText:p.string,onAddFiles:p.func,onDeleteFile:p.func};const oe=t.memo((function(e){const{after:i,before:o,className:a,label:n,labelTextColor:s,labelTextSize:l,labelTextWeight:m,message:u,errorMessageTextSize:d,errorMessageTextWeight:p,errorMessageTextColor:b,messageTextSize:g,messageTextWeight:_,messageTextColor:x,children:T,dataTour:y,hideMessage:v,name:S,showErrorsOnSubmit:E}=e;return t.createElement(c,{name:S},(({input:e,meta:c})=>{const C=c.error||!c.modifiedSinceLastSubmit&&c.submitError||!1,N=r((()=>E?c.submitFailed&&c.touched&&C:c.touched&&C),[E,c.submitFailed,c.touched,C]);return t.createElement("div",{className:f("form__group",a),"data-tour":y},t.createElement("div",{className:"form__group-wrapper"},o,t.createElement("div",{className:"form__group-label"},t.createElement(F,{textColor:s,size:l,textWeight:m},n)),t.createElement("div",{className:"form__group-items"},T),i),!v&&t.createElement(t.Fragment,null,Boolean(N)&&t.createElement(h,{className:"form__group-message form__group-message_type-error",size:d,textWeight:p,textColor:b,id:`${S}-error`},C),Boolean(u)&&!N&&t.createElement(h,{className:"form__group-message",size:g,textWeight:_,textColor:x},u),Boolean(!N)&&Boolean(!u)&&t.createElement(h,{className:"form__group-message",size:g}," ")))}))}));oe.defaultProps={inputProps:{},fieldProps:{},type:"normal",errorMessageTextSize:"s",errorMessageTextColor:"errorTextPrimary",messageTextSize:"s",messageTextColor:"surfaceTextTertiary"},oe.propTypes={name:p.string.isRequired,isRequired:p.bool,fieldProps:p.object,inputProps:p.object};const ae=t.memo((function(e){const{isPassword:i,isRequired:n,fieldProps:s,inputProps:l,isRevealable:m,name:u,parse:d,iconSize:p,iconBorder:b,iconBorderHover:g,iconFill:h,iconFillHover:_,iconRevealableShow:x,iconRevealableHide:T,iconShape:y,hideMessage:v,onChange:S,classNameGroupItem:E}=e,[C,N]=a(!1),z=r((()=>i?C?"text":"password":"text"),[C,i]),P=o((e=>{e.preventDefault(),N((e=>!e))}),[N]);return t.createElement(c,{name:u,parse:d},(({input:e,meta:r})=>{const i=o((t=>{e.onChange(t),S&&S(t.target.value,e.name)}),[S]);return t.createElement(U,Object.assign({className:f("form-field_type_input","form__item_type_input",E),fieldClassName:m?"form-password":"form-input",inputName:e.name,inputValue:e.value||"",isRequired:n,metaActive:r.active,metaError:r.error,metaModifiedSinceLastSubmit:r.modifiedSinceLastSubmit,metaSubmitError:r.submitError,metaSubmitFailed:r.submitFailed,metaTouched:r.touched,metaValid:r.valid,hideMessage:v},s),t.createElement(j,Object.assign({className:f(r.active&&"input_state_focus",r.error&&r.touched&&"input_state_error"),autoComplete:"nope",name:e.name,type:z,value:e.value||"",onBlur:e.onBlur,onChange:i,onFocus:e.onFocus},l)),m&&t.createElement(k,{className:"form-field__icon",iconFill:h,iconFillHover:_,SvgImage:C?T:x,imageSrc:C?T:x,shape:y,size:p,onClick:P}))}))}));function ne(e){const{input:r,option:i,onChange:a,inputProps:n}=e,s=o((e=>{e.target.checked&&a(i.value)}),[]);return t.createElement(R,Object.assign({className:"form-radio__item",checked:i.value===r.value,name:r.name,type:"radio",value:i.value,onBlur:r.onBlur,onChange:s,onFocus:r.onFocus,label:i.label},n))}function se(e){const{input:r,value:i,onChange:a}=e,n=o((e=>a(e.target.value)),[a]);return t.createElement(j,Object.assign({autoComplete:"nope",name:r.name,onBlur:r.onBlur,onChange:n,onFocus:r.onFocus,value:i},e))}function le(e){const{input:r,options:n,editableProps:s,onChange:l,inputProps:m}=e,[c,u]=a((()=>n.find((e=>e.value===r.value))?"":r.value));i((()=>{if(r.value){const e=n.find((e=>e.value===r.value&&!e.editable));u(e?"":r.value)}else u("")}),[r.value]);const d=o((e=>{r.onChange(e),l&&l(e,r.name)}),[r,l]),p=o((e=>{u(""),d(e)}),[d]),f=o((e=>{u(e),d(e)}),[d]);return t.createElement(t.Fragment,null,n.map((e=>e.editable?t.createElement(se,{key:e.label,input:r,value:c,option:e,onChange:f,editableProps:s,inputProps:m}):t.createElement(ne,{key:e.value,input:r,option:e,onChange:p,inputProps:m}))))}ae.defaultProps={inputProps:{},fieldProps:{}},ae.propTypes={fieldProps:p.object,inputProps:p.object,isPassword:p.bool,isRequired:p.bool,isRevealable:p.bool,name:p.string.isRequired,onChange:p.func},ne.propTypes={inputProps:p.object,onChange:p.func,option:p.shape({label:p.string,value:p.string}),input:p.shape({name:p.string,value:p.string,onBlur:p.func,onFocus:p.func,onChange:p.func})},se.propTypes={input:p.string,value:p.string,editableProps:p.object,onChange:p.func},le.propTypes={editableProps:p.object,input:p.object,inputProps:p.object,onChange:p.object,options:p.object};const me=t.memo((function(e){const{isRequired:r,name:i,options:o,fieldProps:a,editableProps:n,inputProps:s,onChange:l,hideMessage:m}=e;return t.createElement(c,{name:i},(({input:e,meta:i})=>t.createElement(U,Object.assign({className:"form__item_type_radio",fieldClassName:"form-radio",inputName:e.name,inputValue:e.value||"",isRequired:r,metaActive:i.active,metaError:i.error,metaModifiedSinceLastSubmit:i.modifiedSinceLastSubmit,metaSubmitError:i.submitError,metaSubmitFailed:i.submitFailed,metaTouched:i.touched,metaValid:i.valid,hideMessage:m},a),t.createElement(le,{input:e,options:o,onChange:l,editableProps:n,inputProps:s}))))}));function ce(e){const{options:i,isRequired:a,name:n,fieldProps:s,inputProps:l,hideMessage:u}=e,{change:d}=m();return t.createElement(c,{name:n},(({input:e,meta:m})=>{const c=r((()=>{const t={value:null,label:null};if(e.value){return i.find((t=>t.value===e.value))||t}return t}),[e.value]),p=o((e=>{d(n,e.value)}),[d]);return t.createElement(U,Object.assign({className:f("form-field_type_segmented","form__item_type_segmented"),fieldClassName:"form-segmented",inputName:e.name,inputValue:e.value||[],isRequired:a,metaActive:m.active,metaError:m.error,metaModifiedSinceLastSubmit:m.modifiedSinceLastSubmit,metaSubmitError:m.submitError,metaSubmitFailed:m.submitFailed,metaTouched:m.touched,metaValid:m.valid,hideMessage:u},s),t.createElement(B,Object.assign({segments:i,setActiveSegment:p,activeSegment:c},l)))}))}function ue(e,t){const r=Array.isArray(t)?t:[t];let i=[];return e.forEach((e=>{const o=r.includes(e.value),a=r.includes(e.label);let n=[];e.options&&(n=ue(e.options,t)),o||a?i.push(e):n.length&&(i=i.concat(n))})),i}me.defaultProps={fieldProps:{},editableProps:{},inputProps:{},options:[]},me.propTypes={name:p.string.isRequired,fieldProps:p.object,inputProps:p.object,editableProps:p.object,isRequired:p.bool,options:p.array,onChange:p.func},ce.propTypes={options:p.array.isRequired,name:p.string.isRequired,className:p.string,inputClass:p.string,isRequired:p.bool,label:p.string,placeholder:p.string,fieldProps:p.object,inputProps:p.object};const de=t.memo((function(e){const{isRequired:n,key:s,name:l,options:m,fieldProps:u,selectProps:d,selectRef:p,onChange:b,classNameGroupItem:g,hideMessage:h}=e;return t.createElement(c,{name:l},(({input:e,meta:l})=>{const c=o((t=>{e.onChange(t),b&&b(t,e.name)}),[b]),[_,x]=a(null),T=r((()=>{const t=ue(m,e.value);return!t.length&&e.value?.length&&t.push({value:e.value,label:e.value}),t}),[e.value]);i((()=>x(T)),[T]);const y=o(((e,t)=>{const r=Array.isArray(e)?e.map((e=>e.value)):e?.value||null;x(e),c(r)}),[c]);return t.createElement(U,Object.assign({className:f("form-field_type_select","form__item_type_select",g),fieldClassName:"form-select",inputName:e.name,inputValue:e.value,isRequired:n,metaActive:l.active,metaError:l.error,metaModifiedSinceLastSubmit:l.modifiedSinceLastSubmit,metaSubmitError:l.submitError,metaSubmitFailed:l.submitFailed,metaTouched:l.touched,metaValid:l.valid,hideMessage:h},u),t.createElement(W,Object.assign({className:"form-select-item",instanceId:`id_${e.name}`,value:_,onChange:y,options:m,ref:p,key:s},d)))}))}));de.propTypes={name:p.string.isRequired,selectProps:p.object,isRequired:p.bool,label:p.any,messageType:p.string,options:p.array,onChange:p.func};const pe=t.memo((function(e){const{name:r,isRequired:i,onChange:a,fieldProps:n,inputProps:s,classNameGroupItem:l,hideMessage:m}=e;return t.createElement(c,{name:r,type:"checkbox"},(({input:e,meta:r})=>{const c=o((t=>{e.onChange(t),a&&a(t.target.checked,e.name)}),[a]);return t.createElement(U,Object.assign({className:f("form-field_type_switch","form__item_type_switch",l),fieldClassName:"form-switch",inputName:e.name,inputValue:e.checked,isRequired:i,metaActive:r.active,metaError:r.error,metaModifiedSinceLastSubmit:r.modifiedSinceLastSubmit,metaSubmitError:r.submitError,metaSubmitFailed:r.submitFailed,metaTouched:r.touched,metaValid:r.valid,hideMessage:m,tag:"label"},n),t.createElement(M,Object.assign({autoComplete:"nope",checked:e.checked,name:e.name,type:"checkbox",onBlur:e.onBlur,onChange:c,onFocus:e.onFocus},s)))}))}));pe.defaultProps={inputProps:{},fieldProps:{}},pe.propTypes={fieldProps:p.object,inputProps:p.object,isRequired:p.bool,name:p.string,onChange:p.func};const fe=t.memo((function(e){const{isRequired:r,name:i,fieldProps:o,inputProps:a,classNameGroupItem:n,hideMessage:s}=e;return t.createElement(c,{name:i},(({input:e,meta:i})=>t.createElement(U,Object.assign({className:f("form-field_type_textarea","form__item_type_textarea",n),fieldClassName:"form-textarea",inputName:e.name,inputValue:e.value,isRequired:r,metaActive:i.active,metaError:i.error,metaModifiedSinceLastSubmit:i.modifiedSinceLastSubmit,metaSubmitError:i.submitError,metaSubmitFailed:i.submitFailed,metaTouched:i.touched,metaValid:i.valid,hideMessage:s},o),t.createElement(w,Object.assign({autoComplete:"nope",name:e.name,value:e.value,onBlur:e.onBlur,onChange:e.onChange,onFocus:e.onFocus},a)))))}));fe.defaultProps={inputProps:{},fieldProps:{}},fe.propTypes={name:p.string.isRequired,isRequired:p.bool,fieldProps:p.object,inputProps:p.object};const be=(e,t)=>{const r=Object.keys(t).map((e=>e===s?"notification__item_status_error":`react-select-id_${e}-input`)),i=e.find((e=>e.name?l(t,e.name):r.includes(e.id))),o=Object.keys(t);if(!i&&o.length){let e;try{const t=o[0];t===s?e=document.querySelector("notification__item_status_error"):(e=document.querySelector(`#${t}-error`),e||(e=document.querySelector(`#id_${t}`)))}catch(e){console.warn(e)}e&&e.scrollIntoView({block:"center"})}return i&&i.scrollIntoView({block:"center"}),null},ge=V(null,be),he=(e,t)=>{const[r,i]=e,o=i.submitError,a=i.error;if("non_field_errors"===r)t.formState.error=a,t.formState.submitError=o;else if(r in t.fields){if(a){const e=Object.assign({},t.formState.errors,{[r]:a});t.fields[r].touched=!0,t.fields[r].error=a,t.formState.errors=e}if(o){const e=Object.assign({},t.formState.submitErrors,{[r]:o});t.fields[r].submitError=o,t.formState.submitErrors=e,t.formState.submitFailed=!0,t.formState.submitSucceeded=!1,t.formState.lastSubmittedValues=t.formState.values}}},_e=async(e,t)=>{try{return{success:!0,response:await S({url:e,method:"POST",data:t})}}catch(e){const t={};return"string"==typeof e.response?.data&&(t[s]="Something went wrong"),"object"==typeof e.response?.data&&Object.entries(e.response.data).forEach((([e,r])=>{t[e]=r[0]})),{success:!1,formErrors:t,error:e}}},xe={checkbox:"checkbox",custom:"custom",choice:"choice",code:"code",datePicker:"datePicker",dateRangePicker:"dateRangePicker",fileInput:"fileInput",group:"group",radioGroup:"radioGroup",segmented:"segmented",select:"select",switch:"switch",text:"text",textarea:"textarea"};function Te(e,r,i){switch(e.type){case xe.checkbox:return t.createElement(J,Object.assign({key:r.key},e,i));case xe.choice:return t.createElement(Q,Object.assign({key:r.key},e,i));case xe.code:return t.createElement(Y,Object.assign({key:r.key},e,i));case xe.switch:return t.createElement(pe,Object.assign({key:r.key},e,i));case xe.segmented:return t.createElement(ce,Object.assign({key:r.key},e,i));case xe.datePicker:return t.createElement(Z,Object.assign({key:r.key},e,i));case xe.fileInput:return t.createElement(ie,Object.assign({key:r.key},e,i));case xe.radioGroup:return t.createElement(me,Object.assign({key:r.key},e,i));case xe.select:return t.createElement(de,Object.assign({key:r.key},e,i));case xe.text:return t.createElement(ae,Object.assign({key:r.key},e,i));case xe.textarea:return t.createElement(fe,Object.assign({key:r.key},e,i));case xe.custom:return t.createElement(X,Object.assign({key:r.key},e,i));case xe.group:return t.createElement(oe,Object.assign({key:r.key},e,i),Object.entries(e.group).map((([t,r])=>Te({...r,hideMessage:e.hideMessage,classNameGroupItem:r.classNameGroupItem||"form__group-item"},{key:t+"_form_group"},i))))}}const ye=t.forwardRef((function(e,r){const{additionalProps:i,after:a,before:n,buttonDirection:s,buttonGap:l,buttonPadding:m,groupGap:c,className:p,config:b,description:g,descriptionSize:T,descriptionTextColor:y,descriptionTextWeight:v,disableFieldsAutoComplete:S,fieldsGap:E,formName:C,initialValues:N,initialValuesEqual:z,isLoading:j,loader:k,loaderSet:R,loaderFill:B,loaderItemFill:W,loaderText:M,language:w,mutators:V,onChangeFormValues:D,onClickSecondaryButton:A,onClickTertiaryButton:I,onSubmit:$,primaryButton:H,primaryButtonLabel:K,secondaryButton:U,secondaryButtonLabel:J,primaryButtonFill:Q,primaryButtonFillHover:X,secondaryButtonFill:Y,secondaryButtonFillHover:Z,primaryButtonSize:ee,primaryButtonLabelTextColor:te,primaryButtonLabelSize:re,primaryButtonLabelTextWeight:ie,secondaryButtonSize:oe,secondaryButtonLabelTextColor:ae,secondaryButtonLabelSize:ne,secondaryButtonLabelTextWeight:se,tertiaryButton:le,tertiaryButtonFill:me,tertiaryButtonFillHover:ce,tertiaryButtonSize:ue,tertiaryButtonLabelTextColor:de,tertiaryButtonLabelSize:pe,tertiaryButtonLabelTextWeight:fe,tertiaryButtonLabel:be,set:he,type:_e,buttonJustifyContent:xe,title:ye,notificationType:ve,buttonFill:Se,titleTextSize:Ee,titleTextColor:Ce,titleTextWeight:Ne,validationSchema:ze,dataTour:Pe,dataTourButtons:Fe,dataTourPrimaryButton:je,dataTourSecondaryButton:ke,dataTourTertiaryButton:Re}=e,Be=G(ze,w),We=o((e=>{r&&(r.current=e)}),[r]),Me=_(e,{prefix:"fill_",propsKey:"fill"}),we=_(e,{prefix:"direction_",propsKey:"direction"}),Le=_(e,{prefix:"shape_",propsKey:"shape"}),qe=_(e,{prefix:"elevation_",propsKey:"elevation"}),{styles:Oe}=x(e);return t.createElement(u,{decorators:[ge],initialValues:N,initialValuesEqual:z,mutators:V,render:({handleSubmit:e,submitError:r,modifiedSinceLastSubmit:o,form:u})=>t.createElement("form",{style:Oe,className:f(p,"form",he&&`form_set_${he}`,_e&&`form_type_${_e}`,we,Me,Le,qe),name:C,"data-tour":Pe,ref:()=>We(u),onSubmit:e,autoComplete:S?"off":void 0,autoCorrect:S?"off":void 0,autoCapitalize:S?"off":void 0,spellCheck:S?"false":void 0},n,ye&&t.createElement(F,{className:"form__title",size:Ee,textColor:Ce,textWeight:Ne},ye),g&&t.createElement(h,{className:"form__description",size:T,textColor:y,textWeight:v},g),r&&!o&&t.createElement("div",{className:f("notification","form-notification",ve?`form-notification_type_${ve}`:"form-notification_type_global")},t.createElement(O,{className:"form-notification__item",titleTextSize:"h6",title:u.getState().submitError,set:"form",status:"error"})),D&&t.createElement(d,{subscription:{values:!0},onChange:D}),Boolean(Object.keys(b).length)&&t.createElement(q,{direction:"vertical",gap:E||c,className:"form__wrapper"},Object.keys(b).map((e=>Te(b[e],{key:e},i[b[e].name]))),j&&(k||t.createElement(P,{className:"form__loader",set:R,fill:B,itemFill:W,text:M}))),(K||H||J||U||le||be)&&t.createElement(q,{fill:Se,justifyContent:xe,direction:s,padding:m,gap:l,className:"form__button",dataTour:Fe},K?t.createElement(L,{width:"fill",className:"form__button-item",fill:Q,fillHover:X,size:ee,labelTextColor:te,labelSize:re,labelTextWeight:ie,label:K,dataTour:je}):H,J?t.createElement(L,{width:"fill",className:"form__button-item",fill:Y,fillHover:Z,size:oe,labelTextColor:ae,labelSize:ne,labelTextWeight:se,label:J,onClick:A,dataTour:ke}):U,be?t.createElement(L,{width:"fill",className:"form__button-item",fill:me,fillHover:ce,size:ue,labelTextColor:de,labelSize:pe,labelTextWeight:fe,label:be,onClick:I,dataTour:Re}):le),a),subscription:{submitting:!0,pristine:!0,modifiedSinceLastSubmit:!0,submitError:!0},validate:Be,onSubmit:$})}));ye.propTypes={additionalProps:p.object,after:p.any,before:p.any,buttonGap:p.string,className:p.string,config:p.object,description:p.string,descriptionSize:p.string,descriptionTextColor:p.string,descriptionTextWeight:p.string,disableFieldsAutoComplete:p.string,fieldsGap:p.string,formName:p.string,initialValues:p.any,initialValuesEqual:p.any,language:p.string,isLoading:p.bool,loaderText:p.string,mutators:p.any,onChangeFormValues:p.func,onClickSecondaryButton:p.func,onSubmit:p.func,primaryButton:p.string,primaryButtonFill:p.string,primaryButtonLabel:p.string,secondaryButton:p.string,secondaryButtonFill:p.string,secondaryButtonLabel:p.string,set:p.string,title:p.string,titleSize:p.string,titleTextColor:p.string,titleTextWeight:p.string,validationSchema:p.object},ye.defaultProps={additionalProps:{},isLoading:!1,loaderSet:"simple",loaderFill:"surfacePrimary",loaderItemFill:"surfaceItemAccent",language:"en",titleSize:"h1",buttonDirection:"vertical",direction:"vertical",disableFieldsAutoComplete:!1};export{J as Checkbox,Q as ChoiceField,Y as CodeField,X as CustomField,Z as DatePickerField,U as FieldWrapper,K as FieldWrapperBase,ie as FileInput,ye as FinalForm,oe as Group,ae as InputField,me as RadioGroup,ce as SegmentedField,de as SelectField,pe as Switch,fe as Textarea,I as addRequiredFieldsParamToSchema,A as emailValidation,be as focusOnError,ge as focusOnErrorDecorator,xe as formTypes,Te as generateField,D as phoneValidation,_e as sendFormDataToServer,he as setErrorsMutator,G as useYupValidationSchema};
+import { isPossiblePhoneNumber } from 'libphonenumber-js';
+import React, { useMemo, useEffect, useCallback, useState } from 'react';
+import { setIn, FORM_ERROR, getIn } from 'final-form';
+import { useForm, Field, Form, FormSpy } from 'react-final-form';
+export { Field, useForm, useFormState } from 'react-final-form';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Checkbox } from '@itcase/ui/components/Checkbox';
+import { Divider } from '@itcase/ui/components/Divider';
+import { Text } from '@itcase/ui/components/Text';
+import { useDeviceTargetClass } from '@itcase/ui/hooks/useDeviceTargetClass';
+import { useStyles } from '@itcase/ui/hooks/useStyles';
+import { Choice } from '@itcase/ui/components/Choice';
+import { Code } from '@itcase/ui/components/Code';
+import { DatePickerInput } from '@itcase/ui/components/DatePicker';
+import axios from 'axios';
+import { useDropzone } from 'react-dropzone';
+import { fromEvent } from 'file-selector';
+import castArray from 'lodash/castArray';
+import { createFileFromDataURL } from '@itcase/common';
+import { Loader } from '@itcase/ui/components/Loader';
+import { Title } from '@itcase/ui/components/Title';
+import { Input } from '@itcase/ui/components/Input';
+import { Icon } from '@itcase/ui/components/Icon';
+import { RadioButton } from '@itcase/ui/components/RadioButton';
+import { Segmented } from '@itcase/ui/components/Segmented';
+import { Select } from '@itcase/ui/components/Select';
+import { Switch } from '@itcase/ui/components/Switch';
+import { Textarea } from '@itcase/ui/components/Textarea';
+import { Button } from '@itcase/ui/components/Button';
+import { Group as Group$1 } from '@itcase/ui/components/Group';
+import { NotificationItem } from '@itcase/ui/components/Notification';
+import createDecorator from 'final-form-focus';
+
+const phoneValidation = (value, context) => {
+  if (!value) {
+    return true;
+  }
+  return isPossiblePhoneNumber(value, 'RU');
+};
+const emailValidation = (value, context) => {
+  // from https://emailregex.com/
+  if (!value) {
+    return true;
+  }
+  // eslint-disable-next-line
+  const regexp = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9]{2,}(?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
+  return regexp.test(String(value).toLowerCase());
+};
+const addRequiredFieldsParamToSchema = schema => {
+  const fields = Object.entries(schema.fields);
+  schema.requiredFields = fields.reduce((list, [fieldName, validationProps]) => {
+    if (validationProps.exclusiveTests?.required) {
+      list.push(fieldName);
+    }
+    return list;
+  }, []);
+  return schema;
+};
+
+/**
+ * Sets the `innerError.message` in an `errors` object at the key
+ * defined by `innerError.path`.
+ * @param {Object} errors The object to set the error in.
+ * @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) => {
+  return setIn(errors, innerError.path, innerError.message);
+};
+
+/**
+ * Empty object map with no prototype. Used as default
+ * value for reducing the `err.inner` array of errors
+ * from a `yup~ValidationError`.
+ */
+const emptyObj = Object.create(null);
+
+/**
+ * Takes a `yup` validation schema and returns a function that expects
+ * a map of values to validate. If the validation passes, the function resolves to `undefined`
+ * (signalling that the values are valid). If the validation doesn't pass, it resolves
+ * to a map of invalid field names to errors.
+ * @param {import('yup').ObjectSchema} schema `yup` schema definition.
+ * @returns {(values: Object) => Promise<?Object>} An async function that expects some `values`
+ *  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.');
+      }
+    }
+  };
+};
+function useYupValidationSchema(schema, language) {
+  const validate = useMemo(() => schema && makeValidate(schema), [schema, language]);
+  return validate;
+}
+
+function FieldWrapperBase(props) {
+  const {
+    after,
+    afterItem,
+    before,
+    beforeItem,
+    children,
+    className,
+    desc,
+    descTextSize,
+    descTextColor,
+    descTextWidth,
+    divider,
+    dividerDirection,
+    dividerFill,
+    dividerSize,
+    dividerWidth,
+    fieldClassName,
+    id,
+    inputName,
+    inputValue,
+    isRequired,
+    label,
+    labelTextSize,
+    labelTextColor,
+    labelTextWidth,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    message,
+    messageTextSize,
+    messageTextColor,
+    messageTextWeight,
+    metaActive,
+    metaError,
+    metaModifiedSinceLastSubmit,
+    metaSubmitError,
+    metaSubmitFailed,
+    metaTouched,
+    metaValid,
+    set,
+    type,
+    hideMessage,
+    isHidden,
+    tag: Tag,
+    dataTour,
+    showErrorsOnSubmit
+  } = props;
+  const error = metaError || !metaModifiedSinceLastSubmit && metaSubmitError || false;
+  const showError = useMemo(() => {
+    if (showErrorsOnSubmit) {
+      return metaSubmitFailed && metaTouched && error;
+    } else {
+      return metaTouched && error;
+    }
+  }, [showErrorsOnSubmit, metaSubmitFailed, metaTouched, error]);
+  const showValid = useMemo(() => {
+    const hasValue = Array.isArray(inputValue) ? inputValue.length : inputValue;
+    const isModifiedAfterSubmit = !metaError && metaSubmitError && metaModifiedSinceLastSubmit;
+    return hasValue && (metaValid || isModifiedAfterSubmit);
+  }, [inputValue, metaValid, metaError, metaSubmitError, metaModifiedSinceLastSubmit]);
+  const formFieldClass = useMemo(() => clsx(className, showError && 'form__item_state_error', showValid && 'form__item_state_success', isRequired && 'form__item_state_required', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled'), [className, showError, showValid, isRequired, metaActive, inputValue]);
+  const fieldClass = useMemo(() => clsx(fieldClassName, showError && `${fieldClassName}_state_error`, showValid && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`), [fieldClassName, showError, showValid, metaActive, inputValue]);
+  const sizeClass = useDeviceTargetClass(props, {
+    prefix: 'form-field_size_',
+    propsKey: 'size'
+  });
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const inputFillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'form-field_shape_',
+    propsKey: 'shape'
+  });
+  const inputShapeClass = useDeviceTargetClass(props, {
+    prefix: 'form-field__item-value_shape_',
+    propsKey: 'inputShape'
+  });
+  const directionClass = useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const widthClass = useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  const {
+    styles: formFieldStyles
+  } = useStyles(props);
+  return /*#__PURE__*/React.createElement(Tag, {
+    className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    "data-tour": dataTour,
+    style: formFieldStyles
+  }, before, label && /*#__PURE__*/React.createElement("div", {
+    htmlFor: id,
+    className: "form-field__label"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: labelTextSize,
+    textWeight: labelTextWidth,
+    textColor: labelTextColor
+  }, label)), desc && /*#__PURE__*/React.createElement("div", {
+    className: "form-field__desc"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: descTextSize,
+    textWeight: descTextWidth,
+    textColor: descTextColor
+  }, desc)), /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-field__content', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-field__content-inner', fieldClass)
+  }, beforeItem, children, afterItem), divider && /*#__PURE__*/React.createElement(Divider, {
+    className: "form-field__item-divider",
+    width: dividerWidth,
+    direction: dividerDirection,
+    size: dividerSize,
+    fill: dividerFill
+  })), !hideMessage && /*#__PURE__*/React.createElement("div", {
+    className: "form-field__message"
+  }, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type-error",
+    size: errorMessageTextSize,
+    textWeight: errorMessageTextWeight,
+    textColor: errorMessageTextColor,
+    id: `${inputName}-error`
+  }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: messageTextSize,
+    textWeight: messageTextWeight,
+    textColor: messageTextColor
+  }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: messageTextSize
+  }, '\u00A0')), after);
+}
+FieldWrapperBase.defaultProps = {
+  tag: 'div',
+  type: 'normal',
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextSecondary'
+};
+FieldWrapperBase.propTypes = {
+  after: PropTypes.any,
+  afterItem: PropTypes.any,
+  autoComplete: PropTypes.string,
+  before: PropTypes.any,
+  beforeItem: PropTypes.any,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  desc: PropTypes.string,
+  descTextSize: PropTypes.string,
+  descTextColor: PropTypes.string,
+  descTextWidth: PropTypes.string,
+  dividerDirection: PropTypes.string,
+  dividerFill: PropTypes.string,
+  dividerSize: PropTypes.string,
+  dividerWidth: PropTypes.string,
+  fieldClassName: PropTypes.string,
+  id: PropTypes.string,
+  inputName: PropTypes.string,
+  inputOnBlur: PropTypes.func,
+  inputOnChange: PropTypes.func,
+  inputOnFocus: PropTypes.func,
+  inputValue: PropTypes.any,
+  isRequired: PropTypes.bool,
+  itemType: PropTypes.string,
+  label: PropTypes.any,
+  labelTextSize: PropTypes.string,
+  labelTextColor: PropTypes.string,
+  labelTextWidth: PropTypes.string,
+  errorMessageTextSize: PropTypes.string,
+  errorMessageTextWidth: PropTypes.string,
+  errorMessageTextColor: PropTypes.string,
+  message: PropTypes.string,
+  messageSize: PropTypes.string,
+  messageTextColor: PropTypes.string,
+  messageTextWidth: PropTypes.string,
+  metaActive: PropTypes.bool,
+  metaError: PropTypes.string,
+  metaModifiedSinceLastSubmit: PropTypes.bool,
+  metaSubmitError: PropTypes.string,
+  metaSubmitFailed: PropTypes.bool,
+  metaTouched: PropTypes.bool,
+  metaValid: PropTypes.bool,
+  set: PropTypes.string,
+  showErrorsOnSubmit: PropTypes.bool,
+  type: PropTypes.string
+};
+function FieldWrapper(props) {
+  const {
+    inputName
+  } = props;
+  const {
+    change
+  } = useForm(); // , mutators
+
+  useEffect(() => {
+    return () => {
+      change(inputName, undefined);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(FieldWrapperBase, props);
+}
+FieldWrapper.propTypes = {
+  autoComplete: PropTypes.string,
+  children: PropTypes.any,
+  className: PropTypes.string,
+  fieldClassName: PropTypes.string,
+  hint: PropTypes.string,
+  inputName: PropTypes.string,
+  inputOnBlur: PropTypes.func,
+  inputOnChange: PropTypes.func,
+  inputOnFocus: PropTypes.func,
+  inputValue: PropTypes.any,
+  isRequired: PropTypes.bool,
+  itemType: PropTypes.string,
+  label: PropTypes.any,
+  metaActive: PropTypes.bool,
+  metaError: PropTypes.string,
+  metaModifiedSinceLastSubmit: PropTypes.bool,
+  metaSubmitError: PropTypes.string,
+  metaSubmitFailed: PropTypes.bool,
+  metaTouched: PropTypes.bool,
+  metaValid: PropTypes.bool,
+  showErrorsOnSubmit: PropTypes.bool
+};
+
+const CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
+  const {
+    name,
+    isRequired,
+    onChange,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    type: "checkbox"
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.checked, input.name);
+      }
+    }, [onChange]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_checkbox', 'form__item_type_checkbox', classNameGroupItem),
+      fieldClassName: "form-checkbox",
+      inputName: input.name,
+      inputValue: input.checked,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      tag: "label",
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Checkbox, Object.assign({
+      autoComplete: "nope",
+      checked: input.checked,
+      name: input.name,
+      type: "checkbox",
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, inputProps)));
+  });
+});
+CheckboxField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CheckboxField.propTypes = {
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
+  const {
+    options,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    isMultiple,
+    isRequired,
+    initialValue,
+    label,
+    name,
+    messageType,
+    hideMessage,
+    placeholder
+  } = props;
+  const {
+    change
+  } = useForm();
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    initialValue: initialValue
+  }, ({
+    input,
+    meta
+  }) => {
+    const activeOption = useMemo(() => {
+      const emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        const currentOption = options.find(option => option.value === input.value);
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    const setActiveSegment = useCallback(option => {
+      change(name, option.value);
+    }, [change]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      fieldClassName: "form-choice",
+      inputName: input.name,
+      inputValue: input.value || [],
+      isRequired: isRequired,
+      label: label,
+      messageType: messageType,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Choice, Object.assign({
+      className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && 'form-choice_state_error'),
+      options: options,
+      inputName: input.name,
+      inputValue: input.value || [],
+      isMultiple: isMultiple,
+      isRequired: isRequired,
+      placeholder: placeholder,
+      active: activeOption,
+      setActiveSegment: setActiveSegment
+    }, inputProps)));
+  });
+});
+ChoiceField.propTypes = {
+  options: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  inputClass: PropTypes.string,
+  isMultiple: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  placeholder: PropTypes.string
+};
+
+const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
+  const {
+    Component,
+    isRequired,
+    name,
+    fieldProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_custom', 'form__item_type_custom', classNameGroupItem),
+    fieldClassName: 'form-custom',
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
+    input: input,
+    meta: meta
+  }))));
+});
+CustomField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CustomField.propTypes = {
+  name: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
+const CodeField = /*#__PURE__*/React.memo(function CodeField(props) {
+  const {
+    isRequired,
+    name,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_code', 'form__item_type_code', classNameGroupItem),
+    fieldClassName: 'form-code',
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(Code, Object.assign({
+    autoComplete: "nope",
+    name: input.name,
+    value: input.value,
+    onBlur: input.onBlur,
+    onChange: input.onChange,
+    onFocus: input.onFocus
+  }, inputProps))));
+});
+CodeField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+CodeField.propTypes = {
+  name: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
+function DatePickerField(props) {
+  const {
+    isRequired,
+    fieldProps,
+    inputProps,
+    datePickerProps,
+    name,
+    iconSize,
+    iconBorder,
+    iconBorderHover,
+    iconFill,
+    iconFillHover,
+    iconRevealableShow,
+    iconRevealableHide,
+    iconShape,
+    hideMessage,
+    onChange,
+    classNameGroupItem
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(value => {
+      input.onChange(value);
+      if (onChange) {
+        onChange(value, input.name);
+      }
+    }, [onChange]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
+      fieldClassName: "form-datepicker",
+      inputName: input.name,
+      inputValue: input.value || '',
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
+      name: input.name,
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus,
+      inputProps: inputProps,
+      datePickerProps: datePickerProps
+    }));
+  });
+}
+DatePickerField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+DatePickerField.propTypes = {
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func
+};
+
+async function getFileByURL(url) {
+  try {
+    const response = await axios({
+      url: `/api/${url}/`,
+      responseType: 'blob'
+    });
+    const blobObject = response.data;
+    const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
+    // Remove double quotes
+    let filename = dirtyFilename?.substring(1).slice(0, -1);
+    if (!filename) {
+      const typeParts = blobObject.type.split('/');
+      const fileType = typeParts[typeParts.length - 1];
+      filename = `${new Date().getTime()}.${fileType}`;
+    }
+    return new File([blobObject], filename, {
+      type: blobObject.type
+    });
+  } catch (error) {
+    console.log('error: ', error);
+    return null;
+  }
+}
+async function convertToFiles(inputValue, isPreviews) {
+  const newFiles = [];
+  for await (const value of castArray(inputValue)) {
+    let newFile = null;
+
+    // Download image by url and save as File instance
+    const isURL = typeof value === 'string' && value.includes('/');
+    if (value.image || isURL) {
+      newFile = await getFileByURL(value.image || value);
+      if (newFile) {
+        setFileDataURL(newFile);
+      }
+    }
+
+    // Convert dataURL to File instance
+    if (value.dataURL) {
+      newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
+      newFile.dataURL = value.dataURL;
+    }
+
+    // Save new File to state
+    if (newFile) {
+      newFile.id = value.id;
+      if (isPreviews) {
+        newFile.preview = URL.createObjectURL(newFile);
+      }
+      newFiles.push(newFile);
+    }
+
+    // else if (value) {
+    //   newFiles.push({
+    //     name: value,
+    //     error: 'File is unavailable',
+    //   })
+    // }
+  }
+
+  return newFiles;
+}
+function setFileDataURL(file, resolve) {
+  resolve = resolve || (() => {});
+  // Init reader and save his file
+  const reader = new FileReader();
+  reader._readedFile = file;
+
+  // Set handlers
+  reader.onabort = () => resolve();
+  reader.onerror = () => resolve();
+  reader.onload = event => {
+    event.target._readedFile.dataURL = reader.result;
+    resolve();
+  };
+  // Run reader
+  if (file instanceof File) {
+    reader.readAsDataURL(file);
+  } else {
+    resolve();
+  }
+}
+const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
+  const {
+    inputName,
+    size,
+    className,
+    fileErrorText,
+    hintTitleTextSize,
+    removeThumbTextSize,
+    removeThumbTextColor,
+    removeThumbTextWeight,
+    thumbNameTextSize,
+    thumbNameTextColor,
+    removeThumbTextHoverColor,
+    thumbNameTextWrap,
+    thumbNameTextWeight,
+    hintTitleTextColor,
+    hintTitleTextWrap,
+    thumbColumn,
+    hintTitleTextWeight,
+    hintDescriptionTextSize,
+    hintDescriptionTextColor,
+    hintDescriptionTextWrap,
+    hintDescriptionTextWeight,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    inputValue,
+    maxFiles,
+    maxSize,
+    removeThumbText,
+    hintTitle,
+    hintDescription,
+    isShowFilename,
+    isPreviews,
+    loadingText,
+    dropzoneProps = {},
+    onAddFiles,
+    onDeleteFile
+  } = props;
+  const [fileError, setFileError] = useState('');
+  const [fileIsLoading, setFileIsLoading] = useState(false);
+  // State with instances of "File" type
+  const [files, setFiles] = useState(inputValue ? castArray(inputValue) : []);
+
+  // Save to mobx state
+  const {
+    change
+  } = useForm();
+  const changeFormState = useCallback(newFiles => {
+    // If max files in dropzone is 1 - return file as it self, else as array of files
+    // ps: for old projects compatibility
+    const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
+    change(inputName, toSave);
+    return toSave;
+  }, [dropzoneProps, change]);
+
+  // Create dropzone options
+  const {
+    getRootProps,
+    getInputProps
+  } = useDropzone({
+    maxSize: maxSize || 10485760,
+    // 10mb
+    maxFiles: maxFiles || 5,
+    // accept: { 'image/*': [] },
+    ...dropzoneProps,
+    getFilesFromEvent: async event => {
+      const result = await fromEvent(event);
+      const newFiles = result.filter(item => item instanceof File);
+      // Add exists and new files to accepted(or rejected)
+      return [...files, ...newFiles];
+    },
+    onDropAccepted: (acceptedFiles, event) => {
+      // If dropped files has accepted and we need a previews
+      if (isPreviews) {
+        // Add preview to every file
+        acceptedFiles.forEach(file => {
+          if (!file.error) {
+            file.preview = URL.createObjectURL(file);
+          }
+        });
+      }
+      // Save to form data (including empty when files are not valid)
+      setFiles(acceptedFiles);
+      setFileError('');
+
+      // Save DataURL for all files
+      const readerPromisesList = acceptedFiles.map(file => {
+        return new Promise(resolve => setFileDataURL(file, resolve));
+      });
+      // Save files to form values
+      Promise.all(readerPromisesList).then(() => {
+        const filesToSave = changeFormState(acceptedFiles);
+        if (onAddFiles) {
+          onAddFiles(filesToSave, inputName);
+        }
+      });
+    },
+    onDropRejected: (rejectedFiles, event) => {
+      // If dropped files has rejected
+      if (rejectedFiles.length) {
+        const firstFileError = rejectedFiles[0].errors[0]?.message;
+        // Show error
+        setFileError(firstFileError || 'Error on adding file');
+      } else {
+        // Else clean error
+        setFileError('');
+      }
+    }
+  });
+
+  // Delete file from dropzone
+  const removeFile = useCallback((event, index) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const newFiles = [...files];
+    newFiles.splice(index, 1);
+    if (onDeleteFile) {
+      onDeleteFile(files[index], inputName);
+    }
+    changeFormState(newFiles);
+  }, [files, changeFormState, onDeleteFile]);
+
+  //
+  const convertFiledValueAndSaveAsFiles = useCallback(async newInputValue => {
+    setFileIsLoading(true);
+    const newFiles = await convertToFiles(newInputValue, isPreviews);
+    setFileIsLoading(false);
+    setFiles(newFiles);
+    return newFiles;
+  }, [isPreviews]);
+  useEffect(() => {
+    // First time convert value to Files and save to local and form state
+    convertFiledValueAndSaveAsFiles(inputValue).then(newFiles => changeFormState(newFiles));
+  }, []); // eslint-disable-line
+
+  useEffect(() => {
+    // Everytime convert value to Files and save to local state
+    if (!inputValue) {
+      setFiles([]);
+    } else {
+      convertFiledValueAndSaveAsFiles(inputValue);
+    }
+    // only "inputValue"
+  }, [inputValue]); // eslint-disable-line
+
+  useEffect(() => {
+    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
+    return () => files.forEach(file => URL.revokeObjectURL(file?.preview));
+  }, []); // eslint-disable-line
+
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  const borderWidthClass = useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
+  const borderTypeClass = useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'form-dropzone_shape_',
+    propsKey: 'shape'
+  });
+  const thumbBorderWidthClass = useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'thumbBorderWidth'
+  });
+  const thumbDirectionClass = useDeviceTargetClass(props, {
+    prefix: 'form-dropzone__thumb_direction_',
+    propsKey: 'thumbDirection'
+  });
+  const thumbBorderColorClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'thumbBorderColor'
+  });
+  const thumbBorderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'thumbBorderColorHover'
+  });
+  const thumbBorderTypeClass = useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'thumbBorderType'
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
+    className: `form-dropzone__dropzone dropzone ${className} thumbColumn form-dropzone__dropzone_size_${size} ${shapeClass}`
+  }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
+    name: inputName
+  })), /*#__PURE__*/React.createElement("div", {
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+  }, files.map((file, i) => /*#__PURE__*/React.createElement("aside", {
+    className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
+    key: `${file.id || `${file.name}_${i}` || 'i' + i}`
+  }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "form-dropzone__thumb-image-inner",
+    src: file.preview || file.image,
+    onLoad: () => {
+      // Revoke data uri after image is loaded
+      URL.revokeObjectURL(file.preview);
+    }
+  })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWrap: thumbNameTextWrap,
+    textWeight: thumbNameTextWeight
+  }, fileErrorText || file.error)), isShowFilename && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-name"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: thumbNameTextSize,
+    textColor: thumbNameTextColor,
+    textWrap: thumbNameTextWrap,
+    textWeight: thumbNameTextWeight,
+    className: "form-dropzone__thumb-name-inner"
+  }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-loader"
+  }, /*#__PURE__*/React.createElement(Loader, {
+    fill: "surfacePrimary",
+    height: "fill",
+    itemFill: "surfaceItemAccent",
+    set: "simple",
+    width: "fill"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__thumb-remove",
+    onClick: event => removeFile(event, i)
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: removeThumbTextSize,
+    textColor: removeThumbTextColor,
+    textWeight: removeThumbTextWeight,
+    textColorHover: removeThumbTextHoverColor,
+    className: "form-dropzone__thumb-remove-text"
+  }, removeThumbText || 'Remove')))), !files.length ? /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__hint"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWrap: hintTitleTextWrap,
+    textWeight: hintTitleTextWeight,
+    className: "form-dropzone__hint-title"
+  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React.createElement(Text, {
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWrap: hintDescriptionTextWrap,
+    textWeight: hintDescriptionTextWeight,
+    className: "form-dropzone__hint-text"
+  }, hintDescription)) : /*#__PURE__*/React.createElement("div", {
+    className: "form-dropzone__hint form-dropzone__hint_type_add-more"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: hintTitleTextSize,
+    textColor: hintTitleTextColor,
+    textWrap: hintTitleTextWrap,
+    textWeight: hintTitleTextWeight,
+    className: "form-dropzone__hint-title"
+  }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React.createElement(Text, {
+    size: hintDescriptionTextSize,
+    textColor: hintDescriptionTextColor,
+    textWrap: hintDescriptionTextWrap,
+    textWeight: hintDescriptionTextWeight,
+    className: "form-dropzone__hint-text"
+  }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
+    className: "form-field__message"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: errorMessageTextSize,
+    textWeight: errorMessageTextWeight,
+    textColor: errorMessageTextColor
+  }, fileError)));
+});
+FileInputDropzone.propTypes = {
+  dropzoneProps: PropTypes.object,
+  hintDescription: PropTypes.string,
+  hintTitle: PropTypes.string,
+  inputName: PropTypes.string,
+  inputValue: PropTypes.any,
+  isPreviews: PropTypes.bool,
+  isShowFilename: PropTypes.bool,
+  loadingText: PropTypes.string,
+  metaError: PropTypes.string,
+  metaTouched: PropTypes.bool,
+  removeThumbText: PropTypes.string,
+  onAddFiles: PropTypes.func,
+  onDeleteFile: PropTypes.func
+};
+
+const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
+  const {
+    name,
+    shape,
+    size,
+    borderWidth,
+    borderColor,
+    borderColorHover,
+    borderType,
+    label,
+    thumbBorderWidth,
+    thumbBorderColor,
+    thumbBorderColorHover,
+    thumbBorderType,
+    removeThumbTextHoverColor,
+    labelTextColor,
+    fill,
+    fillHover,
+    className,
+    removeThumbText,
+    thumbNameTextSize,
+    thumbNameTextColor,
+    thumbNameTextWrap,
+    thumbNameTextWeight,
+    removeThumbTextSize,
+    removeThumbTextColor,
+    removeThumbTextWeight,
+    hintTitle,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    fieldProps,
+    hintTitleTextSize,
+    hintTitleTextColor,
+    hintTitleTextWrap,
+    hintTitleTextWeight,
+    hintDescriptionTextSize,
+    hintDescriptionTextColor,
+    hintDescriptionTextWrap,
+    hintDescriptionTextWeight,
+    hideMessage,
+    thumbDirection,
+    hintDescription,
+    isShowFilename,
+    fileErrorText,
+    dropzoneProps,
+    maxFiles,
+    maxSize,
+    thumbColumn,
+    isRequired,
+    isPreviews,
+    onAddFiles,
+    onDeleteFile,
+    classNameGroupItem
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+    fieldClassName: "form-dropzone",
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    label: label,
+    labelTextColor: labelTextColor,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
+    dropzoneProps: dropzoneProps,
+    hintDescription: hintDescription,
+    hintTitle: hintTitle,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderColorHover: borderColorHover,
+    borderType: borderType,
+    thumbBorderWidth: thumbBorderWidth,
+    thumbBorderColor: thumbBorderColor,
+    thumbBorderColorHover: thumbBorderColorHover,
+    thumbBorderType: thumbBorderType,
+    fileErrorText: fileErrorText,
+    fill: fill,
+    size: size,
+    maxFiles: maxFiles,
+    maxSize: maxSize,
+    removeThumbTextHoverColor: removeThumbTextHoverColor,
+    fillHover: fillHover,
+    className: className,
+    thumbColumn: thumbColumn,
+    thumbDirection: thumbDirection,
+    inputName: input.name,
+    inputValue: input.value,
+    thumbNameTextSize: thumbNameTextSize,
+    thumbNameTextColor: thumbNameTextColor,
+    thumbNameTextWrap: thumbNameTextWrap,
+    thumbNameTextWeight: thumbNameTextWeight,
+    hintTitleTextSize: hintTitleTextSize,
+    hintTitleTextColor: hintTitleTextColor,
+    hintTitleTextWrap: hintTitleTextWrap,
+    hintTitleTextWeight: hintTitleTextWeight,
+    removeThumbTextSize: removeThumbTextSize,
+    removeThumbTextColor: removeThumbTextColor,
+    removeThumbTextWeight: removeThumbTextWeight,
+    hintDescriptionTextSize: hintDescriptionTextSize,
+    hintDescriptionTextColor: hintDescriptionTextColor,
+    hintDescriptionTextWrap: hintDescriptionTextWrap,
+    hintDescriptionTextWeight: hintDescriptionTextWeight,
+    errorMessageTextSize: errorMessageTextSize,
+    errorMessageWeight: errorMessageTextWeight,
+    errorMessageTextColor: errorMessageTextColor,
+    isPreviews: isPreviews,
+    shape: shape,
+    isShowFilename: isShowFilename,
+    metaError: meta.error,
+    metaTouched: meta.touched,
+    removeThumbText: removeThumbText,
+    onAddFiles: onAddFiles,
+    onDeleteFile: onDeleteFile
+  })));
+});
+FileInput.defaultProps = {
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary',
+  thumbColumn: 1,
+  thumbDirection: 'vertical'
+};
+FileInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  classNameGroupItem: PropTypes.string,
+  classNameInput: PropTypes.string,
+  classNameInputWrapper: PropTypes.string,
+  dropzoneProps: PropTypes.object,
+  hintDescription: PropTypes.string,
+  hintTitle: PropTypes.string,
+  inputClass: PropTypes.string,
+  isPreviews: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isShowFilename: PropTypes.bool,
+  label: PropTypes.any,
+  removeThumbText: PropTypes.string,
+  onAddFiles: PropTypes.func,
+  onDeleteFile: PropTypes.func
+};
+
+const Group = /*#__PURE__*/React.memo(function Group(props) {
+  const {
+    after,
+    before,
+    className,
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWeight,
+    message,
+    errorMessageTextSize,
+    errorMessageTextWeight,
+    errorMessageTextColor,
+    messageTextSize,
+    messageTextWeight,
+    messageTextColor,
+    children,
+    dataTour,
+    hideMessage,
+    name,
+    showErrorsOnSubmit
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => {
+    const error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
+    const showError = useMemo(() => {
+      if (showErrorsOnSubmit) {
+        return meta.submitFailed && meta.touched && error;
+      } else {
+        return meta.touched && error;
+      }
+    }, [showErrorsOnSubmit, meta.submitFailed, meta.touched, error]);
+    return /*#__PURE__*/React.createElement("div", {
+      className: clsx('form__group', className),
+      "data-tour": dataTour
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form__group-wrapper"
+    }, before, /*#__PURE__*/React.createElement("div", {
+      className: "form__group-label"
+    }, /*#__PURE__*/React.createElement(Title, {
+      textColor: labelTextColor,
+      size: labelTextSize,
+      textWeight: labelTextWeight
+    }, label)), /*#__PURE__*/React.createElement("div", {
+      className: "form__group-items"
+    }, children), after), !hideMessage && /*#__PURE__*/React.createElement(React.Fragment, null, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message form__group-message_type-error",
+      size: errorMessageTextSize,
+      textWeight: errorMessageTextWeight,
+      textColor: errorMessageTextColor,
+      id: `${name}-error`
+    }, error), Boolean(message) && !showError && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize,
+      textWeight: messageTextWeight,
+      textColor: messageTextColor
+    }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize
+    }, '\u00A0')));
+  });
+});
+Group.defaultProps = {
+  inputProps: {},
+  fieldProps: {},
+  type: 'normal',
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary',
+  messageTextSize: 's',
+  messageTextColor: 'surfaceTextTertiary'
+};
+Group.propTypes = {
+  name: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
+const InputField = /*#__PURE__*/React.memo(function InputField(props) {
+  const {
+    isPassword,
+    isRequired,
+    fieldProps,
+    inputProps,
+    isRevealable,
+    name,
+    parse,
+    iconSize,
+    iconBorder,
+    iconBorderHover,
+    iconFill,
+    iconFillHover,
+    iconRevealableShow,
+    iconRevealableHide,
+    iconShape,
+    hideMessage,
+    onChange,
+    classNameGroupItem
+  } = props;
+  const [isRevealed, setIsRevealed] = useState(false);
+  const inputType = useMemo(() => {
+    if (isPassword) {
+      return isRevealed ? 'text' : 'password';
+    } else {
+      return 'text';
+    }
+  }, [isRevealed, isPassword]);
+  const revealeHandler = useCallback(e => {
+    e.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, [setIsRevealed]);
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    parse: parse
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.value, input.name);
+      }
+    }, [onChange]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      fieldClassName: isRevealable ? 'form-password' : 'form-input',
+      inputName: input.name,
+      inputValue: input.value || '',
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
+      autoComplete: "nope",
+      name: input.name,
+      type: inputType,
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, inputProps)), isRevealable && /*#__PURE__*/React.createElement(Icon, {
+      className: "form-field__icon",
+      iconFill: iconFill,
+      iconFillHover: iconFillHover,
+      SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow,
+      imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow,
+      shape: iconShape,
+      size: iconSize,
+      onClick: revealeHandler
+    }));
+  });
+});
+InputField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+InputField.propTypes = {
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  isPassword: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isRevealable: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func
+};
+
+function RadioGroupItem(props) {
+  const {
+    input,
+    option,
+    onChange,
+    inputProps
+  } = props;
+  const onChangeField = useCallback(event => {
+    if (event.target.checked) {
+      onChange(option.value);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(RadioButton, Object.assign({
+    className: "form-radio__item",
+    checked: option.value === input.value,
+    name: input.name,
+    type: "radio",
+    value: option.value,
+    onBlur: input.onBlur,
+    onChange: onChangeField,
+    onFocus: input.onFocus,
+    label: option.label
+  }, inputProps));
+}
+RadioGroupItem.propTypes = {
+  inputProps: PropTypes.object,
+  onChange: PropTypes.func,
+  option: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  }),
+  input: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+    onChange: PropTypes.func
+  })
+};
+
+function RadioGroupInput(props) {
+  const {
+    input,
+    value,
+    onChange
+  } = props;
+  const onChangeField = useCallback(event => onChange(event.target.value), [onChange]);
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    autoComplete: "nope",
+    name: input.name,
+    onBlur: input.onBlur,
+    onChange: onChangeField,
+    onFocus: input.onFocus,
+    value: value
+  }, props));
+}
+RadioGroupInput.propTypes = {
+  input: PropTypes.string,
+  value: PropTypes.string,
+  editableProps: PropTypes.object,
+  onChange: PropTypes.func
+};
+
+function RadioGroupList(props) {
+  const {
+    input,
+    options,
+    editableProps,
+    onChange,
+    inputProps
+  } = props;
+  const [editableValue, setEditableValue] = useState(() => {
+    const isRadioValue = options.find(option => option.value === input.value);
+    if (!isRadioValue) {
+      return input.value;
+    }
+    return '';
+  });
+  useEffect(() => {
+    // When a new value from outside enters the form
+    if (input.value) {
+      // Check value for radio type
+      const isRadioValue = options.find(option => option.value === input.value && !option.editable);
+      // If new value not in radio list - set to editable input
+      setEditableValue(isRadioValue ? '' : input.value);
+    } else {
+      // If new value is empty - clear editable input
+      setEditableValue('');
+    }
+  }, [input.value]);
+
+  // Callback for value changes
+  const onChangeSomeInput = useCallback(value => {
+    // Save to form values
+    input.onChange(value);
+    if (onChange) {
+      // Pass to custom event
+      onChange(value, input.name);
+    }
+  }, [input, onChange]);
+
+  // Handle for radio inputs
+  const onChangeRadio = useCallback(value => {
+    setEditableValue('');
+    onChangeSomeInput(value);
+  }, [onChangeSomeInput]);
+
+  // Handle for text input
+  const onChangeEditable = useCallback(value => {
+    setEditableValue(value);
+    onChangeSomeInput(value);
+  }, [onChangeSomeInput]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(option => option.editable ? /*#__PURE__*/React.createElement(RadioGroupInput, {
+    key: option.label,
+    input: input,
+    value: editableValue,
+    option: option,
+    onChange: onChangeEditable,
+    editableProps: editableProps,
+    inputProps: inputProps
+  }) : /*#__PURE__*/React.createElement(RadioGroupItem, {
+    key: option.value,
+    input: input,
+    option: option,
+    onChange: onChangeRadio,
+    inputProps: inputProps
+  })));
+}
+RadioGroupList.propTypes = {
+  editableProps: PropTypes.object,
+  input: PropTypes.object,
+  inputProps: PropTypes.object,
+  onChange: PropTypes.object,
+  options: PropTypes.object
+};
+
+const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
+  const {
+    isRequired,
+    name,
+    options,
+    fieldProps,
+    editableProps,
+    inputProps,
+    onChange,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: "form__item_type_radio",
+    fieldClassName: 'form-radio',
+    inputName: input.name,
+    inputValue: input.value || '',
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
+    input: input,
+    options: options,
+    onChange: onChange,
+    editableProps: editableProps,
+    inputProps: inputProps
+  })));
+});
+RadioGroup.defaultProps = {
+  fieldProps: {},
+  editableProps: {},
+  inputProps: {},
+  options: []
+};
+RadioGroup.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  editableProps: PropTypes.object,
+  isRequired: PropTypes.bool,
+  options: PropTypes.array,
+  onChange: PropTypes.func
+};
+
+// const SegmentedField = React.memo(
+function SegmentedField(props) {
+  const {
+    options,
+    isRequired,
+    name,
+    fieldProps,
+    inputProps,
+    hideMessage
+  } = props;
+  const {
+    change
+  } = useForm();
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => {
+    const activeOption = useMemo(() => {
+      const emptyOption = {
+        value: null,
+        label: null
+      };
+      if (input.value) {
+        const currentOption = options.find(option => option.value === input.value);
+        return currentOption || emptyOption;
+      }
+      return emptyOption;
+    }, [input.value]);
+    const setActiveSegment = useCallback(option => {
+      change(name, option.value);
+    }, [change]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_segmented', 'form__item_type_segmented'),
+      fieldClassName: "form-segmented",
+      inputName: input.name,
+      inputValue: input.value || [],
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Segmented, Object.assign({
+      segments: options,
+      setActiveSegment: setActiveSegment,
+      activeSegment: activeOption
+    }, inputProps)));
+  });
+}
+// )
+
+SegmentedField.propTypes = {
+  options: PropTypes.array.isRequired,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  inputClass: PropTypes.string,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
+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 = [];
+    if (item.options) {
+      childOptions = getDefaultValue(item.options, selectValue);
+    }
+    if (isValue || isLabel) {
+      result.push(item);
+    } else if (childOptions.length) {
+      result = result.concat(childOptions);
+    }
+  });
+  return result;
+}
+const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
+  const {
+    isRequired,
+    key,
+    name,
+    options,
+    fieldProps,
+    selectProps,
+    selectRef,
+    onChange,
+    classNameGroupItem,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(value => {
+      input.onChange(value);
+      if (onChange) {
+        onChange(value, input.name);
+      }
+    }, [onChange]);
+    const [selectedOptions, setSelectedOptions] = useState(null);
+    const defaultValue = useMemo(() => {
+      const optionsValues = getDefaultValue(options, input.value);
+      if (!optionsValues.length && input.value?.length) {
+        optionsValues.push({
+          value: input.value,
+          label: input.value
+        });
+      }
+      return optionsValues;
+    }, [input.value]);
+    useEffect(() => setSelectedOptions(defaultValue), [defaultValue]);
+    const onChangeValue = useCallback((option, actionMeta) => {
+      const value = Array.isArray(option) ? option.map(o => o.value) : option?.value || null;
+      setSelectedOptions(option);
+      onChangeField(value);
+    }, [onChangeField]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_select', 'form__item_type_select', classNameGroupItem),
+      fieldClassName: 'form-select',
+      inputName: input.name,
+      inputValue: input.value,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage
+    }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
+      className: "form-select-item",
+      instanceId: `id_${input.name}`,
+      value: selectedOptions,
+      onChange: onChangeValue,
+      options: options,
+      ref: selectRef,
+      key: key
+    }, selectProps)));
+  });
+});
+SelectField.propTypes = {
+  name: PropTypes.string.isRequired,
+  selectProps: PropTypes.object,
+  isRequired: PropTypes.bool,
+  label: PropTypes.any,
+  messageType: PropTypes.string,
+  options: PropTypes.array,
+  onChange: PropTypes.func
+};
+
+const SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
+  const {
+    name,
+    isRequired,
+    onChange,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    type: "checkbox"
+  }, ({
+    input,
+    meta
+  }) => {
+    const onChangeField = useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.checked, input.name);
+      }
+    }, [onChange]);
+    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
+      fieldClassName: "form-switch",
+      inputName: input.name,
+      inputValue: input.checked,
+      isRequired: isRequired,
+      metaActive: meta.active,
+      metaError: meta.error,
+      metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+      metaSubmitError: meta.submitError,
+      metaSubmitFailed: meta.submitFailed,
+      metaTouched: meta.touched,
+      metaValid: meta.valid,
+      hideMessage: hideMessage,
+      tag: "label"
+    }, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
+      autoComplete: "nope",
+      checked: input.checked,
+      name: input.name,
+      type: "checkbox",
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, inputProps)));
+  });
+});
+SwitchField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+SwitchField.propTypes = {
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+const TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
+  const {
+    isRequired,
+    name,
+    fieldProps,
+    inputProps,
+    classNameGroupItem,
+    hideMessage
+  } = props;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    className: clsx('form-field_type_textarea', 'form__item_type_textarea', classNameGroupItem),
+    fieldClassName: 'form-textarea',
+    inputName: input.name,
+    inputValue: input.value,
+    isRequired: isRequired,
+    metaActive: meta.active,
+    metaError: meta.error,
+    metaModifiedSinceLastSubmit: meta.modifiedSinceLastSubmit,
+    metaSubmitError: meta.submitError,
+    metaSubmitFailed: meta.submitFailed,
+    metaTouched: meta.touched,
+    metaValid: meta.valid,
+    hideMessage: hideMessage
+  }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
+    autoComplete: "nope",
+    name: input.name,
+    value: input.value,
+    onBlur: input.onBlur,
+    onChange: input.onChange,
+    onFocus: input.onFocus
+  }, inputProps))));
+});
+TextareaField.defaultProps = {
+  inputProps: {},
+  fieldProps: {}
+};
+TextareaField.propTypes = {
+  name: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  fieldProps: PropTypes.object,
+  inputProps: PropTypes.object
+};
+
+const focusOnError = (formElementsList, errors) => {
+  const selectsIds = Object.keys(errors).map(fieldName => {
+    if (fieldName === FORM_ERROR) {
+      // TODO: get from somewhere
+      return 'notification__item_status_error';
+    }
+    return `react-select-id_${fieldName}-input`;
+  });
+  const errorFieldElement = formElementsList.find(element => {
+    if (element.name) {
+      return getIn(errors, element.name);
+    } else {
+      return selectsIds.includes(element.id);
+    }
+  });
+  const errorsList = Object.keys(errors);
+  if (!errorFieldElement && errorsList.length) {
+    let errorElement;
+    try {
+      const fieldName = errorsList[0];
+      if (fieldName === FORM_ERROR) {
+        errorElement = document.querySelector('notification__item_status_error');
+      } else {
+        errorElement = document.querySelector(`#${fieldName}-error`);
+        if (!errorElement) {
+          errorElement = document.querySelector(`#id_${fieldName}`);
+        }
+      }
+    } catch (err) {
+      console.warn(err);
+    }
+    if (errorElement) {
+      errorElement.scrollIntoView({
+        block: 'center'
+      }); // , behavior: 'smooth'
+    }
+  }
+
+  // the field is covered by the header because header is "sticky",
+  // that's we scroll manually so that the field falls into the center of the visible area
+  if (errorFieldElement) {
+    errorFieldElement.scrollIntoView({
+      block: 'center'
+    });
+  }
+  return null;
+};
+const focusOnErrorDecorator = createDecorator(null, focusOnError);
+const setErrorsMutator = (args, state) => {
+  const [fieldName, data] = args;
+  const submitError = data.submitError;
+  const fieldError = data.error;
+  if (fieldName === 'non_field_errors') {
+    // state.formState.invalid = true
+    // state.formState.valid = false
+    state.formState.error = fieldError;
+    state.formState.submitError = submitError;
+  } else if (fieldName in state.fields) {
+    if (fieldError) {
+      const errorsState = Object.assign({}, state.formState.errors, {
+        [fieldName]: fieldError
+      });
+      state.fields[fieldName].touched = true;
+      state.fields[fieldName].error = fieldError;
+      state.formState.errors = errorsState;
+    }
+    if (submitError) {
+      const submitErrorsState = Object.assign({}, state.formState.submitErrors, {
+        [fieldName]: submitError
+      });
+
+      // state.fields[fieldName].submitFailed = true
+      // state.fields[fieldName].submitSucceeded = false
+      state.fields[fieldName].submitError = submitError;
+      state.formState.submitErrors = submitErrorsState;
+      state.formState.submitFailed = true;
+      state.formState.submitSucceeded = false;
+      state.formState.lastSubmittedValues = state.formState.values;
+    }
+  }
+};
+const sendFormDataToServer = async (url, data) => {
+  try {
+    const response = await axios({
+      url: url,
+      method: 'POST',
+      data: data
+    });
+    return {
+      success: true,
+      response
+    };
+  } catch (error) {
+    const formErrors = {};
+    if (typeof error.response?.data === 'string') {
+      formErrors[FORM_ERROR] = 'Something went wrong';
+    }
+    if (typeof error.response?.data === 'object') {
+      Object.entries(error.response.data).forEach(([fieldName, errorsList]) => {
+        formErrors[fieldName] = errorsList[0];
+      });
+    }
+    return {
+      success: false,
+      formErrors,
+      error
+    };
+  }
+};
+
+const formTypes = {
+  checkbox: 'checkbox',
+  custom: 'custom',
+  choice: 'choice',
+  code: 'code',
+  datePicker: 'datePicker',
+  dateRangePicker: 'dateRangePicker',
+  fileInput: 'fileInput',
+  group: 'group',
+  radioGroup: 'radioGroup',
+  segmented: 'segmented',
+  select: 'select',
+  switch: 'switch',
+  text: 'text',
+  textarea: 'textarea'
+};
+function generateField(field, config, props) {
+  switch (field.type) {
+    case formTypes.checkbox:
+      {
+        return /*#__PURE__*/React.createElement(CheckboxField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.choice:
+      {
+        return /*#__PURE__*/React.createElement(ChoiceField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.code:
+      {
+        return /*#__PURE__*/React.createElement(CodeField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.switch:
+      {
+        return /*#__PURE__*/React.createElement(SwitchField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.segmented:
+      {
+        return /*#__PURE__*/React.createElement(SegmentedField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.datePicker:
+      {
+        return /*#__PURE__*/React.createElement(DatePickerField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.fileInput:
+      {
+        return /*#__PURE__*/React.createElement(FileInput, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.radioGroup:
+      {
+        return /*#__PURE__*/React.createElement(RadioGroup, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.select:
+      {
+        return /*#__PURE__*/React.createElement(SelectField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.text:
+      {
+        return /*#__PURE__*/React.createElement(InputField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.textarea:
+      {
+        return /*#__PURE__*/React.createElement(TextareaField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.custom:
+      {
+        return /*#__PURE__*/React.createElement(CustomField, Object.assign({
+          key: config.key
+        }, field, props));
+      }
+    case formTypes.group:
+      {
+        return /*#__PURE__*/React.createElement(Group, Object.assign({
+          key: config.key
+        }, field, props), Object.entries(field.group).map(([key, value]) => {
+          const groupProps = {
+            ...value,
+            hideMessage: field.hideMessage,
+            classNameGroupItem: value.classNameGroupItem || 'form__group-item'
+          };
+          return generateField(groupProps, {
+            key: key + '_form_group'
+          }, props);
+        }));
+      }
+  }
+}
+
+const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
+  const {
+    additionalProps,
+    after,
+    before,
+    buttonDirection,
+    buttonGap,
+    buttonPadding,
+    groupGap,
+    className,
+    config,
+    description,
+    descriptionSize,
+    descriptionTextColor,
+    descriptionTextWeight,
+    disableFieldsAutoComplete,
+    fieldsGap,
+    formName,
+    initialValues,
+    initialValuesEqual,
+    isLoading,
+    loader,
+    loaderSet,
+    loaderFill,
+    loaderItemFill,
+    loaderText,
+    language,
+    mutators,
+    onChangeFormValues,
+    onClickSecondaryButton,
+    onClickTertiaryButton,
+    onSubmit,
+    primaryButton,
+    primaryButtonLabel,
+    secondaryButton,
+    secondaryButtonLabel,
+    primaryButtonFill,
+    primaryButtonFillHover,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    primaryButtonSize,
+    primaryButtonLabelTextColor,
+    primaryButtonLabelSize,
+    primaryButtonLabelTextWeight,
+    secondaryButtonSize,
+    secondaryButtonLabelTextColor,
+    secondaryButtonLabelSize,
+    secondaryButtonLabelTextWeight,
+    tertiaryButton,
+    tertiaryButtonFill,
+    tertiaryButtonFillHover,
+    tertiaryButtonSize,
+    tertiaryButtonLabelTextColor,
+    tertiaryButtonLabelSize,
+    tertiaryButtonLabelTextWeight,
+    tertiaryButtonLabel,
+    set,
+    type,
+    buttonJustifyContent,
+    title,
+    notificationType,
+    notificationClose,
+    buttonFill,
+    titleTextSize,
+    titleTextColor,
+    titleTextWeight,
+    validationSchema,
+    dataTour,
+    dataTourButtons,
+    dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton
+  } = props;
+  const validate = useYupValidationSchema(validationSchema, language);
+  const onRefFormInstance = useCallback(formInstance => {
+    if (ref) {
+      ref.current = formInstance;
+    }
+  }, [ref]);
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const directionClass = useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  const shapeClass = useDeviceTargetClass(props, {
+    prefix: 'shape_',
+    propsKey: 'shape'
+  });
+  const elevationClass = useDeviceTargetClass(props, {
+    prefix: 'elevation_',
+    propsKey: 'elevation'
+  });
+  const {
+    styles: formStyles
+  } = useStyles(props);
+  return /*#__PURE__*/React.createElement(Form, {
+    decorators: [focusOnErrorDecorator],
+    initialValues: initialValues,
+    initialValuesEqual: initialValuesEqual,
+    mutators: mutators,
+    render: ({
+      handleSubmit,
+      submitError,
+      modifiedSinceLastSubmit,
+      form
+    }) => {
+      return /*#__PURE__*/React.createElement("form", {
+        style: formStyles,
+        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
+        name: formName,
+        "data-tour": dataTour,
+        ref: () => onRefFormInstance(form),
+        onSubmit: handleSubmit,
+        autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
+        autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
+        spellCheck: disableFieldsAutoComplete ? 'false' : undefined
+      }, before, title && /*#__PURE__*/React.createElement(Title, {
+        className: "form__title",
+        size: titleTextSize,
+        textColor: titleTextColor,
+        textWeight: titleTextWeight
+      }, title), description && /*#__PURE__*/React.createElement(Text, {
+        className: "form__description",
+        size: descriptionSize,
+        textColor: descriptionTextColor,
+        textWeight: descriptionTextWeight
+      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
+        className: clsx('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
+      }, /*#__PURE__*/React.createElement(NotificationItem, {
+        className: "form-notification__item",
+        titleTextSize: "h6",
+        notificationClose: notificationClose,
+        title: form.getState().submitError,
+        set: "form",
+        status: "error"
+      })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
+        subscription: {
+          values: true
+        },
+        onChange: onChangeFormValues
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(Group$1, {
+        direction: "vertical",
+        gap: fieldsGap || groupGap,
+        className: "form__wrapper"
+      }, Object.keys(config).map(key => generateField(config[key], {
+        key
+      }, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
+        className: "form__loader",
+        set: loaderSet,
+        fill: loaderFill,
+        itemFill: loaderItemFill,
+        text: loaderText
+      }))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group$1, {
+        fill: buttonFill,
+        justifyContent: buttonJustifyContent,
+        direction: buttonDirection,
+        padding: buttonPadding,
+        gap: buttonGap,
+        className: "form__button",
+        dataTour: dataTourButtons
+      }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: primaryButtonFill,
+        fillHover: primaryButtonFillHover,
+        size: primaryButtonSize,
+        labelTextColor: primaryButtonLabelTextColor,
+        labelSize: primaryButtonLabelSize,
+        labelTextWeight: primaryButtonLabelTextWeight,
+        label: primaryButtonLabel,
+        dataTour: dataTourPrimaryButton
+      }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: secondaryButtonFill,
+        fillHover: secondaryButtonFillHover,
+        size: secondaryButtonSize,
+        labelTextColor: secondaryButtonLabelTextColor,
+        labelSize: secondaryButtonLabelSize,
+        labelTextWeight: secondaryButtonLabelTextWeight,
+        label: secondaryButtonLabel,
+        onClick: onClickSecondaryButton,
+        dataTour: dataTourSecondaryButton
+      }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
+        width: "fill",
+        className: "form__button-item",
+        fill: tertiaryButtonFill,
+        fillHover: tertiaryButtonFillHover,
+        size: tertiaryButtonSize,
+        labelTextColor: tertiaryButtonLabelTextColor,
+        labelSize: tertiaryButtonLabelSize,
+        labelTextWeight: tertiaryButtonLabelTextWeight,
+        label: tertiaryButtonLabel,
+        onClick: onClickTertiaryButton,
+        dataTour: dataTourTertiaryButton
+      }) : tertiaryButton), after);
+    },
+    subscription: {
+      submitting: true,
+      pristine: true,
+      modifiedSinceLastSubmit: true,
+      submitError: true
+    },
+    validate: validate,
+    onSubmit: onSubmit
+  });
+});
+FinalForm.propTypes = {
+  additionalProps: PropTypes.object,
+  after: PropTypes.any,
+  before: PropTypes.any,
+  buttonGap: PropTypes.string,
+  className: PropTypes.string,
+  config: PropTypes.object,
+  description: PropTypes.string,
+  descriptionSize: PropTypes.string,
+  descriptionTextColor: PropTypes.string,
+  descriptionTextWeight: PropTypes.string,
+  disableFieldsAutoComplete: PropTypes.string,
+  fieldsGap: PropTypes.string,
+  formName: PropTypes.string,
+  initialValues: PropTypes.any,
+  initialValuesEqual: PropTypes.any,
+  language: PropTypes.string,
+  isLoading: PropTypes.bool,
+  loaderText: PropTypes.string,
+  mutators: PropTypes.any,
+  onChangeFormValues: PropTypes.func,
+  onClickSecondaryButton: PropTypes.func,
+  onSubmit: PropTypes.func,
+  primaryButton: PropTypes.string,
+  primaryButtonFill: PropTypes.string,
+  primaryButtonLabel: PropTypes.string,
+  secondaryButton: PropTypes.string,
+  secondaryButtonFill: PropTypes.string,
+  secondaryButtonLabel: PropTypes.string,
+  set: PropTypes.string,
+  title: PropTypes.string,
+  titleSize: PropTypes.string,
+  titleTextColor: PropTypes.string,
+  titleTextWeight: PropTypes.string,
+  validationSchema: PropTypes.object
+};
+FinalForm.defaultProps = {
+  additionalProps: {},
+  isLoading: false,
+  loaderSet: 'simple',
+  loaderFill: 'surfacePrimary',
+  loaderItemFill: 'surfaceItemAccent',
+  language: 'en',
+  titleSize: 'h1',
+  buttonDirection: 'vertical',
+  direction: 'vertical',
+  disableFieldsAutoComplete: false
+};
+
+export { CheckboxField as Checkbox, ChoiceField, CodeField, CustomField, DatePickerField, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, Group, InputField, RadioGroup, SegmentedField, SelectField, SwitchField as Switch, TextareaField as Textarea, addRequiredFieldsParamToSchema, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };