intelicoreact 1.6.22 → 1.6.24

package/dist/Atomic/FormElements/InputMask/InputMask.js

@@ -1 +1,1214 @@
-function n(n,r){(null==r||r>n.length)&&(r=n.length);for(var t=0,e=Array(r);t<r;t++)e[t]=n[t];return e}function r(n){if(Array.isArray(n))return n}function t(n,r,t,e,i,o,a){try{var u=n[o](a),c=u.value}catch(n){t(n);return}u.done?r(c):Promise.resolve(c).then(e,i)}function e(n){return function(){var r=this,e=arguments;return new Promise(function(i,o){var a=n.apply(r,e);function u(n){t(a,i,o,u,c,"next",n)}function c(n){t(a,i,o,u,c,"throw",n)}u(void 0)})}}function i(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}function o(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function a(n){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},e=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(t).filter(function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.forEach(function(r){var e;e=t[r],r in n?Object.defineProperty(n,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[r]=e})}return n}function u(n,t){return r(n)||function(n,r){var t,e,i=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=i){var o=[],a=!0,u=!1;try{for(i=i.call(n);!(a=(t=i.next()).done)&&(o.push(t.value),!r||o.length!==r);a=!0);}catch(n){u=!0,e=n}finally{try{a||null==i.return||i.return()}finally{if(u)throw e}}return o}}(n,t)||l(n,t)||o()}function c(r){return function(r){if(Array.isArray(r))return n(r)}(r)||i(r)||l(r)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(r,t){if(r){if("string"==typeof r)return n(r,t);var e=Object.prototype.toString.call(r).slice(8,-1);if("Object"===e&&r.constructor&&(e=r.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return n(r,t)}}function s(n,r){var t,e,i,o={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},a=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return a.next=u(0),a.throw=u(1),a.return=u(2),"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function u(u){return function(c){var l=[u,c];if(t)throw TypeError("Generator is already executing.");for(;a&&(a=0,l[0]&&(o=0)),o;)try{if(t=1,e&&(i=2&l[0]?e.return:l[0]?e.throw||((i=e.return)&&i.call(e),0):e.next)&&!(i=i.call(e,l[1])).done)return i;switch(e=0,i&&(l=[2&l[0],i.value]),l[0]){case 0:case 1:i=l;break;case 4:return o.label++,{value:l[1],done:!1};case 5:o.label++,e=l[1],l=[0];continue;case 7:l=o.ops.pop(),o.trys.pop();continue;default:if(!(i=(i=o.trys).length>0&&i[i.length-1])&&(6===l[0]||2===l[0])){o=0;continue}if(3===l[0]&&(!i||l[1]>i[0]&&l[1]<i[3])){o.label=l[1];break}if(6===l[0]&&o.label<i[1]){o.label=i[1],i=l;break}if(i&&o.label<i[2]){o.label=i[2],o.ops.push(l);break}i[2]&&o.ops.pop(),o.trys.pop();continue}l=r.call(n,o)}catch(n){l=[6,n],e=0}finally{t=i=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}}}import{jsx as f,jsxs as p}from"react/jsx-runtime";import{createRef as d,useEffect as v,useRef as h,useState as m}from"react";import y from"classnames";import{X as b}from"react-feather";import g from"../../UI/Hint/Hint";import{KEYBOARD_SERVICE_KEYS as k}from"./../../../Constants/index.constants.js";import{setCaretPosition as S}from"./InputCarretPosition";import{ANDROID_CHROME_TEXT_CODE as w,DEFAULT_ERRORS as C,DIGIT_MASK_CHAR as P,EXCLUDED_KEYS as _,LOWERCASE_LETTER_MASK_CHAR as x,SPACE_CHAR as D,UPPERCASE_LETTER_MASK_CHAR as O}from"./config";import{copyToClipboard as j,getSelectionText as E,isDigit as T,isDigitMaskChar as I,isLetter as A,isLetterMaskChar as N,isLowerCaseLetter as L,isUpperCaseLetter as M,resetSelectionText as B,selectElementContents as K,voidFn as R}from"./functions";import"./InputMask.scss";export default function H(){var n,t,H=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},U=H.maskPattern,X=H.maskPatternPlaceholder,F=H.maskPlaceholder,V=H.maskDigitPlaceholder,G=H.maskLetterPlaceholder,W=H.usePatternPlaceholder,$=H.disabled,q=H.maskAsPlaceholder,z=void 0===q||q,J=H.maxEditableLen,Q=void 0===J?-1:J,Y=H.isFocusedDefault,Z=void 0!==Y&&Y,nn=H.isClearable,nr=H.isCaseSensitive,nt=H.adaptTextCase,ne=(H.isUseAutoSelect,H.icon),ni=H.showIcon,no=H.isIconLeft,na=H.isIconRight,nu=H.value,nc=H.blinkErrors,nl=void 0===nc||nc,ns=H.blinkDuration,nf=void 0===ns?100:ns,np=H.showErrors,nd=H.className,nv=H.errors,nh=H.error,nm=void 0===nh?"":nh,ny=(H.ref,H.onChange),nb=void 0===ny?function(){}:ny,ng=H.onFocus,nk=void 0===ng?function(){}:ng,nS=H.onBlur,nw=void 0===nS?function(){}:nS,nC=H.onKeyDown,nP=void 0===nC?function(){}:nC,n_=H.imitateTypingOnPaste,nx=void 0!==n_&&n_,nD=H.imitateTypingOnPasteDelay,nO=void 0===nD?100:nD,nj=H.showHint,nE=void 0!==nj&&nj,nT=H.hintText,nI=void 0===nT?"":nT,nA=H.hintClassName,nN=void 0===nA?"":nA,nL=H.isHintRight,nM=H.isHintLeft,nB=H.hintPosition,nK=void 0===nB?"right":nB,nR=H.hideMaskOnBlur,nH=void 0===nR||nR,nU=H.returnMaskedValue,nX=void 0!==nU&&nU,nF=(H.name,H.testId),nV=a({},C,void 0===nv?C:nv),nG=u(m(!1),2),nW=nG[0],n$=nG[1],nq=h(null),nz=u(m(!1),2),nJ=nz[0],nQ=nz[1],nY=u(m(!1),2),nZ=nY[0],n0=nY[1],n1=u(m(!1),2),n2=n1[0],n3=n1[1],n4=u(m(!1),2),n6=n4[0],n5=n4[1],n8=u(m(!1),2),n9=n8[0],n7=n8[1],rn=u(m(!1),2),rr=rn[0],rt=rn[1],re=u(m(nV.default),2),ri=re[0],ro=re[1],ra=function(){return ro(nV.default)},ru=u(m(!1),2),rc=ru[0],rl=ru[1],rs=u(m(""),2),rf=rs[0],rp=rs[1],rd=u(m(null),2),rv=rd[0],rh=rd[1],rm=u(m(null),2),ry=rm[0],rb=rm[1],rg=u(m([]),2),rk=rg[0],rS=rg[1],rw=function(){var n=r(rk)||i(rk)||l(rk)||o(),t=n[0];return rS(n.slice(1)),t.fn||R},rC=function(){rw()()};v(function(){rk.length&&rC()},[rk]);var rP=u(m([]),2),r_=rP[0],rx=rP[1],rD=u(m(""),2),rO=rD[0],rj=rD[1],rE=u(m(null),2),rT=rE[0],rI=rE[1],rA=u(m(!1),2),rN=rA[0],rL=rA[1],rM=function(n){var r=n.char,t=(n.i,n.data),e=void 0===t?{}:t;rx(function(n){var t=c(n),i=rX(r,e);return t.push(i),t})},rB=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.char,t=void 0===r?null:r,e=arguments.length>1?arguments[1]:void 0;rx(function(n){if(!n[e])return n;var r=c(n);return r[e].isSpecialSymbol||null===t||(r[e].char=t),r})},rK=function(){r_.map(function(n,r){return rB({char:""},r)})},rR=function(n){var r=n.char,t=n.i,e=n.disableErrors,i=void 0!==e&&e;switch(rV(t)){case P:if(!T(r))return i||ro(nV.onlyDigit),!1;break;case O:if(nt&&(r=r.toUpperCase()),!A(r)&&!nr)return i||ro(nV.onlyLetter),!1;if(nr&&!M(r))return i||ro(nV.onlyUpperCase),!1;break;case x:if(nt&&(r=r.toLowerCase()),!A(r)&&!nr)return i||ro(nV.onlyLetter),!1;if(nr&&!L(r))return i||ro(nV.onlyLowerCase),!1;break;default:return!1}return!0},rH=function(n){var r=n.char;return!I(r)&&!N(r)},rU=function(n){var r=n.char;return!T(r)&&!A(r)},rX=function(n){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=rU({char:n}),e=rH({char:n});return" "===n&&(n=D),a({char:e?n:"",maskChar:n,isSpecialSymbol:e,isCharSymbol:!t&&""!==n&&e,ref:d()},r)},rF=function(n){return r_[n]?a({},r_[n]):void 0},rV=function(n){var r;return(null==(r=r_[n])?void 0:r.maskChar)||void 0},rG=function(){if(rv===ry)return 0;var n=rv<ry?rv:ry,r=rv>ry?rv:ry;return r_.reduce(function(t,e,i){e.char;var o,a=e.ref;if((null==a?void 0:a.current)===null)return t;var u=null==a||null==(o=a.current)?void 0:o.getBoundingClientRect(),c=u.left,l=c+u.width/2;return!c||n>l||r<l?t:null===t.index||n<=l&&l>=r&&l<t.charX?{index:i,charX:l}:t},{index:null,charX:null}).index},rW=function(n){var r=rF(n).maskChar;return W?X[n]||F:I(r)&&V?V:N(r)&&G?G:F},r$=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.replaceSpace,t=r_.slice(0,r_.length-1).map(function(n,r){var t=n.char,e=n.maskChar;return""===t?rW(r)||e:t}).join("");return void 0!==r&&r?null==t?void 0:t.replace(/\u00A0/g," "):t},rq=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return r_.filter(function(r,t){return t>=n}).reduce(function(n,r,t,e){var i=r.char,o=r.maskChar,a=r.isSpecialSymbol,u=r.isCharSymbol;return(i!==o&&""!==i||!a||u)&&(n+=i),n},"")},rz=function(){return r_.reduce(function(n,r,t){var e=r.char;return(r.isSpecialSymbol||e===D||""===e)&&null!==n||(n=t),n},-1)+1},rJ=function(n,r){var t,e=rF(n);if(!e)return!1;var i=e.ref,o=e.isSpecialSymbol;return!!i&&((-1===Q||n<Q)&&o&&n<r_.length-1?r>n?rQ(null,n):rY(null,n):-1!==Q&&n>Q?(rJ(Q,n),!1):(null==(t=i.current)||t.focus(),setTimeout(function(){return S(i.current,0)},10),!0))},rQ=function(n,r){return rJ(r-1,r)},rY=function(n,r){var t=(null==n?void 0:n.key)||null;return z&&r>rz()?rJ(rz()+1,r):(!z||r!==rz()||"ArrowRight"!==t)&&rJ(r+1,r)},rZ=function(n,r){if(rN||(rj(rq()),rL(!0)),E().length)return tu();var t=r-1,e=rF(t);if(!e)return!1;if(e.isSpecialSymbol)return rZ(n,t);if(z){var i=r_.slice(0,t).concat(r_.slice(r,-1!==Q?Q:r_.length)).reduce(function(n,r){var t=r.char;return n.concat(t)},"");rK(),tt({text:i},0)}else rB({char:""},t);return rJ(t,r),!0},r0=function(n,r){if(rN||(rj(rq()),rL(!0)),E().length)return tu();var t=r+1,e=rF(r);if(!e)return!1;var i=e.char;if(e.isSpecialSymbol)return r0(n,r+1);if(""===i)return!1;if(z){var o=r_.slice(0,r).concat(r_.slice(t,-1!==Q?Q:r_.length)).reduce(function(n,r){var t=r.char;return n.concat(t)},"");rK(),tt({text:o},0),rJ(r,r)}else rB({char:""},r),rJ(t,r);return!0},r1=function(n,r){return rJ(0,-1)},r2=function(n,r){switch(n.key){case"ArrowLeft":return rQ(n,r);case"ArrowRight":return rY(n,r);case"Backspace":return rZ(n,r);case"Delete":return r0(n,r);case"Home":return r1(n,r);case"End":return setTimeout(function(){return rJ(z?rz():0,0)},10);default:return!0}},r3=(n=e(function(n,r){var t,e,i,o,a,c,l,f,p,d,v,h,m,y=arguments;return s(this,function(s){switch(s.label){case 0:if(i=void 0!==(e=(t=y.length>2&&void 0!==y[2]?y[2]:{}).disableErrors)&&e,a=void 0!==(o=t.disableIsSelectingCheck)&&o,rc&&!a)return tu(),B(),rl(!1),setTimeout(function(){return r3(n,rG(),{disableErrors:i,disableIsSelectingCheck:!0})},10),[2,null];try{n.stopPropagation(),n.preventDefault()}catch(n){}if(n6)return[2,!1];if(n5(!0),l=n.key,f=n.keyCode,p=rF(r),f!=w)return[3,2];return d=p.ref,[4,new Promise(function(n){setTimeout(function(){var r,t;if((null==d||null==(t=d.current)||null==(r=t.innerText)?void 0:r.length)>=2){var e,i=u(null==d||null==(e=d.current)?void 0:e.innerText,2),o=i[0],a=i[1];d.current.innerText=a,n(o)}else n(null)},1)})];case 1:l=s.sent(),s.label=2;case 2:if(!p||r===r_.length-1)return[2,!1];if(!(z&&r>rz()+1))return[3,4];return[4,r3(n,0===rz()?0:rz()+1,{disableErrors:i})];case 3:case 5:return[2,s.sent()];case 4:if(v=p.isSpecialSymbol,h=p.maskChar,p.isReadOnly)return[2,!1];if(h!==D)return[3,6];return[4,r3(n,r+1)];case 6:if(v&&h!==l||!rR({char:l,i:r,disableErrors:i}))return[2,!1];return z&&(null==(c=rq(r))?void 0:c.length)!==0&&(m=r+1,tt({text:r_.slice().filter(function(n,t){var e=n.isCharSymbol;return t>=r&&!e}).map(function(n,r){return n.char}).join("")},m,!1)),rL(!1),rB({char:l},r),setTimeout(function(){return rY(n,r)},1),[2,!0]}})}),function(r,t){return n.apply(this,arguments)}),r4=function(n,r){switch(n.key,n.keyCode){case 65:ta(n);break;case 89:rT&&(rK(),tt({text:rT},0,!0));break;case 90:rI(rq()),rK(),tt({text:rO},0,!0)}},r6=(t=e(function(n){var r,t,e,i,o,u,c,l,f=arguments;return s(this,function(s){switch(s.label){case 0:var p,d;if(r=f.length>1&&void 0!==f[1]?f[1]:null,!nZ&&!rc)return[2,!1];if(e=n.key,i=n.ctrlKey,o=n.altKey,u=(null==(t=r_[0].ref)?void 0:t.current)||n.target,nP((p=a({},n),d=d={target:u},Object.getOwnPropertyDescriptors?Object.defineProperties(p,Object.getOwnPropertyDescriptors(d)):(function(n,r){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);t.push.apply(t,e)}return t})(Object(d)).forEach(function(n){Object.defineProperty(p,n,Object.getOwnPropertyDescriptor(d,n))}),p),r),k.includes(e)&&_.includes(e))return[2,!0];if(n7(!1),ra(),i||o)return k.includes(e)||r4(n,r),[2,!0];if(n.preventDefault(),n.stopPropagation(),!k.includes(e))return[3,1];return l=r2(n,r),[3,3];case 1:return[4,r3(n,r)];case 2:l=s.sent(),s.label=3;case 3:return c=l,nl&&!c&&null!==r&&rt(!0),[2]}})}),function(n){return t.apply(this,arguments)}),r5=function(n,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},e=t.ignoreIsSelecting;try{n.stopPropagation(),n.preventDefault()}catch(n){}if(rc&&(rf.length||E().length)&&!(void 0!==e&&e))return!1;n0(!0),2===n.detail&&ta(n),"function"==typeof r&&r(n)},r8=function(n,r){if(2==n.detail)return ta(n),!0;var t=rF(r),e=t.char;t.maskChar,z&&!rR({char:e,i:r,disableErrors:!0})&&(r=rz()),rl(!1),B(),setTimeout(function(){return r5(n,function(){return rJ(r,0)},{ignoreIsSelecting:!0})},50)},r9=function(n){n.stopPropagation(),n.preventDefault(),nJ||rc||(r5(n),rJ(rz(),0))},r7=function(n){if(!nJ)return!1;rl(!0);var r=n.clientX;null===rv&&rh(r),rb(r)},tn=function(n){nZ&&nw(),n0(!1)},tr=function(n,r){var t=rF(r);if(!t)return!1;var e=t.isSpecialSymbol;if(S(t.ref.current,0),(-1===Q||r<Q)&&e&&r<r_.length-1)return tr(n,r+1),!1;nZ||nk(n),n0(!0)},tt=function(n,r){var t,e,i,o=!(arguments.length>2)||void 0===arguments[2]||arguments[2];try{n.stopPropagation(),n.preventDefault()}catch(n){}rl(!1),B();var a=(null==(t=(null==n?void 0:n.clipboardData)||(null==(e=window)?void 0:e.clipboardData))?void 0:t.getData("text/plain"))||(null==n||null==(i=n.clipboardData)?void 0:i.getData("Text"))||n.text;if(!a)return!1;var c=[];if(z&&(null==n?void 0:n.type)==="paste"){var l=r+parseInt(null==a?void 0:a.length,10);tt({text:r_.slice().filter(function(n,t){var e=n.isCharSymbol;return t>=r&&!e}).map(function(n,r){return n.char}).join("")},l,!1)}a.split("").filter(function(n){return T(n)||A(n)}).map(function(n,t){for(var e=function(r){var e=rF(r);return e?(e.char,e.maskChar,e.isSpecialSymbol,!rR({char:n,i:r,disableErrors:!0})||c.includes(r))?"continue":void(o=!0,a=!0,c.push(r),nx?setTimeout(function(){rB({char:n},r)},t*nO):rB({char:n},r)):"continue"},i=r+t,o=!1,a=!1,u=i;u<r_.length&&!o;++u)e(u);return{char:n,isValid:a}});var s=u(c.reverse(),1)[0];return o&&rJ(s+1,r),s},te=function(n,r){try{n.stopPropagation(),n.preventDefault()}catch(n){}j(E())},ti=function(n,r){rN||(rj(rq()),rL(!0));try{n.stopPropagation(),n.preventDefault()}catch(n){}j(E()),tu(),rl(!1),rJ(r,0)},to=function(n,r){var t=n.key;return!_.includes(t)&&k.includes(t)&&(n.preventDefault(),n.stopPropagation()),"function"==typeof r&&r(n),!1},ta=function(n){n.preventDefault(),n.stopPropagation(),rl(!0),rh(-1),rb(-1),K(nq.current),rp(E())},tu=function(){var n,r=rG();if(null==r)return!1;var t=E().length+r;if(B(),z&&(null==(n=rq(t+1))?void 0:n.length)!==0){var e=r_.slice().filter(function(n,e){var i=n.isSpecialSymbol,o=n.isCharSymbol;return(-1===Q||!(e>Q-1))&&(e<r||e>=t)&&!i&&!o}).map(function(n,r){return n.char}).join("");rK(),tt({text:e},0,!1),rJ(r)}else for(var i=r;i<t;++i)rB({char:""},i);return rJ(r,-1),!0};v(function(){n6&&setTimeout(function(){return n5(!1)},20)},[n6]),v(function(){rx([]),n$(!1),U||(U=""),U.concat(" ").split("").map(function(n,r,t){rM({char:n,i:t,data:{id:r,isReadOnly:r===U.length}}),(null==nu?void 0:nu[r])&&rB({char:nu[r]},r)}),n$(!0)},[U]),v(function(){nu!==rq()&&n3(!1)},[nu]),v(function(){if(nW&&!n2&&nu!==rq()){if(nu&&""!==nu){var n=0;r_.map(function(r,t){if(r.isSpecialSymbol)return!1;for(var e=nu[n],i=(null==U?void 0:U.length)||0;i&&rU({char:nu[n]});)i--,e=nu[++n];rR({char:e,i:t,disableErrors:!0})&&rB({char:e},t),++n})}n3(!0)}},[nW,nu,n2]),v(function(){n2&&rj(rq())},[n2]),v(function(){nZ||rp("")},[nZ]),v(function(){Z&&nW&&rJ(0,-1)},[Z,nW]),v(function(){if(nW&&nZ){n7(!1),ra();var n=[rq(),r$({replaceSpace:!0})];nX&&n.reverse(),nb.apply(void 0,c(n))}},[r_,nW]),v(function(){rr&&setTimeout(function(){return rt(!1)},nf)},[rr]),v(function(){rc||(rp(""),B(),rh(null),rb(null)),!nJ&&rc&&document.addEventListener("keydown",function(n){var r;return r=function(){return r6(n)},rS(function(n){return c(n).concat([{fn:r,dt:Date.now()}])})},{once:!0}),nJ||!rc||E().length||rl(!1)},[rc,nJ]),v(function(){document.addEventListener("mouseup",function(){nQ(function(n){return n&&rp(E()),!1})})},[]),v(function(){n7(""!==nm),ro(""===nm?nV.default:nm)},[nm,n9]);var tc=function(n,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",e=n.char,i=n.ref,o=n.maskChar,a=n.isSpecialSymbol,u=rF(r-1);return r===r_.length-1&&rc?f("span",{style:{width:"1px"}}):f("span",{tabIndex:0===r?0:-1,"attr-char-id":r,className:"\n          input-mask_value_item\n          ".concat(t,"\n          ").concat(I(n.maskChar)?"input-mask_value_item--digit":"","\n          ").concat(N(n.maskChar)?"input-mask_value_item--letter":"","\n          ").concat(n.isSpecialSymbol?"input-mask_value_item--spec":"","\n        "),onClick:function(n){return r8(n,r)},onFocus:function(){for(var n=arguments.length,r=Array(n),t=0;t<n;t++)r[t]=arguments[t];tr&&tr.apply(void 0,c(r))},onBlur:tn,onKeyPress:to,onKeyDown:function(n){return r6(n,r)},onChange:to,contentEditable:!rc,inputMode:I(r!==r_.length-1?o:null==u?void 0:u.maskChar)?"numeric":"text",suppressContentEditableWarning:!0,onPaste:function(n){return tt(n,r)},onCopy:function(n){return te(n,r)},onCut:function(n){return ti(n,r)},ref:i,onDoubleClick:function(n){n.stopPropagation(),n.preventDefault(),rl(!0),setTimeout(function(){return ta(n,r)},50)},onMouseDown:function(n){return to(n,function(){return nQ(!0)})},onMouseMove:function(n){return to(n,r7)},children:!nZ&&nH&&0===rq().length?D:a?o:""===e?rW(r):e},r)};return p("div",{"data-testid":void 0===nF?"input-mask":nF,className:y("input-mask_wrapper",void 0===nd?"":nd,{disabled:$},{"input-mask_error":n9},{"input-mask_focus":nZ},{"input-mask_blink-error":rr}),onClick:r9,onBlur:tn,children:[p("div",{className:"\n            input-mask\n            ".concat(n9?"input-mask_error":"","\n            ").concat(nZ?"input-mask_focus":"","\n            ").concat(rr?"input-mask_blink-error":"","\n          "),onMouseDown:function(n){return to(n,function(){return nQ(!0)})},onMouseMove:function(n){return to(n,r7)},onClick:r9,onBlur:tn,children:[nE&&void 0!==nM&&nM&&f("div",{className:"input-mask_hint input-mask_hint--left",children:f(g,{hint:nI,className:nN,side:nK})}),no&&ni&&f("div",{className:"input-mask_icon input-mask_icon--left",children:ne}),f("div",{className:"input-mask_value",ref:nq,onKeyUp:to,onKeyDown:function(n){return to(n,r6)},onKeyPress:to,onBlur:tn,onClick:r9,children:r_.map(function(n,r){var t=n.char;return n.isSpecialSymbol?tc(n,r,"input-mask_value_item_spec-char"):""===t?tc(n,r,"input-mask_value_item_mask-char"):tc(n,r,"input-mask_value_item_value-char")})}),nn&&f("div",{className:"input-mask_clear",children:f(b,{onClick:function(n){n.stopPropagation(),n.preventDefault(),rK(),r1(null,0)}})}),na&&ni&&f("div",{className:"input-mask_icon input-mask_icon--right",children:ne}),nE&&(void 0===nL||nL)&&f("div",{className:"input-mask_hint input-mask_hint--right",children:f(g,{hint:nI,className:nN,side:nK})})]}),void 0!==np&&np&&ri&&f("div",{className:"input-mask_error-text",children:ri})]})}
+/* eslint-disable no-return-await */
+/* eslint-disable no-extra-boolean-cast */
+/* eslint-disable no-unsafe-optional-chaining */
+/* eslint-disable comma-dangle */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-continue */
+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-empty */
+/* eslint-disable no-unreachable */
+/* eslint-disable default-case */
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-unused-vars */
+/* eslint-disable default-param-last */
+import React, { createRef, useEffect, useRef, useState } from "react";
+
+import cn from "classnames";
+import { X } from "react-feather";
+
+import Hint from "../../UI/Hint/Hint";
+
+import { KEYBOARD_SERVICE_KEYS } from "./../../../Constants/index.constants.js";
+// import { KEYBOARD_SERVICE_KEYS } from './index.constants.js';
+import { setCaretPosition } from "./InputCarretPosition";
+import {
+  ANDROID_CHROME_TEXT_CODE,
+  DEFAULT_ERRORS,
+  DIGIT_MASK_CHAR,
+  EXCLUDED_KEYS,
+  LOWERCASE_LETTER_MASK_CHAR,
+  SPACE_CHAR,
+  UPPERCASE_LETTER_MASK_CHAR,
+} from "./config";
+import {
+  copyToClipboard,
+  getSelectionText,
+  isDigit,
+  isDigitMaskChar,
+  isLetter,
+  isLetterMaskChar,
+  isLowerCaseLetter,
+  isUpperCaseLetter,
+  resetSelectionText,
+  selectElementContents,
+  voidFn,
+} from "./functions";
+
+import "./InputMask.scss";
+
+export default function InputMask({
+  maskPattern,
+  maskPatternPlaceholder,
+  maskPlaceholder,
+  maskDigitPlaceholder,
+  maskLetterPlaceholder,
+  usePatternPlaceholder,
+  disabled,
+  maskAsPlaceholder = true,
+
+  maxEditableLen = -1,
+
+  isFocusedDefault = false,
+  isClearable,
+  isCaseSensitive,
+  adaptTextCase,
+  isUseAutoSelect = true,
+
+  icon,
+  showIcon,
+  isIconLeft,
+  isIconRight,
+  value,
+  blinkErrors = true,
+  blinkDuration = 100,
+  showErrors = false,
+
+  className = "",
+  errors: customErrors = DEFAULT_ERRORS,
+  error: customError = "",
+  ref,
+
+  onChange: onChangeProp = () => {},
+  onFocus: onFocusProp = () => {},
+  onBlur: onBlurProp = () => {},
+  onKeyDown: onKeyDownProp = () => {},
+
+  imitateTypingOnPaste = false,
+  imitateTypingOnPasteDelay = 100,
+
+  showHint = false,
+  hintText = "",
+  hintClassName = "",
+  isHintRight = true,
+  isHintLeft = false,
+  hintPosition = "right",
+
+  hideMaskOnBlur = true,
+  returnMaskedValue = false,
+
+  name,
+  testId = "input-mask",
+} = {}) {
+  const errors = {
+    ...DEFAULT_ERRORS,
+    ...customErrors,
+  };
+
+  const [isMaskRendered, setMaskRendered] = useState(false);
+
+  const inputRef = useRef(null);
+
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const [isFocused, setFocused] = useState(false);
+
+  const [isInitValue, setIsInitValue] = useState(false);
+
+  const inputThrottlingTimeout = 20;
+  const [isInputThrottled, setIsInputThrottled] = useState(false);
+
+  // ERRORS MANAGEMENT FUNCTIONS | START //
+  const [isError, setError] = useState(false);
+  const [blinkError, setBlinkError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(errors.default);
+  const clearErrorMessage = () => setErrorMessage(errors.default);
+  // ERRORS MANAGEMENT FUNCTIONS | END //
+
+  // SELECTION MANAGEMENT FUNCTIONS | START //
+  const [isSelecting, setIsSelecting] = useState(false);
+  const [selectedText, setSelectedText] = useState("");
+
+  const [selectionStartX, setSelectionStartX] = useState(null);
+  const [selectionEndX, setSelectionEndX] = useState(null);
+  // SELECTION MANAGEMENT FUNCTIONS | END //
+
+  // SERVICE WATCHERS MANAGEMENT FUNCTIONS | START //
+  const [serviceWatchers, setServiceWatchers] = useState([]);
+  const pushServiceWatcher = (fn) =>
+    setServiceWatchers((state) => [...state, { fn, dt: Date.now() }]);
+  const popServiceWatcher = () => {
+    const [poped, ...rest] = serviceWatchers;
+    setServiceWatchers(rest);
+    return poped.fn || voidFn;
+  };
+  const serviceWatchersWorker = () => {
+    popServiceWatcher()();
+  };
+  useEffect(() => {
+    if (serviceWatchers.length) serviceWatchersWorker();
+  }, [serviceWatchers]);
+  // SERVICE WATCHERS MANAGEMENT FUNCTIONS | END //
+
+  // INNER VALUE MANAGEMENT FUNCTIONS | START //
+  const [innerValue, setInnerValue] = useState([]);
+  const [undoValue, setUndoValue] = useState("");
+  const [redoValue, setRedoValue] = useState(null);
+  const [isUndoValueBlocked, setIsUndoValueBlocked] = useState(false);
+
+  const addInnerValueChar = ({ char, i = null, data = {} }) => {
+    setInnerValue((state) => {
+      const stateCopy = [...state];
+      const charObj = getCharObj(char, data);
+
+      stateCopy.push(charObj);
+
+      return stateCopy;
+    });
+  };
+  const updateInnerValueChar = ({ char = null } = {}, i) => {
+    setInnerValue((state) => {
+      if (!state[i]) return state;
+
+      const stateCopy = [...state];
+
+      if (!stateCopy[i].isSpecialSymbol && char !== null)
+        stateCopy[i].char = char;
+
+      return stateCopy;
+    });
+  };
+  const resetInnerValue = () => {
+    innerValue.map((v, i) => updateInnerValueChar({ char: "" }, i));
+  };
+  // INNER VALUE MANAGEMENT FUNCTIONS | END //
+
+  // CHECKERS | START //
+  const isValidChar = ({ char: key, i, disableErrors = false }) => {
+    const maskChar = getMaskCharByIndex(i);
+
+    switch (maskChar) {
+      case DIGIT_MASK_CHAR:
+        if (!isDigit(key)) {
+          if (!disableErrors) {
+            setErrorMessage(errors.onlyDigit);
+          }
+          return false;
+        }
+        break;
+
+      case UPPERCASE_LETTER_MASK_CHAR:
+        if (adaptTextCase) key = key.toUpperCase();
+
+        if (!isLetter(key) && !isCaseSensitive) {
+          if (!disableErrors) setErrorMessage(errors.onlyLetter);
+          return false;
+        }
+
+        if (isCaseSensitive && !isUpperCaseLetter(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyUpperCase);
+          return false;
+        }
+        break;
+      case LOWERCASE_LETTER_MASK_CHAR:
+        if (adaptTextCase) key = key.toLowerCase();
+
+        if (!isLetter(key) && !isCaseSensitive) {
+          if (!disableErrors) setErrorMessage(errors.onlyLetter);
+          return false;
+        }
+
+        if (isCaseSensitive && !isLowerCaseLetter(key)) {
+          if (!disableErrors) setErrorMessage(errors.onlyLowerCase);
+          return false;
+        }
+        break;
+
+      default:
+        return false;
+    }
+
+    return true;
+  };
+  const isSpecialSymbolMaskChar = ({ char }) => {
+    return !isDigitMaskChar(char) && !isLetterMaskChar(char);
+  };
+  const isSpecialSymbolChar = ({ char }) => {
+    return !isDigit(char) && !isLetter(char);
+  };
+  // CHECKERS | END //
+
+  // GETTERS | START //
+  const getCharObj = (char, data = {}) => {
+    const isSpecialSymbol = isSpecialSymbolChar({ char });
+    const isSpecialSymbolMask = isSpecialSymbolMaskChar({ char });
+
+    if (char === " ") char = SPACE_CHAR;
+
+    return {
+      char: isSpecialSymbolMask ? char : "",
+      maskChar: char,
+      isSpecialSymbol: isSpecialSymbolMask,
+      isCharSymbol: !isSpecialSymbol && char !== "" && isSpecialSymbolMask,
+      ref: createRef(),
+      ...data,
+    };
+  };
+  const getCharByIndex = (i) => {
+    return innerValue[i] ? { ...innerValue[i] } : undefined;
+  };
+  const getMaskCharByIndex = (i) => {
+    return innerValue[i]?.maskChar || undefined;
+  };
+  const getSelectStartIndex = () => {
+    if (selectionStartX === selectionEndX) return 0;
+
+    const minX =
+      selectionStartX < selectionEndX ? selectionStartX : selectionEndX;
+    const maxX =
+      selectionStartX > selectionEndX ? selectionStartX : selectionEndX;
+
+    const { index } = innerValue.reduce(
+      (resObj, { char, ref }, index) => {
+        if (ref?.current === null) return resObj;
+
+        const { left: charX, width: charWidth } =
+          ref?.current?.getBoundingClientRect();
+        const charCenterX = charX + charWidth / 2;
+
+        // If Char X-Coord Out Of Range
+        if (!charX || minX > charCenterX || maxX < charCenterX) return resObj;
+
+        if (
+          resObj.index === null ||
+          (minX <= charCenterX &&
+            charCenterX >= maxX &&
+            charCenterX < resObj.charX)
+        )
+          return { index, charX: charCenterX };
+
+        return resObj;
+      },
+      { index: null, charX: null },
+    );
+
+    return index;
+  };
+  const getPlaceholderCharByIndex = (i) => {
+    const { maskChar } = getCharByIndex(i);
+
+    if (usePatternPlaceholder) {
+      return maskPatternPlaceholder[i] || maskPlaceholder;
+    } else {
+      if (isDigitMaskChar(maskChar) && maskDigitPlaceholder)
+        return maskDigitPlaceholder;
+      if (isLetterMaskChar(maskChar) && maskLetterPlaceholder)
+        return maskLetterPlaceholder;
+      return maskPlaceholder;
+    }
+  };
+  const getInnerValueAsString = ({ replaceSpace = false } = {}) => {
+    const result = innerValue
+      .slice(0, innerValue.length - 1)
+      .map(({ char, maskChar }, i) => {
+        return char === "" ? getPlaceholderCharByIndex(i) || maskChar : char;
+      })
+      .join("");
+
+    return replaceSpace ? result?.replace(/\u00A0/g, " ") : result;
+  };
+  const getClearInnerValueAsString = (start = 0) => {
+    return innerValue
+      .filter((charObj, i) => i >= start)
+      .reduce(
+        (result, { char, maskChar, isSpecialSymbol, isCharSymbol }, i, arr) => {
+          if (
+            (char !== maskChar && char !== "") ||
+            !isSpecialSymbol ||
+            isCharSymbol
+          )
+            result += char; // || isCharSymbol
+          return result;
+        },
+        "",
+      );
+  };
+  const getLastTypedIndex = () => {
+    return (
+      innerValue.reduce((lastIndex, { char, isSpecialSymbol }, i) => {
+        if (
+          (!isSpecialSymbol && char !== SPACE_CHAR && char !== "") ||
+          lastIndex === null
+        )
+          lastIndex = i;
+        return lastIndex;
+      }, -1) + 1
+    );
+  };
+  // GETTERS | END //
+
+  // SETTERS | START //
+  const setFocusOnChar = (i, prevIndex) => {
+    const charObj = getCharByIndex(i);
+
+    if (!charObj) return false;
+
+    const { ref, isSpecialSymbol } = charObj;
+
+    if (!ref) return false;
+
+    if (
+      (maxEditableLen !== -1 ? i < maxEditableLen : true) &&
+      isSpecialSymbol &&
+      i < innerValue.length - 1
+    ) {
+      return prevIndex > i
+        ? onArrowLeftDown(null, i)
+        : onArrowRightDown(null, i);
+    }
+
+    if (maxEditableLen !== -1 && i > maxEditableLen) {
+      setFocusOnChar(maxEditableLen, i);
+      return false;
+    }
+
+    ref.current?.focus();
+
+    setTimeout(() => setCaretPosition(ref.current, 0), 10);
+
+    return true;
+  };
+  // SETTERS | END //
+
+  ///--- Event Handlers ---///
+
+  // SERVICE KEYS HANDLERS | START //
+  const onArrowLeftDown = (e, i) => setFocusOnChar(i - 1, i);
+  const onArrowRightDown = (e, i) => {
+    const key = e?.key || null;
+
+    if (maskAsPlaceholder && i > getLastTypedIndex()) {
+      return setFocusOnChar(getLastTypedIndex() + 1, i);
+    }
+    // If Current Index Equals LastTyped Index in MaskAsPlaceholder Mode
+    if (maskAsPlaceholder && i === getLastTypedIndex() && key === "ArrowRight")
+      return false;
+
+    return setFocusOnChar(i + 1, i);
+  };
+  const onBackspaceDown = (e, i) => {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+
+    if (getSelectionText().length) return deleteSelectedText();
+
+    const prevIndex = i - 1;
+    const charObj = getCharByIndex(prevIndex);
+
+    if (!charObj) return false;
+
+    const { isSpecialSymbol } = charObj;
+
+    if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
+
+    if (maskAsPlaceholder) {
+      const newText = innerValue
+        .slice(0, prevIndex)
+        .concat(
+          innerValue.slice(
+            i,
+            maxEditableLen !== -1 ? maxEditableLen : innerValue.length,
+          ),
+        )
+        .reduce((text, { char }) => {
+          return text.concat(char);
+        }, "");
+
+      resetInnerValue();
+      onPaste({ text: newText }, 0);
+    } else {
+      updateInnerValueChar({ char: "" }, prevIndex);
+    }
+
+    setFocusOnChar(prevIndex, i);
+
+    return true;
+  };
+  const onDeleteDown = (e, i) => {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+
+    if (getSelectionText().length) return deleteSelectedText();
+
+    const nextIndex = i + 1;
+    const charObj = getCharByIndex(i);
+
+    if (!charObj) return false;
+
+    const { char, isSpecialSymbol } = charObj;
+
+    if (isSpecialSymbol) return onDeleteDown(e, i + 1);
+
+    if (char === "") return false;
+
+    if (maskAsPlaceholder) {
+      const newText = innerValue
+        .slice(0, i)
+        .concat(
+          innerValue.slice(
+            nextIndex,
+            maxEditableLen !== -1 ? maxEditableLen : innerValue.length,
+          ),
+        )
+        .reduce((text, { char }) => {
+          return text.concat(char);
+        }, "");
+
+      resetInnerValue();
+      onPaste({ text: newText }, 0);
+      setFocusOnChar(i, i);
+    } else {
+      updateInnerValueChar({ char: "" }, i);
+      setFocusOnChar(nextIndex, i);
+    }
+
+    return true;
+  };
+  const onHomeDown = (e, i) => setFocusOnChar(0, -1);
+  const onEndDown = (e, i) =>
+    setTimeout(
+      () => setFocusOnChar(maskAsPlaceholder ? getLastTypedIndex() : 0, 0),
+      10,
+    );
+  // SERVICE KEYS HANDLERS | END //
+
+  // GENERAL EVENT HANDLERS | START //
+  const handleServiceKeyDown = (e, i) => {
+    const { key } = e;
+
+    switch (key) {
+      case "ArrowLeft":
+        return onArrowLeftDown(e, i);
+        break;
+
+      case "ArrowRight":
+        return onArrowRightDown(e, i);
+        break;
+
+      case "Backspace":
+        return onBackspaceDown(e, i);
+        break;
+
+      case "Delete":
+        return onDeleteDown(e, i);
+        break;
+
+      case "Home":
+        return onHomeDown(e, i);
+        break;
+
+      case "End":
+        return onEndDown(e, i);
+        break;
+
+      default:
+        return true;
+        break;
+    }
+  };
+  const handleKeyDown = async (
+    e,
+    i,
+    { disableErrors = false, disableIsSelectingCheck = false } = {},
+  ) => {
+    if (isSelecting && !disableIsSelectingCheck) {
+      deleteSelectedText();
+      resetSelectionText();
+      setIsSelecting(false);
+      setTimeout(
+        () =>
+          handleKeyDown(e, getSelectStartIndex(), {
+            disableErrors,
+            disableIsSelectingCheck: true,
+          }),
+        10,
+      );
+      return null;
+    }
+
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (e) {}
+
+    if (isInputThrottled) return false;
+
+    setIsInputThrottled(true);
+
+    let { key, keyCode } = e;
+
+    const charObj = getCharByIndex(i);
+
+    // Android Text Typing FIX
+    // eslint-disable-next-line eqeqeq
+    if (keyCode == ANDROID_CHROME_TEXT_CODE) {
+      const { ref: charRef } = charObj;
+      key = await new Promise((resolve) => {
+        setTimeout(() => {
+          //Typed Text
+          if (charRef?.current?.innerText?.length >= 2) {
+            const [key, prevChar] = charRef?.current?.innerText;
+            charRef.current.innerText = prevChar;
+            resolve(key);
+          } else {
+            resolve(null);
+          }
+        }, 1);
+      });
+    }
+
+    if (!charObj || i === innerValue.length - 1) return false;
+
+    if (maskAsPlaceholder && i > getLastTypedIndex() + 1)
+      return await handleKeyDown(
+        e,
+        getLastTypedIndex() === 0 ? 0 : getLastTypedIndex() + 1,
+        { disableErrors },
+      );
+
+    const { isSpecialSymbol, maskChar, isReadOnly } = charObj;
+
+    if (isReadOnly) return false;
+
+    //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
+    if (maskChar === SPACE_CHAR) return await handleKeyDown(e, i + 1);
+
+    if (isSpecialSymbol && maskChar !== key) return false;
+
+    if (!isValidChar({ char: key, i, disableErrors })) return false;
+
+    if (maskAsPlaceholder && getClearInnerValueAsString(i)?.length !== 0) {
+      const fromIndex = i + 1;
+      const text = innerValue
+        .slice()
+        .filter(({ isCharSymbol }, index) => index >= i && !isCharSymbol)
+        .map(({ char }, index) => char)
+        .join("");
+      onPaste({ text }, fromIndex, false);
+    }
+
+    setIsUndoValueBlocked(false);
+    updateInnerValueChar({ char: key }, i);
+    setTimeout(() => onArrowRightDown(e, i), 1);
+
+    return true;
+  };
+  const handleKeyCombinations = (e, i) => {
+    const { key, keyCode } = e;
+
+    switch (keyCode) {
+      //Ctrl + A
+      case 65:
+        selectAllText(e);
+        break;
+      //Ctrl + Y
+      case 89:
+        if (redoValue) {
+          resetInnerValue();
+          onPaste({ text: redoValue }, 0, true);
+        }
+        break;
+      //Ctrl + Z
+      case 90:
+        setRedoValue(getClearInnerValueAsString());
+        resetInnerValue();
+        onPaste({ text: undoValue }, 0, true);
+        break;
+    }
+  };
+  const onKeyDown = async (e, i = null) => {
+    if (!isFocused && !isSelecting) return false;
+
+    const { key, ctrlKey, altKey } = e;
+
+    const target = innerValue[0].ref?.current || e.target;
+
+    onKeyDownProp({ ...e, target }, i);
+
+    if (KEYBOARD_SERVICE_KEYS.includes(key) && EXCLUDED_KEYS.includes(key))
+      return true;
+
+    setError(false);
+    clearErrorMessage();
+
+    if (ctrlKey || altKey) {
+      if (!KEYBOARD_SERVICE_KEYS.includes(key)) handleKeyCombinations(e, i);
+      return true;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const handleResult = KEYBOARD_SERVICE_KEYS.includes(key)
+      ? handleServiceKeyDown(e, i)
+      : await handleKeyDown(e, i);
+
+    if (blinkErrors && !handleResult && i !== null) {
+      setBlinkError(true);
+    }
+  };
+  const onClick = (e, cb, { ignoreIsSelecting = false } = {}) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
+    if (
+      isSelecting &&
+      (selectedText.length || getSelectionText().length) &&
+      !ignoreIsSelecting
+    )
+      return false;
+
+    setFocused(true);
+
+    if (e.detail === 2) selectAllText(e);
+
+    if (typeof cb === "function") cb(e);
+  };
+  const onCharClick = (e, i) => {
+    if (e.detail == 2) {
+      selectAllText(e);
+      return true;
+    }
+
+    const { char, maskChar } = getCharByIndex(i);
+
+    if (maskAsPlaceholder && !isValidChar({ char, i, disableErrors: true }))
+      i = getLastTypedIndex();
+
+    setIsSelecting(false);
+    resetSelectionText();
+    setTimeout(
+      () => onClick(e, () => setFocusOnChar(i, 0), { ignoreIsSelecting: true }),
+      50,
+    );
+  };
+  const onWrapperClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!isMouseDown && !isSelecting) {
+      onClick(e);
+      setFocusOnChar(getLastTypedIndex(), 0);
+    }
+  };
+  const onClearClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    resetInnerValue();
+    onHomeDown(null, 0);
+  };
+  const onMouseDownMove = (e) => {
+    if (!isMouseDown) return false;
+
+    setIsSelecting(true);
+
+    const { clientX } = e;
+
+    if (selectionStartX === null) setSelectionStartX(clientX);
+
+    setSelectionEndX(clientX);
+  };
+  const onBlur = (e) => {
+    if (isFocused) onBlurProp();
+    setFocused(false);
+  };
+  const onFocus = (e, i) => {
+    const charObj = getCharByIndex(i);
+
+    if (!charObj) return false;
+
+    const { isSpecialSymbol, ref } = charObj;
+
+    setCaretPosition(ref.current, 0);
+
+    if (
+      (maxEditableLen !== -1 ? i < maxEditableLen : true) &&
+      isSpecialSymbol &&
+      i < innerValue.length - 1
+    ) {
+      onFocus(e, i + 1);
+      return false;
+    }
+
+    if (!isFocused) onFocusProp(e);
+
+    setFocused(true);
+  };
+  const onPaste = (e, i, setFocusToEnd = true) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
+    setIsSelecting(false);
+    resetSelectionText();
+
+    const pastedText =
+      (e?.clipboardData || window?.clipboardData)?.getData("text/plain") ||
+      e?.clipboardData?.getData("Text") ||
+      e.text;
+
+    if (!pastedText) return false;
+
+    const replacedIndexes = [];
+
+    if (maskAsPlaceholder && e?.type === "paste") {
+      const fromIndex = i + parseInt(pastedText?.length, 10);
+      const text = innerValue
+        .slice()
+        .filter(({ isCharSymbol }, index) => index >= i && !isCharSymbol)
+        .map(({ char }, index) => char)
+        .join("");
+      onPaste({ text }, fromIndex, false);
+    }
+
+    pastedText
+      .split("")
+      .filter((char) => isDigit(char) || isLetter(char))
+      .map((pastedChar, offset) => {
+        const charIndex = i + offset;
+
+        let isReplaced = false;
+        let isValid = false;
+
+        for (
+          let index = charIndex;
+          index < innerValue.length && !isReplaced;
+          ++index
+        ) {
+          const charObj = getCharByIndex(index);
+
+          if (!charObj) continue;
+
+          const { char, maskChar, isSpecialSymbol } = charObj;
+
+          // If Char Is Valid
+          if (!isValidChar({ char: pastedChar, i: index, disableErrors: true }))
+            continue;
+
+          // If Char Already Replaced
+          if (replacedIndexes.includes(index)) continue;
+
+          isReplaced = true;
+          isValid = true;
+          replacedIndexes.push(index);
+
+          if (imitateTypingOnPaste) {
+            setTimeout(() => {
+              updateInnerValueChar({ char: pastedChar }, index);
+            }, offset * imitateTypingOnPasteDelay);
+          } else {
+            updateInnerValueChar({ char: pastedChar }, index);
+          }
+        }
+
+        return { char: pastedChar, isValid };
+      });
+
+    const [lastCharIndex] = replacedIndexes.reverse();
+
+    if (setFocusToEnd) setFocusOnChar(lastCharIndex + 1, i);
+
+    return lastCharIndex;
+  };
+  const onCopy = (e, i) => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
+    copyToClipboard(getSelectionText());
+  };
+  const onCut = (e, i) => {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+    } catch (error) {}
+
+    copyToClipboard(getSelectionText());
+    deleteSelectedText();
+
+    setIsSelecting(false);
+    setFocusOnChar(i, 0);
+  };
+  // GENERAL EVENT HANDLERS | END //
+
+  // FUNCTIONS | START //
+  const cancelDefaultAction = (e, cb) => {
+    const { key } = e;
+
+    if (!EXCLUDED_KEYS.includes(key) && KEYBOARD_SERVICE_KEYS.includes(key)) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    if (typeof cb === "function") cb(e);
+
+    return false;
+  };
+  const selectAllText = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsSelecting(true);
+
+    setSelectionStartX(-1);
+    setSelectionEndX(-1);
+
+    selectElementContents(inputRef.current);
+    setSelectedText(getSelectionText());
+  };
+  const deleteSelectedText = () => {
+    const selStartInd = getSelectStartIndex();
+
+    if (selStartInd === null || selStartInd === undefined) return false;
+
+    const selEndInd = getSelectionText().length + selStartInd;
+
+    resetSelectionText();
+
+    if (
+      maskAsPlaceholder &&
+      getClearInnerValueAsString(selEndInd + 1)?.length !== 0
+    ) {
+      const text = innerValue
+        .slice()
+        .filter(({ isSpecialSymbol, isCharSymbol }, index) => {
+          if (maxEditableLen !== -1 && index > maxEditableLen - 1) return false;
+          return (
+            (index < selStartInd || index >= selEndInd) &&
+            !isSpecialSymbol &&
+            !isCharSymbol
+          );
+        })
+        .map(({ char }, index) => char)
+        .join("");
+
+      resetInnerValue();
+      onPaste({ text }, 0, false);
+      setFocusOnChar(selStartInd);
+    } else {
+      for (let index = selStartInd; index < selEndInd; ++index)
+        updateInnerValueChar({ char: "" }, index);
+    }
+
+    setFocusOnChar(selStartInd, -1);
+
+    return true;
+  };
+  // FUNCTIONS | END //
+
+  ///--- OBSERVERS ---///
+  // Input Throttling
+  useEffect(() => {
+    if (isInputThrottled)
+      setTimeout(() => setIsInputThrottled(false), inputThrottlingTimeout);
+  }, [isInputThrottled]);
+  //Render Mask
+  useEffect(() => {
+    setInnerValue([]);
+    setMaskRendered(false);
+
+    if (!maskPattern) maskPattern = "";
+
+    maskPattern
+      .concat(" ")
+      .split("")
+      .map((char, id, i) => {
+        addInnerValueChar({
+          char,
+          i,
+          data: { id, isReadOnly: id === maskPattern.length },
+        });
+        if (value?.[id]) updateInnerValueChar({ char: value[id] }, id);
+      });
+    setMaskRendered(true);
+  }, [maskPattern]);
+
+  useEffect(() => {
+    if (value !== getClearInnerValueAsString()) setIsInitValue(false);
+  }, [value]);
+
+  useEffect(() => {
+    if (
+      isMaskRendered &&
+      !isInitValue &&
+      value !== getClearInnerValueAsString()
+    ) {
+      if (value && value !== "") {
+        let valueCharIndex = 0;
+        innerValue.map(({ isSpecialSymbol }, i) => {
+          if (isSpecialSymbol) return false;
+          let char = value[valueCharIndex];
+          let whileLimit = maskPattern?.length || 0;
+          while (
+            whileLimit &&
+            isSpecialSymbolChar({ char: value[valueCharIndex] })
+          ) {
+            whileLimit--;
+            char = value[++valueCharIndex];
+          }
+
+          //If Valid
+          if (isValidChar({ char, i, disableErrors: true })) {
+            updateInnerValueChar({ char }, i);
+          }
+
+          ++valueCharIndex;
+        });
+      }
+
+      setIsInitValue(true);
+    }
+  }, [isMaskRendered, value, isInitValue]);
+
+  useEffect(() => {
+    if (isInitValue) setUndoValue(getClearInnerValueAsString());
+  }, [isInitValue]);
+
+  // Focus Observer
+  useEffect(() => {
+    if (!isFocused) setSelectedText("");
+  }, [isFocused]);
+
+  // Default Focused
+  useEffect(() => {
+    if (isFocusedDefault && isMaskRendered) setFocusOnChar(0, -1);
+  }, [isFocusedDefault, isMaskRendered]);
+
+  // OnChange Observer
+  useEffect(() => {
+    if (isMaskRendered && isFocused) {
+      setError(false);
+      clearErrorMessage();
+      const values = [
+        getClearInnerValueAsString(),
+        getInnerValueAsString({ replaceSpace: true }),
+      ];
+      if (returnMaskedValue) values.reverse();
+
+      onChangeProp(...values);
+    }
+  }, [innerValue, isMaskRendered]);
+
+  // Blink Error
+  useEffect(() => {
+    if (blinkError) setTimeout(() => setBlinkError(false), blinkDuration);
+  }, [blinkError]);
+
+  useEffect(() => {
+    if (!isSelecting) {
+      setSelectedText("");
+      resetSelectionText();
+      setSelectionStartX(null);
+      setSelectionEndX(null);
+    }
+
+    if (!isMouseDown && isSelecting) {
+      document.addEventListener(
+        "keydown",
+        (e) => pushServiceWatcher(() => onKeyDown(e)),
+        { once: true },
+      );
+    }
+
+    if (!isMouseDown && isSelecting && !getSelectionText().length)
+      setIsSelecting(false);
+  }, [isSelecting, isMouseDown]);
+
+  useEffect(() => {
+    document.addEventListener("mouseup", () => {
+      setIsMouseDown((isMouseDown) => {
+        if (isMouseDown) setSelectedText(getSelectionText());
+        return false;
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    setError(customError !== "");
+    setErrorMessage(customError === "" ? errors.default : customError);
+  }, [customError, isError]);
+
+  ///--- RENDER ---///
+
+  const renderChar = (obj, i, className = "") => {
+    const { char, ref, maskChar, isSpecialSymbol } = obj;
+    const prevChar = getCharByIndex(i - 1);
+
+    if (i === innerValue.length - 1 && isSelecting)
+      return <span style={{ width: "1px" }} />;
+
+    return (
+      <span
+        tabIndex={i === 0 ? 0 : -1}
+        key={i}
+        attr-char-id={i}
+        className={`
+          input-mask_value_item
+          ${className}
+          ${isDigitMaskChar(obj.maskChar) ? "input-mask_value_item--digit" : ""}
+          ${isLetterMaskChar(obj.maskChar) ? "input-mask_value_item--letter" : ""}
+          ${obj.isSpecialSymbol ? "input-mask_value_item--spec" : ""}
+        `}
+        onClick={(e) => onCharClick(e, i)}
+        onFocus={(...params) => {
+          // if (isUseAutoSelect) inputRef?.current?.select();
+          if (onFocus) onFocus(...params);
+        }}
+        onBlur={onBlur}
+        onKeyPress={cancelDefaultAction}
+        onKeyDown={(e) => onKeyDown(e, i)}
+        onChange={cancelDefaultAction}
+        contentEditable={!isSelecting}
+        inputMode={
+          isDigitMaskChar(
+            i !== innerValue.length - 1 ? maskChar : prevChar?.maskChar,
+          )
+            ? "numeric"
+            : "text"
+        }
+        suppressContentEditableWarning={true}
+        onPaste={(e) => onPaste(e, i)}
+        onCopy={(e) => onCopy(e, i)}
+        onCut={(e) => onCut(e, i)}
+        ref={ref}
+        onDoubleClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setIsSelecting(true);
+          setTimeout(() => selectAllText(e, i), 50);
+        }}
+        onMouseDown={(e) => cancelDefaultAction(e, () => setIsMouseDown(true))}
+        onMouseMove={(e) => cancelDefaultAction(e, onMouseDownMove)}
+      >
+        {!isFocused &&
+        hideMaskOnBlur &&
+        getClearInnerValueAsString().length === 0
+          ? SPACE_CHAR
+          : isSpecialSymbol
+            ? maskChar
+            : char === ""
+              ? getPlaceholderCharByIndex(i)
+              : char}
+      </span>
+    );
+  };
+  const renderMaskChar = (obj, i) =>
+    renderChar(obj, i, "input-mask_value_item_mask-char");
+  const renderValueChar = (obj, i) =>
+    renderChar(obj, i, "input-mask_value_item_value-char");
+  const renderSpecialChar = (obj, i) =>
+    renderChar(obj, i, "input-mask_value_item_spec-char");
+  const renderInputValue = () => {
+    return innerValue.map((obj, i) => {
+      const { char, isSpecialSymbol } = obj;
+
+      if (isSpecialSymbol) {
+        return renderSpecialChar(obj, i);
+      }
+
+      const isMaskItem = (() => char === "")();
+      return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
+    });
+  };
+  const render = () => {
+    return (
+      <div
+        data-testid={testId}
+        className={cn(
+          "input-mask_wrapper",
+          className,
+          { disabled },
+          { "input-mask_error": isError },
+          { "input-mask_focus": isFocused },
+          { "input-mask_blink-error": blinkError },
+        )}
+        onClick={onWrapperClick}
+        onBlur={onBlur}
+      >
+        <div
+          className={`
+            input-mask
+            ${isError ? "input-mask_error" : ""}
+            ${isFocused ? "input-mask_focus" : ""}
+            ${blinkError ? "input-mask_blink-error" : ""}
+          `}
+          onMouseDown={(e) =>
+            cancelDefaultAction(e, () => setIsMouseDown(true))
+          }
+          onMouseMove={(e) => cancelDefaultAction(e, onMouseDownMove)}
+          // onMouseUp={cancelDefaultAction}
+          onClick={onWrapperClick}
+          onBlur={onBlur}
+        >
+          {showHint && isHintLeft && (
+            <div className="input-mask_hint input-mask_hint--left">
+              <Hint
+                hint={hintText}
+                className={hintClassName}
+                side={hintPosition}
+              />
+            </div>
+          )}
+          {isIconLeft && showIcon && (
+            <div className="input-mask_icon input-mask_icon--left">{icon}</div>
+          )}
+          <div
+            className="input-mask_value"
+            ref={inputRef}
+            onKeyUp={cancelDefaultAction}
+            onKeyDown={(e) => cancelDefaultAction(e, onKeyDown)}
+            onKeyPress={cancelDefaultAction}
+            onBlur={onBlur}
+            onClick={onWrapperClick}
+          >
+            {renderInputValue()}
+          </div>
+          {isClearable && (
+            <div className="input-mask_clear">
+              <X onClick={onClearClick} />
+            </div>
+          )}
+          {isIconRight && showIcon && (
+            <div className="input-mask_icon input-mask_icon--right">{icon}</div>
+          )}
+          {showHint && isHintRight && (
+            <div className="input-mask_hint input-mask_hint--right">
+              <Hint
+                hint={hintText}
+                className={hintClassName}
+                side={hintPosition}
+              />
+            </div>
+          )}
+        </div>
+        {showErrors && errorMessage && (
+          <div className="input-mask_error-text">{errorMessage}</div>
+        )}
+      </div>
+    );
+  };
+
+  return render();
+}