@coinbase/cds-mcp-server 8.28.2 → 8.29.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

@@ -362,6 +362,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/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>
             }
           />
         );

package/mcp-docs/mobile/hooks/useDimensions.txt

@@ -45,10 +45,10 @@ function Example() {
   return (
     <Box backgroundColor="bgAlternate" padding={3} borderRadius={300} width="100%">
       <VStack gap={2}>
-        <TextHeadline>
+        <Text font="headline">
           Screen dimensions: {screenWidth}x{screenHeight}
-        </TextHeadline>
-        <TextHeadline>Status bar height: {statusBarHeight}px</TextHeadline>
+        </Text>
+        <Text font="headline">Status bar height: {statusBarHeight}px</Text>
       </VStack>
     </Box>
   );
@@ -64,7 +64,7 @@ function Example() {
 
   return (
     <Box backgroundColor="bgAlternate" height={contentHeight} paddingTop={statusBarHeight}>
-      <TextHeadline>Content below status bar</TextHeadline>
+      <Text font="headline">Content below status bar</Text>
     </Box>
   );
 }

package/mcp-docs/mobile/hooks/useMergeRefs.txt

@@ -47,7 +47,7 @@ function Example() {
 
     return (
       <Box ref={refs} padding={3} background="bgAlternate" borderRadius={300}>
-        <TextBody>This box uses a merged ref</TextBody>
+        <Text font="body">This box uses a merged ref</Text>
       </Box>
     );
   });
@@ -76,7 +76,7 @@ function Example() {
   return (
     <VStack gap={2}>
       <Box ref={mergedRefs} padding={3} background="bgAlternate" borderRadius={300}>
-        <TextBody>This element is referenced by three refs</TextBody>
+        <Text font="body">This element is referenced by three refs</Text>
       </Box>
       <Button onClick={checkRefs}>Check Refs</Button>
     </VStack>
@@ -106,9 +106,9 @@ function Example() {
   return (
     <VStack gap={2}>
       <Box ref={refs} padding={3} background="bgAlternate" borderRadius={300} width="100%">
-        <TextBody>This box uses both function and object refs</TextBody>
+        <Text font="body">This box uses both function and object refs</Text>
       </Box>
-      <TextBody>Box width: {elementWidth}px</TextBody>
+      <Text font="body">Box width: {elementWidth}px</Text>
     </VStack>
   );
 }

package/mcp-docs/mobile/hooks/usePreviousValue.txt

@@ -39,8 +39,8 @@ function Example() {
   return (
     <VStack gap={3} alignItems="start">
       <VStack gap={1}>
-        <TextHeadline>Current count: {count}</TextHeadline>
-        <TextHeadline>Previous count: {previousCount ?? 'None'}</TextHeadline>
+        <Text font="headline">Current count: {count}</Text>
+        <Text font="headline">Previous count: {previousCount ?? 'None'}</Text>
       </VStack>
       <Button onClick={() => setCount(count + 1)}>Increment</Button>
     </VStack>
@@ -62,9 +62,9 @@ function Example() {
   return (
     <VStack gap={3} alignItems="start">
       <VStack gap={1}>
-        <TextHeadline>Name: {user.name}</TextHeadline>
-        <TextHeadline>Age: {user.age}</TextHeadline>
-        <TextHeadline>Previous age: {previousUser?.age ?? 'None'}</TextHeadline>
+        <Text font="headline">Name: {user.name}</Text>
+        <Text font="headline">Age: {user.age}</Text>
+        <Text font="headline">Previous age: {previousUser?.age ?? 'None'}</Text>
       </VStack>
       <Button onClick={updateAge}>Add Year</Button>
     </VStack>

package/mcp-docs/mobile/hooks/useRefMap.txt

@@ -56,7 +56,7 @@ function Example() {
         background="bgAlternate"
         borderRadius={300}
       >
-        <TextBody>This box is registered with ID 'box1'</TextBody>
+        <Text font="body">This box is registered with ID 'box1'</Text>
       </Box>
       <Button onClick={handleClick}>Get Box Dimensions</Button>
     </VStack>
@@ -103,7 +103,7 @@ function Example() {
           background="bgAlternate"
           borderRadius={300}
         >
-          <TextBody>Box 1</TextBody>
+          <Text font="body">Box 1</Text>
         </Box>
 
         <Box
@@ -112,7 +112,7 @@ function Example() {
           background="bgAlternate"
           borderRadius={300}
         >
-          <TextBody>Box 2</TextBody>
+          <Text font="body">Box 2</Text>
         </Box>
 
         <Box
@@ -121,7 +121,7 @@ function Example() {
           background="bgAlternate"
           borderRadius={300}
         >
-          <TextBody>Box 3</TextBody>
+          <Text font="body">Box 3</Text>
         </Box>
       </VStack>
     </VStack>
@@ -158,7 +158,7 @@ function Example() {
         background="bgAlternate"
         borderRadius={300}
       >
-        <TextBody>Box 1</TextBody>
+        <Text font="body">Box 1</Text>
       </Box>
 
       <Box
@@ -167,7 +167,7 @@ function Example() {
         background="bgAlternate"
         borderRadius={300}
       >
-        <TextBody>Box 2</TextBody>
+        <Text font="body">Box 2</Text>
       </Box>
 
       <Button onClick={logRefs}>Log Refs</Button>

package/mcp-docs/mobile/routes.txt

@@ -92,6 +92,7 @@
 - [InputChip](mobile/components/InputChip.txt): A Chip used for removable selections.
 - [IconButton](mobile/components/IconButton.txt): A Button with an Icon for content.
 - [ControlGroup](mobile/components/ControlGroup.txt): A layout component that arranges and manages a group of related controls, such as radio buttons, switches, or checkboxes.
+- [Combobox](mobile/components/Combobox.txt): A flexible combobox component for both single and multi-selection, built for mobile applications with comprehensive accessibility support.
 - [Chip](mobile/components/Chip.txt): A compact, interactive content element.
 - [CheckboxGroup](mobile/components/CheckboxGroup.txt): CheckboxGroup is a control component that allows users to select multiple options from a set of choices. It manages the state and layout of multiple checkbox inputs as a cohesive group.
 - [CheckboxCell](mobile/components/CheckboxCell.txt): A selectable cell that pairs a checkbox with a title and description for multi-choice selections.