@privy-io/react-auth/dist/esm/ConnectPhoneForm-DP4LRtUG.mjs

React client for the Privy Auth API

import{jsx as o,jsxs as e,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as t,useEffect as i}from"react";import{styled as a}from"styled-components";import{countryCodesAndNumbers as d,validatePhoneNumber as l,phoneNumberTypingFormatter as c,getPlaceholderPhoneNumber as p,getCountryCallingCode as u,getPhoneCountryCodeAndNumber as h,formatPhoneNumber as s}from"@privy-io/js-sdk-core";import{u as g}from"./context-DLtU3JQy.mjs";import{r as m}from"./useActiveWallet-CvP7iYvj.mjs";import{E as b,P as x}from"./ModalHeader-BnVmXtvG.mjs";import{C as v}from"./Chip-D2-wZOHJ.mjs";const f=({value:r,onChange:n})=>/*#__PURE__*/o("select",{value:r,onChange:n,children:d.map((o=>/*#__PURE__*/e("option",{value:o.code,children:[o.code," +",o.callCode]},o.code)))}),w=/*#__PURE__*/n(((n,a)=>{let d=g(),[w,k]=t(!1),{accountType:$}=m(),[j,N]=t(""),[P,S]=t(d?.intl.defaultCountry??"US"),V=l(j,P),z=c(P),T=p(P),U=u(P),L=!V,[q,E]=t(!1),B=U.length,D=o=>{let e=o.target.value;S(e),N(""),n.onChange&&n.onChange({rawPhoneNumber:j,qualifiedPhoneNumber:s(j,e),countryCode:e,isValid:l(j,P)})},I=(o,e)=>{try{let r=o.replace(/\D/g,"")===j.replace(/\D/g,"")?o:z.input(o);N(r),n.onChange&&n.onChange({rawPhoneNumber:r,qualifiedPhoneNumber:s(o,e),countryCode:e,isValid:l(o,e)})}catch(o){console.error("Error processing phone number:",o)}},R=()=>{E(!0);let o=s(j,P);n.onSubmit({rawPhoneNumber:j,qualifiedPhoneNumber:o,countryCode:P,isValid:l(j,P)}).finally((()=>E(!1)))};return i((()=>{if(n.defaultValue){let o=h(n.defaultValue);z.reset(),D({target:{value:o.countryCode}}),I(o.phone,o.countryCode)}}),[n.defaultValue]),/*#__PURE__*/e(r,{children:[/*#__PURE__*/o(y,{children:/*#__PURE__*/e(C,{$callingCodeLength:B,$stacked:n.stacked,children:[/*#__PURE__*/o(f,{value:P,onChange:D}),/*#__PURE__*/o("input",{ref:a,id:"phone-number-input",className:"login-method-button",type:"tel",placeholder:T,onFocus:()=>k(!0),onChange:o=>{I(o.target.value,P)},onKeyUp:o=>{"Enter"===o.key&&R()},value:j,autoComplete:"tel"}),"phone"!==$||w||n.hideRecent?n.stacked||n.noIncludeSubmitButton?/*#__PURE__*/o("span",{}):/*#__PURE__*/o(b,{isSubmitting:q,onClick:R,disabled:L,children:"Submit"}):/*#__PURE__*/o(v,{color:"gray",children:"Recent"})]})}),n.stacked&&!n.noIncludeSubmitButton?/*#__PURE__*/o(x,{loading:q,loadingText:null,onClick:R,disabled:L,children:"Submit"}):null]})}));let y=a.div`
  width: 100%;
`,C=a.label`
  --country-code-dropdown-width: calc(54px + calc(12 * ${o=>o.$callingCodeLength}px));
  --phone-input-extra-padding-left: calc(12px + calc(3 * ${o=>o.$callingCodeLength}px));
  display: block;
  position: relative;
  width: 100%;

  /* Tablet and Up */
  @media (min-width: 441px) {
    --country-code-dropdown-width: calc(52px + calc(10 * ${o=>o.$callingCodeLength}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;

    /* Tablet and Up */
    @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: ${o=>o.$stacked?"16px":"88px"};
    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);
    }

    /* Tablet and Up */
    @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);
  }
`;export{w as C};