@coinbase/cds-mcp-server 8.28.2 → 8.30.0

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

@@ -0,0 +1,176 @@
+# Combobox
+
+A flexible combobox component for both single and multi-selection, built for web applications with comprehensive accessibility support.
+
+## Import
+
+```tsx
+import { Combobox } from '@coinbase/cds-web/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 live
+function MultiSelect() {
+const fruitOptions: SelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'honeydew', label: 'Honeydew' },
+  { value: 'kiwi', label: 'Kiwi' },
+  { value: 'lemon', label: 'Lemon' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'papaya', label: 'Papaya' },
+  { value: 'raspberry', label: 'Raspberry' },
+  { value: 'strawberry', label: 'Strawberry' },
+];
+
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
+
+  return (
+      <Combobox
+        label="Select fruits"
+        onChange={onChange}
+        options={fruitOptions}
+        placeholder="Search and select fruits..."
+        type="multi"
+        value={value}
+      />
+  );
+}
+```
+
+### Single Select
+
+Standard single-selection combobox with an option to clear the current value.
+
+```jsx live
+function SingleSelect() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <Combobox
+      label="Favorite fruit"
+      onChange={setValue}
+      options={singleSelectOptions}
+      placeholder="Search fruits..."
+      value={value}
+    />
+  );
+}
+```
+
+### Helper Text
+
+Communicate limits or guidance by pairing helper text with multi-select usage.
+
+```jsx live
+function HelperText() {
+const fruitOptions: SelectOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'honeydew', label: 'Honeydew' },
+  { value: 'kiwi', label: 'Kiwi' },
+  { value: 'lemon', label: 'Lemon' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'papaya', label: 'Papaya' },
+  { value: 'raspberry', label: 'Raspberry' },
+  { value: 'strawberry', label: 'Strawberry' },
+];
+
+  const { value, onChange } = useMultiSelect({ initialValue: ['apple', 'banana'] });
+
+  return (
+      <Combobox
+      helperText="Choose more than one fruit"
+        label="Select fruits"
+        onChange={onChange}
+        options={fruitOptions}
+        placeholder="Search and select fruits..."
+        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 | `-` | Custom ComboboxControlComponent to wrap SelectControlComponent. This component must be a stable reference |
+| `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` | `{ dropdown?: AriaHasPopupType; option?: string \| undefined; } \| undefined` | No | `-` | Accessibility roles for dropdown and option elements |
+| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | Accessory element rendered at the end of the cell (e.g., chevron). |
+| `className` | `string` | No | `-` | CSS class name for the root element |
+| `classNames` | `{ root?: string; control?: string \| undefined; controlStartNode?: string \| undefined; controlInputNode?: string \| undefined; controlValueNode?: string \| undefined; controlLabelNode?: string \| undefined; controlHelperTextNode?: string \| undefined; controlEndNode?: string \| undefined; dropdown?: string \| undefined; option?: string \| undefined; optionCell?: string \| undefined; optionContent?: string \| undefined; optionLabel?: string \| undefined; optionDescription?: string \| undefined; selectAllDivider?: string \| undefined; emptyContentsContainer?: string \| undefined; emptyContentsText?: string \| undefined; optionGroup?: string \| undefined; } \| undefined` | No | `-` | Custom class names for different parts of the select |
+| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
+| `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
+| `controlAccessibilityLabel` | `string` | No | `-` | Accessibility label for the control |
+| `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` | `CSSProperties` | No | `-` | Inline styles for the root element |
+| `styles` | `{ root?: CSSProperties; control?: CSSProperties \| undefined; controlStartNode?: CSSProperties \| undefined; controlInputNode?: CSSProperties \| undefined; controlValueNode?: CSSProperties \| undefined; controlLabelNode?: CSSProperties \| undefined; controlHelperTextNode?: CSSProperties \| undefined; controlEndNode?: CSSProperties \| undefined; controlBlendStyles?: InteractableBlendStyles \| undefined; dropdown?: CSSProperties \| undefined; option?: CSSProperties \| undefined; optionCell?: CSSProperties \| undefined; optionContent?: CSSProperties \| undefined; optionLabel?: CSSProperties \| undefined; optionDescription?: CSSProperties \| undefined; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: CSSProperties \| undefined; emptyContentsContainer?: CSSProperties \| undefined; emptyContentsText?: CSSProperties \| undefined; optionGroup?: CSSProperties \| undefined; } \| 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 | `foregroundMuted` | 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/web/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',
       onClick: 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',
       onClick: NoopFn,

package/mcp-docs/web/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/web/components/ContentCardBody.txt

@@ -18,12 +18,12 @@ import { ContentCardBody } from '@coinbase/cds-web/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/web/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"

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

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

package/mcp-docs/web/components/FullscreenModal.txt

@@ -73,8 +73,12 @@ function DefaultModal() {
 
   const primaryContent = (
     <VStack>
-      <TextTitle1 as="h1">Fullscreen Modal</TextTitle1>
-      <TextBody as="p">This is a test Fullscreen Modal with components composition.</TextBody>
+      <Text as="h1" font="title1">
+        Fullscreen Modal
+      </Text>
+      <Text as="p" font="body">
+        This is a test Fullscreen Modal with components composition.
+      </Text>
       <ListCell
         title="Bitcoin"
         description="BTC"
@@ -96,10 +100,14 @@ function DefaultModal() {
     <VStack borderRadius={300} elevation={1}>
       <Accordion defaultActiveKey="2">
         <AccordionItem itemKey="1" title="Accordion #1" subtitle="subtitle1">
-          <TextBody as="p">{loremIpsum}</TextBody>
+          <Text as="p" font="body">
+            {loremIpsum}
+          </Text>
         </AccordionItem>
         <AccordionItem itemKey="2" title="Accordion #2" subtitle="subtitle2">
-          <TextBody as="p">{loremIpsum}</TextBody>
+          <Text as="p" font="body">
+            {loremIpsum}
+          </Text>
         </AccordionItem>
       </Accordion>
     </VStack>

package/mcp-docs/web/components/GridColumn.txt

@@ -64,13 +64,19 @@ function FullBleedExample() {
   return (
     <Grid gap={0.5} templateColumns="100px 1fr 100px">
       <Item background="bg">
-        <TextBody as="p">Gutter</TextBody>
+        <Text as="p" font="body">
+          Gutter
+        </Text>
       </Item>
       <Item>
-        <TextBody as="p">Body</TextBody>
+        <Text as="p" font="body">
+          Body
+        </Text>
       </Item>
       <Item background="bg">
-        <TextBody as="p">Gutter</TextBody>
+        <Text as="p" font="body">
+          Gutter
+        </Text>
       </Item>
       <GridColumn
         // this is shorthand for first grid line to the last
@@ -81,7 +87,9 @@ function FullBleedExample() {
         background="bgAlternate"
         padding={2}
       >
-        <TextBody as="p">Full Bleed</TextBody>
+        <Text as="p" font="body">
+          Full Bleed
+        </Text>
       </GridColumn>
     </Grid>
   );

package/mcp-docs/web/components/InputChip.txt

@@ -153,7 +153,7 @@ function Example() {
 | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
-| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
 | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |

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

@@ -1268,14 +1268,15 @@ function AssetPriceWithDottedArea() {
           <SegmentedTab
             ref={ref}
             label={
-              <TextLabel1
+              <Text
+                font="label1"
                 style={{
                   transition: 'color 0.2s ease',
                   color: isActive ? assets.btc.color : undefined,
                 }}
               >
                 {label}
-              </TextLabel1>
+              </Text>
             }
             {...props}
           />

package/mcp-docs/web/components/MediaChip.txt

@@ -234,7 +234,7 @@ You can override the automatic spacing with custom values if needed.
 | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
 | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
-| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `200` | If text content overflows, it will get truncated with an ellipsis. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
 | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |

package/mcp-docs/web/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/web/components/PageHeader.txt

@@ -85,17 +85,17 @@ function Example() {
       />
       <Box padding={3} background="bgPositiveWash">
         <VStack gap={3} background="bgPrimaryWash">
-          <TextTitle2>Configure Your Trading Preferences</TextTitle2>
-          <TextBody>
+          <Text font="title2">Configure Your Trading Preferences</Text>
+          <Text font="body">
             Customize your trading experience by adjusting the settings below. These preferences
             will apply to all your trading activities and can be modified at any time.
-          </TextBody>
-          <TextTitle4>Order Types</TextTitle4>
-          <TextBody color="fgSecondary">
+          </Text>
+          <Text font="title4">Order Types</Text>
+          <Text font="body" color="fgSecondary">
             Choose your preferred default order types for buying and selling. Market orders execute
             immediately at current prices, while limit orders allow you to set specific price
             targets.
-          </TextBody>
+          </Text>
         </VStack>
       </Box>
     </>
@@ -123,10 +123,12 @@ function Example() {
           paddingY={10}
         >
           <HeroSquare name="bigWarning" />
-          <TextTitle1 as="h3">You need to X before you Y</TextTitle1>
-          <TextBody align="center" as="sub">
+          <Text as="h3" font="title1">
+            You need to X before you Y
+          </Text>
+          <Text font="body" align="center" as="sub">
             You&apos;ll need to [add funds] before you can [complete this transaction]
-          </TextBody>
+          </Text>
         </VStack>
       </Box>
     </VStack>

package/mcp-docs/web/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/web/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/web/components/ProgressCircle.txt

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