@privy-io/react-auth/dist/cjs/ConnectPhoneForm-WT8rso3i.js

React client for the Privy Auth API

"use strict";var e=require("react/jsx-runtime"),o=require("react"),n=require("styled-components"),r=require("@privy-io/js-sdk-core"),t=require("./context-DFq1obBO.js"),i=require("./useActiveWallet-BOX8xCn9.js"),a=require("./Button-Bm_Ft0Dw.js"),d=require("./Chip-ChrHHazc.js");const l=({value:o,onChange:n})=>/*#__PURE__*/e.jsx("select",{value:o,onChange:n,children:r.countryCodesAndNumbers.map((o=>/*#__PURE__*/e.jsxs("option",{value:o.code,children:[o.code," +",o.callCode]},o.code)))}),c=/*#__PURE__*/o.forwardRef(((n,c)=>{let s=t.useAppConfig(),[h,g]=o.useState(!1),{accountType:m}=i.useRecentlyUsedLogin(),[b,x]=o.useState(""),[v,y]=o.useState(s?.intl.defaultCountry??"US"),f=r.validatePhoneNumber(b,v),w=r.phoneNumberTypingFormatter(v),C=r.getPlaceholderPhoneNumber(v),N=r.getCountryCallingCode(v),k=!f,[P,j]=o.useState(!1),q=N.length,S=e=>{let o=e.target.value;y(o),x(""),n.onChange&&n.onChange({rawPhoneNumber:b,qualifiedPhoneNumber:r.formatPhoneNumber(b,o),countryCode:o,isValid:r.validatePhoneNumber(b,v)})},$=(e,o)=>{try{let t=e.replace(/\D/g,"")===b.replace(/\D/g,"")?e:w.input(e);x(t),n.onChange&&n.onChange({rawPhoneNumber:t,qualifiedPhoneNumber:r.formatPhoneNumber(e,o),countryCode:o,isValid:r.validatePhoneNumber(e,o)})}catch(e){console.error("Error processing phone number:",e)}},I=()=>{j(!0);let e=r.formatPhoneNumber(b,v);n.onSubmit({rawPhoneNumber:b,qualifiedPhoneNumber:e,countryCode:v,isValid:r.validatePhoneNumber(b,v)}).finally((()=>j(!1)))};return o.useEffect((()=>{if(n.defaultValue){let e=r.getPhoneCountryCodeAndNumber(n.defaultValue);w.reset(),S({target:{value:e.countryCode}}),$(e.phone,e.countryCode)}}),[n.defaultValue]),/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(u,{children:/*#__PURE__*/e.jsxs(p,{$callingCodeLength:q,$stacked:n.stacked,children:[/*#__PURE__*/e.jsx(l,{value:v,onChange:S}),/*#__PURE__*/e.jsx("input",{ref:c,id:"phone-number-input",className:"login-method-button",type:"tel",placeholder:C,onFocus:()=>g(!0),onChange:e=>{$(e.target.value,v)},onKeyUp:e=>{"Enter"===e.key&&I()},value:b,autoComplete:"tel"}),"phone"!==m||h||n.hideRecent?n.stacked||n.noIncludeSubmitButton?/*#__PURE__*/e.jsx("span",{}):/*#__PURE__*/e.jsx(a.EmbeddedButton,{isSubmitting:P,onClick:I,disabled:k,children:"Submit"}):/*#__PURE__*/e.jsx(d.Chip,{color:"gray",children:"Recent"})]})}),n.stacked&&!n.noIncludeSubmitButton?/*#__PURE__*/e.jsx(a.PrimaryButton,{loading:P,loadingText:null,onClick:I,disabled:k,children:"Submit"}):null]})}));let u=/*#__PURE__*/n.styled.div.withConfig({displayName:"InputContainer",componentId:"sc-545daacd-0"})(["width:100%;"]),p=/*#__PURE__*/n.styled.label.withConfig({displayName:"PhoneNumberInput",componentId:"sc-545daacd-1"})(["--country-code-dropdown-width:calc(54px + calc(12 * ","px));--phone-input-extra-padding-left:calc(12px + calc(3 * ","px));display:block;position:relative;width:100%;@media (min-width:441px){--country-code-dropdown-width:calc(52px + calc(10 * ","px));}&& > select{font-size:16px;height:24px;position:absolute;margin:13px calc(var(--country-code-dropdown-width) / 4);line-height:24px;width:var(--country-code-dropdown-width);background-color:var(--privy-color-background);background-size:auto;background-position-x:right;cursor:pointer;@media (min-width:441px){font-size:14px;width:var(--country-code-dropdown-width);}:focus{outline:none;box-shadow:none;}}&& > input{font-size:16px;line-height:24px;color:var(--privy-color-foreground);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - var(--country-code-dropdown-width));padding:12px 88px 12px calc(var(--country-code-dropdown-width) + var(--phone-input-extra-padding-left));padding-right:",";flex-grow:1;background:var(--privy-color-background);border:1px solid var(--privy-color-foreground-4);border-radius:var(--privy-border-radius-md);width:100%;:focus{outline:none;border-color:var(--privy-color-accent);}:autofill,:-webkit-autofill{background:var(--privy-color-background);}@media (min-width:441px){font-size:14px;padding-right:78px;}}&& > :last-child{right:16px;position:absolute;top:50%;transform:translate(0,-50%);}&& > button:last-child{right:0px;line-height:24px;padding:13px 17px;:focus{outline:none;border-color:var(--privy-color-accent);}}&& > input::placeholder{color:var(--privy-color-foreground-3);}"],(e=>e.$callingCodeLength),(e=>e.$callingCodeLength),(e=>e.$callingCodeLength),(e=>e.$stacked?"16px":"88px"));exports.ConnectPhoneNumberForm=c;