@coinbase/cds-mcp-server 8.17.3 → 8.17.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (284) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/mcp-docs/mobile/components/Accordion.txt +11 -12
  3. package/mcp-docs/mobile/components/AccordionItem.txt +5 -6
  4. package/mcp-docs/mobile/components/Alert.txt +21 -22
  5. package/mcp-docs/mobile/components/AreaChart.txt +118 -119
  6. package/mcp-docs/mobile/components/Avatar.txt +82 -83
  7. package/mcp-docs/mobile/components/AvatarButton.txt +103 -104
  8. package/mcp-docs/mobile/components/Banner.txt +100 -101
  9. package/mcp-docs/mobile/components/BarChart.txt +120 -121
  10. package/mcp-docs/mobile/components/Box.txt +65 -66
  11. package/mcp-docs/mobile/components/BrowserBar.txt +38 -39
  12. package/mcp-docs/mobile/components/Button.txt +78 -79
  13. package/mcp-docs/mobile/components/ButtonGroup.txt +10 -11
  14. package/mcp-docs/mobile/components/Carousel.txt +103 -104
  15. package/mcp-docs/mobile/components/CartesianChart.txt +107 -108
  16. package/mcp-docs/mobile/components/CellMedia.txt +15 -16
  17. package/mcp-docs/mobile/components/Checkbox.txt +35 -36
  18. package/mcp-docs/mobile/components/CheckboxCell.txt +73 -74
  19. package/mcp-docs/mobile/components/CheckboxGroup.txt +24 -25
  20. package/mcp-docs/mobile/components/Chip.txt +67 -68
  21. package/mcp-docs/mobile/components/Coachmark.txt +42 -43
  22. package/mcp-docs/mobile/components/Collapsible.txt +15 -16
  23. package/mcp-docs/mobile/components/ContainedAssetCard.txt +16 -17
  24. package/mcp-docs/mobile/components/ContentCard.txt +99 -100
  25. package/mcp-docs/mobile/components/ContentCardBody.txt +23 -24
  26. package/mcp-docs/mobile/components/ContentCardFooter.txt +19 -20
  27. package/mcp-docs/mobile/components/ContentCardHeader.txt +33 -34
  28. package/mcp-docs/mobile/components/ContentCell.txt +102 -103
  29. package/mcp-docs/mobile/components/ControlGroup.txt +106 -107
  30. package/mcp-docs/mobile/components/DatePicker.txt +121 -122
  31. package/mcp-docs/mobile/components/Divider.txt +31 -32
  32. package/mcp-docs/mobile/components/DotCount.txt +15 -16
  33. package/mcp-docs/mobile/components/DotStatusColor.txt +12 -13
  34. package/mcp-docs/mobile/components/DotSymbol.txt +21 -22
  35. package/mcp-docs/mobile/components/Fallback.txt +49 -50
  36. package/mcp-docs/mobile/components/FloatingAssetCard.txt +13 -14
  37. package/mcp-docs/mobile/components/HStack.txt +99 -100
  38. package/mcp-docs/mobile/components/HeroSquare.txt +11 -12
  39. package/mcp-docs/mobile/components/Icon.txt +16 -17
  40. package/mcp-docs/mobile/components/IconButton.txt +104 -105
  41. package/mcp-docs/mobile/components/InputChip.txt +62 -63
  42. package/mcp-docs/mobile/components/Interactable.txt +72 -73
  43. package/mcp-docs/mobile/components/LineChart.txt +117 -118
  44. package/mcp-docs/mobile/components/Link.txt +113 -114
  45. package/mcp-docs/mobile/components/ListCell.txt +149 -128
  46. package/mcp-docs/mobile/components/LogoMark.txt +8 -9
  47. package/mcp-docs/mobile/components/LogoWordMark.txt +7 -8
  48. package/mcp-docs/mobile/components/Lottie.txt +39 -40
  49. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +11 -12
  50. package/mcp-docs/mobile/components/Modal.txt +36 -37
  51. package/mcp-docs/mobile/components/ModalBody.txt +5 -6
  52. package/mcp-docs/mobile/components/ModalFooter.txt +5 -6
  53. package/mcp-docs/mobile/components/ModalHeader.txt +5 -6
  54. package/mcp-docs/mobile/components/MultiContentModule.txt +107 -108
  55. package/mcp-docs/mobile/components/NavigationTitle.txt +13 -14
  56. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +20 -21
  57. package/mcp-docs/mobile/components/NudgeCard.txt +20 -21
  58. package/mcp-docs/mobile/components/Numpad.txt +108 -109
  59. package/mcp-docs/mobile/components/Overlay.txt +45 -46
  60. package/mcp-docs/mobile/components/PageFooter.txt +57 -58
  61. package/mcp-docs/mobile/components/PageHeader.txt +79 -80
  62. package/mcp-docs/mobile/components/PeriodSelector.txt +98 -99
  63. package/mcp-docs/mobile/components/Pictogram.txt +11 -12
  64. package/mcp-docs/mobile/components/Point.txt +21 -22
  65. package/mcp-docs/mobile/components/PortalProvider.txt +7 -8
  66. package/mcp-docs/mobile/components/Pressable.txt +67 -68
  67. package/mcp-docs/mobile/components/ProgressBar.txt +18 -19
  68. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +13 -14
  69. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +13 -14
  70. package/mcp-docs/mobile/components/ProgressCircle.txt +22 -23
  71. package/mcp-docs/mobile/components/Radio.txt +35 -36
  72. package/mcp-docs/mobile/components/RadioCell.txt +73 -74
  73. package/mcp-docs/mobile/components/RadioGroup.txt +35 -36
  74. package/mcp-docs/mobile/components/ReferenceLine.txt +15 -16
  75. package/mcp-docs/mobile/components/RemoteImage.txt +47 -48
  76. package/mcp-docs/mobile/components/RemoteImageGroup.txt +11 -12
  77. package/mcp-docs/mobile/components/RollingNumber.txt +130 -131
  78. package/mcp-docs/mobile/components/Scrubber.txt +19 -20
  79. package/mcp-docs/mobile/components/SearchInput.txt +77 -78
  80. package/mcp-docs/mobile/components/SectionHeader.txt +16 -17
  81. package/mcp-docs/mobile/components/SegmentedTabs.txt +105 -106
  82. package/mcp-docs/mobile/components/Select.txt +35 -36
  83. package/mcp-docs/mobile/components/SelectChip.txt +143 -144
  84. package/mcp-docs/mobile/components/SelectOption.txt +26 -27
  85. package/mcp-docs/mobile/components/SlideButton.txt +128 -129
  86. package/mcp-docs/mobile/components/Spacer.txt +27 -28
  87. package/mcp-docs/mobile/components/Sparkline.txt +18 -19
  88. package/mcp-docs/mobile/components/SparklineGradient.txt +18 -19
  89. package/mcp-docs/mobile/components/SparklineInteractive.txt +37 -38
  90. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +12 -13
  91. package/mcp-docs/mobile/components/Spinner.txt +15 -16
  92. package/mcp-docs/mobile/components/SpotIcon.txt +11 -12
  93. package/mcp-docs/mobile/components/SpotRectangle.txt +11 -12
  94. package/mcp-docs/mobile/components/SpotSquare.txt +11 -12
  95. package/mcp-docs/mobile/components/Stepper.txt +113 -114
  96. package/mcp-docs/mobile/components/SubBrandLogoMark.txt +8 -9
  97. package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +8 -9
  98. package/mcp-docs/mobile/components/Switch.txt +35 -36
  99. package/mcp-docs/mobile/components/TabIndicator.txt +12 -13
  100. package/mcp-docs/mobile/components/TabLabel.txt +28 -29
  101. package/mcp-docs/mobile/components/TabNavigation.txt +41 -42
  102. package/mcp-docs/mobile/components/TabbedChips.txt +38 -39
  103. package/mcp-docs/mobile/components/Tabs.txt +76 -77
  104. package/mcp-docs/mobile/components/Tag.txt +102 -103
  105. package/mcp-docs/mobile/components/Text.txt +91 -92
  106. package/mcp-docs/mobile/components/TextInput.txt +107 -108
  107. package/mcp-docs/mobile/components/ThemeProvider.txt +8 -9
  108. package/mcp-docs/mobile/components/Toast.txt +82 -83
  109. package/mcp-docs/mobile/components/Tooltip.txt +20 -21
  110. package/mcp-docs/mobile/components/TopNavBar.txt +55 -56
  111. package/mcp-docs/mobile/components/Tour.txt +18 -19
  112. package/mcp-docs/mobile/components/Tray.txt +43 -44
  113. package/mcp-docs/mobile/components/UpsellCard.txt +16 -17
  114. package/mcp-docs/mobile/components/VStack.txt +99 -100
  115. package/mcp-docs/mobile/components/XAxis.txt +25 -26
  116. package/mcp-docs/mobile/components/YAxis.txt +26 -27
  117. package/mcp-docs/mobile/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
  118. package/mcp-docs/mobile/getting-started/installation.txt +57 -0
  119. package/mcp-docs/mobile/getting-started/introduction.txt +3 -0
  120. package/mcp-docs/mobile/getting-started/playground.txt +3 -0
  121. package/mcp-docs/mobile/getting-started/styling.txt +84 -0
  122. package/mcp-docs/mobile/getting-started/theming.txt +286 -0
  123. package/mcp-docs/mobile/hooks/useDimensions.txt +27 -2
  124. package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
  125. package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
  126. package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +67 -2
  127. package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
  128. package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
  129. package/mcp-docs/mobile/hooks/useTheme.txt +213 -2
  130. package/mcp-docs/mobile/routes.txt +8 -1
  131. package/mcp-docs/web/components/Accordion.txt +12 -13
  132. package/mcp-docs/web/components/AccordionItem.txt +5 -6
  133. package/mcp-docs/web/components/Alert.txt +24 -25
  134. package/mcp-docs/web/components/AreaChart.txt +137 -138
  135. package/mcp-docs/web/components/Avatar.txt +91 -92
  136. package/mcp-docs/web/components/AvatarButton.txt +113 -114
  137. package/mcp-docs/web/components/Banner.txt +101 -102
  138. package/mcp-docs/web/components/BarChart.txt +367 -368
  139. package/mcp-docs/web/components/Box.txt +65 -66
  140. package/mcp-docs/web/components/Button.txt +81 -82
  141. package/mcp-docs/web/components/ButtonGroup.txt +10 -11
  142. package/mcp-docs/web/components/Calendar.txt +56 -57
  143. package/mcp-docs/web/components/Carousel.txt +116 -117
  144. package/mcp-docs/web/components/CartesianChart.txt +357 -358
  145. package/mcp-docs/web/components/CellMedia.txt +14 -15
  146. package/mcp-docs/web/components/Checkbox.txt +22 -23
  147. package/mcp-docs/web/components/CheckboxCell.txt +70 -71
  148. package/mcp-docs/web/components/CheckboxGroup.txt +15 -16
  149. package/mcp-docs/web/components/Chip.txt +67 -68
  150. package/mcp-docs/web/components/Coachmark.txt +69 -70
  151. package/mcp-docs/web/components/Collapsible.txt +15 -16
  152. package/mcp-docs/web/components/ContainedAssetCard.txt +108 -109
  153. package/mcp-docs/web/components/ContentCard.txt +101 -102
  154. package/mcp-docs/web/components/ContentCardBody.txt +23 -24
  155. package/mcp-docs/web/components/ContentCardFooter.txt +19 -20
  156. package/mcp-docs/web/components/ContentCardHeader.txt +33 -34
  157. package/mcp-docs/web/components/ContentCell.txt +85 -86
  158. package/mcp-docs/web/components/ControlGroup.txt +108 -109
  159. package/mcp-docs/web/components/DatePicker.txt +59 -60
  160. package/mcp-docs/web/components/Divider.txt +31 -32
  161. package/mcp-docs/web/components/DotCount.txt +17 -18
  162. package/mcp-docs/web/components/DotStatusColor.txt +12 -13
  163. package/mcp-docs/web/components/DotSymbol.txt +24 -25
  164. package/mcp-docs/web/components/Dropdown.txt +31 -32
  165. package/mcp-docs/web/components/Fallback.txt +49 -50
  166. package/mcp-docs/web/components/FloatingAssetCard.txt +108 -109
  167. package/mcp-docs/web/components/FullscreenAlert.txt +20 -21
  168. package/mcp-docs/web/components/FullscreenModal.txt +28 -29
  169. package/mcp-docs/web/components/FullscreenModalLayout.txt +19 -20
  170. package/mcp-docs/web/components/Grid.txt +106 -107
  171. package/mcp-docs/web/components/GridColumn.txt +96 -97
  172. package/mcp-docs/web/components/HStack.txt +101 -102
  173. package/mcp-docs/web/components/HeroSquare.txt +12 -13
  174. package/mcp-docs/web/components/Icon.txt +27 -28
  175. package/mcp-docs/web/components/IconButton.txt +117 -118
  176. package/mcp-docs/web/components/InputChip.txt +62 -63
  177. package/mcp-docs/web/components/Interactable.txt +75 -76
  178. package/mcp-docs/web/components/LineChart.txt +366 -367
  179. package/mcp-docs/web/components/Link.txt +114 -115
  180. package/mcp-docs/web/components/ListCell.txt +157 -136
  181. package/mcp-docs/web/components/LogoMark.txt +8 -9
  182. package/mcp-docs/web/components/LogoWordMark.txt +7 -8
  183. package/mcp-docs/web/components/Lottie.txt +44 -45
  184. package/mcp-docs/web/components/LottieStatusAnimation.txt +11 -12
  185. package/mcp-docs/web/components/MediaQueryProvider.txt +7 -8
  186. package/mcp-docs/web/components/Modal.txt +69 -66
  187. package/mcp-docs/web/components/ModalBody.txt +5 -6
  188. package/mcp-docs/web/components/ModalFooter.txt +5 -6
  189. package/mcp-docs/web/components/ModalHeader.txt +5 -6
  190. package/mcp-docs/web/components/MultiContentModule.txt +109 -110
  191. package/mcp-docs/web/components/NavigationBar.txt +18 -19
  192. package/mcp-docs/web/components/NavigationTitle.txt +7 -8
  193. package/mcp-docs/web/components/NavigationTitleSelect.txt +9 -10
  194. package/mcp-docs/web/components/NudgeCard.txt +61 -62
  195. package/mcp-docs/web/components/Overlay.txt +57 -58
  196. package/mcp-docs/web/components/PageFooter.txt +77 -78
  197. package/mcp-docs/web/components/PageHeader.txt +107 -108
  198. package/mcp-docs/web/components/Pagination.txt +115 -116
  199. package/mcp-docs/web/components/PeriodSelector.txt +158 -159
  200. package/mcp-docs/web/components/Pictogram.txt +13 -14
  201. package/mcp-docs/web/components/Point.txt +169 -170
  202. package/mcp-docs/web/components/PortalProvider.txt +6 -7
  203. package/mcp-docs/web/components/Pressable.txt +73 -74
  204. package/mcp-docs/web/components/ProgressBar.txt +20 -21
  205. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +15 -16
  206. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +15 -16
  207. package/mcp-docs/web/components/ProgressCircle.txt +24 -25
  208. package/mcp-docs/web/components/Radio.txt +22 -23
  209. package/mcp-docs/web/components/RadioCell.txt +83 -84
  210. package/mcp-docs/web/components/RadioGroup.txt +22 -23
  211. package/mcp-docs/web/components/ReferenceLine.txt +22 -23
  212. package/mcp-docs/web/components/RemoteImage.txt +49 -50
  213. package/mcp-docs/web/components/RemoteImageGroup.txt +11 -12
  214. package/mcp-docs/web/components/RollingNumber.txt +131 -132
  215. package/mcp-docs/web/components/Scrubber.txt +22 -23
  216. package/mcp-docs/web/components/SearchInput.txt +29 -30
  217. package/mcp-docs/web/components/SectionHeader.txt +98 -99
  218. package/mcp-docs/web/components/SegmentedTabs.txt +109 -110
  219. package/mcp-docs/web/components/Select.txt +22 -23
  220. package/mcp-docs/web/components/SelectChip.txt +134 -135
  221. package/mcp-docs/web/components/SelectOption.txt +31 -32
  222. package/mcp-docs/web/components/Sidebar.txt +109 -110
  223. package/mcp-docs/web/components/SidebarItem.txt +6 -7
  224. package/mcp-docs/web/components/SidebarMoreMenu.txt +5 -6
  225. package/mcp-docs/web/components/Spacer.txt +57 -58
  226. package/mcp-docs/web/components/Sparkline.txt +18 -19
  227. package/mcp-docs/web/components/SparklineGradient.txt +18 -19
  228. package/mcp-docs/web/components/SparklineInteractive.txt +34 -35
  229. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +12 -13
  230. package/mcp-docs/web/components/Spinner.txt +15 -16
  231. package/mcp-docs/web/components/SpotIcon.txt +12 -13
  232. package/mcp-docs/web/components/SpotRectangle.txt +12 -13
  233. package/mcp-docs/web/components/SpotSquare.txt +12 -13
  234. package/mcp-docs/web/components/Stepper.txt +119 -120
  235. package/mcp-docs/web/components/SubBrandLogoMark.txt +8 -9
  236. package/mcp-docs/web/components/SubBrandLogoWordMark.txt +8 -9
  237. package/mcp-docs/web/components/Switch.txt +23 -24
  238. package/mcp-docs/web/components/TabIndicator.txt +12 -13
  239. package/mcp-docs/web/components/TabLabel.txt +28 -29
  240. package/mcp-docs/web/components/TabNavigation.txt +41 -42
  241. package/mcp-docs/web/components/TabbedChips.txt +38 -39
  242. package/mcp-docs/web/components/Table.txt +17 -18
  243. package/mcp-docs/web/components/TableBody.txt +9 -10
  244. package/mcp-docs/web/components/TableCaption.txt +13 -14
  245. package/mcp-docs/web/components/TableCell.txt +21 -22
  246. package/mcp-docs/web/components/TableCellFallback.txt +16 -17
  247. package/mcp-docs/web/components/TableFooter.txt +9 -10
  248. package/mcp-docs/web/components/TableHeader.txt +10 -11
  249. package/mcp-docs/web/components/TableRow.txt +13 -14
  250. package/mcp-docs/web/components/Tabs.txt +94 -95
  251. package/mcp-docs/web/components/Tag.txt +106 -107
  252. package/mcp-docs/web/components/Text.txt +110 -111
  253. package/mcp-docs/web/components/TextInput.txt +32 -33
  254. package/mcp-docs/web/components/ThemeProvider.txt +27 -28
  255. package/mcp-docs/web/components/TileButton.txt +37 -38
  256. package/mcp-docs/web/components/Toast.txt +82 -83
  257. package/mcp-docs/web/components/Tooltip.txt +22 -23
  258. package/mcp-docs/web/components/Tour.txt +21 -22
  259. package/mcp-docs/web/components/Tray.txt +23 -24
  260. package/mcp-docs/web/components/UpsellCard.txt +16 -17
  261. package/mcp-docs/web/components/VStack.txt +101 -102
  262. package/mcp-docs/web/components/XAxis.txt +25 -26
  263. package/mcp-docs/web/components/YAxis.txt +26 -27
  264. package/mcp-docs/web/getting-started/{mcp-server.txt → ai-overview.txt} +51 -37
  265. package/mcp-docs/web/getting-started/installation.txt +103 -0
  266. package/mcp-docs/web/getting-started/introduction.txt +3 -0
  267. package/mcp-docs/web/getting-started/playground.txt +3 -0
  268. package/mcp-docs/web/getting-started/styling.txt +161 -0
  269. package/mcp-docs/web/getting-started/templates.txt +121 -0
  270. package/mcp-docs/web/getting-started/theming.txt +426 -0
  271. package/mcp-docs/web/hooks/useBreakpoints.txt +30 -2
  272. package/mcp-docs/web/hooks/useDimensions.txt +61 -2
  273. package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
  274. package/mcp-docs/web/hooks/useHasMounted.txt +22 -2
  275. package/mcp-docs/web/hooks/useIsoEffect.txt +18 -2
  276. package/mcp-docs/web/hooks/useMediaQuery.txt +22 -2
  277. package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
  278. package/mcp-docs/web/hooks/useOverlayContentContext.txt +64 -2
  279. package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
  280. package/mcp-docs/web/hooks/useRefMap.txt +178 -0
  281. package/mcp-docs/web/hooks/useScrollBlocker.txt +21 -2
  282. package/mcp-docs/web/hooks/useTheme.txt +261 -2
  283. package/mcp-docs/web/routes.txt +9 -1
  284. package/package.json +1 -1
@@ -4,25 +4,10 @@ A container that can be expanded or collapsed.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { Collapsible } from '@coinbase/cds-web/collapsible/Collapsible'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Collapsible content |
16
- | `collapsed` | `boolean` | Yes | `true` | Expand/collapse state of the content. |
17
- | `dangerouslyDisableOverflowHidden` | `boolean` | No | `-` | This option may break animation. Only use this if your container has fixed height or width. |
18
- | `direction` | `horizontal \| vertical` | No | `vertical` | Direction the content should expand/collapse to |
19
- | `key` | `Key \| null` | No | `-` | - |
20
- | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | Max height of the content. Overflow content will be scrollable. |
21
- | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | Max width of the content. Overflow content will be scrollable. |
22
- | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
23
- | `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 |
24
-
25
-
26
11
  ## Examples
27
12
 
28
13
  ### Basic Collapsible
@@ -117,4 +102,18 @@ function Horizontal() {
117
102
  }
118
103
  ```
119
104
 
105
+ ## Props
106
+
107
+ | Prop | Type | Required | Default | Description |
108
+ | --- | --- | --- | --- | --- |
109
+ | `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Collapsible content |
110
+ | `collapsed` | `boolean` | Yes | `true` | Expand/collapse state of the content. |
111
+ | `dangerouslyDisableOverflowHidden` | `boolean` | No | `-` | This option may break animation. Only use this if your container has fixed height or width. |
112
+ | `direction` | `horizontal \| vertical` | No | `vertical` | Direction the content should expand/collapse to |
113
+ | `key` | `Key \| null` | No | `-` | - |
114
+ | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | Max height of the content. Overflow content will be scrollable. |
115
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | Max width of the content. Overflow content will be scrollable. |
116
+ | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
117
+ | `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 |
118
+
120
119
 
@@ -4,118 +4,10 @@ A card component for displaying and managing asset holdings.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { ContainedAssetCard } from '@coinbase/cds-web/cards/ContainedAssetCard'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | - |
16
- | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | - |
17
- | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
18
- | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
19
- | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
20
- | `as` | `div` | No | `-` | - |
21
- | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
22
- | `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 | `bgAlternate` | - |
23
- | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
24
- | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
25
- | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
26
- | `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 | `-` | - |
27
- | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
28
- | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `500` | - |
29
- | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
30
- | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
31
- | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
32
- | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
33
- | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
34
- | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
35
- | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
36
- | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
37
- | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
38
- | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
39
- | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
40
- | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
41
- | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
42
- | `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 | `-` | - |
43
- | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
44
- | `dangerouslySetBackground` | `string` | No | `-` | - |
45
- | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
46
- | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
47
- | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
48
- | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
49
- | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `row` | - |
50
- | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
51
- | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
52
- | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
53
- | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
54
- | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
55
- | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
56
- | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
57
- | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
58
- | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
59
- | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
60
- | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
61
- | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
62
- | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
63
- | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
64
- | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
65
- | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
66
- | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
67
- | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
68
- | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
69
- | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
70
- | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
71
- | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
72
- | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
73
- | `height` | `ResponsiveProp<Height<string \| number>>` | No | `156` | - |
74
- | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
75
- | `key` | `Key \| null` | No | `-` | - |
76
- | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
77
- | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
78
- | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
79
- | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
80
- | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
81
- | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
82
- | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
83
- | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
84
- | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
85
- | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
86
- | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
87
- | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
88
- | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `size === 'l' ? containedAssetCardLargeMinWidth : containedAssetCardSmallMinWidth` | - |
89
- | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
90
- | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
91
- | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `hidden` | - |
92
- | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
93
- | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
94
- | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
95
- | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
96
- | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
97
- | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
98
- | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
99
- | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
100
- | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
101
- | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
102
- | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
103
- | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
104
- | `size` | `s \| l` | No | `s` | - |
105
- | `style` | `CSSProperties` | No | `-` | - |
106
- | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
107
- | `testID` | `string` | No | `contained-asset-card` | 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 |
108
- | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
109
- | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
110
- | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
111
- | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
112
- | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
113
- | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
114
- | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
115
- | `width` | `ResponsiveProp<Width<string \| number>>` | No | `size === 'l' ? containedAssetCardLargeWidth : containedAssetCardSmallWidth` | - |
116
- | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
117
-
118
-
119
11
  ## Examples
120
12
 
121
13
  ### Basic example
@@ -230,4 +122,111 @@ function Example() {
230
122
  }
231
123
  ```
232
124
 
125
+ ## Props
126
+
127
+ | Prop | Type | Required | Default | Description |
128
+ | --- | --- | --- | --- | --- |
129
+ | `header` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | - |
130
+ | `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | - |
131
+ | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
132
+ | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
133
+ | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
134
+ | `as` | `div` | No | `-` | - |
135
+ | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
136
+ | `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 | `bgAlternate` | - |
137
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
138
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
139
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
140
+ | `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 | `-` | - |
141
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
142
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `500` | - |
143
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
144
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
145
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
146
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
147
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
148
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
149
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
150
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
151
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
152
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
153
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
154
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
155
+ | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
156
+ | `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 | `-` | - |
157
+ | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
158
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
159
+ | `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
160
+ | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
161
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
162
+ | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
163
+ | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `row` | - |
164
+ | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
165
+ | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
166
+ | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
167
+ | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
168
+ | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
169
+ | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
170
+ | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
171
+ | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
172
+ | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
173
+ | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
174
+ | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
175
+ | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
176
+ | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
177
+ | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
178
+ | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
179
+ | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
180
+ | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
181
+ | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
182
+ | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
183
+ | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
184
+ | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
185
+ | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
186
+ | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
187
+ | `height` | `ResponsiveProp<Height<string \| number>>` | No | `156` | - |
188
+ | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
189
+ | `key` | `Key \| null` | No | `-` | - |
190
+ | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
191
+ | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
192
+ | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
193
+ | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
194
+ | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
195
+ | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
196
+ | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
197
+ | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
198
+ | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
199
+ | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
200
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
201
+ | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
202
+ | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `size === 'l' ? containedAssetCardLargeMinWidth : containedAssetCardSmallMinWidth` | - |
203
+ | `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
204
+ | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
205
+ | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `hidden` | - |
206
+ | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
207
+ | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
208
+ | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
209
+ | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
210
+ | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
211
+ | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
212
+ | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
213
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
214
+ | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
215
+ | `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
216
+ | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
217
+ | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
218
+ | `size` | `s \| l` | No | `s` | - |
219
+ | `style` | `CSSProperties` | No | `-` | - |
220
+ | `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
221
+ | `testID` | `string` | No | `contained-asset-card` | 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 |
222
+ | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
223
+ | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
224
+ | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
225
+ | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
226
+ | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
227
+ | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
228
+ | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
229
+ | `width` | `ResponsiveProp<Width<string \| number>>` | No | `size === 'l' ? containedAssetCardLargeWidth : containedAssetCardSmallWidth` | - |
230
+ | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
231
+
233
232
 
@@ -4,111 +4,10 @@ A flexible card component for displaying content.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { ContentCard } from '@coinbase/cds-web/cards/ContentCard'
9
9
  ```
10
10
 
11
- ## Props
12
-
13
- | Prop | Type | Required | Default | Description |
14
- | --- | --- | --- | --- | --- |
15
- | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
16
- | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
17
- | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
18
- | `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
19
- | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
20
- | `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 | `-` | - |
21
- | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
22
- | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
23
- | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
24
- | `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 | `-` | - |
25
- | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
26
- | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
27
- | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
28
- | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
29
- | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
30
- | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
31
- | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
32
- | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
33
- | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
34
- | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
35
- | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
36
- | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
37
- | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
38
- | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
39
- | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
40
- | `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 | `-` | - |
41
- | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
42
- | `dangerouslySetBackground` | `string` | No | `-` | - |
43
- | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
44
- | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
45
- | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
46
- | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
47
- | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
48
- | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
49
- | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
50
- | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
51
- | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
52
- | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
53
- | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
54
- | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
55
- | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
56
- | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
57
- | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
58
- | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
59
- | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
60
- | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
61
- | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
62
- | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
63
- | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
64
- | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
65
- | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
66
- | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
67
- | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
68
- | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
69
- | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
70
- | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
71
- | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
72
- | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
73
- | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
74
- | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
75
- | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
76
- | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
77
- | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
78
- | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
79
- | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
80
- | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
81
- | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
82
- | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
83
- | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
84
- | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
85
- | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
86
- | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
87
- | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
88
- | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
89
- | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
90
- | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
91
- | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
92
- | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
93
- | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
94
- | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
95
- | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
96
- | `ref` | `any` | No | `-` | - |
97
- | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
98
- | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
99
- | `style` | `CSSProperties` | No | `-` | - |
100
- | `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 |
101
- | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
102
- | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
103
- | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
104
- | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
105
- | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
106
- | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
107
- | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
108
- | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
109
- | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
110
-
111
-
112
11
  ## Examples
113
12
 
114
13
  ### Text only
@@ -365,4 +264,104 @@ function Example() {
365
264
  }
366
265
  ```
367
266
 
267
+ ## Props
268
+
269
+ | Prop | Type | Required | Default | Description |
270
+ | --- | --- | --- | --- | --- |
271
+ | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
272
+ | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
273
+ | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
274
+ | `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
275
+ | `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
276
+ | `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 | `-` | - |
277
+ | `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
278
+ | `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
279
+ | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
280
+ | `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 | `-` | - |
281
+ | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
282
+ | `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
283
+ | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
284
+ | `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
285
+ | `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
286
+ | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
287
+ | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
288
+ | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
289
+ | `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
290
+ | `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
291
+ | `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
292
+ | `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
293
+ | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
294
+ | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
295
+ | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
296
+ | `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 | `-` | - |
297
+ | `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
298
+ | `dangerouslySetBackground` | `string` | No | `-` | - |
299
+ | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
300
+ | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
301
+ | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
302
+ | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
303
+ | `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
304
+ | `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
305
+ | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
306
+ | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
307
+ | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
308
+ | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
309
+ | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
310
+ | `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
311
+ | `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
312
+ | `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
313
+ | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
314
+ | `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
315
+ | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
316
+ | `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
317
+ | `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
318
+ | `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
319
+ | `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
320
+ | `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
321
+ | `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
322
+ | `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
323
+ | `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
324
+ | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
325
+ | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
326
+ | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
327
+ | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
328
+ | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
329
+ | `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
330
+ | `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
331
+ | `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
332
+ | `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
333
+ | `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
334
+ | `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
335
+ | `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
336
+ | `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
337
+ | `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
338
+ | `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
339
+ | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
340
+ | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
341
+ | `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
342
+ | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
343
+ | `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
344
+ | `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
345
+ | `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
346
+ | `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
347
+ | `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
348
+ | `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
349
+ | `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
350
+ | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
351
+ | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
352
+ | `ref` | `any` | No | `-` | - |
353
+ | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
354
+ | `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
355
+ | `style` | `CSSProperties` | No | `-` | - |
356
+ | `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 |
357
+ | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
358
+ | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
359
+ | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
360
+ | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
361
+ | `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
362
+ | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
363
+ | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
364
+ | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
365
+ | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
366
+
368
367
 
@@ -4,10 +4,32 @@ A main content area component for ContentCard.
4
4
 
5
5
  ## Import
6
6
 
7
- ```jsx
7
+ ```tsx
8
8
  import { ContentCardBody } from '@coinbase/cds-web/cards/ContentCard'
9
9
  ```
10
10
 
11
+ ## Examples
12
+
13
+ ### Basic Example
14
+
15
+ ```jsx live
16
+ <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
17
+ <ContentCardBody
18
+ body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
19
+ label={
20
+ <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
21
+ <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
22
+ BTC
23
+ </TextLabel2>
24
+ <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
25
+ ↗ 5.12%
26
+ </TextLabel2>
27
+ </HStack>
28
+ }
29
+ />
30
+ </VStack>
31
+ ```
32
+
11
33
  ## Props
12
34
 
13
35
  | Prop | Type | Required | Default | Description |
@@ -113,26 +135,3 @@ import { ContentCardBody } from '@coinbase/cds-web/cards/ContentCard'
113
135
  | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
114
136
 
115
137
 
116
- ## Examples
117
-
118
- ### Basic Example
119
-
120
- ```jsx live
121
- <VStack bordered borderRadius="400" maxWidth={375} padding={2}>
122
- <ContentCardBody
123
- body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
124
- label={
125
- <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
126
- <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
127
- BTC
128
- </TextLabel2>
129
- <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
130
- ↗ 5.12%
131
- </TextLabel2>
132
- </HStack>
133
- }
134
- />
135
- </VStack>
136
- ```
137
-
138
-