@coinbase/cds-mcp-server 8.28.2 → 8.30.0

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

@@ -268,7 +268,7 @@ function SelectChipExample() {
 | `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` | `((MaxHeight<string \| number> \| { base?: MaxHeight<string \| number>; phone?: MaxHeight<string \| number> \| undefined; tablet?: MaxHeight<string \| number> \| undefined; desktop?: MaxHeight<string \| number> \| undefined; }) & MaxHeight<string \| number>) \| undefined` | No | `300` | Can optionally pass a maxHeight. |
-| `maxWidth` | `(((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & DimensionValue) & MaxWidth<string \| number>) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. Maximum width of input as a percentage string or number converted to pixels. |
+| `maxWidth` | `((MaxWidth<string \| number> \| { base?: MaxWidth<string \| number>; phone?: MaxWidth<string \| number> \| undefined; tablet?: MaxWidth<string \| number> \| undefined; desktop?: MaxWidth<string \| number> \| undefined; }) & MaxWidth<string \| number>) \| undefined` | No | `200` | If text content overflows, it will get truncated with an ellipsis. Maximum width of input as a percentage string or number converted to pixels. |
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `((MinWidth<string \| number> \| { base?: MinWidth<string \| number>; phone?: MinWidth<string \| number> \| undefined; tablet?: MinWidth<string \| number> \| undefined; desktop?: MinWidth<string \| number> \| undefined; }) & MinWidth<string \| number>) \| undefined` | No | `-` | Minimum width of input as a percentage string or number converted to pixels. |
 | `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |

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

@@ -273,6 +273,88 @@ 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.
+
+```jsx live
+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
+      controlAccessibilityLabel="Select multiple values"
+      displayValue={displayValue}
+      onChange={onChange}
+      options={exampleOptions}
+      placeholder="Choose options"
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### With max width
+
+```jsx live
+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(null);
+  return (
+    <VStack gap={2}>
+      <VStack gap={1}>
+        <Text>Default maxWidth (200px):</Text>
+        <SelectChip
+          accessibilityLabel="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"
+          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"
+          maxWidth="100%"
+          onChange={setValue}
+          options={exampleOptions}
+          placeholder="Choose an option"
+          value={value}
+        />
+      </VStack>
+    </VStack>
+  );
+}
+```
+
 ### Disabled
 
 ```jsx live
@@ -285,7 +367,7 @@ function ExampleDisabled() {
   ];
   const [value, setValue] = useState('1');
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    <VStack gap={2}>
       <SelectChip
         disabled
         accessibilityLabel="Select a value"
@@ -302,7 +384,7 @@ function ExampleDisabled() {
         placeholder="Choose an option"
         value={value}
       />
-    </div>
+    </VStack>
   );
 }
 ```
@@ -329,6 +411,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 |
@@ -337,6 +420,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` | `ResponsiveProp<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 |
@@ -349,6 +433,6 @@ function ExampleDisabled() {
 | `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` | `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/web/components/Sidebar.txt

@@ -57,9 +57,9 @@ function Example() {
           testID="sidebar-item-primary"
         >
           <Icon name="documentation" />
-          <TextHeadline as="span" color="foreground">
+          <Text as="span" font="headline" color="foreground">
             End item
-          </TextHeadline>
+          </Text>
         </HStack>
       </Pressable>
     );

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

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

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

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

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

@@ -27,7 +27,7 @@ function ExampleDefault() {
 
 ### Compact
 
-```jsx live
+```jsx lived
 function ExampleCompactNoStart() {
   const tabs = [
     { id: 'all', label: 'All' },
@@ -57,6 +57,39 @@ function ExampleWithPaddles() {
 }
 ```
 
+### 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 paddle on the left side. Try clicking tabs near the edges to see the difference.
+:::
+
+```jsx live
+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 as="p" font="body">
+        Default offset (50px)
+      </Text>
+      <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
+      <Text as="p" font="body">
+        Custom offset (100px)
+      </Text>
+      <TabbedChips
+        activeTab={activeTab}
+        onChange={setActiveTab}
+        tabs={tabs}
+        autoScrollOffset={100}
+      />
+    </VStack>
+  );
+}
+```
+
 ### With custom sized paddles
 
 :::tip Paddle styling
@@ -187,6 +220,7 @@ render(<Example />);
 | `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
 | `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
 | `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `autoScrollOffset` | `number` | No | `50` | X position offset when auto-scrolling to active tab (to avoid active tab being covered by the paddle on the left side, default: 50px) |
 | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
 | `classNames` | `{ root?: string; scrollContainer?: string \| undefined; tabs?: string \| undefined; } \| undefined` | No | `-` | - |
 | `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |

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

@@ -40,9 +40,9 @@ import { TableBody } from '@coinbase/cds-web/tables/TableBody'
     <TableRow>
       <TableCell height={320} alignItems="center" justifyContent="center">
         <Spinner size={4} color="primary" />
-        <TextHeadline as="p" spacingTop={2} color="foregroundMuted">
+        <Text as="p" font="headline" spacingTop={2} color="foregroundMuted">
           Loading content...
-        </TextHeadline>
+        </Text>
       </TableCell>
     </TableRow>
   </TableBody>

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

@@ -36,9 +36,9 @@ import { TableCaption } from '@coinbase/cds-web/tables/TableCaption'
 <Table bordered>
   <TableCaption>
     <VStack gap={1}>
-      <TextTitle2 as="h2" color="primary">
+      <Text as="h2" font="title2" color="primary">
         Project Team
-      </TextTitle2>
+      </Text>
       <Text as="p" color="foregroundMuted">
         Updated as of March 2024
       </Text>

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

@@ -18,9 +18,9 @@ import { TableCell } from '@coinbase/cds-web/tables/TableCell'
     <TableRow backgroundColor="bgAlternate">
       <TableCell title="First Header" />
       <TableCell>
-        <TextHeadline as="p" color="currentColor">
+        <Text as="p" font="headline" color="currentColor">
           Second Header
-        </TextHeadline>
+        </Text>
       </TableCell>
       <TableCell title="Third Header" />
     </TableRow>
@@ -47,12 +47,12 @@ import { TableCell } from '@coinbase/cds-web/tables/TableCell'
         subtitle="0.11882557"
       />
       <TableCell>
-        <TextHeadline as="h2" color="currentColor">
+        <Text as="h2" font="headline" color="currentColor">
           $2,221.01
-        </TextHeadline>
-        <TextLabel2 as="p" color="foregroundMuted">
+        </Text>
+        <Text as="p" font="label2" color="foregroundMuted">
           0.1519581 BTC
-        </TextLabel2>
+        </Text>
       </TableCell>
     </TableRow>
   </TableBody>

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

@@ -110,10 +110,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>
@@ -125,9 +129,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>
     );
   }, []);
 
@@ -149,12 +153,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 }}
@@ -176,10 +182,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/web/components/TextInput.txt

@@ -126,7 +126,9 @@ with a TypeAhead component.
 ```jsx live
 <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/web/components/Tray.txt

@@ -271,7 +271,8 @@ Note: The Tray component is an elevated container that is pinned to the bottom o
 | `closeAccessibilityHint` | `string` | No | `-` | Sets an accessible hint or description for the close button. On web, maps to aria-describedby and lists the id(s) of the element(s) that describe the element on which the attribute is set. On mobile, a string that helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label. |
 | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
 | `focusTabIndexElements` | `boolean` | No | `false` | Allow any element with tabIndex attribute to be focusable in FocusTrap, rather than only focusing specific interactive element types like button. This can be useful when having long content in a Modal. |
-| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional footer content that will be fixed to the bottom of the tray |
+| `footer` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Drawer footer |
+| `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode to render as the Drawer header |
 | `id` | `string` | No | `-` | HTML ID for the tray |
 | `key` | `Key \| null` | No | `-` | - |
 | `onBlur` | `(() => void)` | No | `-` | Callback fired when the overlay is pressed, or swipe to close |

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

@@ -98,14 +98,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>
             }
           />
         );
@@ -160,14 +160,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>
             }
           />
         );
@@ -222,14 +222,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>
             }
           />
         );
@@ -284,14 +284,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/web/hooks/useDimensions.txt

@@ -79,9 +79,9 @@ function Example() {
 
   return (
     <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
-      <TextHeadline>
+      <Text font="headline">
         This box is {width}px wide and {height}px tall
-      </TextHeadline>
+      </Text>
     </Box>
   );
 }
@@ -104,8 +104,8 @@ function Example() {
   return (
     <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
       <VStack gap={2}>
-        <TextHeadline>Width: {width}px</TextHeadline>
-        <TextHeadline>Current breakpoint: {currentBreakpoint || 'none'}</TextHeadline>
+        <Text font="headline">Width: {width}px</Text>
+        <Text font="headline">Current breakpoint: {currentBreakpoint || 'none'}</Text>
       </VStack>
     </Box>
   );

package/mcp-docs/web/hooks/useHasMounted.txt

@@ -41,7 +41,11 @@ const hasMounted = useHasMounted();
 
 // in component render
 {
-  hasMounted && isPhone && <TextHeadline as="h3">Welcome {username}!</TextHeadline>;
+  hasMounted && isPhone && (
+    <Text as="h3" font="headline">
+      Welcome {username}!
+    </Text>
+  );
 }
 ```
 
@@ -51,7 +55,7 @@ const hasMounted = useHasMounted();
 function Example() {
   const hasMounted = useHasMounted();
 
-  return <TextHeadline>Component has {hasMounted ? 'mounted' : 'not mounted'}</TextHeadline>;
+  return <Text font="headline">Component has {hasMounted ? 'mounted' : 'not mounted'}</Text>;
 }
 ```
 
@@ -69,7 +73,7 @@ function Example() {
     }
   }, [hasMounted]);
 
-  return <TextHeadline>{hasMounted ? `Current time: ${currentTime}` : 'Loading...'}</TextHeadline>;
+  return <Text font="headline">{hasMounted ? `Current time: ${currentTime}` : 'Loading...'}</Text>;
 }
 ```
 

package/mcp-docs/web/hooks/useIsoEffect.txt

@@ -48,7 +48,7 @@ function Example() {
 
   return (
     <VStack gap={2}>
-      <TextHeadline>Mouse Position</TextHeadline>
+      <Text font="headline">Mouse Position</Text>
       <Text>X: {position.x}</Text>
       <Text>Y: {position.y}</Text>
     </VStack>

package/mcp-docs/web/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>
   );
 }