https://www.thenatsreport.com/assets/otpInput-B3xG_-U3.js

1
2!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="4b9c1370-cce2-5394-abfd-4bcd9e4e824a")}catch(e){}}();
3import{s as e,t}from"./jsx-runtime-D4ePz0Hl.js";import{t as n}from"./react-BXH-GOAS.js";import{t as r}from"./classnames-B9Sa-P4w.js";var i=e(r(),1),a=e(n(),1),o=Object.defineProperty,s=Object.defineProperties,c=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,f=(e,t,n)=>t in e?o(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,p=(e,t)=>{for(var n in t||={})u.call(t,n)&&f(e,n,t[n]);if(l)for(var n of l(t))d.call(t,n)&&f(e,n,t[n]);return e},m=(e,t)=>s(e,c(t)),h=(e,t)=>{var n={};for(var r in e)u.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&l)for(var r of l(e))t.indexOf(r)<0&&d.call(e,r)&&(n[r]=e[r]);return n};function g(e){return[setTimeout(e,0),setTimeout(e,10),setTimeout(e,50)]}function _(e){let t=a.useRef();return a.useEffect(()=>{t.current=e}),t.current}var v=18,y=40,b=`${y}px`,x=[`[data-lastpass-icon-root]`,`com-1password-button`,`[data-dashlanecreated]`,`[style$="2147483647 !important;"]`].join(`,`);function S({containerRef:e,inputRef:t,pushPasswordManagerStrategy:n,isFocused:r}){let[i,o]=a.useState(!1),[s,c]=a.useState(!1),[l,u]=a.useState(!1),d=a.useMemo(()=>n===`none`?!1:(n===`increase-width`||n===`experimental-no-flickering`)&&i&&s,[i,s,n]),f=a.useCallback(()=>{let r=e.current,i=t.current;if(!r||!i||l||n===`none`)return;let a=r,s=a.getBoundingClientRect().left+a.offsetWidth,c=a.getBoundingClientRect().top+a.offsetHeight/2,d=s-v,f=c;document.querySelectorAll(x).length===0&&document.elementFromPoint(d,f)===r||(o(!0),u(!0))},[e,t,l,n]);return a.useEffect(()=>{let t=e.current;if(!t||n===`none`)return;function r(){c(window.innerWidth-t.getBoundingClientRect().right>=y)}r();let i=setInterval(r,1e3);return()=>{clearInterval(i)}},[e,n]),a.useEffect(()=>{let e=r||document.activeElement===t.current;if(n===`none`||!e)return;let i=setTimeout(f,0),a=setTimeout(f,2e3),o=setTimeout(f,5e3),s=setTimeout(()=>{u(!0)},6e3);return()=>{clearTimeout(i),clearTimeout(a),clearTimeout(o),clearTimeout(s)}},[t,r,n,f]),{hasPWMBadge:i,willPushPWMBadge:d,PWM_BADGE_SPACE_WIDTH:b}}var C=a.createContext({}),w=a.forwardRef((e,t)=>{var n=e,{value:r,onChange:i,maxLength:o,textAlign:s=`left`,pattern:c,placeholder:l,inputMode:u=`numeric`,onComplete:d,pushPasswordManagerStrategy:f=`increase-width`,pasteTransformer:v,containerClassName:y,noScriptCSSFallback:b=E,render:x,children:w}=n,D=h(n,[`value`,`onChange`,`maxLength`,`textAlign`,`pattern`,`placeholder`,`inputMode`,`onComplete`,`pushPasswordManagerStrategy`,`pasteTransformer`,`containerClassName`,`noScriptCSSFallback`,`render`,`children`]),O;let[k,A]=a.useState(typeof D.defaultValue==`string`?D.defaultValue:``),j=r??k,M=_(j),N=a.useCallback(e=>{i?.(e),A(e)},[i]),P=a.useMemo(()=>c?typeof c==`string`?new RegExp(c):c:null,[c]),F=a.useRef(null),I=a.useRef(null),L=a.useRef({value:j,onChange:N,isIOS:typeof window<`u`&&((O=window==null?void 0:window.CSS)?.supports)?.call(O,`-webkit-touch-callout`,`none`)}),R=a.useRef({prev:[F.current?.selectionStart,F.current?.selectionEnd,F.current?.selectionDirection]});a.useImperativeHandle(t,()=>F.current,[]),a.useEffect(()=>{let e=F.current,t=I.current;if(!e||!t)return;L.current.value!==e.value&&L.current.onChange(e.value),R.current.prev=[e.selectionStart,e.selectionEnd,e.selectionDirection];function n(){if(document.activeElement!==e){W(null),K(null);return}let t=e.selectionStart,n=e.selectionEnd,r=e.selectionDirection,i=e.maxLength,a=e.value,o=R.current.prev,s=-1,c=-1,l;if(a.length!==0&&t!==null&&n!==null){let e=t===n,r=t===a.length&&a.length<i;if(e&&!r){let e=t;if(e===0)s=0,c=1,l=`forward`;else if(e===i)s=e-1,c=e,l=`backward`;else if(i>1&&a.length>1){let t=0;if(o[0]!==null&&o[1]!==null){l=e<o[1]?`backward`:`forward`;let n=o[0]===o[1]&&o[0]<i;l===`backward`&&!n&&(t=-1)}s=t+e,c=t+e+1}}s!==-1&&c!==-1&&s!==c&&F.current.setSelectionRange(s,c,l)}let u=s===-1?t:s,d=c===-1?n:c,f=l??r;W(u),K(d),R.current.prev=[u,d,f]}if(document.addEventListener(`selectionchange`,n,{capture:!0}),n(),document.activeElement===e&&H(!0),!document.getElementById(`input-otp-style`)){let e=document.createElement(`style`);if(e.id=`input-otp-style`,document.head.appendChild(e),e.sheet){let t=`background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;`;T(e.sheet,`[data-input-otp]::selection { background: transparent !important; color: transparent !important; }`),T(e.sheet,`[data-input-otp]:autofill { ${t} }`),T(e.sheet,`[data-input-otp]:-webkit-autofill { ${t} }`),T(e.sheet,`@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed;

3 font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`),T(e.sheet,`[data-input-otp] + * { pointer-events: all !important; }`)}}let r=()=>{t&&t.style.setProperty(`--root-height`,`${e.clientHeight}px`)};r();let i=new ResizeObserver(r);return i.observe(e),()=>{document.removeEventListener(`selectionchange`,n,{capture:!0}),i.disconnect()}},[]);let[z,B]=a.useState(!1),[V,H]=a.useState(!1),[U,W]=a.useState(null),[G,K]=a.useState(null);a.useEffect(()=>{g(()=>{var e;(e=F.current)==null||e.dispatchEvent(new Event(`input`));let t=F.current?.selectionStart,n=F.current?.selectionEnd,r=F.current?.selectionDirection;t!==null&&n!==null&&(W(t),K(n),R.current.prev=[t,n,r])})},[j,V]),a.useEffect(()=>{M!==void 0&&j!==M&&M.length<o&&j.length===o&&d?.(j)},[o,d,M,j]);let q=S({containerRef:I,inputRef:F,pushPasswordManagerStrategy:f,isFocused:V}),J=a.useCallback(e=>{let t=e.currentTarget.value.slice(0,o);if(t.length>0&&P&&!P.test(t)){e.preventDefault();return}typeof M==`string`&&t.length<M.length&&document.dispatchEvent(new Event(`selectionchange`)),N(t)},[o,N,M,P]),Y=a.useCallback(()=>{var e;if(F.current){let t=Math.min(F.current.value.length,o-1),n=F.current.value.length;(e=F.current)==null||e.setSelectionRange(t,n),W(t),K(n)}H(!0)},[o]),X=a.useCallback(e=>{let t=F.current;if(!v&&(!L.current.isIOS||!e.clipboardData||!t))return;let n=e.clipboardData.getData(`text/plain`),r=v?v(n):n;e.preventDefault();let i=F.current?.selectionStart,a=F.current?.selectionEnd,s=(i===a?j.slice(0,i)+r+j.slice(i):j.slice(0,i)+r+j.slice(a)).slice(0,o);if(s.length>0&&P&&!P.test(s))return;t.value=s,N(s);let c=Math.min(s.length,o-1),l=s.length;t.setSelectionRange(c,l),W(c),K(l)},[o,N,P,j]),Z=a.useMemo(()=>({position:`relative`,cursor:D.disabled?`default`:`text`,userSelect:`none`,WebkitUserSelect:`none`,pointerEvents:`none`}),[D.disabled]),Q=a.useMemo(()=>({position:`absolute`,inset:0,width:q.willPushPWMBadge?`calc(100% + ${q.PWM_BADGE_SPACE_WIDTH})`:`100%`,clipPath:q.willPushPWMBadge?`inset(0 ${q.PWM_BADGE_SPACE_WIDTH} 0 0)`:void 0,height:`100%`,display:`flex`,textAlign:s,opacity:`1`,color:`transparent`,pointerEvents:`all`,background:`transparent`,caretColor:`transparent`,border:`0 solid transparent`,outline:`0 solid transparent`,boxShadow:`none`,lineHeight:`1`,letterSpacing:`-.5em`,fontSize:`var(--root-height)`,fontFamily:`monospace`,fontVariantNumeric:`tabular-nums`}),[q.PWM_BADGE_SPACE_WIDTH,q.willPushPWMBadge,s]),ee=a.useMemo(()=>a.createElement(`input`,m(p({autoComplete:D.autoComplete||`one-time-code`},D),{"data-input-otp":!0,"data-input-otp-placeholder-shown":j.length===0||void 0,"data-input-otp-mss":U,"data-input-otp-mse":G,inputMode:u,pattern:P?.source,"aria-placeholder":l,style:Q,maxLength:o,value:j,ref:F,onPaste:e=>{var t;X(e),(t=D.onPaste)==null||t.call(D,e)},onChange:J,onMouseOver:e=>{var t;B(!0),(t=D.onMouseOver)==null||t.call(D,e)},onMouseLeave:e=>{var t;B(!1),(t=D.onMouseLeave)==null||t.call(D,e)},onFocus:e=>{var t;Y(),(t=D.onFocus)==null||t.call(D,e)},onBlur:e=>{var t;H(!1),(t=D.onBlur)==null||t.call(D,e)}})),[J,Y,X,u,Q,o,G,U,D,P?.source,j]),$=a.useMemo(()=>({slots:Array.from({length:o}).map((e,t)=>{let n=V&&U!==null&&G!==null&&(U===G&&t===U||t>=U&&t<G),r=j[t]===void 0?null:j[t];return{char:r,placeholderChar:j[0]===void 0?l?.[t]??null:null,isActive:n,hasFakeCaret:n&&r===null}}),isFocused:V,isHovering:!D.disabled&&z}),[V,z,o,G,U,D.disabled,j]),te=a.useMemo(()=>x?x($):a.createElement(C.Provider,{value:$},w),[w,$,x]);return a.createElement(a.Fragment,null,b!==null&&a.createElement(`noscript`,null,a.createElement(`style`,null,b)),a.createElement(`div`,{ref:I,"data-input-otp-container":!0,style:Z,className:y},te,a.createElement(`div`,{style:{position:`absolute`,inset:0,pointerEvents:`none`}},ee)))});w.displayName=`Input`;function T(e,t){try{e.insertRule(t)}catch{console.error(`input-otp could not insert CSS rule:`,t)}}var E=`
4[data-input-otp] {
5  --nojs-bg: white !important;
6  --nojs-fg: black !important;
7
8  background-color: var(--nojs-bg) !important;
9  color: var(--nojs-fg) !important;
10  caret-color: var(--nojs-fg) !important;
11  letter-spacing: .25em !important;
12  text-align: center !important;
13  border: 1px solid var(--nojs-fg) !important;
14  border-radius: 4px !important;
15  width: 100% !important;
16}
17@media (prefers-color-scheme: dark) {
18  [data-input-otp] {
19    --nojs-bg: black !important;
20    --nojs-fg: white !important;
21  }
22}`,D=`^\\d+$`,O=e(t(),1),k=({name:e,maxLength:t=6,onComplete:n})=>(0,O.jsx)(w,{name:e,maxLength:t,autoComplete:`one-time-code`,inputMode:`numeric`,pattern:D,containerClassName:`group flex justify-center items-center has-[:disabled]:opacity-30`,render:({slots:e})=>(0,O.jsx)(`div`,{className:`flex justify-center`,children:e.slice(0,t).map((e,t)=>(0,O.jsx)(A,{...e},t))}),onComplete:n});function A(e){return(0,O.jsxs)(`div`,{className:(0,i.default)(`relative w-10 h-14 text-[2rem]`,`flex items-center justify-center`,`transition-all duration-300`,`border-border border-gray-400 border-y border-r first:border-l first:rounded-l-md last:rounded-r-md`,`group-hover:border-gray-700 group-focus-within:border-gray-700`,`outline outline-0 outline-gray-700`,{"outline-4 outline-gray-700":e.isActive}),children:[(0,O.jsx)(`div`,{className:`group-has-[input[data-input-otp-placeholder-shown]]:opacity-20`,children:e.char??e.placeholderChar}),e.hasFakeCaret&&(0,O.jsx)(j,{})]})}function j(){return(0,O.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center pointer-events-none animate-caret-blink`,children:(0,O.jsx)(`div`,{className:`w-px h-8 bg-gray-950`})})}export{k as t};
23//# sourceMappingURL=otpInput-B3xG_-U3.js.map

24//# debugId=4b9c1370-cce2-5394-abfd-4bcd9e4e824a