Because:
- We are updating pairing flows and want to land UI components / pages first.
- Adds the mobile screen shown when pairing times out or is canceled.
This commit:
- Adds `packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx`,
a presentational card rendering the Firefox brand lockup, the shared pairing
interrupted illustration, and the heading and description copy. The Figma frame
annotates both states as "Informational — no on-screen actions", so the card
renders no button and no link; `firefox.com/pair` is plain body text in both the
English and the localized frames, so the sentence is not split for emphasis.
- Models the two states as one component with a `reason: 'timeout' | 'canceled'`
prop rather than two components, since they differ only in heading and
description. The exported `PairingInterruptionReason` union is named for the
cause rather than for the screen, because that is what the caller knows at the
point it routes here.
- Adds `en.ftl` with separate messages per state — the two sentences differ in
structure, not just in a word, so they cannot share one parameterised message.
- Adds `index.stories.tsx` with one story per state, and tests that run both states
through the heading, description, image aria-label, and Fluent bundle assertions.
The suite also asserts the card exposes no button, so a future change cannot
silently add an unwired action.
Closes #FXA-14238