@coinbase/cds-mcp-server 8.28.2 → 8.30.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.30.0 ((12/12/2025, 02:53 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.29.0 ((12/12/2025, 01:12 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.28.2 ((12/12/2025, 06:23 AM PST))
 
 This is an artificial version bump with no new change.

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

@@ -38,7 +38,9 @@ Check [here](/components/layout/AccordionItem) for AccordionItem Props.
     media={<CellMedia active type="icon" name="wallet" title="BTC" />}
     onPress={(itemKey) => console.log(itemKey)}
   >
-    <TextBody as="p">{loremIpsum.repeat(20)}</TextBody>
+    <Text as="p" font="body">
+      {loremIpsum.repeat(20)}
+    </Text>
   </AccordionItem>
 </Accordion>
 ```

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

@@ -111,7 +111,9 @@ function AlertOnModalExample() {
       openModal(
         <Modal visible onRequestClose={closeModal}>
           <ModalBody>
-            <TextBody as="p">{loremIpsum}</TextBody>
+            <Text as="p" font="body">
+              {loremIpsum}
+            </Text>
           </ModalBody>
           <ModalFooter
             primaryAction={<Button onPress={closeModal}>Save</Button>}

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

@@ -25,10 +25,10 @@ The global warning banner is used to communicate important alerts or warnings to
   primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
   secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
 >
-  <TextLabel2>
+  <Text font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -46,10 +46,10 @@ The In-line Error Banner is used to display specific error messages directly ben
   primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
   secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
 >
-  <TextLabel2>
+  <Text font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -65,10 +65,10 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
   title="Some features are temporarily unavailable"
   variant="promotional"
 >
-  <TextLabel2>
+  <Text font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -87,10 +87,10 @@ The in-line Informational Banner is used to provide users with additional inform
     primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
     secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
   >
-    <TextLabel2>
+    <Text font="label2">
       Your funds are safe. We’re looking into it and expect our usual service to return soon.
       <Link to="https://www.coinbase.com">Learn more</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     startIcon="warning"
@@ -99,9 +99,9 @@ The in-line Informational Banner is used to provide users with additional inform
     title="Some features are temporarily unavailable"
     variant="warning"
   >
-    <TextLabel2>
+    <Text font="label2">
       <Link to="https://www.coinbase.com">Retry</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```
@@ -120,9 +120,9 @@ Customize `borderRadius` to align contextual or in-line banners with surrounding
     title="Rounded contextual banner"
     variant="informational"
   >
-    <TextLabel2>
+    <Text font="label2">
       Use moderate rounding to soften banners that live within card-based layouts.
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     borderRadius={400}
@@ -134,9 +134,9 @@ Customize `borderRadius` to align contextual or in-line banners with surrounding
     title="Rounded inline banner"
     variant="promotional"
   >
-    <TextLabel2>
+    <Text font="label2">
       Larger radii can help inline banners feel cohesive with pill-shaped buttons or chips nearby.
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```

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

@@ -107,9 +107,9 @@ function DynamicSizingCarousel() {
           action="Start earning"
           dangerouslySetBackground="rgb(var(--purple70))"
           description={
-            <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+            <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
               Earn staking rewards on ETH by holding it on Coinbase
-            </TextLabel2>
+            </Text>
           }
           media={
             <Box left={16} position="relative" top={12}>
@@ -119,9 +119,9 @@ function DynamicSizingCarousel() {
           minWidth="0"
           onActionPress={NoopFn}
           title={
-            <TextHeadline color="fgInverse" as="h3">
+            <Text color="fgInverse" as="h3" font="headline">
               Up to 3.29% APR on ETHs
-            </TextHeadline>
+            </Text>
           }
           width="100%"
         />
@@ -417,9 +417,9 @@ Similar to web, you are provided the `isVisible` render prop, however it is not
         }
         minWidth="0"
         title={
-          <TextHeadline as="h3" id="recurring-buy-label">
+          <Text as="h3" font="headline" id="recurring-buy-label">
             Recurring Buy
-          </TextHeadline>
+          </Text>
         }
         width="100%"
       />
@@ -497,9 +497,9 @@ function CustomComponentsCarousel() {
           carousel: { gap: horizontalGap },
         }}
         title={
-          <TextHeadline as="h3">
+          <Text as="h3" font="headline">
             Learn more
-          </TextHeadline>
+          </Text>
         }
       >
         <CarouselItem id="recurring-buy" width={itemWidth}>
@@ -522,9 +522,9 @@ function CustomComponentsCarousel() {
             action="Start earning"
             dangerouslySetBackground="rgb(var(--purple70))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Earn staking rewards on ETH by holding it on Coinbase
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={12}>
@@ -534,9 +534,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Up to 3.29% APR on ETHs
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />
@@ -546,9 +546,9 @@ function CustomComponentsCarousel() {
             action="Start chatting"
             dangerouslySetBackground="rgb(var(--teal70))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Chat with other devs in our Discord community
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={4}>
@@ -558,9 +558,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Join the community
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />
@@ -570,9 +570,9 @@ function CustomComponentsCarousel() {
             action="Get 60 days free"
             dangerouslySetBackground="rgb(var(--blue80))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Use code NOV60 when you  sign up for Coinbase One
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={0}>
@@ -582,9 +582,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Coinbase One offer
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />
@@ -594,9 +594,9 @@ function CustomComponentsCarousel() {
             action="Get started"
             dangerouslySetBackground="rgb(var(--gray100))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Spend USDC to get rewards with our Visa® debit card
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={0}>
@@ -606,9 +606,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Coinbase Card
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />

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

@@ -0,0 +1,187 @@
+# Combobox
+
+A flexible combobox component for both single and multi-selection, built for mobile applications with comprehensive accessibility support.
+
+## Import
+
+```tsx
+import { Combobox } from '@coinbase/cds-mobile/alpha/combobox'
+```
+
+## Examples
+
+### A note on search logic
+
+We use [fuse.js](https://www.fusejs.io/) to power the fuzzy search logic for Combobox. You can override this search logic with your own using the `filterFunction` prop.
+
+### Multi-Select
+
+Basic multi-selection combobox with search.
+
+```jsx
+function MultiSelect() {
+  const multiSelectOptions = [
+    { 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' },
+    { value: '6', label: 'Option 6' },
+    { value: '7', label: 'Option 7' },
+    { value: '8', label: 'Option 8' },
+    { value: '9', label: 'Option 9' },
+    { value: '10', label: 'Option 10' },
+  ];
+  const { value, onChange } = useMultiSelect({ initialValue: ['1'] });
+
+  return (
+    <Combobox
+      label="Multi Select"
+      onChange={onChange}
+      options={multiSelectOptions}
+      placeholder="Search..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### Single Select
+
+Single selection combobox with an option to clear the current choice.
+
+```jsx
+function SingleSelect() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+  const [value, setValue] = useState(null);
+
+  return (
+    <Combobox
+      label="Single Select"
+      onChange={setValue}
+      options={singleSelectOptions}
+      placeholder="Search..."
+      value={value}
+    />
+  );
+}
+```
+
+### Controlled Search
+
+Manage the search text externally while letting the combobox stay in sync.
+
+```jsx
+function ControlledSearch() {
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+  const [searchText, setSearchText] = useState('');
+
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  return (
+    <Combobox
+      label="Controlled search"
+      onChange={onChange}
+      onSearch={setSearchText}
+      options={fruitOptions}
+      placeholder="Type to search..."
+      searchText={searchText}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### Helper Text
+
+Use helper text to guide how many selections a user should make.
+
+```jsx
+function HelperTextExample() {
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+
+  const teamOptions = [
+    { value: 'john', label: 'John Smith', description: 'Engineering' },
+    { value: 'jane', label: 'Jane Doe', description: 'Design' },
+    { value: 'bob', label: 'Bob Johnson', description: 'Product' },
+    { value: 'alice', label: 'Alice Williams', description: 'Engineering' },
+  ];
+
+  return (
+    <Combobox
+      helperText="Select up to 4 team members"
+      label="Team members"
+      onChange={onChange}
+      options={teamOptions}
+      placeholder="Search team members..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onChange` | `(value: Type extends multi ? SelectOptionValue \| SelectOptionValue[] \| null : SelectOptionValue \| null) => void` | Yes | `-` | - |
+| `options` | `SelectOptionList<Type, SelectOptionValue>` | Yes | `-` | Array of options to display in the select dropdown. Can be individual options or groups with label and options |
+| `value` | `string \| SelectOptionValue[] \| null` | Yes | `-` | - |
+| `ComboboxControlComponent` | `ComboboxControlComponent` | No | `-` | - |
+| `ComboboxDropdownComponent` | `SelectDropdownComponent` | No | `-` | - |
+| `SelectAllOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the Select All option |
+| `SelectControlComponent` | `SelectControlComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the select control |
+| `SelectDropdownComponent` | `SelectDropdownComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the dropdown container |
+| `SelectEmptyDropdownContentsComponent` | `SelectEmptyDropdownContentComponent` | No | `-` | Custom component to render when no options are available |
+| `SelectOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render individual options |
+| `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
+| `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
+| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
+| `closeButtonLabel` | `string` | No | `-` | Label for close button when combobox is open (mobile only) |
+| `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
+| `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
+| `defaultSearchText` | `string` | No | `-` | Default search text value for uncontrolled mode |
+| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
+| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `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 |
+| `filterFunction` | `((options: SelectOptionList<Type, SelectOptionValue>, searchText: string) => SelectOption<SelectOptionValue>[])` | No | `-` | Custom filter function for searching options |
+| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Helper text displayed below the select |
+| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
+| `hideSearchInput` | `boolean` | No | `-` | Hide the search input |
+| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
+| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
+| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
+| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
+| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
+| `onSearch` | `((searchText: string) => void)` | No | `-` | Search text change handler |
+| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
+| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Placeholder text displayed when no option is selected |
+| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
+| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
+| `searchText` | `string` | No | `-` | Controlled search text value |
+| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
+| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
+| `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
+| `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` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
+| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
+
+

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

@@ -23,9 +23,9 @@ function Example() {
     {
       title: '$4.15',
       description: (
-        <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;73.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'ETH',
       onPress: NoopFn,
@@ -55,9 +55,9 @@ function Example() {
     {
       title: '$309.43',
       description: (
-        <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;3.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Bitcoin',
       onPress: NoopFn,

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

@@ -30,9 +30,9 @@ function Example() {
           }
           meta={
             <Box marginLeft={-1}>
-              <TextLabel2 as="span" color="fgMuted" marginLeft={-1} numberOfLines={1}>
+              <Text as="span" font="label2" color="fgMuted" marginLeft={-1} numberOfLines={1}>
                 ・News・5 hrs
-              </TextLabel2>
+              </Text>
             </Box>
           }
           title="Description"
@@ -41,12 +41,12 @@ function Example() {
           body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
         />
@@ -55,9 +55,9 @@ function Example() {
         <ContentCardHeader
           meta={
             <Box marginLeft={-1}>
-              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
                 ・News・5 hrs
-              </TextLabel2>
+              </Text>
             </Box>
           }
           title="Brian Armstrong"
@@ -66,12 +66,12 @@ function Example() {
           body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
           media={
@@ -130,18 +130,18 @@ function Example() {
       <ContentCard gap={3}>
         <ContentCardBody
           body={
-            <TextBody as="p" paddingTop={0.5}>
+            <Text as="p" font="body" paddingTop={0.5}>
               Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s
-            </TextBody>
+            </Text>
           }
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
           media={
@@ -165,7 +165,9 @@ function Example() {
               <TextLegal as="span" color="fgMuted">
                 Reward
               </TextLegal>
-              <TextHeadline as="span">+$15 ACS</TextHeadline>
+              <Text as="span" font="headline">
+                +$15 ACS
+              </Text>
             </VStack>
           </HStack>
           <Button compact accessibilityLabel="Claim now" variant="secondary">
@@ -203,9 +205,9 @@ function Example() {
         }
         meta={
           <Box marginLeft={-1}>
-            <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+            <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
               @matdryhurst・7 mo
-            </TextLabel2>
+            </Text>
           </Box>
         }
         title="Mat Dryhurst"
@@ -220,9 +222,9 @@ function Example() {
           avatar="/img/card/content_card_custom_avatar_1.png"
           meta={
             <Box marginLeft={-1}>
-              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
                 ・News・5 hrs
-              </TextLabel2>
+              </Text>
             </Box>
           }
           title="Description"
@@ -240,12 +242,12 @@ function Example() {
           gap={1.5}
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
           paddingBottom={3}

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

@@ -18,12 +18,12 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
     body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
     label={
       <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-        <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+        <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
           BTC
-        </TextLabel2>
-        <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+        </Text>
+        <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
           ↗ 5.12%
-        </TextLabel2>
+        </Text>
       </HStack>
     }
   />

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

@@ -20,9 +20,9 @@ function Example() {
         avatar="/img/card/content_card_custom_avatar_1.png"
         meta={
           <Box marginLeft={-1}>
-            <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+            <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
               ・News・5 hrs
-            </TextLabel2>
+            </Text>
           </Box>
         }
         title="Description"