@coinbase/cds-mcp-server 8.28.2 → 8.30.0

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

@@ -58,9 +58,9 @@ function Example() {
     {
       title: '#7560',
       description: (
-        <TextLabel2 color="fgPositive" numberOfLines={2}>
+        <Text font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;6.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Bored Ape',
       onPress: NoopFn,
@@ -76,9 +76,9 @@ function Example() {
     {
       title: '#2015',
       description: (
-        <TextLabel2 color="fgNegative" numberOfLines={2}>
+        <Text font="label2" color="fgNegative" numberOfLines={2}>
           &#x2198;6.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Pudgy Penguins',
       onPress: NoopFn,
@@ -115,9 +115,9 @@ function Example() {
     {
       title: 'Parallel',
       description: (
-        <TextLabel2 color="fgMuted" numberOfLines={2}>
+        <Text font="label2" color="fgMuted" numberOfLines={2}>
           &#9733;4.5
-        </TextLabel2>
+        </Text>
       ),
       onPress: NoopFn,
       media: (

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

@@ -1314,13 +1314,14 @@ function AssetPriceWithDottedArea() {
         <SegmentedTab
           ref={ref}
           label={
-            <TextLabel1
+            <Text
+              font="label1"
               style={{
                 color: isActive ? assets.btc.color : undefined,
               }}
             >
               {label}
-            </TextLabel1>
+            </Text>
           }
           {...props}
         />

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

@@ -215,9 +215,9 @@ function Example() {
       <VStack>
         <HStack justifyContent="center" zIndex={1}>
           <Box background="background" paddingHorizontal={1.5}>
-            <TextBody as="span" color="foregroundMuted">
+            <Text as="span" font="body" color="foregroundMuted">
               OR
-            </TextBody>
+            </Text>
           </Box>
         </HStack>
         <Divider marginTop={-1.5} paddingBottom={1.5} />
@@ -235,9 +235,9 @@ function Example() {
             >
               <Box padding={2}>{icon}</Box>
             </Pressable>
-            <TextLabel2 as="span" color="foregroundMuted" paddingTop={1}>
+            <Text as="span" font="label2" color="foregroundMuted" paddingTop={1}>
               {name}
-            </TextLabel2>
+            </Text>
           </VStack>
         ))}
       </HStack>
@@ -251,13 +251,13 @@ function Example() {
         actionAccessibilityLabel="Continue"
         title="Sign in to Coinbase"
         description={
-          <TextBody as="p" color="foregroundMuted">
+          <Text as="p" font="body" color="foregroundMuted">
             By signing in, you agree to our{' '}
             <Link to="https://www.google.com/" openInNewWindow underline={false}>
               Privacy Policy
             </Link>
             . Not your device? Use a private window.
-          </TextBody>
+          </Text>
         }
         accessibilityLabel="Login section"
         pictogram={<LogoMark size={32} />}

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

@@ -154,7 +154,7 @@ const TransactionalNumpadExample = () => {
           title="Invalid Input"
           variant="warning"
         >
-          <Text>Enter an amount greater than zero.</TextBody>
+          <Text>Enter an amount greater than zero.</Text>
         </Banner>
       );
     if (parseFloat(value) >= VALUE_MAX) {
@@ -167,7 +167,7 @@ const TransactionalNumpadExample = () => {
           title="You've reached the maximum value"
           variant="warning"
         >
-          <Text>Max ${VALUE_MAX}</TextBody>
+          <Text>Max ${VALUE_MAX}</Text>
         </Banner>
       );
     }

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

@@ -79,7 +79,9 @@ function Example() {
         title="Page Title"
       />
       <Box padding={3}>
-        <TextBody>Content below with padding 3 to align visually with the header actions.</TextBody>
+        <Text font="body">
+          Content below with padding 3 to align visually with the header actions.
+        </Text>
       </Box>
     </>
   );

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

@@ -174,9 +174,9 @@ function ColoredBTCExample() {
 
       const wrappedLabel =
         typeof label === 'string' ? (
-          <TextLabel1 dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
+          <Text font="label1" dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
             {label}
-          </TextLabel1>
+          </Text>
         ) : (
           label
         );
@@ -274,9 +274,9 @@ function ColoredExcludingLiveExample() {
 
       const wrappedLabel =
         typeof label === 'string' ? (
-          <TextLabel1 dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
+          <Text font="label1" dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
             {label}
-          </TextLabel1>
+          </Text>
         ) : (
           label
         );

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

@@ -23,7 +23,9 @@ Pressables support an `onPress` prop for handling click/press interactions. When
   borderRadius={300}
 >
   <Box as="span" padding={2}>
-    <TextHeadline as="span">Click me...</TextHeadline>
+    <Text as="span" font="headline">
+      Click me...
+    </Text>
   </Box>
 </Pressable>
 ```
@@ -61,7 +63,9 @@ Pressables support an `onPress` prop for handling click/press interactions. When
   borderRadius={300}
 >
   <Box as="span" padding={2}>
-    <TextHeadline as="span">Click me...</TextHeadline>
+    <Text as="span" font="headline">
+      Click me...
+    </Text>
   </Box>
 </Pressable>
 ```

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

@@ -63,17 +63,17 @@ function Example() {
 
   const renderStartLabelNum = useCallback((num, disabled) => {
     return (
-      <TextTitle3 disabled={disabled} as="span">
+      <Text disabled={disabled} as="span" font="title3">
         ${num.toLocaleString()}
-      </TextTitle3>
+      </Text>
     );
   }, []);
 
   const renderEndLabelNum = useCallback((num, disabled) => {
     return (
-      <TextLabel2 disabled={disabled} as="span" align="end" noWrap>
+      <Text disabled={disabled} as="span" font="label2" align="end" noWrap>
         ${num.toLocaleString()} left
-      </TextLabel2>
+      </Text>
     );
   }, []);
 

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

@@ -56,9 +56,9 @@ function Example() {
 
   const renderLabelNum = useCallback((num, disabled) => {
     return (
-      <TextTitle3 as="span" disabled={disabled}>
+      <Text as="span" font="title3" disabled={disabled}>
         ${num.toLocaleString()}
-      </TextTitle3>
+      </Text>
     );
   }, []);
 

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

@@ -165,7 +165,11 @@ The progress circle can be customized with styles.
         stroke: 'transparent',
       },
     }}
-    contentNode={<TextTitle1 color="fgPrimary">40%</TextTitle1>}
+    contentNode={
+      <Text font="title1" color="fgPrimary">
+        40%
+      </Text>
+    }
     weight="semiheavy"
   />
   <ProgressCircle

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

@@ -233,9 +233,11 @@ function SelectChipExample() {
 | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
 | `fontSize` | `inherit \| FontSize` | No | `-` | - |
 | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
+| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Tray footer |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `handleBarAccessibilityLabel` | `string` | No | `-` | Accessibility label for handlebar |
 | `hardwareAccelerated` | `boolean` | No | `-` | Controls whether to force hardware acceleration for the underlying window. |
+| `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Tray header |
 | `height` | `string \| number` | No | `-` | - |
 | `hideHandleBar` | `boolean` | No | `false` | The HandleBar by default only is used for a bottom pinned drawer. This removes it. |
 | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |

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

@@ -289,6 +289,91 @@ function ExampleDescriptions() {
 }
 ```
 
+### With display value
+
+Use the `displayValue` prop to override the displayed value and avoid truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+
+```tsx
+function ExampleDisplayValue() {
+  const exampleOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+    { value: '5', label: 'Option 5' },
+  ];
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+  const displayValue =
+    Array.isArray(value) && value.length > 0
+      ? `${value.length} ${value.length === 1 ? 'option' : 'options'} selected`
+      : undefined;
+  return (
+    <SelectChip
+      accessibilityLabel="Select multiple values"
+      displayValue={displayValue}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose options"
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### With max width
+
+```tsx
+function ExampleMaxWidth() {
+  const exampleOptions = [
+    { value: '1', label: 'Very Long Option Name That Exceeds Default Width' },
+    { value: '2', label: 'Another Extremely Long Option Label' },
+    { value: '3', label: 'Short' },
+    { value: '4', label: 'Medium Length Option' },
+  ];
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <VStack gap={2}>
+      <VStack gap={1}>
+        <Text>Default maxWidth (200px):</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          label="Select a value"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text>Custom maxWidth (150px):</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          label="Select a value"
+          maxWidth={150}
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text>No maxWidth constraint:</Text>
+        <SelectChip
+          accessibilityLabel="Select a value"
+          label="Select a value"
+          maxWidth="100%"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+    </VStack>
+  );
+}
+```
+
 ### Disabled
 
 ```tsx
@@ -342,6 +427,7 @@ function ExampleDisabled() {
 | `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
 | `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
 | `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `displayValue` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Override the displayed value in the chip control. Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display. When provided, this value takes precedence over the default label generation. |
 | `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
 | `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
 | `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
@@ -350,6 +436,7 @@ function ExampleDisabled() {
 | `invertColorScheme` | `boolean` | No | `false` | Invert the foreground and background colors to emphasize the Chip. Depending on your theme, it may be dangerous to use this prop in conjunction with transparentWhileInactive. |
 | `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
 | `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
+| `maxWidth` | `string \| number` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
 | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
 | `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
@@ -362,6 +449,6 @@ function ExampleDisabled() {
 | `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Inline styles for the root element |
 | `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for different parts of the select |
 | `testID` | `string` | No | `-` | Test ID for the root element |
-| `type` | `single \| multi` | No | `-` | Whether the select allows single or multiple selections |
+| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
 
 

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

@@ -164,7 +164,7 @@ function Example() {
     >
       <HStack alignItems="center" height="100%" justifyContent="center" width="100%">
         <HStack height="100%" pin="right" alignItems="center" padding={2}>
-          <TextLabel1>➡️</TextLabel1>
+          <Text font="label1">➡️</Text>
         </HStack>
       </HStack>
     </Pressable>
@@ -182,7 +182,7 @@ function Example() {
       justifyContent="center"
       width="100%"
     >
-      <TextHeadline>Slide me</TextHeadline>
+      <Text font="headline">Slide me</Text>
     </HStack>
   );
 

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

@@ -76,7 +76,9 @@ function Example() {
   const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
   return (
     <VStack gap={2}>
-      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <Text as="p" font="label1">
+        Scale {yAxisScalingFactor}
+      </Text>
       <Sparkline {...dimensions} path={path} color="auto" yAxisScalingFactor={yAxisScalingFactor} />
     </VStack>
   );

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

@@ -55,7 +55,9 @@ function Example() {
   const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
   return (
     <VStack gap={2}>
-      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <Text as="p" font="label1">
+        Scale {yAxisScalingFactor}
+      </Text>
       <SparklineGradient
         {...dimensions}
         path={path}

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

@@ -51,7 +51,9 @@ The fill will be added by default
     labelNode={
       <HStack gap={1} alignItems="center" paddingBottom={0}>
         <Icon active name="wallet" size="s" />
-        <TextTitle3 as="span">CustomHeader</TextTitle3>
+        <Text as="span" font="title3">
+          CustomHeader
+        </Text>
       </HStack>
     }
   />

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

@@ -36,7 +36,9 @@ function TabbedChipsExample() {
   return (
     <VStack maxWidth={375} borderRadius={400} bordered paddingX={2} gap={2} paddingY={2}>
       <VStack paddingTop={1}>
-        <TextTitle3 as="p">Popular assets</TextTitle3>
+        <Text as="p" font="title3">
+          Popular assets
+        </Text>
       </VStack>
       <SearchInput compact placeholder="Search by name" />
       <TabbedChips value={value} onChange={setValue} tabs={tabs} />

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

@@ -57,6 +57,35 @@ function ExampleManyTabs() {
 }
 ```
 
+### With autoScrollOffset
+
+:::tip Auto-scroll offset
+The `autoScrollOffset` prop controls the X position offset when auto-scrolling to the active tab. This prevents the active tab from being covered by the overflow gradient on the left side. Try clicking tabs near the edges to see the difference.
+:::
+
+```tsx
+function ExampleAutoScrollOffset() {
+  const tabs = Array.from({ length: 25 }).map((_, i) => ({
+    id: `tab_${i + 1}`,
+    label: `Tab ${i + 1}`,
+  }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <VStack gap={2}>
+      <Text>Default offset (30px)</Text>
+      <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
+      <Text>Custom offset (60px)</Text>
+      <TabbedChips
+        activeTab={activeTab}
+        onChange={setActiveTab}
+        tabs={tabs}
+        autoScrollOffset={60}
+      />
+    </VStack>
+  );
+}
+```
+
 ### Long text tabs
 
 ```tsx
@@ -163,6 +192,7 @@ render(<Example />);
 | `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
 | `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `autoScrollOffset` | `number` | No | `30` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the overflow gradient on the left side, default: 30px) |
 | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
 | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | The spacing between Tabs |

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

@@ -52,10 +52,14 @@ You can control the visual prominence of the Tag using the `emphasis` prop. By d
 <HStack justifyContent="space-between" gap="2" alignItems="center">
   <VStack gap={0.5}>
     <HStack gap={1}>
-      <TextHeadline as="p">Tax account status</TextHeadline>
+      <Text as="p" font="headline">
+        Tax account status
+      </Text>
       <Tag colorScheme="red">Not verified</Tag>
     </HStack>
-    <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
+    <Text as="p" font="body">
+      Verify your info for tax reporting purposes.
+    </Text>
   </VStack>
   <Button>Get started</Button>
 </HStack>
@@ -67,9 +71,9 @@ You can control the visual prominence of the Tag using the `emphasis` prop. By d
 function MarginExample() {
   const renderStartLabelNum = useCallback((num, disabled) => {
     return (
-      <TextTitle3 disabled={disabled} as="span">
+      <Text disabled={disabled} as="span" font="title3">
         ${num.toLocaleString()} (10%)
-      </TextTitle3>
+      </Text>
     );
   }, []);
 
@@ -91,12 +95,14 @@ function MarginExample() {
       >
         <VStack gap={0.5}>
           <HStack gap={1}>
-            <TextHeadline as="p">Margin ratio</TextHeadline>
+            <Text as="p" font="headline">
+              Margin ratio
+            </Text>
             <Tag colorScheme="green">Low</Tag>
           </HStack>
-          <TextBody as="p">
+          <Text as="p" font="body">
             The portion of your balance being held on margin is low. No action is required.
-          </TextBody>
+          </Text>
         </VStack>
         <ProgressBarWithFixedLabels
           startLabel={{ value: 400, render: renderStartLabelNum }}
@@ -118,10 +124,14 @@ function MarginExample() {
       >
         <VStack gap={0.5}>
           <HStack gap={1}>
-            <TextHeadline as="p">Margin ratio</TextHeadline>
+            <Text as="p" font="headline">
+              Margin ratio
+            </Text>
             <Tag colorScheme="red">high</Tag>
           </HStack>
-          <TextBody as="p">Margin usage is high. Deposit funds to avoid liquidation</TextBody>
+          <Text as="p" font="body">
+            Margin usage is high. Deposit funds to avoid liquidation
+          </Text>
         </VStack>
         <ProgressBarWithFixedLabels
           startLabel={{ value: 60000, render: renderStartLabelNum }}

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

@@ -126,7 +126,9 @@ with a TypeAhead component.
 ```jsx
 <VStack gap={3}>
   <VStack>
-    <TextHeadline as="p">Default sentiment</TextHeadline>
+    <Text as="p" font="headline">
+      Default sentiment
+    </Text>
     <TextInput
       label="Campaign title"
       placeholder="Title"
@@ -135,7 +137,9 @@ with a TypeAhead component.
   </VStack>
 
   <VStack>
-    <TextHeadline as="p">Positive sentiment</TextHeadline>
+    <Text as="p" font="headline">
+      Positive sentiment
+    </Text>
     <TextInput
       label="Address"
       helperText="Valid BTC address"
@@ -146,7 +150,9 @@ with a TypeAhead component.
   </VStack>
 
   <VStack>
-    <TextHeadline as="p">Negative Sentiment</TextHeadline>
+    <Text as="p" font="headline">
+      Negative Sentiment
+    </Text>
     <TextInput
       label="Address"
       helperText="Invalid BTC address"

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

@@ -215,8 +215,10 @@ Note: The Tray component is built on top of the Drawer component and provides a
 | `animated` | `boolean` | No | `-` | - |
 | `animationType` | `none \| slide \| fade` | No | `-` | The animationType prop controls how the modal animates.  - slide slides in from the bottom - fade fades into view - none appears without an animation |
 | `disableCapturePanGestureToDismiss` | `boolean` | No | `false` | Prevents the Drawer from capturing pan gestures on children. Set to true when using a ScrollView as a child |
+| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Tray footer |
 | `handleBarAccessibilityLabel` | `string` | No | `-` | Accessibility label for handlebar |
 | `hardwareAccelerated` | `boolean` | No | `-` | Controls whether to force hardware acceleration for the underlying window. |
+| `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Tray header |
 | `hideHandleBar` | `boolean` | No | `false` | The HandleBar by default only is used for a bottom pinned drawer. This removes it. |
 | `key` | `Key \| null` | No | `-` | - |
 | `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |

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

@@ -100,14 +100,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );
@@ -162,14 +162,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );
@@ -224,14 +224,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );
@@ -286,14 +286,14 @@ function Example() {
           <UpsellCard
             {...card}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 {card.title}
-              </TextHeadline>
+              </Text>
             }
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 {card.description}
-              </TextLabel2>
+              </Text>
             }
           />
         );