refactor: migrate SRPInputGrid to design system components and Tailwi… (MetaMask#28137)

…nd CSS

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR migrates the SRPInputGrid view away from legacy
StyleSheet.create()-based styling toward the MetaMask design system and
Tailwind CSS. Also migrated to Typescript as a functional component.

Jira Link: https://consensyssoftware.atlassian.net/browse/TO-646

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: migrate SRPInputGrid to design system components and
Tailwind CSS

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Import SRP

  Scenario: when the user use the existing wallet SRP
    Then validate the UI
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/d9d9db2f-915d-4daa-91be-970430fc05f5



https://github.com/user-attachments/assets/3cf1db2c-846c-477f-81fd-ac62b3f4c73f



https://github.com/user-attachments/assets/1f2caf23-b0ec-4134-9749-9a7aa2b2ca6b

<img width="1059" height="994" alt="Screenshot 2026-03-31 at 1 18 04 PM"
src="https://github.com/user-attachments/assets/962f6fde-0641-4aad-a2e8-34fafd5e0451"
/>
<img width="972" height="1011" alt="Screenshot 2026-03-31 at 1 18 12 PM"
src="https://github.com/user-attachments/assets/df498865-686b-44e3-a2ae-bc5986c5a0aa"
/>
<img width="1020" height="993" alt="Screenshot 2026-03-31 at 1 18 47 PM"
src="https://github.com/user-attachments/assets/79c605f5-441d-45d9-8723-33a4324376cb"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> UI-heavy refactor of the Secret Recovery Phrase input flow; while
logic is mostly preserved, changes to component structure, styling, and
input props/focus handling could introduce regressions in SRP
entry/paste behavior.
> 
> **Overview**
> Refactors `SrpInputGrid` to use MetaMask design-system primitives
(`Box`, `Button`, design-system `Text`) and Tailwind-based styling,
removing the legacy `StyleSheet.create` file and updating layout/style
behavior accordingly.
> 
> Consolidates shared `TextInput` props into `SHARED_INPUT_PROPS`, moves
word validation helper out of the component, and replaces the inline
paste/clear `Text` action with a tertiary `Button`; Jest snapshots are
updated to reflect the new rendered structure and styling.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e7c1129. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: smgv