@privy-io/react-auth/dist/cjs/Screen-BfKedqka.js

React client for the Privy Auth API

"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("styled-components"),t=require("./useActiveWallet-Cn6zOXx5.js"),n=require("./ModalHeader-BCPQgekO.js"),o=require("./index-ByFhjjzH.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=/*#__PURE__*/a(r);const s=i.styled.div`
  /* spacing tokens */
  --screen-space: 16px; /* base 1x = 16 */
  --screen-space-lg: calc(var(--screen-space) * 1.5); /* 24px */

  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * var(--screen-space)); /* extends over modal padding */
  height: 100%;
  border-radius: var(--privy-border-radius-lg);
`,c=i.styled.div`
  display: flex;
  flex-direction: column;
  gap: calc(var(--screen-space) * 1.5);
  width: 100%;
  background: var(--privy-color-background);
  padding: 0 var(--screen-space-lg) var(--screen-space);
  height: 100%;
  border-radius: var(--privy-border-radius-lg);
`,d=i.styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
`,p=i.styled(n.ModalHeader)`
  margin: 0 -8px;
`,g=i.styled.div`
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  /* Enable scrolling */
  overflow-y: auto;

  /* Hide scrollbar but keep functionality when scrollable */
  /* Add padding for focus outline space, offset with negative margin */
  padding: 3px;
  margin: -3px;

  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-gutter: stable both-edges;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Gradient effect for scroll indication */
  ${({$colorScheme:e})=>"light"===e?"background: linear-gradient(var(--privy-color-background), var(--privy-color-background) 70%) bottom, linear-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.06)) bottom;":"dark"===e?"background: linear-gradient(var(--privy-color-background), var(--privy-color-background) 70%) bottom, linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.06)) bottom;":void 0}

  background-repeat: no-repeat;
  background-size:
    100% 32px,
    100% 16px;
  background-attachment: local, scroll;
`,u=i.styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--screen-space-lg);
  margin-top: 1.5rem;
`;let h=i.styled.div`
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--screen-space);
`,v=i.styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
`,x=i.styled.h3`
  && {
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
    color: var(--privy-color-foreground);
    margin: 0;
  }
`,f=i.styled.p`
  && {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: var(--privy-color-foreground);
  }
`,y=i.styled.div`
  background: ${({$variant:e})=>{switch(e){case"success":return"var(--privy-color-success-bg, #EAFCEF)";case"warning":return"var(--privy-color-warn, #FEF3C7)";case"error":return"var(--privy-color-error-bg, #FEE2E2)";case"loading":case"logo":return"transparent";default:return"var(--privy-color-background-2)"}}};

  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
`,b=i.styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  img,
  svg {
    max-height: 90px;
    max-width: 180px;
  }
`,m=i.styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 82px;

  > div {
    position: relative;
  }

  > div > :first-child {
    position: relative;
  }

  > div > :last-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
`;const j=({children:r,...i})=>/*#__PURE__*/e.jsx(s,{children:/*#__PURE__*/e.jsx(c,{...i,children:r})});let w=i.styled.div`
  position: absolute;
  top: 0;
  left: calc(-1 * var(--screen-space-lg));
  width: calc(100% + calc(var(--screen-space-lg) * 2));
  height: 4px;
  background: var(--privy-color-background-2);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
`,k=i.styled(n.BlobbyFooter)`
  padding: 0;
  && a {
    padding: 0;
    color: var(--privy-color-foreground-3);
  }
`,E=i.styled.div`
  height: 100%;
  width: ${({pct:e})=>e}%;
  background: var(--privy-color-foreground-3);
  border-radius: 2px;
  transition: width 300ms ease-in-out;
`,F=({step:r})=>r?/*#__PURE__*/e.jsx(w,{children:/*#__PURE__*/e.jsx(E,{pct:Math.min(100,r.current/r.total*100)})}):null;j.Header=({title:r,subtitle:i,icon:t,iconVariant:n,iconLoadingStatus:o,showBack:a,onBack:l,showInfo:s,onInfo:c,showClose:g,onClose:u,step:y,headerTitle:b,...m})=>/*#__PURE__*/e.jsxs(d,{...m,children:[/*#__PURE__*/e.jsx(p,{backFn:a?l:void 0,infoFn:s?c:void 0,onClose:g?u:void 0,title:b,closeable:g}),(t||n||r||i)&&/*#__PURE__*/e.jsxs(h,{children:[t||n?/*#__PURE__*/e.jsx(j.Icon,{icon:t,variant:n,loadingStatus:o}):null,!(!r&&!i)&&/*#__PURE__*/e.jsxs(v,{children:[r&&/*#__PURE__*/e.jsx(x,{children:r}),i&&/*#__PURE__*/e.jsx(f,{children:i})]})]}),y&&/*#__PURE__*/e.jsx(F,{step:y})]}),j.Body=/*#__PURE__*/l.default.forwardRef((({children:r,...i},t)=>/*#__PURE__*/e.jsx(g,{ref:t,...i,children:r}))),j.Body.displayName="Screen.Body",j.Footer=({children:r,...i})=>/*#__PURE__*/e.jsx(u,{id:"privy-content-footer-container",...i,children:r}),j.Actions=({children:r,...i})=>/*#__PURE__*/e.jsx(S,{...i,children:r}),j.HelpText=({children:r,...i})=>/*#__PURE__*/e.jsx($,{...i,children:r}),j.FooterText=({children:r,...i})=>/*#__PURE__*/e.jsx(z,{...i,children:r}),j.Watermark=()=>/*#__PURE__*/e.jsx(k,{}),j.Icon=({icon:r,variant:i="subtle",loadingStatus:n})=>"logo"===i&&r?"string"==typeof r?/*#__PURE__*/e.jsx(b,{children:/*#__PURE__*/e.jsx("img",{src:r,alt:""})}):/*#__PURE__*/l.default.isValidElement(r)?/*#__PURE__*/e.jsx(b,{children:r}):
/*#__PURE__*/e.jsx(b,{children:/*#__PURE__*/l.default.createElement(r)}):"loading"===i?r?
/*#__PURE__*/e.jsx(m,{children:/*#__PURE__*/e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:[/*#__PURE__*/e.jsx(t.ConnectionLoader,{success:n?.success,fail:n?.fail}),"string"==typeof r?
/*#__PURE__*/e.jsx("span",{style:{background:`url('${r}') 0 0 / contain`,height:"38px",width:"38px",borderRadius:"6px",margin:"auto",backgroundSize:"contain"}}):/*#__PURE__*/l.default.isValidElement(r)?
/*#__PURE__*/l.default.cloneElement(r,{style:{width:"38px",height:"38px"}}):
/*#__PURE__*/l.default.createElement(r,{style:{width:"38px",height:"38px"}})]})}):
/*#__PURE__*/e.jsx(y,{$variant:i,children:/*#__PURE__*/e.jsx(o.NeutralSpinner,{size:"64px"})}):/*#__PURE__*/e.jsx(y,{$variant:i,children:r&&("string"==typeof r?
/*#__PURE__*/e.jsx("img",{src:r,alt:"",style:{width:"32px",height:"32px",borderRadius:"6px"}}):/*#__PURE__*/l.default.isValidElement(r)?r:
/*#__PURE__*/l.default.createElement(r,{width:32,height:32,stroke:(()=>{switch(i){case"success":return"var(--privy-color-icon-success)";case"warning":return"var(--privy-color-icon-warning)";case"error":return"var(--privy-color-icon-error)";default:return"var(--privy-color-icon-muted)"}})(),strokeWidth:2}))});let S=i.styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--screen-space) / 2);
`,$=i.styled.div`
  && {
    margin: 0;
    width: 100%;
    text-align: center;
    color: var(--privy-color-foreground-2);
    font-size: 13px;
    line-height: 20px;

    & a {
      text-decoration: underline;
    }
  }
`,z=i.styled.div`
  && {
    margin-top: -1rem;
    width: 100%;
    text-align: center;
    color: var(--privy-color-foreground-2);
    font-size: 0.6875rem; // 11px
    line-height: 1rem; // 16px
  }
`;exports.Screen=j;