@coinbase/cds-mcp-server 8.17.2 → 8.17.3

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

@@ -0,0 +1,301 @@
+# Tag
+
+A small label for categorizing or labeling content.
+
+## Import
+
+```jsx
+import { Tag } from '@coinbase/cds-mobile/tag/Tag'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Children to render within the Tag. |
+| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
+| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
+| `animated` | `boolean` | No | `-` | - |
+| `aspectRatio` | `string \| number` | No | `-` | - |
+| `background` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue30 \| blue40 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green30 \| green40 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange30 \| orange40 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow30 \| yellow40 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray30 \| gray40 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo30 \| indigo40 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink30 \| pink40 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple30 \| purple40 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red30 \| red40 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal30 \| teal40 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse30 \| chartreuse40 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderColor` | `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 | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `string \| number` | No | `-` | - |
+| `color` | `blue0 \| blue5 \| blue10 \| blue15 \| blue20 \| blue100 \| blue30 \| blue40 \| blue50 \| blue60 \| blue70 \| blue80 \| blue90 \| green0 \| green5 \| green10 \| green15 \| green20 \| green100 \| green30 \| green40 \| green50 \| green60 \| green70 \| green80 \| green90 \| orange0 \| orange5 \| orange10 \| orange15 \| orange20 \| orange100 \| orange30 \| orange40 \| orange50 \| orange60 \| orange70 \| orange80 \| orange90 \| yellow0 \| yellow5 \| yellow10 \| yellow15 \| yellow20 \| yellow100 \| yellow30 \| yellow40 \| yellow50 \| yellow60 \| yellow70 \| yellow80 \| yellow90 \| gray0 \| gray5 \| gray10 \| gray15 \| gray20 \| gray100 \| gray30 \| gray40 \| gray50 \| gray60 \| gray70 \| gray80 \| gray90 \| indigo0 \| indigo5 \| indigo10 \| indigo15 \| indigo20 \| indigo100 \| indigo30 \| indigo40 \| indigo50 \| indigo60 \| indigo70 \| indigo80 \| indigo90 \| pink0 \| pink5 \| pink10 \| pink15 \| pink20 \| pink100 \| pink30 \| pink40 \| pink50 \| pink60 \| pink70 \| pink80 \| pink90 \| purple0 \| purple5 \| purple10 \| purple15 \| purple20 \| purple100 \| purple30 \| purple40 \| purple50 \| purple60 \| purple70 \| purple80 \| purple90 \| red0 \| red5 \| red10 \| red15 \| red20 \| red100 \| red30 \| red40 \| red50 \| red60 \| red70 \| red80 \| red90 \| teal0 \| teal5 \| teal10 \| teal15 \| teal20 \| teal100 \| teal30 \| teal40 \| teal50 \| teal60 \| teal70 \| teal80 \| teal90 \| chartreuse0 \| chartreuse5 \| chartreuse10 \| chartreuse15 \| chartreuse20 \| chartreuse100 \| chartreuse30 \| chartreuse40 \| chartreuse50 \| chartreuse60 \| chartreuse70 \| chartreuse80 \| chartreuse90` | No | `-` | - |
+| `colorScheme` | `blue \| green \| yellow \| gray \| purple \| red` | No | `blue` | Specify the colorScheme of the Tag |
+| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `display` | `flex \| none` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
+| `flexBasis` | `string \| number` | No | `-` | - |
+| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
+| `flexGrow` | `number` | No | `-` | - |
+| `flexShrink` | `number` | No | `-` | - |
+| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
+| `font` | `inherit \| FontFamily` | No | `-` | - |
+| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
+| `fontSize` | `inherit \| FontSize` | No | `-` | - |
+| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `height` | `string \| number` | No | `-` | - |
+| `intent` | `promotional \| informational` | No | `informational` | Specify the intent of the Tag |
+| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `left` | `string \| number` | No | `-` | - |
+| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `maxHeight` | `string \| number` | No | `-` | - |
+| `maxWidth` | `string \| number` | No | `-` | Setting a custom max width for this tag will enable text truncation |
+| `minHeight` | `string \| number` | No | `-` | - |
+| `minWidth` | `string \| number` | No | `-` | - |
+| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `opacity` | `number \| AnimatedNode` | No | `-` | - |
+| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
+| `right` | `string \| number` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
+| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
+| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
+| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
+| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `top` | `string \| number` | No | `-` | - |
+| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
+| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
+| `width` | `string \| number` | No | `-` | - |
+| `zIndex` | `number` | No | `-` | - |
+
+
+## Examples
+
+### Informational (Default)
+
+Informational Tags are used to note a characteristic or state of an object. The relationship between the Tag and the other UI component should be easy to interpret for a user.
+
+```jsx
+<HStack gap={2} wrap>
+  <Tag colorScheme="green">Green</Tag>
+  <Tag colorScheme="blue">Blue</Tag>
+  <Tag colorScheme="yellow">Yellow</Tag>
+  <Tag colorScheme="purple">Purple</Tag>
+  <Tag colorScheme="red">Red</Tag>
+  <Tag colorScheme="gray">Gray</Tag>
+</HStack>
+```
+
+### Promotional
+
+Promotional Tags are for editorial, ephemeral communication. Terms like “New”, “Recommended”, “Beta”, “Hot”, “Trending”, fall into this Promotional Tag category.
+
+```jsx
+<HStack gap={2} wrap>
+  <Tag intent="promotional" colorScheme="green">
+    Green
+  </Tag>
+  <Tag intent="promotional" colorScheme="blue">
+    Blue
+  </Tag>
+  <Tag intent="promotional" colorScheme="yellow">
+    Yellow
+  </Tag>
+  <Tag intent="promotional" colorScheme="purple">
+    Purple
+  </Tag>
+  <Tag intent="promotional" colorScheme="red">
+    Red
+  </Tag>
+  <Tag intent="promotional" colorScheme="gray">
+    Gray
+  </Tag>
+</HStack>
+```
+
+### Working with Tags
+
+To get a better idea of what it workng with Tags is like, we've created some example UI components that use Tags.
+
+```jsx
+<HStack justifyContent="space-between" gap="2" alignItems="center">
+  <VStack gap={0.5}>
+    <HStack gap={1}>
+      <TextHeadline as="p">Tax account status</TextHeadline>
+      <Tag colorScheme="red">Not verified</Tag>
+    </HStack>
+    <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
+  </VStack>
+  <Button>Get started</Button>
+</HStack>
+```
+
+```jsx
+<HStack justifyContent="space-between" gap="2" alignItems="center">
+  <VStack gap={0.5}>
+    <HStack gap={1}>
+      <TextHeadline as="p">Tax account status</TextHeadline>
+      <Tag colorScheme="red">Not verified</Tag>
+    </HStack>
+    <TextBody as="p">Verify your info for tax reporting purposes.</TextBody>
+  </VStack>
+  <Button>Get started</Button>
+</HStack>
+```
+
+```jsx
+function MarginExample() {
+  const renderStartLabelNum = useCallback((num, disabled) => {
+    return (
+      <TextTitle3 disabled={disabled} as="span">
+        ${num.toLocaleString()} (10%)
+      </TextTitle3>
+    );
+  }, []);
+
+  const renderEndLabelNumStr = useCallback((num) => {
+    return `$${num.toLocaleString()}`;
+  }, []);
+
+  return (
+    <HStack gap={3}>
+      <VStack
+        justifyContent="space-between"
+        gap="2"
+        padding={2}
+        bordered
+        borderRadius={300}
+        maxWidth="50%"
+        background
+        elevation={1}
+      >
+        <VStack gap={0.5}>
+          <HStack gap={1}>
+            <TextHeadline as="p">Margin ratio</TextHeadline>
+            <Tag colorScheme="green">Low</Tag>
+          </HStack>
+          <TextBody as="p">
+            The portion of your balance being held on margin is low. No action is required.
+          </TextBody>
+        </VStack>
+        <ProgressBarWithFixedLabels
+          startLabel={{ value: 400, render: renderStartLabelNum }}
+          endLabel={{ value: 40000, render: renderEndLabelNumStr }}
+          labelPlacement="above"
+        >
+          <ProgressBar progress={0.1} color="bgPositive" />
+        </ProgressBarWithFixedLabels>
+      </VStack>
+      <VStack
+        justifyContent="space-between"
+        gap="2"
+        padding={2}
+        bordered
+        borderRadius={300}
+        maxWidth="50%"
+        background
+        elevation={1}
+      >
+        <VStack gap={0.5}>
+          <HStack gap={1}>
+            <TextHeadline as="p">Margin ratio</TextHeadline>
+            <Tag colorScheme="red">high</Tag>
+          </HStack>
+          <TextBody as="p">Margin usage is high. Deposit funds to avoid liquidation</TextBody>
+        </VStack>
+        <ProgressBarWithFixedLabels
+          startLabel={{ value: 60000, render: renderStartLabelNum }}
+          endLabel={{ value: 90000, render: renderEndLabelNumStr }}
+          labelPlacement="above"
+        >
+          <ProgressBar progress={0.65} color="bgNegative" />
+        </ProgressBarWithFixedLabels>
+      </VStack>
+    </HStack>
+  );
+}
+```
+
+```jsx
+<Box justifyContent="center">
+  <Group divider={Divider} width="420px" bordered borderRadius={300} background elevation={1}>
+    <ListCell
+      title={
+        <HStack gap={0.5}>
+          Bank account
+          <Tag colorScheme="green">No fees</Tag>
+        </HStack>
+      }
+      description={
+        <VStack gap={1} alignItems="flex-start">
+          Use a bank account to buy crypto and deposit or withdraw cash
+          <Tag intent="promotional">Recommended</Tag>
+        </VStack>
+      }
+      accessory="arrow"
+      onClick={console.log}
+      multiline
+      media={<IconButton name="bank" color="primary" />}
+    />
+    <ListCell
+      title="Paypal"
+      description="Use a Paypal account to buy crypto and deposit or withdraw funds"
+      accessory="arrow"
+      onClick={console.log}
+      multiline
+      media={<IconButton name="paypal" color="primary" />}
+    />
+    <ListCell
+      title="Debit card"
+      description="Use any Visa or Mastercard debit cart to make small investments"
+      accessory="arrow"
+      onClick={console.log}
+      multiline
+      media={<IconButton name="card" color="primary" />}
+    />
+  </Group>
+</Box>
+```
+
+

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

@@ -0,0 +1,212 @@
+# Text
+
+A generic text element.
+
+## Import
+
+```jsx
+import { Text } from '@coinbase/cds-mobile/typography/Text'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `adjustsFontSizeToFit` | `boolean` | No | `-` | Specifies whether font should be scaled down automatically to fit given style constraints. |
+| `align` | `end \| start \| center \| justify` | No | `start` | Specifies text alignment. On mobile, the value justify is only supported on iOS and fallbacks to start on Android. |
+| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
+| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
+| `allowFontScaling` | `boolean` | No | `-` | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is true. |
+| `android_hyphenationFrequency` | `none \| normal \| full` | No | `-` | Hyphenation strategy |
+| `animated` | `boolean` | No | `-` | - |
+| `aspectRatio` | `string \| number` | No | `-` | - |
+| `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 | `-` | - |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderColor` | `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 | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bottom` | `string \| number` | No | `-` | - |
+| `color` | `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 | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
+| `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
+| `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
+| `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
+| `display` | `flex \| none` | No | `-` | - |
+| `dynamicTypeRamp` | `title1 \| title2 \| title3 \| headline \| body \| caption2 \| caption1 \| footnote \| subheadline \| callout \| largeTitle` | No | `-` | The Dynamic Type scale ramp to apply to this element on iOS. |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `ellipsize` | `middle \| head \| tail \| clip` | No | `-` | Choose ellipsize mode. |
+| `ellipsizeMode` | `middle \| head \| tail \| clip` | No | `-` | This can be one of the following values:  - head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., ...wxyz - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. ab...yz - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., abcd... - clip - Lines are not drawn past the edge of the text container.  The default is tail.  numberOfLines must be set in conjunction with this prop.  > clip is working only for iOS |
+| `flexBasis` | `string \| number` | No | `-` | - |
+| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
+| `flexGrow` | `number` | No | `-` | - |
+| `flexShrink` | `number` | No | `-` | - |
+| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
+| `font` | `inherit \| FontFamily` | No | `body` | Set text font family. |
+| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
+| `fontSize` | `inherit \| FontSize` | No | `-` | - |
+| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `height` | `string \| number` | No | `-` | - |
+| `id` | `string` | No | `-` | Used to reference react managed views from native code. |
+| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `left` | `string \| number` | No | `-` | - |
+| `lineBreakMode` | `middle \| head \| tail \| clip` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
+| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
+| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
+| `maxHeight` | `string \| number` | No | `-` | - |
+| `maxWidth` | `string \| number` | No | `-` | - |
+| `minHeight` | `string \| number` | No | `-` | - |
+| `minWidth` | `string \| number` | No | `-` | - |
+| `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
+| `mono` | `boolean` | No | `-` | Use monospace font family. |
+| `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
+| `noWrap` | `boolean` | No | `false` | Set text to be in a single line. |
+| `numberOfLines` | `number` | No | `-` | Truncates text after wrapping to a defined number of lines. Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.  This prop is commonly used with ellipsizeMode. |
+| `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onLongPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on long press. e.g., onLongPress={this.increaseSize}> |
+| `onPress` | `((event: GestureResponderEvent) => void)` | No | `-` | This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). |
+| `onPressIn` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
+| `onTextLayout` | `((event: NativeSyntheticEvent<TextLayoutEventData>) => void)` | No | `-` | Invoked on Text layout |
+| `opacity` | `number \| AnimatedNode` | No | `-` | - |
+| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `ref` | `((instance: Text \| null) => void) \| RefObject<Text> \| null` | No | `-` | - |
+| `renderEmptyNode` | `boolean` | No | `-` | - |
+| `right` | `string \| number` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
+| `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
+| `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
+| `suppressHighlighting` | `boolean` | No | `-` | When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. |
+| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
+| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
+| `textBreakStrategy` | `simple \| highQuality \| balanced` | No | `-` | Set text break strategy on Android API Level 23+ default is highQuality. |
+| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
+| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
+| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `top` | `string \| number` | No | `-` | - |
+| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
+| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
+| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
+| `width` | `string \| number` | No | `-` | - |
+| `zIndex` | `number` | No | `-` | - |
+
+
+## Examples
+
+### Display
+
+Display styles are to be used very sparingly. Display styles supersede Title styles, so they are there for when you need to layer on more hierarchy.
+
+```jsx
+<VStack>
+  <Text font="display1">Display1</Text>
+  <Text font="display2">Display2</Text>
+  <Text font="display3">Display3</Text>
+</VStack>
+```
+
+### Title
+
+Title styles are used to establish the primary hierarchy in a layout. They should be used to label sections.
+
+```jsx
+<VStack>
+  <Text font="title1">Title1</Text>
+  <Text font="title2">Title2</Text>
+  <Text font="title3">Title3</Text>
+  <Text font="title4">Title4</Text>
+</VStack>
+```
+
+### Headline & Body
+
+Headline and body styles are your essential content styles. They’re versatile styles that can be used for paragraphs, data, labels for buttons.
+
+```jsx
+<VStack>
+  <Text font="headline" as="p">
+    Headline
+  </Text>
+  <Text font="body" as="p">
+    Body
+  </Text>
+</VStack>
+```
+
+### Label & Caption
+
+Label and caption styles are when you need to add hierarchy in your content. They ideally are used in conjunction with Headline and Body styles, but in extraordinarily dense interfaces they can replace Headline & Body should you need to present large data sets to users. They’re also great candidates for presenting numbers to the user as they have tabular numbers by default.
+
+```jsx
+<VStack>
+  <Text font="label1">Label1</Text>
+  <Text font="label2">Label2</Text>
+  <Text font="caption">Caption</Text>
+  <Text font="legal">Legal</Text>
+</VStack>
+```
+
+### Features
+
+All text components support a few numeric typography styles, overflow, text transformation, flex display, and underline. Please check the Props section for more details.
+
+### A11y
+
+On the web, there are different HTML elements to wrap texts with to communicated semantic meanings of the strings. Therefore, CDS does not make any assumptions about the semantic of the text but ask developers to choose the approriate semantic HTML element via the `as` prop.
+
+```jsx
+<Text font="display1" as="h1">Display</Text>
+
+// If we want large text but not as the page title
+<Text font="display1" as="p">Display</Text>
+```
+
+### Headings
+
+Headings help users understand the hierarchical page organization. All pages on the web should at least have a `<h1>` level heading providing the title or summary of the page. Screen readers users prefer that only the document title be `<h1>` on a page. Headings should NOT be used inside tables header elements (`<th>`).
+
+When using headings, it is confusing to screen reader users to skip heading levels to be more specific (ex. do not go from `<h2>` to ` <h4>`). However, it is permissible to use a higher heading level after a lower heading level, i.e. from `<h4>`to`<h2>`, if the outline of the page calls for it.
+
+One common misconception is that headings for a web app have consistent typography across different pages. That is not an accessibility requirement or a design guideline that our product designers follow. Therefore, based on the content layouts, product engineers should determine the approriate semantic tags to use for each string and choose the proper heading element when the texts convey hierarchical content information.
+
+Yale has a detailed [web accessibility article](https://usability.yale.edu/web-accessibility/articles/headings#:~:text=One%20of%20the%20most%20common,Do%20not%20overuse%20headings) about how to use headings if you want to learn more.
+
+In a nutshell, you can reference the following for the most common text semantics.
+
+- `h1` for page title (exactly one per page)
+- `h2`-`h4` for hierarchical section headings (CDS does not foresee the need for heading level 5 or 6 in Coinbase products).
+- `p` for paragraphs of text with default block display. It can be wrapped inside `blockquote`, `li`, or `label` elements for additional semantics.
+- `li` for bullet points in a list.
+- `time`, `abbr`, `sup`, `kbd`, etc, for granular semantics.
+- `pre` and `code` for preformatted code blocks.
+- `span` when no semantics are required (within buttons for example) and it also has default inline display.
+
+