Replace deprecated Box component with new Box component

Description

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

This issue is a reusable tracker for many small PRs. Do not try to migrate every Box 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 Box usage from both legacy extension sources:

• ui/components/ui/box
• ui/components/component-library/box

To the MMDS Box:

import { Box } from '@metamask/design-system-react';

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

Migration docs

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

• MMDS Box documentation
• MMDS Box migration guide

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

Common failure mode

A PR that changes imports from ui/components/ui/box to ui/components/component-library does not complete this migration. The selected files must import Box from @metamask/design-system-react and update any incompatible props/types.

PR scope and linking

• PRs should contain 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 #19526, Closes #19526, or Resolves #19526.
• Use Part of #19526 or Part of: https://github.com/MetaMask/metamask-extension/issues/19526 so this tracker stays open until all legacy Box usage is migrated.

Type and API requirements

For every migrated file:

• Audit the Box props being used; do not only change the import path.
• Follow the MMDS Box migration guide for responsive spacing arrays, inline spacing props, margin="auto", and other unsupported legacy patterns.
• Replace incompatible legacy props with supported MMDS props or Tailwind className utilities.
• Update imported Box-related constants/types to MMDS exports where applicable.
• Do not add broad any, unsafe casts, or type suppressions to force compatibility.
• Fix TypeScript, Flow, Jest, or lint failures caused by Box prop/type differences.

Acceptance Criteria

• Selected files no longer import Box from ui/components/ui/box, ui/components/component-library, or ui/components/component-library/box.
• Selected files import Box from @metamask/design-system-react.
• Any legacy Box props are migrated according to the MMDS Box migration guide.
• Type usage is updated cleanly with no new unsafe casts, any, or suppressions.
• Each PR migrates no more than 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.