@coinbase/cds-mcp-server 8.41.0 → 8.42.0

package/mcp-docs/mobile/components/ContentCardBody.txt

@@ -13,21 +13,124 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
 ### Basic Example
 
 ```jsx
-<VStack bordered borderRadius="400" maxWidth={375} padding={2}>
-  <ContentCardBody
-    body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
-    label={
-      <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-        <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
-          BTC
-        </Text>
-        <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
-          ↗ 5.12%
-        </Text>
-      </HStack>
-    }
-  />
-</VStack>
+function Example() {
+  const { spectrum } = useTheme();
+
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardBody
+        title="Bitcoin Network Shatters Records"
+        description={
+          <VStack gap={0.5}>
+            <Text font="body2">Hashrate Climbing to 464 EH/s</Text>
+            <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
+                BTC
+              </Text>
+              <Text
+                font="label2"
+                accessibilityLabel="Up 5.12%"
+                as="p"
+                dangerouslySetColor={`rgb(${spectrum.green70})`}
+              >
+                ↗ 5.12%
+              </Text>
+            </HStack>
+          </VStack>
+        }
+      />
+    </VStack>
+  );
+}
+```
+
+### With Media (Top Placement)
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardBody
+        title="Ethereum Update"
+        description="The latest developments in the Ethereum ecosystem and network upgrades."
+        media={
+          <RemoteImage
+            alt="Ethereum background"
+            resizeMode="cover"
+            shape="rectangle"
+            source={{ uri: ethBackground }}
+            width="100%"
+          />
+        }
+        mediaPlacement="top"
+      />
+    </VStack>
+  );
+}
+```
+
+### With Media (End Placement - Horizontal)
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardBody
+        title="Bitcoin Holdings"
+        description="Your current portfolio performance and asset allocation details."
+        media={
+          <RemoteImage
+            alt="Ethereum background"
+            resizeMode="cover"
+            shape="rectangle"
+            source={{ uri: ethBackground }}
+            width="100%"
+          />
+        }
+        mediaPlacement="end"
+      />
+    </VStack>
+  );
+}
+```
+
+### With Custom Children
+
+Use the `children` prop to render custom content below the title and description. This is useful when you need to display additional data, charts, or interactive elements that don't fit the standard media/title/description layout.
+
+```jsx
+function Example() {
+  const { spectrum } = useTheme();
+
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardBody title="Weekly Summary" description="Your trading activity this week.">
+        <HStack gap={2} justifyContent="space-between">
+          <VStack gap={0.5}>
+            <Text font="legal" color="fgMuted">
+              Trades
+            </Text>
+            <Text font="title3">24</Text>
+          </VStack>
+          <VStack gap={0.5}>
+            <Text font="legal" color="fgMuted">
+              Volume
+            </Text>
+            <Text font="title3">$12,450</Text>
+          </VStack>
+          <VStack gap={0.5}>
+            <Text font="legal" color="fgMuted">
+              P&L
+            </Text>
+            <Text font="title3" dangerouslySetColor={`rgb(${spectrum.green70})`}>
+              +$890
+            </Text>
+          </VStack>
+        </HStack>
+      </ContentCardBody>
+    </VStack>
+  );
+}
 ```
 
 ## Props
@@ -40,7 +143,7 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
 | `animated` | `boolean` | No | `-` | - |
 | `aspectRatio` | `string \| number` | No | `-` | - |
 | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
-| `body` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Main body copy |
+| `body` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
@@ -60,9 +163,11 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `string \| number` | No | `-` | - |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Custom content to display below the main content box (title/description/media). Use this when you need to render custom content that doesnt fit the standard media/title/description layout. |
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or React node to display as the card description. Use a Text component to override default color and font. |
 | `display` | `flex \| none` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
 | `flexBasis` | `string \| number` | No | `-` | - |
@@ -78,7 +183,7 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
 | `height` | `string \| number` | No | `-` | - |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
-| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Use for supplemental data |
+| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
 | `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
@@ -90,8 +195,9 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
 | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `maxHeight` | `string \| number` | No | `-` | - |
 | `maxWidth` | `string \| number` | No | `-` | - |
-| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Media, image or video to show |
-| `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | The position of the media within the card. Can be one of: top, bottom, right or left. |
+| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to display as media content (e.g., Image or RemoteImage). |
+| `mediaPlacement` | `top \| bottom \| end \| start` | No | `'top'` | Placement of the media content relative to the text content. |
+| `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | - |
 | `minHeight` | `string \| number` | No | `-` | - |
 | `minWidth` | `string \| number` | No | `-` | - |
 | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -121,11 +227,13 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
+| `styles` | `{ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; mediaContainer?: StyleProp<ViewStyle>; }` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
 | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
 | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
 | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or React node to display as the card title. Use a Text component to override default color and font. |
 | `top` | `string \| number` | No | `-` | - |
 | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
 | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |

package/mcp-docs/mobile/components/ContentCardFooter.txt

@@ -10,7 +10,7 @@ import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard'
 
 ## Examples
 
-### Basic Example
+### With Icon Counter Buttons
 
 ```jsx
 function Example() {
@@ -26,6 +26,68 @@ function Example() {
 }
 ```
 
+### With Image Group and Button
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardFooter>
+        <RemoteImageGroup shape="circle" size={32}>
+          <RemoteImage source={{ uri: assets.eth.imageUrl }} />
+          <RemoteImage source={{ uri: assets.btc.imageUrl }} />
+          <RemoteImage source={{ uri: assets.polygon.imageUrl }} />
+        </RemoteImageGroup>
+        <Button compact variant="secondary">
+          Share
+        </Button>
+      </ContentCardFooter>
+    </VStack>
+  );
+}
+```
+
+### With Text and Actions
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardFooter alignItems="center">
+        <Text font="label2" color="fgMuted">
+          Updated 2 hours ago
+        </Text>
+        <HStack gap={1}>
+          <IconButton
+            transparent
+            accessibilityLabel="Bookmark"
+            name="bookmark"
+            variant="secondary"
+          />
+          <IconButton transparent accessibilityLabel="Share" name="share" variant="secondary" />
+        </HStack>
+      </ContentCardFooter>
+    </VStack>
+  );
+}
+```
+
+### Centered Content
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardFooter justifyContent="center">
+        <Button compact variant="secondary">
+          View All Assets
+        </Button>
+      </ContentCardFooter>
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

package/mcp-docs/mobile/components/ContentCardHeader.txt

@@ -15,21 +15,15 @@ import { ContentCardHeader } from '@coinbase/cds-mobile/cards/ContentCard'
 ```jsx
 function Example() {
   return (
-    <VStack bordered borderRadius="400" maxWidth={375} padding={1}>
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
       <ContentCardHeader
-        avatar="/img/card/content_card_custom_avatar_1.png"
-        meta={
-          <Box marginLeft={-1}>
-            <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
-              ・News・5 hrs
-            </Text>
-          </Box>
-        }
-        title="Description"
-        end={
+        thumbnail={<Avatar src={assets.eth.imageUrl} size="l" />}
+        title="CoinDesk"
+        subtitle="News・5 hrs"
+        actions={
           <IconButton
             transparent
-            accessibilityLabel="More information about coinDesk card news"
+            accessibilityLabel="More options"
             name="more"
             variant="secondary"
           />
@@ -40,17 +34,75 @@ function Example() {
 }
 ```
 
+### With Multiple Actions
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardHeader
+        thumbnail={<Avatar src={assets.btc.imageUrl} size="l" />}
+        title="Bitcoin News"
+        subtitle="Markets・2 hrs"
+        actions={
+          <HStack gap={0}>
+            <IconButton transparent accessibilityLabel="Bookmark" name="star" variant="secondary" />
+            <IconButton
+              transparent
+              accessibilityLabel="More options"
+              name="more"
+              variant="secondary"
+            />
+          </HStack>
+        }
+      />
+    </VStack>
+  );
+}
+```
+
+### Without Thumbnail
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardHeader
+        title="Market Update"
+        subtitle="Posted 3 hours ago"
+        actions={
+          <IconButton transparent accessibilityLabel="Share" name="share" variant="secondary" />
+        }
+      />
+    </VStack>
+  );
+}
+```
+
+### Title Only
+
+```jsx
+function Example() {
+  return (
+    <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
+      <ContentCardHeader title="Simple Header" />
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Name of the publisher |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or React node to display as the header title. Use a Text component to override default color and font. |
+| `actions` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Slot for action buttons. |
 | `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
 | `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
 | `animated` | `boolean` | No | `-` | - |
 | `aspectRatio` | `string \| number` | No | `-` | - |
-| `avatar` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | A media object like an image, avatar, illustration, or cryptocurrency asset. |
+| `avatar` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
@@ -76,7 +128,7 @@ function Example() {
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `display` | `flex \| none` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
-| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Typically an Icon Button or Tag |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `flexBasis` | `string \| number` | No | `-` | - |
 | `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
 | `flexGrow` | `number` | No | `-` | - |
@@ -101,7 +153,7 @@ function Example() {
 | `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `maxHeight` | `string \| number` | No | `-` | - |
 | `maxWidth` | `string \| number` | No | `-` | - |
-| `meta` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Includes data like content category type and time |
+| `meta` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
 | `minHeight` | `string \| number` | No | `-` | - |
 | `minWidth` | `string \| number` | No | `-` | - |
 | `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
@@ -131,11 +183,14 @@ function Example() {
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
+| `styles` | `{ root?: StyleProp<ViewStyle>; textContainer?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; }` | No | `-` | - |
+| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or React node to display as the header subtitle. Use a Text component to override default color and font. |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
 | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
 | `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
 | `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `thumbnail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | A media object like an image, avatar, illustration, or cryptocurrency asset. |
 | `top` | `string \| number` | No | `-` | - |
 | `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
 | `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |