@coinbase/cds-mcp-server 8.28.2 → 8.30.0

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.

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

@@ -38,7 +38,9 @@ Check [here](/components/layout/AccordionItem) for AccordionItem Props.
     media={<CellMedia active type="icon" name="wallet" title="BTC" />}
     onClick={(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/web/components/Alert.txt

@@ -117,7 +117,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 onClick={closeModal}>Save</Button>}

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

@@ -26,10 +26,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 as="p">
+  <Text as="p" 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>
 ```
 
@@ -47,10 +47,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 as="p">
+  <Text as="p" 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>
 ```
 
@@ -66,10 +66,10 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
   title="Some features are temporarily unavailable"
   variant="promotional"
 >
-  <TextLabel2 as="p">
+  <Text as="p" 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>
 ```
 
@@ -88,10 +88,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 as="p">
+    <Text as="p" 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"
@@ -100,9 +100,9 @@ The in-line Informational Banner is used to provide users with additional inform
     title="Some features are temporarily unavailable"
     variant="warning"
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       <Link to="https://www.coinbase.com">Retry</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```
@@ -121,9 +121,9 @@ You can customize `borderRadius` to soften contextual and in-line banners.
     title="Rounded contextual banner"
     variant="informational"
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       Rounded corners help align with softer surface treatments within a page section.
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     borderRadius={400}
@@ -135,9 +135,9 @@ You can customize `borderRadius` to soften contextual and in-line banners.
     title="Rounded inline banner"
     variant="promotional"
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       You can incrementally increase the radius to match surrounding cards or panels.
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```

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

@@ -32,9 +32,9 @@ function MyCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -113,7 +113,9 @@ function DynamicSizingCarousel() {
   return (
     <VStack gap={2}>
       <HStack justifyContent="flex-end" gap={2} alignItems="center">
-        <TextHeadline as="h3">Items per page</TextHeadline>
+        <Text as="h3" font="headline">
+          Items per page
+        </Text>
         <SegmentedTabs
           activeTab={selectedItemsPerPage}
           onChange={setSelectedItemsPerPage}
@@ -146,9 +148,9 @@ function DynamicSizingCarousel() {
                 }
                 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%"
               />
@@ -164,9 +166,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Start earning</ActionButton>}
                 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}>
@@ -175,9 +177,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="eths-apr-label" color="fgInverse" as="h3">
+                  <Text id="eths-apr-label" color="fgInverse" as="h3">
                     Up to 3.29% APR on ETHs
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -193,9 +195,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Start chatting</ActionButton>}
                 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}>
@@ -204,9 +206,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="join-the-community-label" color="fgInverse" as="h3">
+                  <Text id="join-the-community-label" color="fgInverse" as="h3">
                     Join the community
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -222,9 +224,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Get 60 days free</ActionButton>}
                 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}>
@@ -233,9 +235,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="coinbase-one-offer-label" color="fgInverse" as="h3">
+                  <Text id="coinbase-one-offer-label" color="fgInverse" as="h3">
                     Coinbase One offer
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -251,9 +253,9 @@ function DynamicSizingCarousel() {
                 action={<ActionButton isVisible={isVisible}>Get started</ActionButton>}
                 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}>
@@ -262,9 +264,9 @@ function DynamicSizingCarousel() {
                 }
                 minWidth="0"
                 title={
-                  <TextHeadline id="coinbase-card-label" color="fgInverse" as="h3">
+                  <Text id="coinbase-card-label" color="fgInverse" as="h3">
                     Coinbase Card
-                  </TextHeadline>
+                  </Text>
                 }
                 width="100%"
               />
@@ -367,9 +369,9 @@ function VariedSizingCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -475,9 +477,9 @@ function DragCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -488,7 +490,9 @@ function DragCarousel() {
   return (
     <VStack gap={2}>
       <HStack justifyContent="flex-end" gap={2} alignItems="center">
-        <TextHeadline as="h3">Drag</TextHeadline>
+        <Text as="h3" font="headline">
+          Drag
+        </Text>
         <SegmentedTabs activeTab={drag} onChange={setDrag} tabs={dragOptions} />
       </HStack>
       <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
@@ -532,9 +536,9 @@ function SnapModeCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -545,7 +549,9 @@ function SnapModeCarousel() {
   return (
     <VStack gap={2}>
       <HStack justifyContent="flex-end" gap={2} alignItems="center">
-        <TextHeadline as="h3">Snap mode</TextHeadline>
+        <Text as="h3" font="headline">
+          Snap mode
+        </Text>
         <SegmentedTabs activeTab={snapMode} onChange={setSnapMode} tabs={snapModeOptions} />
       </HStack>
       <Box style={{ marginInline: 'calc(-1 * var(--space-3))' }}>
@@ -591,9 +597,9 @@ function OverflowCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         onClick={isVisible ? () => console.log('clicked') : undefined}
@@ -665,9 +671,9 @@ If you have elements that are focusable, you can use `isVisible` render prop to
         }
         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%"
       />
@@ -686,11 +692,11 @@ You can customize the navigation and pagination components of the carousel using
 function CustomComponentsCarousel() {
   function SeeAllComponent({ style }) {
     return (
-      <TextHeadline style={style}>
+      <Text style={style}>
         <Link openInNewWindow href="https://coinbase.com/">
           See all
         </Link>
-      </TextHeadline>
+      </Text>
     );
   }
   function PaginationComponent({ totalPages, activePageIndex, onClickPage, style }) {
@@ -773,9 +779,9 @@ function CustomComponentsCarousel() {
           carousel: { gap: 'var(--space-1)' },
         }}
         title={
-          <TextHeadline as="h3">
+          <Text as="h3" font="headline">
             Learn more
-          </TextHeadline>
+          </Text>
         }
       >
         <CarouselItem id="recurring-buy" width={itemWidth}>
@@ -800,9 +806,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Start earning</ActionButton>}
               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}>
@@ -811,9 +817,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Up to 3.29% APR on ETHs
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -825,9 +831,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Start chatting</ActionButton>}
               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}>
@@ -836,9 +842,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Join the community
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -850,9 +856,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Get 60 days free</ActionButton>}
               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}>
@@ -861,9 +867,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Coinbase One offer
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -875,9 +881,9 @@ function CustomComponentsCarousel() {
               action={<ActionButton isVisible={isVisible}>Get started</ActionButton>}
               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}>
@@ -886,9 +892,9 @@ function CustomComponentsCarousel() {
               }
               minWidth="0"
               title={
-                <TextHeadline color="fgInverse" as="h3">
+                <Text color="fgInverse" as="h3" font="headline">
                   Coinbase Card
-                </TextHeadline>
+                </Text>
               }
               width="100%"
             />
@@ -1002,9 +1008,9 @@ function DynamicContentCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -1069,9 +1075,9 @@ function AnimatedCarousel() {
       >
         <ContainedAssetCard
           description={
-            <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+            <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
               ↗6.37%
-            </TextLabel2>
+            </Text>
           }
           header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
           subtitle={name}
@@ -1146,9 +1152,9 @@ function AnimatedSelectionCarousel() {
         >
           <ContainedAssetCard
             description={
-              <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+              <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
                 ↗6.37%
-              </TextLabel2>
+              </Text>
             }
             header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
             subtitle={name}
@@ -1205,9 +1211,9 @@ function HideNavigationAndPaginationCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -1282,9 +1288,9 @@ function AnimatedPaginationCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}
@@ -1359,9 +1365,9 @@ function ImperativeApiCarousel() {
     return (
       <ContainedAssetCard
         description={
-          <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+          <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
             ↗6.37%
-          </TextLabel2>
+          </Text>
         }
         header={<RemoteImage height="32px" source={imageUrl} width="32px" />}
         subtitle={name}

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

@@ -158,7 +158,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. |