Replace deprecated Typography with Text component

### Description

The extension still uses legacy typography/text implementations that should be migrated to the MMDS `Text` component from `@metamask/design-system-react`.

This issue is a reusable tracker for many small PRs. Do not try to migrate every Typography/Text usage in one PR. Each PR should migrate a small set of files completely and leave this issue open for the remaining work.

### Migration target

Migrate typography/text usage from these legacy extension sources:

- `ui/components/ui/typography`
- `ui/components/component-library/text`

To the MMDS Text component:

```ts
import { Text } from '@metamask/design-system-react';
```

The `ui/components/component-library` Text component is **not** the destination for this migration. It is also part of the legacy extension text surface that should eventually be replaced.

### Migration docs

Use the MMDS docs and migration guide when updating each file:

- [MMDS Text documentation](https://metamask.github.io/metamask-design-system/?path=/docs/react-components-text--docs)
- [MMDS Text migration guide](https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react/MIGRATION.md#text-component)

Pay special attention to prop, variant, color, font weight, and type differences. This should not be treated as an import-only migration.

### Common failure mode

A PR that changes `Typography` imports from `ui/components/ui/typography` to `Text` from `ui/components/component-library` does **not** complete this migration. The selected files must import `Text` and related constants/types from `@metamask/design-system-react` and update any incompatible props/types.

### PR scope and linking

- PRs should contain a minimum of 1 migrated product file and no more than 3 migrated product files. Necessary test, snapshot, or story updates may be included alongside those files.
- Do **not** use auto-closing keywords such as `Fixes #17670`, `Closes #17670`, or `Resolves #17670`.
- Use `Part of #17670` or `Part of: https://github.com/MetaMask/metamask-extension/issues/17670` so this tracker stays open until all legacy Typography/Text usage is migrated.

### Type and API requirements

For every migrated file:

- Audit the Text/Typography props being used; do not only change the import path or component name.
- Follow the [MMDS Text migration guide](https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react/MIGRATION.md#text-component) for variant, color, font weight, and type differences.
- Migrate `boxProps` to direct MMDS props or Tailwind `className` utilities where appropriate.
- Convert extension `TextVariant` camelCase values to MMDS PascalCase values, for example `TextVariant.bodyMd` -> `TextVariant.BodyMd`.
- Split extension semantic weight variants into `variant` plus `fontWeight`, for example `TextVariant.bodyMdBold` -> `variant={TextVariant.BodyMd} fontWeight={FontWeight.Bold}`.
- Convert extension text colors such as `Color.textMuted` to MMDS `TextColor.TextMuted`.
- Remove `TextVariant.inherit`; omit the `variant` prop when inheritance is intended.
- Update imported text-related constants/types to MMDS exports where applicable, including `TextVariant`, `TextColor`, `FontWeight`, and `TextProps`.
- Do not add broad `any`, unsafe casts, or type suppressions to force compatibility.
- Fix TypeScript, Flow, Jest, or lint failures caused by Text prop/type differences.

### Typography to Text mapping

When migrating legacy `Typography` from `ui/components/ui/typography`, use the MMDS Text migration guide as the source of truth. The historical extension mapping below can help identify the closest text role, but final values should use MMDS PascalCase `TextVariant` members and separate `FontWeight` where needed:

- `TypographyVariant.H1` -> `TextVariant.DisplayMd`
- `TypographyVariant.H2` -> `TextVariant.HeadingLg`
- `TypographyVariant.H3` -> `TextVariant.HeadingMd`
- `TypographyVariant.H4` -> `TextVariant.HeadingSm`
- `TypographyVariant.H5` -> `TextVariant.BodyMd`
- `TypographyVariant.H6` -> `TextVariant.BodySm`
- `TypographyVariant.Paragraph` -> `TextVariant.BodyMd`
- `TypographyVariant.H7` -> `TextVariant.BodySm`
- `TypographyVariant.H8` -> `TextVariant.BodyXs`
- `TypographyVariant.H9` -> `TextVariant.BodyXs`

### Acceptance Criteria

- Selected files no longer import typography/text components or related constants from `ui/components/ui/typography`, `ui/components/component-library`, or `ui/components/component-library/text`.
- Selected files import `Text` and any related constants/types from `@metamask/design-system-react`.
- Any legacy Typography/Text props are migrated according to the MMDS Text migration guide.
- Type usage is updated cleanly with no new unsafe casts, `any`, or suppressions.
- Each PR migrates 1-3 product files, excluding necessary tests, snapshots, or stories.
- Each PR links this issue with `Part of`, not an auto-closing keyword.
- Relevant Jest tests pass.
- Lint/type checks pass for touched files or for the repo's normal validation command.
- Before/after screenshots are included for reachable UI. If the UI is unreachable or dead code, the PR must clearly prove that with search evidence and still include test coverage where possible.

If the acceptance criteria are not met, PRs may be closed.

### Difficulty: Intermediate

Good first issue for external contributors who are familiar with running the extension locally, React component props, type checking, Jest tests, linting, and Storybook.

Select 1-3 product files under ui/components/ui/typography or ui/components/component-library/text, then read the MMDS Text migration guide and inspect their existing props and related constants. Migrate the selected files to @metamask/design-system-react, update incompatible variants, colors, weights, and types, and run relevant Jest, lint, and type checks. Done means the selected files meet the acceptance criteria, with screenshots or evidence for unreachable UI and a Part of #17670 link.

Written by the indexing model from the issue text.