Auth surface
The centred card every sign-in, consent and finished step shares.
import { AuthSurface } from "@arcadia/ui"Sign in to Lookout
New to Lookout? Create an account
TSX
One card for every sign-in moment: an app's gate, a web sign-in, a consent, a page that says a step finished. The mark, one title, one optional line, the body and a quiet footer. States change inside the same card: give each step its own stateKey and the body fades in, so a flow never jumps between layouts. fill centres it in the viewport.
Finished steps
An icon with a tone replaces the mark once something is done, or when it can't be.
You're signed in
You can close this tab and go back to Lookout.
The title is the page's h1. A notice is a status, or an alert when its tone is danger; its icon carries the tone and its text says it, so colour is never the only signal.
AuthSurface
titlerequired- ReactNode
- The one title ("Sign in to Lookout").
description- ReactNode
- One optional line under it.
icon- IconName
- A state glyph instead of the mark (a check once something finished, an alert when it can't).
tone- "neutral" | "success" | "warning" | "danger"Default"neutral"
- The glyph's tone.
notice- AuthSurfaceNotice | null
- One line above the body: its icon carries the tone, the text stays in text-2.
footer- ReactNode
- Quiet lines under the body ("New to Lookout? Create an account", a version row).
fill- booleanDefaultfalse
- Fill the viewport and centre the card (a gate or a whole page). Default false: the card alone, for a column the page already centres.
stateKey- string
- Changing it cross-fades the body in (one step of a flow to the next, inside the same card).
rootStyle- RootStyle
- Typed StyleX override: layout only.
children- ReactNode
- The body: fields, a code, the actions.