{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "login-centered", "type": "registry:block", "title": "Centered login", "description": "A passkey-first login card on a quiet ring backdrop that morphs through email and code.", "categories": [ "blocks" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "https://irisui.dev/r/foundation.json", "https://irisui.dev/r/button.json", "https://irisui.dev/r/input.json", "https://irisui.dev/r/otp-input.json", "https://irisui.dev/r/motion-tokens.json", "https://irisui.dev/r/utils.json" ], "files": [ { "path": "src/registry/blocks/login-centered/login-centered.tsx", "content": "\"use client\";\n\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n type CSSProperties,\n type FormEvent,\n type PointerEvent,\n} from \"react\";\nimport {\n AnimatePresence,\n animate,\n motion,\n useMotionValue,\n useReducedMotion,\n useSpring,\n useTransform,\n type MotionStyle,\n type Transition,\n type Variants,\n} from \"motion/react\";\nimport { Check, FingerprintPattern, Mail } from \"lucide-react\";\nimport { Button } from \"../../button/button\";\nimport { Input } from \"../../input/input\";\nimport { OtpInput } from \"../../otp-input/otp-input\";\nimport { motionTokens } from \"../../lib/motion-tokens\";\nimport { cn } from \"../../lib/utils\";\n\ntype Step = \"passkey\" | \"email\" | \"code\" | \"done\";\ntype Mode = \"sign-in\" | \"sign-up\";\ntype Provider = \"Google\" | \"Apple\" | \"GitHub\";\ntype PasskeyPhase = \"idle\" | \"waiting\" | \"verified\";\nexport type LoginMethod = \"Passkey\" | \"Email code\" | Provider;\nexport interface LoginCenteredProps {\n /** The code the simulated email contains. */\n demoCode?: string;\n /** Fill the viewport (100dvh, no frame) when the block is the whole page. */\n fullScreen?: boolean;\n /** The account a simulated passkey or single sign-on resolves to. */\n demoEmail?: string;\n termsHref?: string;\n privacyHref?: string;\n /** Called once the simulated sign in or sign up succeeds. */\n onSignIn?: (email: string, method: LoginMethod, mode: Mode) => void;\n className?: string;\n}\ntype StepCustom = { direction: number; reduce: boolean };\n\n/* Shared class strings. Container steps follow the `login-centered` container: 520 px and 400 px. */\nconst ringBase = \"fill-none stroke-1 motion-reduce:[transform:none]\";\nconst ringClass = `${ringBase} [transform:translate(calc(var(--dx,0px)*var(--k,1)),calc(var(--dy,0px)*var(--k,1)))]`;\nconst axisClass = `${ringBase} stroke-line-soft [transform:translate(var(--dx,0px),var(--dy,0px))]`;\nconst barClass = \"flex min-w-0 items-center justify-between gap-4 px-6 @max-[520px]/login-centered:px-4\";\nconst stepClass = \"grid min-w-0 p-8 @max-[520px]/login-centered:p-6 @max-[400px]/login-centered:px-5\";\nconst headingClass =\n \"mb-6 grid gap-2 [&_h2]:m-0 [&_h2]:font-display [&_h2]:text-3xl [&_h2]:leading-display [&_h2]:font-normal [&_h2]:tracking-display [&_h2]:text-balance @max-[400px]/login-centered:[&_h2]:text-2xl [&_p]:m-0 [&_p]:text-sm [&_p]:leading-body [&_p]:text-pretty [&_p]:text-ink-2\";\nconst addressClass = \"text-ink [overflow-wrap:anywhere]\";\nconst textButtonClass =\n \"relative mx-0 mt-4 -mb-2 inline-flex min-h-control-sm cursor-pointer items-center justify-self-center gap-2 rounded-button px-3 text-sm leading-body font-medium text-ink-2 [-webkit-tap-highlight-color:transparent] transition-[color,background-color] duration-fast ease-standard not-aria-disabled:hover:bg-hover not-aria-disabled:hover:text-ink not-aria-disabled:active:bg-hover not-aria-disabled:active:text-ink aria-disabled:cursor-default aria-disabled:font-normal aria-disabled:text-ink-3 motion-reduce:transition-none\";\n\nconst RESEND_SECONDS = 30;\n/** The official four-colour Google \"G\"; Apple and GitHub ship monochrome marks, drawn in currentColor. */\nfunction GoogleLogo({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n );\n}\n\nconst providers: Provider[] = [\"Google\", \"Apple\", \"GitHub\"];\n/** Monochrome provider marks in currentColor, so they stay neutral in both themes. */\nconst providerMarks: Record = {\n Google:\n \"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\",\n Apple:\n \"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\",\n GitHub:\n \"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\",\n};\n/** Concentric rings behind the card. Outer rings drift further, so the set reads as depth rather than a flat pattern. */\nconst rings = Array.from({ length: 14 }, (_, index) => ({\n r: 224 + index * 60,\n k: 1 + index * 0.34,\n major: index % 3 === 2,\n}));\nconst isEmail = (value: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/.test(value.trim());\n\n/** Steps rise into place out of a small blur; going back, they settle down from above. */\nconst stepMotion: Variants = {\n enter: ({ direction, reduce }: StepCustom) =>\n reduce ? { opacity: 0 } : { opacity: 0, y: direction * 12, filter: `blur(${motionTokens.blur.soft}px)` },\n center: ({ reduce }: StepCustom) => ({\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n transition: reduce\n ? { duration: motionTokens.duration.instant }\n : {\n y: motionTokens.spring.smooth,\n opacity: { duration: motionTokens.duration.standard, ease: motionTokens.ease.enter, delay: 0.06 },\n filter: { duration: motionTokens.duration.standard, ease: motionTokens.ease.enter, delay: 0.04 },\n },\n }),\n exit: ({ direction, reduce }: StepCustom) =>\n reduce\n ? { opacity: 0, transition: { duration: 0 } }\n : {\n opacity: 0,\n y: direction * -8,\n filter: `blur(${motionTokens.blur.soft}px)`,\n transition: { duration: motionTokens.duration.exit, ease: motionTokens.ease.standard },\n },\n};\nconst swap = (reduce: boolean) => ({\n initial: reduce ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${motionTokens.blur.soft}px)` },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n exit: reduce\n ? { opacity: 0, transition: { duration: 0 } }\n : {\n opacity: 0,\n y: -4,\n filter: `blur(${motionTokens.blur.subtle}px)`,\n transition: { duration: motionTokens.duration.fast },\n },\n transition: (reduce\n ? { duration: motionTokens.duration.instant }\n : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }) as Transition,\n});\n/** Both header labels share one cell and cross-fade in place, so the switch never changes width when the mode flips. */\nconst labelState = (active: boolean, reduce: boolean) =>\n active\n ? { opacity: 1, y: 0, filter: \"blur(0px)\" }\n : { opacity: 0, y: reduce ? 0 : -6, filter: `blur(${reduce ? 0 : motionTokens.blur.subtle}px)` };\nconst labelTransition = (reduce: boolean): Transition =>\n reduce\n ? { duration: motionTokens.duration.instant }\n : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };\n/** Seconds roll down while the timer runs and back up when a new code restarts it. */\nconst roll: Variants = {\n enter: (direction: number) => ({\n opacity: 0,\n y: `${-0.7 * direction}em`,\n filter: `blur(${motionTokens.blur.subtle}px)`,\n }),\n center: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n exit: (direction: number) => ({\n opacity: 0,\n y: `${0.7 * direction}em`,\n filter: `blur(${motionTokens.blur.subtle}px)`,\n }),\n};\n\nfunction RollingTime({ seconds, reduce }: { seconds: number; reduce: boolean }) {\n const [shown, setShown] = useState({ seconds, direction: 1 });\n if (shown.seconds !== seconds) setShown({ seconds, direction: seconds < shown.seconds ? 1 : -1 });\n const text = `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, \"0\")}`;\n const transition: Transition = reduce\n ? { duration: 0 }\n : {\n y: motionTokens.spring.snappy,\n opacity: { duration: motionTokens.duration.fast },\n filter: { duration: motionTokens.duration.fast },\n };\n return (\n \n {text.split(\"\").map((character, index) => (\n \n \n \n {character}\n \n \n \n ))}\n \n );\n}\n\n/** Two rings leave the fingerprint while the device is asked, then stop on their own. */\nfunction PasskeyPulse({ reduce }: { reduce: boolean }) {\n return (\n \n {!reduce &&\n [0, 1].map((index) => (\n \n ))}\n \n \n );\n}\n\n/** The card follows its content on a spring only while the view changes; otherwise it stays auto, so field messages open without lag. */\nfunction useViewHeight(view: string, reduce: boolean) {\n const track = useRef(null);\n const height = useMotionValue(\"auto\");\n const measured = useRef(0);\n const gliding = useRef(false);\n const lastView = useRef(view);\n const glide = useCallback(\n (to: number) => {\n gliding.current = true;\n animate(height, to, {\n ...motionTokens.spring.smooth,\n onComplete: () => {\n gliding.current = false;\n height.jump(\"auto\");\n },\n });\n },\n [height],\n );\n useEffect(() => {\n const node = track.current;\n if (!node || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(([entry]) => {\n if (!entry) return;\n measured.current = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;\n if (gliding.current) glide(measured.current);\n });\n observer.observe(node);\n return () => observer.disconnect();\n }, [glide]);\n useLayoutEffect(() => {\n if (lastView.current === view) return;\n lastView.current = view;\n const current = height.get();\n const from = typeof current === \"number\" ? current : measured.current;\n const to = track.current?.offsetHeight ?? 0;\n if (reduce || !from || !to) {\n gliding.current = false;\n height.jump(\"auto\");\n return;\n }\n if (current === \"auto\") height.jump(from);\n glide(to);\n }, [view, reduce, height, glide]);\n return { track, height };\n}\n\n/** Pointer drift for the line backdrop: fine pointers with hover only, never under reduced motion. */\nfunction useDrift(reduce: boolean) {\n const pointerX = useMotionValue(0);\n const pointerY = useMotionValue(0);\n const x = useSpring(pointerX, { visualDuration: 0.9, bounce: 0 });\n const y = useSpring(pointerY, { visualDuration: 0.9, bounce: 0 });\n const dx = useTransform(x, (value) => `${value.toFixed(2)}px`);\n const dy = useTransform(y, (value) => `${value.toFixed(2)}px`);\n const canHover = useRef(false);\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const query = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const sync = () => {\n canHover.current = query.matches;\n };\n sync();\n query.addEventListener(\"change\", sync);\n return () => query.removeEventListener(\"change\", sync);\n }, []);\n const onPointerMove = (event: PointerEvent) => {\n if (reduce || !canHover.current || event.pointerType !== \"mouse\") return;\n const box = event.currentTarget.getBoundingClientRect();\n pointerX.set(((event.clientX - box.left) / box.width - 0.5) * -2);\n pointerY.set(((event.clientY - box.top) / box.height - 0.5) * -2);\n };\n const onPointerLeave = () => {\n pointerX.set(0);\n pointerY.set(0);\n };\n return { style: { \"--dx\": dx, \"--dy\": dy } as MotionStyle, onPointerMove, onPointerLeave };\n}\n\nexport function LoginCentered({\n demoCode = \"482913\",\n fullScreen = false,\n demoEmail = \"katerina@studio.example\",\n termsHref = \"#terms\",\n privacyHref = \"#privacy\",\n onSignIn,\n className,\n}: LoginCenteredProps) {\n const reduce = !!useReducedMotion();\n const [step, setStep] = useState(\"passkey\");\n const [mode, setMode] = useState(\"sign-in\");\n const [direction, setDirection] = useState(1);\n const [passkey, setPasskey] = useState(\"idle\");\n const [busy, setBusy] = useState(null);\n const [verified, setVerified] = useState(false);\n const [email, setEmail] = useState(\"\");\n const [touched, setTouched] = useState(false);\n const [attempted, setAttempted] = useState(false);\n const [code, setCode] = useState(\"\");\n const [codeError, setCodeError] = useState(\"\");\n const [resendIn, setResendIn] = useState(RESEND_SECONDS);\n const [account, setAccount] = useState(demoEmail);\n const [method, setMethod] = useState(\"Passkey\");\n const [status, setStatus] = useState(\"\");\n const passkeyRef = useRef(null);\n const emailRef = useRef(null);\n const codeRef = useRef(null);\n const doneRef = useRef(null);\n const focusNext = useRef(null);\n const timers = useRef([]);\n const view = step === \"email\" ? `email-${mode}` : step;\n const { track, height } = useViewHeight(view, reduce);\n const drift = useDrift(reduce);\n\n const emailError =\n (touched || attempted) && !isEmail(email)\n ? email.trim()\n ? \"Enter a full address, like name@example.com.\"\n : \"Enter your email address.\"\n : \"\";\n const custom: StepCustom = { direction, reduce };\n const signingUp = mode === \"sign-up\";\n\n useEffect(() => {\n const pending = timers;\n return () => pending.current.forEach(window.clearTimeout);\n }, []);\n useEffect(() => {\n if (step !== \"code\" || resendIn <= 0) return;\n const timer = window.setTimeout(() => setResendIn((seconds) => Math.max(0, seconds - 1)), 1000);\n return () => window.clearTimeout(timer);\n }, [step, resendIn]);\n useEffect(() => {\n const target = focusNext.current;\n focusNext.current = null;\n if (target === \"passkey\") passkeyRef.current?.focus();\n if (target === \"email\") emailRef.current?.focus();\n if (target === \"done\") doneRef.current?.focus();\n if (view === \"code\") codeRef.current?.querySelector(\"input\")?.focus();\n }, [view]);\n\n function later(run: () => void, ms: number) {\n timers.current.push(window.setTimeout(run, ms));\n }\n /** Any new direction cancels whatever the previous one was still waiting on. */\n function settle() {\n timers.current.forEach(window.clearTimeout);\n timers.current = [];\n setBusy(null);\n setVerified(false);\n }\n function go(next: Step, towards: number, focus: Step | null = next === \"code\" ? null : next) {\n focusNext.current = focus;\n setDirection(towards);\n if (next === \"passkey\") setPasskey(\"idle\");\n setStep(next);\n }\n const focusCode = () => codeRef.current?.querySelector(\"input\")?.focus();\n\n function complete(address: string, how: LoginMethod) {\n settle();\n setAccount(address);\n setMethod(how);\n go(\"done\", 1);\n setStatus(\n `${signingUp ? \"Account created\" : \"Signed in\"} with ${how === \"Email code\" ? \"an email code\" : how === \"Passkey\" ? \"a passkey\" : how}`,\n );\n onSignIn?.(address, how, mode);\n }\n\n function startPasskey() {\n if (passkey !== \"idle\" || busy) return;\n setPasskey(\"waiting\");\n setStatus(\"Waiting for your passkey\");\n later(() => {\n setPasskey(\"verified\");\n setStatus(\"Passkey verified\");\n later(() => complete(demoEmail, \"Passkey\"), 640);\n }, 1700);\n }\n\n function cancelPasskey() {\n settle();\n setPasskey(\"idle\");\n setStatus(\"Passkey request canceled\");\n passkeyRef.current?.focus();\n }\n\n function switchToEmail() {\n if (passkey === \"verified\" || busy) return;\n settle();\n setPasskey(\"idle\");\n setAttempted(false);\n go(\"email\", 1);\n setStatus(\"We will email you a sign in code\");\n }\n\n function signInWith(provider: Provider) {\n if (busy || passkey !== \"idle\") return;\n setBusy(provider);\n setStatus(`Opening ${provider}`);\n later(() => complete(demoEmail, provider), 900);\n }\n\n function submitEmail(event: FormEvent) {\n event.preventDefault();\n if (busy) return;\n setAttempted(true);\n if (!isEmail(email)) {\n emailRef.current?.focus();\n return;\n }\n setBusy(\"email\");\n setStatus(\"Sending a code\");\n later(() => {\n const address = email.trim().toLowerCase();\n setBusy(null);\n setAccount(address);\n setCode(\"\");\n setCodeError(\"\");\n setResendIn(RESEND_SECONDS);\n go(\"code\", 1);\n setStatus(`Code sent to ${address}`);\n }, 800);\n }\n\n function verify(value: string) {\n if (busy || verified) return;\n if (value.length < 6) {\n setCodeError(\"Enter all 6 digits.\");\n focusCode();\n return;\n }\n setBusy(\"code\");\n setStatus(\"Checking code\");\n later(() => {\n setBusy(null);\n if (value !== demoCode) {\n setCode(\"\");\n setCodeError(\"That code didn't match. Check the latest email and try again.\");\n setStatus(\"Code didn't match\");\n focusCode();\n return;\n }\n setVerified(true);\n setStatus(\"Code verified\");\n later(() => complete(account, \"Email code\"), 600);\n }, 700);\n }\n\n function changeCode(value: string) {\n if (busy || verified) return;\n setCode(value);\n if (codeError && value) setCodeError(\"\");\n if (value.length === 6) verify(value);\n }\n\n function resend() {\n if (busy || verified || resendIn > 0) return;\n setResendIn(RESEND_SECONDS);\n setCode(\"\");\n setCodeError(\"\");\n setStatus(\"New code sent\");\n focusCode();\n }\n\n function changeEmail() {\n settle();\n setAttempted(false);\n go(\"email\", -1);\n setStatus(\"Edit your email\");\n }\n\n function switchToPasskey() {\n settle();\n setMode(\"sign-in\");\n go(\"passkey\", -1);\n setStatus(\"Sign in with your passkey\");\n }\n\n function switchMode() {\n settle();\n setAttempted(false);\n setCode(\"\");\n if (signingUp) {\n setMode(\"sign-in\");\n go(\"passkey\", -1);\n setStatus(\"Sign in to your account\");\n return;\n }\n setMode(\"sign-up\");\n go(\"email\", 1);\n setStatus(\"Create an account with your email\");\n }\n\n function signOut() {\n settle();\n setEmail(\"\");\n setTouched(false);\n setAttempted(false);\n setCode(\"\");\n setMode(\"sign-in\");\n go(\"passkey\", -1);\n setStatus(\"Signed out\");\n }\n\n function openLegal(href: string, label: string) {\n return (event: { preventDefault: () => void }) => {\n if (!href.startsWith(\"#\")) return;\n event.preventDefault();\n setStatus(`${label} opens here in your app (demo)`);\n };\n }\n\n const passkeyLabel =\n passkey === \"waiting\" ? (\n <>\n \n Waiting for your device\n \n ) : passkey === \"verified\" ? (\n <>\n \n Passkey verified\n \n ) : (\n <>\n \n Sign in with passkey\n \n );\n\n return (\n \n \n \n \n \n \n {rings.map((ring) => (\n \n ))}\n \n \n \n\n
\n Polaris\n

\n \n {([\"sign-in\", \"sign-up\"] as const).map((option) => (\n \n {option === \"sign-up\" ? \"Have an account?\" : \"No account?\"}\n \n ))}\n \n \n {([\"sign-in\", \"sign-up\"] as const).map((option) => (\n \n {option === \"sign-up\" ? \"Sign in\" : \"Sign up\"}\n \n ))}\n \n

\n
\n\n
\n
\n \n
\n \n {step === \"passkey\" && (\n \n
\n

Sign in to Polaris

\n

Use the passkey saved on this device to open Launch desk. No password needed.

\n
\n
\n \n {passkeyLabel}\n \n \n {passkey === \"waiting\" ? (\n \"Cancel\"\n ) : (\n <>\n \n Use email instead\n \n )}\n \n
\n
\n or\n
\n
\n {providers.map((provider) => (\n signInWith(provider)}\n >\n {provider === \"Google\" ? (\n \n ) : (\n \n \n \n )}\n {provider}\n \n ))}\n
\n \n )}\n\n {step === \"email\" && (\n \n
\n {signingUp ? (\n <>\n

Create your account

\n

Enter your work email. We will send a code to confirm it.

\n \n ) : (\n <>\n

Sign in with email

\n

We will send a 6 digit code to your inbox.

\n \n )}\n
\n
\n setEmail(event.target.value)}\n onBlur={() => {\n if (email.trim()) setTouched(true);\n }}\n />\n \n \n {!signingUp && (\n \n )}\n \n )}\n\n {step === \"code\" && (\n \n
\n

Check your email

\n

\n Enter the code sent to {account}.{\" \"}\n \n Change\n \n

\n
\n {\n event.preventDefault();\n verify(code);\n }}\n noValidate\n >\n
\n \n
\n \n {verified ? (\n <>\n \n Verified\n \n ) : signingUp ? (\n \"Verify and create account\"\n ) : (\n \"Verify\"\n )}\n \n \n 0 || verified || undefined}\n aria-label={resendIn > 0 ? `Resend code, available in ${resendIn} seconds` : \"Resend code\"}\n onClick={resend}\n >\n \n 0 ? \"wait\" : \"ready\"}\n className=\"inline-flex items-baseline gap-[.3em] whitespace-nowrap\"\n {...swap(reduce)}\n >\n {resendIn > 0 ? (\n <>\n Resend code in \n \n ) : (\n \"Resend code\"\n )}\n \n \n \n \n )}\n\n {step === \"done\" && (\n \n \n \n \n \n \n \n
\n

\n {signingUp ? \"Welcome to Polaris\" : \"Welcome back\"}\n

\n

\n {signingUp ? \"Your account is ready. \" : \"You are signed in to Launch desk as \"}\n {account}\n {signingUp ? \"\" : \".\"}\n

\n
\n
\n
\n
Method
\n
{method}
\n
\n
\n
This device
\n
Remembered for 30 days
\n
\n
\n \n \n )}\n
\n
\n \n
\n
\n\n \n \n );\n}\n\nexport default LoginCentered;\n", "type": "registry:component", "target": "@components/iris/blocks/login-centered/login-centered.tsx" } ], "docs": "Docs and live preview: https://irisui.dev/components/login-centered", "meta": { "kind": "block", "group": "Blocks", "export": "LoginCentered", "docs": "https://irisui.dev/components/login-centered" } }