feat(ds): add ListItem top and bottom accessories (#11452)

<!--
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**

This PR extends `ListItem` component to accept `topAccessory` and
`bottomAccessory` props to render a react node above or below the
current list item.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/d64214aa-28e7-4ac3-a647-4f6655e0a11c



### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

---------

Co-authored-by: Brian Nguyen <[email protected]>

app/component-library/base-components/TagBase/__snapshots__/TagBase.test.tsx.snap

@@ -7,78 +7,85 @@ exports[`TagBase should render TagBase 1`] = `
   onLayout={[Function]}
   style={
     {
-      "alignItems": "center",
       "alignSelf": "flex-start",
       "backgroundColor": "#ffffff",
       "borderColor": "#bbc0c5",
       "borderRadius": 999,
       "borderWidth": 0,
       "color": "#141618",
-      "flexDirection": "row",
       "padding": 16,
       "paddingHorizontal": 8,
       "paddingVertical": 2,
     }
   }
   testID="tagbase"
 >
-  <SvgMock
-    color="#141618"
-    height={20}
-    name="Add"
-    style={
-      {
-        "height": 20,
-        "width": 20,
-      }
-    }
-    width={20}
-  />
   <View
-    accessible={false}
     style={
       {
-        "width": 4,
+        "alignItems": "center",
+        "flexDirection": "row",
       }
     }
-    testID="listitem-gap"
-  />
-  <Text
-    accessibilityRole="text"
-    style={
-      {
-        "color": "#141618",
-        "fontFamily": "EuclidCircularB-Regular",
-        "fontSize": 14,
-        "fontWeight": "400",
-        "letterSpacing": 0,
-        "lineHeight": 22,
-      }
-    }
-    testID="tagbase-text"
   >
-    Sample TagBase Children
-  </Text>
-  <View
-    accessible={false}
-    style={
-      {
-        "width": 4,
+    <SvgMock
+      color="#141618"
+      height={20}
+      name="Add"
+      style={
+        {
+          "height": 20,
+          "width": 20,
+        }
       }
-    }
-    testID="listitem-gap"
-  />
-  <SvgMock
-    color="#141618"
-    height={20}
-    name="Add"
-    style={
-      {
-        "height": 20,
-        "width": 20,
+      width={20}
+    />
+    <View
+      accessible={false}
+      style={
+        {
+          "width": 4,
+        }
       }
-    }
-    width={20}
-  />
+      testID="listitem-gap"
+    />
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#141618",
+          "fontFamily": "EuclidCircularB-Regular",
+          "fontSize": 14,
+          "fontWeight": "400",
+          "letterSpacing": 0,
+          "lineHeight": 22,
+        }
+      }
+      testID="tagbase-text"
+    >
+      Sample TagBase Children
+    </Text>
+    <View
+      accessible={false}
+      style={
+        {
+          "width": 4,
+        }
+      }
+      testID="listitem-gap"
+    />
+    <SvgMock
+      color="#141618"
+      height={20}
+      name="Add"
+      style={
+        {
+          "height": 20,
+          "width": 20,
+        }
+      }
+      width={20}
+    />
+  </View>
 </View>
 `;