@privy-io/react-auth/dist/cjs/PinInput-DSI6rjOn.js

React client for the Privy Auth API

"use strict";var e=require("styled-components"),t=require("react/jsx-runtime"),i=require("react"),r=require("react-device-detect");const o=/*#__PURE__*/e.styled.div.withConfig({displayName:"AppLogoContainer",componentId:"sc-ba98f772-0"})(["display:flex;flex-direction:column;align-items:center;padding:0px 0px 30px;@media (max-width:440px){padding:10px 10px 20px;}"]),n=/*#__PURE__*/e.styled.div.withConfig({displayName:"Title",componentId:"sc-ba98f772-1"})(["font-size:18px;line-height:30px;text-align:center;font-weight:600;margin-bottom:10px;"]),a=/*#__PURE__*/e.styled.div.withConfig({displayName:"SubTitle",componentId:"sc-ba98f772-2"})(["font-size:0.875rem;text-align:center;"]),s=/*#__PURE__*/e.styled.div.withConfig({displayName:"Container",componentId:"sc-ba98f772-3"})(["display:flex;flex-direction:column;align-items:center;gap:10px;flex-grow:1;padding:20px 0;@media (max-width:440px){padding:10px 10px 20px;}"]),l=/*#__PURE__*/e.styled.div.withConfig({displayName:"List",componentId:"sc-ba98f772-4"})(["display:flex;flex-direction:column;align-items:stretch;gap:0.75rem;padding:1rem 0rem 0rem;flex-grow:1;width:100%;"]),p=/*#__PURE__*/e.styled.div.withConfig({displayName:"ListItemIcon",componentId:"sc-ba98f772-5"})(["width:25px;display:flex;align-items:center;justify-content:flex-start;> svg{z-index:2;height:25px !important;width:25px !important;color:var(--privy-color-accent);}"]),d=/*#__PURE__*/e.styled.div.withConfig({displayName:"ListItem",componentId:"sc-ba98f772-6"})(["display:flex;align-items:center;gap:10px;font-size:0.875rem;line-height:1rem;text-align:left;"]),c=/*#__PURE__*/e.styled.div.withConfig({displayName:"BottomSection",componentId:"sc-ba98f772-7"})(["display:flex;flex-direction:column;gap:10px;padding-top:20px;"]),m=/*#__PURE__*/e.styled.div.withConfig({displayName:"MethodList",componentId:"sc-ba98f772-8"})(["display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:1rem 0rem 0rem;flex-grow:1;width:100%;"]),x=/*#__PURE__*/e.styled.div.withConfig({displayName:"MethodListItem",componentId:"sc-ba98f772-9"})(["display:flex;gap:5px;width:100%;position:relative;"]),f=/*#__PURE__*/e.styled.button.withConfig({displayName:"RemoveMethodButton",componentId:"sc-ba98f772-10"})(["&&{background-color:transparent;color:var(--privy-color-foreground-3);padding:0 0.75rem;display:flex;align-items:center;height:100%;> svg{z-index:2;height:20px !important;width:20px !important;}}&&:hover{color:var(--privy-color-error);}"]),g=/*#__PURE__*/e.styled.div.withConfig({displayName:"MethodText",componentId:"sc-ba98f772-11"})(["display:flex;align-items:center;gap:0.5rem;> svg{z-index:2;height:20px !important;width:20px !important;}"]),u=/*#__PURE__*/e.styled.div.withConfig({displayName:"ExtraText",componentId:"sc-ba98f772-12"})(["display:flex;align-items:center;gap:6px;font-weight:400 !important;color:",";> svg{z-index:2;height:18px !important;width:18px !important;display:flex !important;align-items:flex-end;}"],(e=>e.$isAccent?"var(--privy-color-accent)":"var(--privy-color-foreground-3)")),h=/*#__PURE__*/e.styled.div.withConfig({displayName:"SmsInsecureText",componentId:"sc-ba98f772-13"})(["width:100%;display:flex;justify-content:space-between;"]),y=/*#__PURE__*/e.styled.p.withConfig({displayName:"TermsText",componentId:"sc-ba98f772-14"})(["text-align:left;width:100%;color:var(--privy-color-foreground-3) !important;"]),v=/*#__PURE__*/e.styled.button.withConfig({displayName:"PrimaryTextButton",componentId:"sc-ba98f772-15"})(["display:flex;flex-direction:row;align-items:center;justify-content:center;user-select:none;&{width:100%;cursor:pointer;border-radius:var(--privy-border-radius-md);font-size:0.875rem;line-height:1rem;font-style:normal;font-weight:500;line-height:22px;letter-spacing:-0.016px;}&&{color:",";background-color:transparent;padding:0.5rem 0px;}&:hover{text-decoration:underline;}"],(e=>"dark"===e.theme?"var(--privy-color-foreground-2)":"var(--privy-color-accent)")),C=/*#__PURE__*/e.styled.div.withConfig({displayName:"IconWrapper",componentId:"sc-ba98f772-16"})(["display:flex;align-items:center;justify-content:center;color:var(--privy-color-accent);width:100%;> svg{z-index:2;width:3rem;height:3rem;}"]),w=/*#__PURE__*/e.styled.div.withConfig({displayName:"ErrorMessage",componentId:"sc-ba98f772-17"})(["color:var(--privy-color-error);"]);let b=Array(6).fill("");var I,N=((I=N||{})[I.RESET_AFTER_DELAY=0]="RESET_AFTER_DELAY",I[I.CLEAR_ON_NEXT_VALID_INPUT=1]="CLEAR_ON_NEXT_VALID_INPUT",I);function T(e){return/^[0-9]{1}$/.test(e)}function M(e){return 6===e.length&&e.every(T)}let L=/*#__PURE__*/e.styled.div.withConfig({displayName:"PinInputContainer",componentId:"sc-7a171f6-0"})(["display:flex;flex-direction:column;width:100%;gap:8px;@media (max-width:440px){margin-top:8px;margin-bottom:8px;}> div:nth-child(1){display:flex;justify-content:center;gap:0.5rem;width:100%;border-radius:var(--privy-border-radius-md);> input{border:1px solid var(--privy-color-foreground-4);background:var(--privy-color-background);border-radius:var(--privy-border-radius-md);padding:8px 10px;height:58px;width:46px;text-align:center;font-size:18px;}> input:disabled{background:var(--privy-color-background-2);}> input:focus{border:1px solid var(--privy-color-accent);}> input:invalid{border:1px solid var(--privy-color-error);}> input.success{border:1px solid var(--privy-color-success);}> input.fail{border:1px solid var(--privy-color-error);animation:shake 180ms;animation-iteration-count:2;}}@keyframes shake{0%{transform:translate(1px,0px);}33%{transform:translate(-1px,0px);}67%{transform:translate(-1px,0px);}100%{transform:translate(1px,0px);}}"]),j=/*#__PURE__*/e.styled.div.withConfig({displayName:"InputHelp",componentId:"sc-7a171f6-1"})(["line-height:20px;font-size:13px;display:flex;justify-content:flex-start;width:100%;color:",";"],(e=>e.$fail?"var(--privy-color-error)":"var(--privy-color-foreground-3)"));exports.AppLogoContainer=o,exports.BottomSection=c,exports.Container=s,exports.ErrorMessage=w,exports.ExtraText=u,exports.FaceId=({style:e,...i})=>/*#__PURE__*/t.jsx("svg",{x:0,y:0,width:"65",height:"64",viewBox:"0 0 65 64",style:{height:"64px",width:"65px",...e},fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",...i,children:/*#__PURE__*/t.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3.71369 17.5625V10.375C3.71369 6.44625 6.85845 3.25 10.7238 3.25H17.7953C18.6783 3.25 19.3941 2.52244 19.3941 1.625C19.3941 0.727562 18.6783 0 17.7953 0H10.7238C5.09529 0 0.516113 4.65419 0.516113 10.375V17.5625C0.516113 18.4599 1.23194 19.1875 2.1149 19.1875C2.99787 19.1875 3.71369 18.4599 3.71369 17.5625ZM17.7953 60.7501C18.6783 60.7501 19.3941 61.4777 19.3941 62.3751C19.3941 63.2726 18.6783 64.0001 17.7953 64.0001H10.7238C5.09529 64.0001 0.516113 59.3459 0.516113 53.6251V46.4376C0.516113 45.5402 1.23194 44.8126 2.1149 44.8126C2.99787 44.8126 3.71369 45.5402 3.71369 46.4376V53.6251C3.71369 57.5538 6.85845 60.7501 10.7238 60.7501H17.7953ZM63.4839 46.4376V53.6251C63.4839 59.3459 58.9048 64.0001 53.2763 64.0001H46.2047C45.3217 64.0001 44.6059 63.2726 44.6059 62.3751C44.6059 61.4777 45.3217 60.7501 46.2047 60.7501H53.2763C57.1416 60.7501 60.2864 57.5538 60.2864 53.6251V46.4376C60.2864 45.5402 61.0022 44.8126 61.8851 44.8126C62.7681 44.8126 63.4839 45.5402 63.4839 46.4376ZM63.4839 10.375V17.5625C63.4839 18.4599 62.7681 19.1875 61.8851 19.1875C61.0022 19.1875 60.2864 18.4599 60.2864 17.5625V10.375C60.2864 6.44625 57.1416 3.25 53.2763 3.25H46.2047C45.3217 3.25 44.6059 2.52244 44.6059 1.625C44.6059 0.727562 45.3217 0 46.2047 0H53.2763C58.9048 0 63.4839 4.65419 63.4839 10.375ZM43.0331 47.3022C43.7067 46.6698 43.7483 45.6022 43.1262 44.9176C42.5039 44.233 41.4536 44.1906 40.78 44.823C38.3832 47.0732 35.265 48.3125 31.9997 48.3125C28.7344 48.3125 25.6162 47.0732 23.2194 44.823C22.5457 44.1906 21.4955 44.233 20.8732 44.9176C20.251 45.6022 20.2927 46.6698 20.9663 47.3022C23.9784 50.1301 27.8968 51.6875 31.9997 51.6875C36.1026 51.6875 40.021 50.1301 43.0331 47.3022ZM35.3207 24.1249V36.1249C35.3207 38.5029 33.4173 40.4374 31.0777 40.4374H29.7249C28.8079 40.4374 28.0646 39.6819 28.0646 38.7499C28.0646 37.8179 28.8079 37.0624 29.7249 37.0624H31.0777C31.5863 37.0624 32.0001 36.6419 32.0001 36.1249V24.1249C32.0001 23.1929 32.7434 22.4374 33.6604 22.4374C34.5774 22.4374 35.3207 23.1929 35.3207 24.1249ZM46.7581 28.8437V24.0312C46.7581 23.151 46.056 22.4374 45.19 22.4374C44.324 22.4374 43.622 23.151 43.622 24.0312V28.8437C43.622 29.7239 44.324 30.4374 45.19 30.4374C46.056 30.4374 46.7581 29.7239 46.7581 28.8437ZM17.6109 28.8437C17.6109 29.7239 18.313 30.4374 19.1789 30.4374C20.0449 30.4374 20.747 29.7239 20.747 28.8437V24.0312C20.747 23.151 20.0449 22.4374 19.1789 22.4374C18.313 22.4374 17.6109 23.151 17.6109 24.0312V28.8437Z"})}),exports.IconWrapper=C,exports.List=l,exports.ListItem=d,exports.ListItemIcon=p,exports.MethodList=m,exports.MethodListItem=x,exports.MethodText=g,exports.NumericPinInput=({onChange:e,disabled:o,errorReasonOverride:n,success:a})=>{let[s,l]=i.useState(b),[p,d]=i.useState(null),[c,m]=i.useState(null),x=async t=>{t.preventDefault();let i=t.currentTarget.value.replace(/\s+/g,"");if(""===i)return;let r=s.reduce(((e,t)=>e+Number(T(t))),0),o=i.split(""),n=!o.every(T),a=o.length+r>6;if(n)return d("Passcode can only be numbers"),void m(1);if(a)return d("Passcode must be exactly 6 numbers"),void m(1);d(null),m(null);let p=Number(t.currentTarget.name?.charAt(4)),c=[...i||[""]].slice(0,6-p),x=[...s.slice(0,p),...c,...s.slice(p+c.length)];l(x);let f=Math.min(Math.max(p+c.length,0),5),g=document.querySelector(`input[name=pin-${f}]`);if(g?.focus(),M(x))try{await e(x.join(""));let t=document.querySelector(`input[name=pin-${f}]`);t?.blur()}catch(t){m(1),d(t.message)}else try{await e(null)}catch(t){m(1),d(t.message)}},f=a?"success":!(!n&&!p)?"fail":"";/*#__PURE__*/return t.jsx(t.Fragment,{children:/*#__PURE__*/t.jsxs(L,{children:[/*#__PURE__*/t.jsx("div",{children:s.map(((i,n)=>/*#__PURE__*/t.jsx("input",{name:`pin-${n}`,type:"text",value:s[n],onChange:x,onKeyUp:t=>{"Backspace"===t.key&&(t=>{1===c&&(d(null),m(null));let i=[...s.slice(0,t),"",...s.slice(t+1)];if(l(i),t>0){let e=document.querySelector(`input[name=pin-${t-1}]`);e?.focus()}M(i)?e(i.join("")):e(null)})(n)},inputMode:"numeric",autoFocus:0===n,pattern:"[0-9]",className:f,autoComplete:r.isMobile?"one-time-code":"off",disabled:o},n)))}),/*#__PURE__*/t.jsx("div",{children:/*#__PURE__*/t.jsx(j,{$fail:!!n||!!p,children:n||p})})]})})},exports.PrimaryTextButton=v,exports.RemoveMethodButton=f,exports.SmsInsecureText=h,exports.SubTitle=a,exports.TermsText=y,exports.Title=n;