UNPKG

@privy-io/react-auth

Version:

React client for the Privy Auth API

181 lines (162 loc) • 4 kB
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};