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

React client for the Privy Auth API

"use strict";var e=require("react/jsx-runtime"),o=require("react"),r=require("styled-components"),n=require("@privy-io/js-sdk-core"),t=require("./context-D-ZJYjUg.js"),a=require("./useActiveWallet-Cn6zOXx5.js"),i=require("./ModalHeader-BCPQgekO.js"),d=require("./Chip-C6r7fZiR.js");const l=({value:o,onChange:r})=>/*#__PURE__*/e.jsx("select",{value:o,onChange:r,children:n.countryCodesAndNumbers.map((o=>/*#__PURE__*/e.jsxs("option",{value:o.code,children:[o.code," +",o.callCode]},o.code)))}),c=/*#__PURE__*/o.forwardRef(((r,c)=>{let s=t.useAppConfig(),[h,g]=o.useState(!1),{accountType:b}=a.useRecentlyUsedLogin(),[x,m]=o.useState(""),[v,y]=o.useState(s?.intl.defaultCountry??"US"),f=n.validatePhoneNumber(x,v),w=n.phoneNumberTypingFormatter(v),C=n.getPlaceholderPhoneNumber(v),k=n.getCountryCallingCode(v),N=!f,[j,P]=o.useState(!1),q=k.length,S=e=>{let o=e.target.value;y(o),m(""),r.onChange&&r.onChange({rawPhoneNumber:x,qualifiedPhoneNumber:n.formatPhoneNumber(x,o),countryCode:o,isValid:n.validatePhoneNumber(x,v)})},$=(e,o)=>{try{let t=e.replace(/\D/g,"")===x.replace(/\D/g,"")?e:w.input(e);m(t),r.onChange&&r.onChange({rawPhoneNumber:t,qualifiedPhoneNumber:n.formatPhoneNumber(e,o),countryCode:o,isValid:n.validatePhoneNumber(e,o)})}catch(e){console.error("Error processing phone number:",e)}},T=()=>{P(!0);let e=n.formatPhoneNumber(x,v);r.onSubmit({rawPhoneNumber:x,qualifiedPhoneNumber:e,countryCode:v,isValid:n.validatePhoneNumber(x,v)}).finally((()=>P(!1)))};return o.useEffect((()=>{if(r.defaultValue){let e=n.getPhoneCountryCodeAndNumber(r.defaultValue);w.reset(),S({target:{value:e.countryCode}}),$(e.phone,e.countryCode)}}),[r.defaultValue]),/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(u,{children:/*#__PURE__*/e.jsxs(p,{$callingCodeLength:q,$stacked:r.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&&T()},value:x,autoComplete:"tel"}),"phone"!==b||h||r.hideRecent?r.stacked||r.noIncludeSubmitButton?/*#__PURE__*/e.jsx("span",{}):/*#__PURE__*/e.jsx(i.EmbeddedButton,{isSubmitting:j,onClick:T,disabled:N,children:"Submit"}):/*#__PURE__*/e.jsx(d.Chip,{color:"gray",children:"Recent"})]})}),r.stacked&&!r.noIncludeSubmitButton?/*#__PURE__*/e.jsx(i.PrimaryButton,{loading:j,loadingText:null,onClick:T,disabled:N,children:"Submit"}):null]})}));let u=r.styled.div`
  width: 100%;
`,p=r.styled.label`
  --country-code-dropdown-width: calc(54px + calc(12 * ${e=>e.$callingCodeLength}px));
  --phone-input-extra-padding-left: calc(12px + calc(3 * ${e=>e.$callingCodeLength}px));
  display: block;
  position: relative;
  width: 100%;

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