@privy-io/react-auth
Version:
React client for the Privy Auth API
181 lines (162 loc) • 4 kB
JavaScript
import r from"@heroicons/react/24/outline/ArrowPathIcon";import e from"@heroicons/react/24/outline/EyeIcon";import o from"@heroicons/react/24/outline/EyeSlashIcon";import{styled as i,css as t}from"styled-components";import{P as a,a as n}from"./ModalHeader-BnVmXtvG.mjs";let l=t`
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.008px;
text-align: left;
transition: color 0.1s ease-in;
`;const s=i.span`
${l}
transition: color 0.1s ease-in;
color: ${({error:r})=>r?"var(--privy-color-error)":"var(--privy-color-foreground-3)"};
text-transform: ${({error:r})=>r?"":"capitalize"};
&[aria-hidden='true'] {
visibility: hidden;
}
`,c=i.div`
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
`,p=i(a)`
${({$hideAnimations:r})=>r&&t`
&& {
transition: none;
}
`}
`;let d=t`
&& {
width: 100%;
border-width: 1px;
border-radius: var(--privy-border-radius-md);
border-color: var(--privy-color-foreground-3);
background: var(--privy-color-background);
color: var(--privy-color-foreground);
padding: 12px;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 22px; /* 137.5% */
}
`;const h=i.input`
${d}
&::placeholder {
color: var(--privy-color-foreground-3);
font-style: italic;
font-size: 14px;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`,v=i.div`
${d}
`,g=i.div`
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: ${({centered:r})=>r?"center":"space-between"};
`,f=i.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 32px 0;
gap: 4px;
& h3 {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}
& p {
max-width: 300px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
`,x=i.div`
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 1rem;
`,m=i.div`
display: flex;
text-align: left;
align-items: center;
gap: 8px;
max-width: 300px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.008px;
margin: 0 8px;
color: var(--privy-color-foreground-2);
> :first-child {
min-width: 24px;
}
`;i.div`
height: var(--privy-height-modal-full);
@media (max-width: 440px) {
height: var(--privy-height-modal-compact);
}
`;const y=i(n)`
display: flex;
flex: 1;
gap: 4px;
justify-content: center;
&& {
background: var(--privy-color-background);
border-radius: var(--privy-border-radius-md);
border-color: var(--privy-color-foreground-3);
border-width: 1px;
}
`,u=i.div`
position: absolute;
right: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
`,w=i(r)`
height: 1.25rem;
width: 1.25rem;
stroke: var(--privy-color-accent);
cursor: pointer;
:active {
stroke: var(--privy-color-accent-light);
}
`,b=i(o)`
height: 1.25rem;
width: 1.25rem;
stroke: var(--privy-color-accent);
cursor: pointer;
:active {
stroke: var(--privy-color-accent-light);
}
`,k=i(e)`
height: 1.25rem;
width: 1.25rem;
stroke: var(--privy-color-accent);
cursor: pointer;
:active {
stroke: var(--privy-color-accent-light);
}
`,$=i.progress`
height: 4px;
width: 100%;
margin: 8px 0;
/* border-radius: 9999px; */
::-webkit-progress-bar {
border-radius: 8px;
background: var(--privy-color-foreground-4);
}
::-webkit-progress-value {
border-radius: 8px;
transition: all 0.1s ease-out;
background: ${({label:r})=>("Strong"===r?"#78dca6":"Medium"===r&&"var(--privy-color-warn)")||"var(--privy-color-error)"};
}
`;export{x as D,c as E,b as H,u as I,p as N,g as P,w as R,k as S,h as a,f as b,s as c,m as d,$ as e,v as f,y as g};